Block styles using "::after" are no longer displayed correctly in the editor.

[ddryo]

Adding block styles from themes and plugins and using the pseudo-element ":: after" in CSS no longer renders correctly.

It's happening with the latest Gutenberg.

This is a very, very serious problem.

For example, suppose you add a block style whose front side display looks like the following image.

But in the editor it looks like this image:

Editor version (please complete the following information):

• WordPress version: 5.4.1
• Gutenberg plugin version : 8.2.1

Desktop:

OS: macOS Catalina
Browser : Chrome, Safari

[ddryo]

The cause is probably because :: after is used in the block.

The DOM structure of the block editor has been simplified to match the display on the front side, so "::after" interfere.

(It's great that the editor DOM is simple.)

[ddryo]

To reproduce this, I created a plugin that adds only one block style using "Pseudo-elements" to a paragraph block.

reproduce_22834.zip

When you install this zip file, you will be able to select a block style named "Style 01" for your paragraph blocks.

If you actually use it, it will look like the following.

However, this is not the intended display.
The front side is as follows.

This is correct.

[miminari]

I agree with this.
I think the DOM structure refreshed is very useful and thank you for the big job.

However, I think it's better to save the pseudo-elements such as ::after for the theme and plugin's style.

[oxyc]

The commit changing this behavior was added here: https://github.com/WordPress/gutenberg/pull/20938/files#diff-ee2ed3adbe2578628039530c717a9a93R209 (#20938) ping @ItsJonQ is there any way around it?

[noisysocks]

Confirmed. .block-editor-block-list__block::after is the same pseudo element as e.g. .wp-block-image::after, so our use of ::after for block outlining here will conflict with theme styling.

Unfortunately it's not an easy fix. Probably we need to implement block outlining using a component that renders in a popover, similar to how the block toolbar now works.

cc. @ItsJonQ @ellatrix

[ItsJonQ]

Probably we need to implement block outlining using a component

I agree. I think that would be a more predictable and stable solution 👍 .

[ellatrix]

Yes, we could do either that, or maybe use a different CSS property like outline?

[ItsJonQ]

Yes, we could do either that, or maybe use a different CSS property like outline?

outline would be simpler. The trade-off is we'd far have less styling control over it.

[ellatrix]

What control do we lose?

[ItsJonQ]

@ellatrix oo! Apologies for late reply.

The main thing is outline is unable to do border-radius.
(I'm also unsure what other styles we may need to add)

Aesthetically, if that's something we're okay with, then I think it may be okay 👍

[ellatrix]

I think reserving :before and :after for themes is more important than being able to set a radius. :) Additionally, the outline seems perfect for what we're wanting to do. Browser already use it as a focus/highlight style.

@jasmussen What do you think?

[jasmussen]

What an excellent conversation!

I think reserving :before and :after for themes is more important than being able to set a radius. :) Additionally, the outline seems perfect for what we're wanting to do. Browser already use it as a focus/highlight style.

I agree and disagree.

I agree that themes should be able to set before/after pseudo properties: if they can do it on the frontend, they should be able to do it in the editor.

However the editor still needs to be able to show "block UI". While that's currently limited to the focus/select styles, aspects of how this behaves are still being explored, notably in the site editor. I imagine multi-user editing will bring new challenges to the borders we show around blocks being edited by this or that person. Specifically the colors we might use there need to account for varying background clors. Chrome solves this problem by showing two colors in their focus style:

We don't have that luxury available to us using only outline, so I see no way around us keeping some way to attach block UI to blocks.

But instead of attaching to before/after, could we output a span in each block, reserved for block UI? Something else?

[ellatrix]

Please, no span! :) I think we should keep the editor DOM pure and the same as the front-end. Practically, it could break first/last child CSS selectors.

The only alternative we have is to use a transparent popover to you can click through...

[jasmussen]

It can be any element 😉

