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

Created on 2 Jun 2020 · 6Comments · Source: WordPress/gutenberg

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.

my_styles_on_front

But in the editor it looks like this image:

my_styles_on_editor

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

CSS Styling [Feature] Blocks [Type] Bug

Source

ddryo

🎉2 👍1

Most helpful comment

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.

miminari on 3 Jun 2020

👍2

All 6 comments

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 on 2 Jun 2020

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.

block_style_01_on_editor

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

block_style_01_on_front

This is correct.

ddryo on 2 Jun 2020

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.

miminari on 3 Jun 2020

👍2

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

oxyc on 19 Jun 2020

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