Checking the editor-blocks.css file found in some themes, I see the following CSS classes added before some of the individual block classes:

.edit-post-visual-editor
.editor-block-list__layout
.editor-block-list__block
.block-library-list

An example:

.editor-block-list__block .wp-block-latest-comments {
    margin-left: 0;
    margin-right: 0;
}

And then others, don't have them:

.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
    font-size: 1.5rem;
    margin: 0 0.8em 0.8em;
    padding: 0;
    border: 0;    
}

What's the use of these CSS classes? Which elements in the block editor do they target? Why do some of the block CSS classes have them added before and why others don't? Are they really necessary? Why some themes have an editor-blocks.css file and a blocks.css file and why others just the blocks.css one?

Thanks in advance

Checking the editor-blocks.css file found in some themes, I see the following CSS classes added before some of the individual block classes:

.edit-post-visual-editor
.editor-block-list__layout
.editor-block-list__block
.block-library-list

An example:

.editor-block-list__block .wp-block-latest-comments {
    margin-left: 0;
    margin-right: 0;
}

And then others, don't have them:

.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
    font-size: 1.5rem;
    margin: 0 0.8em 0.8em;
    padding: 0;
    border: 0;    
}

What's the use of these CSS classes? Which elements in the block editor do they target? Why do some of the block CSS classes have them added before and why others don't? Are they really necessary? Why some themes have an editor-blocks.css file and a blocks.css file and why others just the blocks.css one?

Thanks in advance

• css
• block-editor

• I'd guess so they can have different styles in the editor or in the block selection list than they have on the live site? – Rup Commented Oct 20, 2021 at 15:53

3 Answers 3

Searching the editor source code: https://github.com/WordPress/gutenberg does not show much results. I suggest search the theme source code these classes to see where they are applied. (If you press . while viewing the code on github you will get a VSCode editor)

register_block_type is used to add the block date in WordPress. Typically with these arguments:

 register_block_type( 'custom-plugin/custom-block', array(
        'editor_script' => 'editor-script.js',
        'editor_style'  => 'editor-style.css',
        'style'         => 'frontend.css',
    ) );

editor_script and editor_style add files to editor admin. style is meant to add CSS to frontend.

What documentation does not mention is that style is also loaded in backend. So it is possible those theme are using one file for bother backend and frontend to minimize the code they write.

In case anyone is interested, these are the conclusions I reached after studying the block editor for some time.

Both .editor-block-list__layout and .editor-block-list__block classes are deprecated since WordPress 5.4 and have been renamed to .block-editor-block-list__layout and .block-editor-block-list__block, respectively. The .block-editor-block-list__layout class targets all the blocks found in the post content and .block-editor-block-list__block class targets individual block types in the post content, so the latter is equivalent to using the specific .wp-block-*** classes.

I have not seen the .block-library-list class used anywhere in the block editor, so I assume it makes no sense targeting it.

Finally, the .edit-post-visual-editor class targets the whole block editor.

In summary, in the most recent versions of WordPress (5.4 onwards) it's safe to just use the .wp-block-*** classes to style individual block types in the block editor.

The editor-block-list__block class in only rendered in the Gutenberg editor, while the wp-block-[blockname] class is rendered on both the front end and the editor. So classes prepended with editor-block-list__block are targeting the backend only.