Radio buttons broken layout within the meta boxes area

[afercia]

Describe the bug
Also reported on Trac as it affects WordPress 5.3 RC 3, see https://core.trac.wordpress.org/ticket/48466

A very recent CSS change in Gutenberg that was merged yesterday in core breaks the radio buttons used by plugins within the editor meta boxes area. Specifically the newly added margin: -3px -4px; makes the radio buttons "blue dot" completely misplaced:

See https://github.com/WordPress/gutenberg/pull/18108/files#diff-0ad88efa3865f313f57c422957d02b2fR99-R101

Removing these negative margins fixes the issue. I'm not sure they are really necessary, as removing them doesn't seem to change anything else. Also, to my understanding #18108 was meant to fix issues within the sidebar, so I'm not sure why it's targeting the meta boxes area.

To reproduce, use Advanced Custom Fields and add a group with a radio button and a checkbox. Or directly edit the HTML in your browser dev tools and add a radio button and a checkbox somewhere within the meta boxes area .postbox.

[afercia]

@youknowriad reminded me plugins and themes can add meta boxes into the default sidebar. See for example the "Astra" theme mentioned in the related issue #18053. Screenshot:

However, the new CSS should not target the meta boxes area below the post.

[jasmussen]

Changed the CSS to not target the meta boxes area below the post.

I noticed that radio buttons have regressed:

I have not slipstreamed a fix in this one as it's an unrelated issue. But the issue is that the radios used to be sized in pixels, now they're sized in rems. In pixels they were 16x16, which made the math to position the dot correct. Now they compute to 15x15px, smaller hit area and obviously non-centered dot.

Is this tracked or is someone working on this?

[afercia]

I'm not seeing changes to the the visibility radio buttons. Any special way to reproduce that? Browser?

In pixels they were 16x16 ... Now they compute to 15x15px,

1 rem still computes to 16 pixels. Are you sure the misalignment is not because of some other reasons e.g. a plugin that alters the CSS?

[jasmussen]

Excellent instinct. It's caused by Astra theme, it seems.

[afercia]

Oh well.. looks like Astra alters the html base font size... 😬

html {
    font-size: 93.75%;
}

which computes to 15 pixels...

I'd tend to think this deserves a broader discussion. Probably WordPress shouldn't allow themes or plugins to alter the base font size as that would alter any value set in rem by WordPress itself or other plugins and themes.

Per aspera ad Astra.

[jasmussen]

I do agree it is unfortunate that themes can affect the UI as such. The lack of an iframe is causing this. Shadow DOM is an option, rewriting such rules using the built in editor style rewriter is another, but even then themes can enqueue styles globally so we can't fully prevent it.

There is some discussion in #10178 (comment) on how to proceed to protect UI from editor styles.