I hear you! But I think we have to be clear-eyed about this and take it one step at a time. I agree with you on the destination, but we have to walk carefully to not compromise the experience on the way. Already now, first/last-child selectors break due to the appender that is output in the markup. Even if we were able to refactor that to be a popover, we still use ResizableBox in numerous places to resize columns or images. I suspect there will always be a need for some extra markup, so we need to be creative in how we think about this.

[ddryo]

Thank you for discussing this issue...!

[ellatrix]

It can be any element 😉

I meant: please not any kind of element ☺️

I agree with you though. We need to decide this on a case by case basis. Ideally, if we were to insert an element, we'd insert it as a shadow element. I'm actually not sure if this would event work, because a shadow element also needs a container?

I've looked at resizers too before... should all be possible to do without inserting extra markup with rightly positioned elements.

[cr0ybot]

There are several instances where a floating (as in absolutely positioned) element is used to indicate interactivity on/between blocks in the editor, such as the block insertion point inserter that appears between blocks. It seems to me that a dynamically inserted, absolutely-positioned component that doesn't clutter the block's DOM or styles would be the most versatile approach, especially considering the plans for real-time collaboration.

The monopolization of the ::after pseudo element by the editor has been a significant pain point for me. It is not always the case that ::before can just be used instead (particularly when both are needed). It is theme developer hostile, and if a floating element is too difficult then the best solution for now would be using outline as it was intended, because the aesthetics of the selection outline are not more important than things appearing broken in the editor.

[ellatrix]

After working a bit with shadow DOM, I think it could be a good solution for this particular problem. The shadow root would be the block element wrapper and a shadow element will be inserted as a child to the block element that is invisible to CSS. Maybe something worth exploring.

[fabiankaegy]

I also wanted to add that this issue keeps coming up on custom client builds because pseudo-elements are commonly used elements. As mentioned above the experience users get when the UI in the editor does not match the representation on the frontend breaks user trust and therefore causes a lot of harm.

I understand that this is not an easy issue to solve and I appreciate the thoroughness of the thinking process in this tread :) The shadow DOM sounds like it might be promising :)

[ellatrix]

I tried the shadow DOM idea and it doesn't seem to work... as soon as you attach a shadow, the rest of the child elements are still in the DOM but they're no longer visible.
And a second problem is that some elements don't support shadow DOM, like <hr>.

[ellatrix]

Sounds like it could be resolved by using outlines soon: #60757 (comment)

[kauaicreative]

I also find that my custom block styles that use :after end up breaking in the editor. If the block editor modifies or replaces the blocks pseudo elements ::before, ::after, or even outline or any other CSS property won't we have the same issues with the editor breaking our custom theme styles. There must be better way, like a dedicated editor element that can be positioned and expanded pragmatically.

[fabiankaegy]

This was fixed with #60757, which will be released in WordPress core as part of WordPress 6.6 🎉

[djcowan]

I am unsure if the DOM issue related to ::after pseudo elements have been fully resolved.

Adding an inline/inline-block pseudo ::after to a list-item renders incorrectly due to the inclusion of the "list text" div within the 'RichText' element.within the Editor.

As possible workarounds exist, (i.e. seperate css can be loaded into the editor ) please advise If a new issue should be created.
@fabiankaegy - apologies for tagging you back into a closed issue; do you have a preference for a new issue or should this issue be reopened. I am unfamiliar with the correct or preferred workflow proceedure.
Current Wordpress Version 6.7.1

---

To recreate the issue;

1. add an inline pseudo ::after element via css to a core/list-item.
2. note the element appears on the same line as the list-item text on the public front end
3. note the element appears on the following line within the editor due to the inclusion of the 'list text' div

public:

page editor

editor insector code

[fabiankaegy]

@djcowan I think we should create a new issue for this. The original issue was about Gutenberg using the ::after pseudo element for it's general UI on all blocks.

This here seems to be an isolated issue of the list block if I understand you correctly :)

[djcowan]

Will do. You understand the issue perfectly. :)