Container Style Element Breaks Expected CSS Selectors

[mrwweb]

Description

I've started trying to use theme.json which triggers new layout tools for Group blocks. Among these are an inlined style element immediately following the Group block:

<div class="wp-container-617ac576851fb wp-block-group">...</div>
<style>.wp-container-617ac576851fb {} ...</style>

This breaks what has become a really helpful theming technique for CSS Selectors:

/* global vertical spacing */
.entry-content > * + * {
    margin-top: 1.5em;
}
.alignfull + alignfull {
    margin-top: 0;
}

This worked with the old markup that would be this:

<div class="wp-block-group alignfull"></div>
<div class="wp-block-group alignfull"></div>

It no longer works because the markup is now:

<div class="wp-block-group alignfull"></div>
<style></style>
<div class="wp-block-group alignfull"></div>

Step-by-step reproduction instructions

1. Add a style to the site that selects the adjacent sibiling of a group block. e.g. .wp-block-group + * { background: red !important; }
2. Create a page with two Group blocks.
3. The second group block should have a red background.
4. Add theme.json to theme and resave post.
5. The second group block no longer will have a red background.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.8.1, no Gutenberg plugin, traditional theme with theme.json file

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[Humanify-nl]

I have a similar issue with styling the backend (instead of the front end), which demonstrates that Gutenberg has not much respect for + selector styling.

Before continuing about this, let me say with respect for the dev team: we should probably have patience and wait until most of the core features of Gutenberg are finished, so that they can clean the HTML on back and front-end bit more, because I'm sure they know and are working with some temporary solutions.

What I can't wrap my head around is this;

