search

WordPress / wordpress-playground

Run WordPress in the browser via WebAssembly PHP
https://w.org/playground/
GNU General Public License v2.0
1.65k stars 263 forks source link

Restore basic element styles for modal dialog content #2021

Closed brandonpayton closed 3 days ago

brandonpayton commented 3 days ago

Motivation for the change, related issues

We added a general CSS reset to the web app styles in https://github.com/WordPress/wordpress-playground/pull/1759, and some modal dialog content depended on user agent styles for rendering properly.

For example, before the CSS reset, the GitHub auth dialog used to be styled like this:

After the reset, its paragraphs lost default vertical margins, and content in a <b> element lost its bold look. After the reset, the dialog looked like this:

Implementation details

The PR attempts to restore the styles assumed by modals before this change.

This PR adds some style rules for modals to restore vertical margins to paragraph elements and boldness to <b> tags. A downside to this approach is that we'll have to manually add CSS rules every time we miss a user agent style that was reset, but an upside to the approach is that we can have consistent, explicit rules for the styles we require.

Testing Instructions (or ideally a Blueprint)

Run npm run dev, open all the different dialogs, and confirm they are styled as expected.

brandonpayton commented 3 days ago

@zaerl Thanks for the quick review!