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?