Whenever an align (wide/full) is added to a block, Gutenberg editor wraps a totally new container around the whole block (wp-block[data-align='full'), which destroys most of the styling patterns (which worked beautifully and in sync with front-end). The most annoying is that this container exists in the back-end, but not in the front-end. Uck!

What's wrong with just adding an alignwide/full class to the block itself? Theme builders can at least write proper CSS to handle this (and other custom block style patterns). What is done now makes no sense to me.

What works on the front end should work the same on the backend (in terms of CSS!). Not only for the user, but also for the developers/front-enders.

I've not heard, experienced, or read anywhere that using a CSS + selector to control margins based on block contents (.has-background, is-style-large, alignwide ) is bad practice. What IS bad practice, is making us use specific block class selectors in our CSS (wp-block-group, etc) to style patterns of blocks in relation to other blocks. Because we never know which blocks are implemented. What we do know is if it has background yes or no, and if it is also aligned wide or full, and what color, or what block-style. But this has now become inaccessible.

[chthonic-ds]

@Humanify-nl there's a good discussion at #33142 related to problems the [data-align] wrapper creates.

[mrwweb]

Just ran into this problem again with the :last-child selector. Since the <style> element is the last child element, the Group Block I want to style becomes the 2nd-to-last child. Since there's not a reverse sibling selector or anything similar, it becomes impossible to detect a Group block that is the last-child of the content.

[carolinan]

I believe the expectation is that the global spacing, like the margin in the example, is also be handled by theme.json.

[mrwweb]

For folks running into this, a current workaround for the adjacent alignwide blocks is to do this:

.alignfull + .alignfull,
.alignfull + style + .alignfull {
    margin-top: 0;
}

There is not an equivalent workaround for :last-child that I know of.

---

@carolinan Thanks for your response. It makes me wonder about a lot of assumptions for theme.json and block based themes. If that expectation is right:

• Does that mean that themes using theme.json are effectively required to use global spacing? It kind of feels like it if that's true.
• Does theme.json have a way currently to support contextual spacing rules like :last-child or adjacent .alignwide blocks? If not, this is exactly why it's a bug!

Unless the plan is to eventually make all editor features that can be controlled with theme.json required, it feels like issues like this about markup and CSS selectors will always be important to consider.

And I will also add that this issue and several others (#33374) around assumptions made once theme.json is present are making me reconsider trying to start using it in heavily customized classic themes I build (and will need to continue building for the foreseeable future).

[mrwweb]

This was resolved in WordPress 5.8 +/- .1 and is no longer an issue.

[mrwweb]

It appears that WordPress 6.3 has reintroduced this issue of adding style elements between blocks (only in the editor) which then break adjacent sibling selectors.

The most common use-case (I think) is the .alignfull + .alignfull selector.

---

This block markup:

<!-- wp:group {"align":"full","backgroundColor":"light-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-light-gray-background-color has-background"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Additional Resources</h2>
<!-- /wp:heading -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="wp-block-heading has-medium-font-size">Partner Organizations</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><a href="#">First Organization</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="wp-block-heading has-medium-font-size">Helpful Links</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><a href="#">First Helpful Link</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

…produces this editor html…

<style>.editor-styles-wrapper .wp-container-22.wp-container-22 {
				flex-wrap: nowrap;
			}</style>
<div tabindex="0" class="block-editor-block-list__block wp-block alignfull has-light-gray-background-color has-background has-child-selected wp-block-group block-editor-block-list__layout is-layout-constrained wp-block-group-is-layout-constrained" style="background-color: rgb(234, 234, 242);" id="block-e6bb4b7d-980a-4e57-8a25-17ed94b89c57" role="document" aria-label="Block: Group" data-block="e6bb4b7d-980a-4e57-8a25-17ed94b89c57" data-type="core/group" data-title="Group" data-is-drop-zone="true"><h2 role="document" aria-multiline="true" aria-label="Block: Heading" tabindex="0" class="block-editor-rich-text__editable block-editor-block-list__block wp-block has-text-align-center wp-block-heading rich-text" id="block-f5f0bee5-887e-41d5-b3b2-59ac6c63b46f" data-block="f5f0bee5-887e-41d5-b3b2-59ac6c63b46f" data-type="core/heading" data-title="Heading" contenteditable="true" style="white-space: pre-wrap; min-width: 1px;">Additional Resources</h2><div tabindex="0" class="block-editor-block-list__block wp-block alignwide has-child-selected wp-block-columns block-editor-block-list__layout wp-container-22 is-layout-flex wp-block-columns-is-layout-flex is-nowrap" id="block-714b93ee-d0b2-4029-b7c4-d52bfb05d7bd" role="document" aria-label="Block: Columns" data-block="714b93ee-d0b2-4029-b7c4-d52bfb05d7bd" data-type="core/columns" data-title="Columns" data-is-drop-zone="true"><div tabindex="0" style="flex-basis: 50%;" class="block-editor-block-list__block wp-block block-core-columns wp-block-column block-editor-block-list__layout is-layout-flow wp-block-column-is-layout-flow" id="block-ac7e6a4d-94ce-4a93-98d3-33bbee3cfad2" role="document" aria-label="Block: Column (1 of 2)" data-block="ac7e6a4d-94ce-4a93-98d3-33bbee3cfad2" data-type="core/column" data-title="Column" data-is-drop-zone="true"><h3 role="document" aria-multiline="true" aria-label="Block: Heading" tabindex="0" style="font-size: 1.5rem; white-space: pre-wrap; min-width: 1px;" class="block-editor-rich-text__editable block-editor-block-list__block wp-block has-medium-font-size wp-block-heading rich-text" id="block-3fe3849c-6944-45af-b494-8fba7a3e3963" data-block="3fe3849c-6944-45af-b494-8fba7a3e3963" data-type="core/heading" data-title="Heading" contenteditable="true">Partner Organizations</h3><ul tabindex="0" class="block-editor-block-list__block wp-block wp-block-list block-editor-block-list__layout" id="block-d99888f9-caf0-4125-b85c-928df95f3576" role="document" aria-label="Block: List" data-block="d99888f9-caf0-4125-b85c-928df95f3576" data-type="core/list" data-title="List" data-is-drop-zone="true"><li tabindex="0" class="block-editor-block-list__block wp-block wp-block-list-item block-editor-block-list__layout" id="block-878d8fc7-5fd0-4c73-b613-e06c949c76c0" role="document" aria-label="Block: List item" data-block="878d8fc7-5fd0-4c73-b613-e06c949c76c0" data-type="core/list-item" data-title="List item"><div role="textbox" aria-multiline="true" aria-label="List text" contenteditable="true" class="block-editor-rich-text__editable rich-text" style="white-space: pre-wrap; min-width: 1px;"><a href="#">First Organization</a></div></li></ul></div><div tabindex="0" style="flex-basis: 50%;" class="block-editor-block-list__block wp-block block-core-columns has-child-selected wp-block-column block-editor-block-list__layout is-layout-flow wp-block-column-is-layout-flow" id="block-c5713dc7-c388-43f4-9950-fc1dbbb40ffe" role="document" aria-label="Block: Column (2 of 2)" data-block="c5713dc7-c388-43f4-9950-fc1dbbb40ffe" data-type="core/column" data-title="Column" data-is-drop-zone="true"><h3 role="document" aria-multiline="true" aria-label="Block: Heading" tabindex="0" style="font-size: 1.5rem; white-space: pre-wrap; min-width: 1px;" class="block-editor-rich-text__editable block-editor-block-list__block wp-block has-medium-font-size wp-block-heading rich-text" id="block-6a043749-d3ca-4bb5-acb9-452e5451fae1" data-block="6a043749-d3ca-4bb5-acb9-452e5451fae1" data-type="core/heading" data-title="Heading" contenteditable="true">Helpful Links</h3><ul tabindex="0" class="block-editor-block-list__block wp-block is-selected wp-block-list block-editor-block-list__layout" id="block-0d127aff-e7a2-418c-a119-5672af9d673f" role="document" aria-label="Block: List" data-block="0d127aff-e7a2-418c-a119-5672af9d673f" data-type="core/list" data-title="List" data-is-drop-zone="true"><li tabindex="0" class="block-editor-block-list__block wp-block wp-block-list-item block-editor-block-list__layout" id="block-2b4f6579-bfde-486c-8cc2-478860a642f9" role="document" aria-label="Block: List item" data-block="2b4f6579-bfde-486c-8cc2-478860a642f9" data-type="core/list-item" data-title="List item"><div role="textbox" aria-multiline="true" aria-label="List text" contenteditable="true" class="block-editor-rich-text__editable rich-text" style="white-space: pre-wrap; min-width: 1px;"><a href="#">First Helpful Link</a></div></li><div tabindex="-1" class="block-list-appender wp-block" contenteditable="false" data-block="true"><button type="button" class="components-button block-list-appender__toggle block-editor-button-block-appender" aria-label="Add List item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"></path></svg></button></div></ul></div></div></div>

[spencerfinnell]

This also appears to be affecting the removal of block gap margin on the first block. Relevant changes: 9c5ce7e

Those styles do not apply because there are <style> elements first:

[mrwweb]

Adding an observation I don't understand. In a fairly complex Pattern I have, I'm seeing seven style elements between various blocks when inserting the pattern into the page. However, upon saving and reloading the page, those style elements all seem to move to become the last children of is-root-container in the editor resolving the visual problem. I have no idea why that's happening, but it seems like it might be useful information.

[andrewserong]

Thanks for reopening this issue @mrwweb! I'm not too sure of the cause, but one thing I noticed that seems to be consistent with what you observed about inserting a pattern is that if I have an existing post with a bunch of Group blocks and then go to make changes to their layouts, then the style tags all appear at the end of the document as expected. However, if I go to insert a block using the appender button at the end of the document (which is currently after the style tags in the DOM), then the newly added block appears to be added after the style tags, too. Here's a screengrab:

2023-08-21.15.55.49.mp4

The style tags used by layout, position, and element block supports within the editor use a portal so that the tags should be inserted to the bottom of the document, but it seems that somewhere along the way something has affected the ordering once additional blocks get inserted. I imagine the expected behaviour is that the portal for outputting style tags should always be at the very end of the document.

[andrewserong]

I have a potential fix ready for review over in #53859