Blocks: Differences between editor and frontend

[scruffian]

Latest Comments:

Editor	Frontend
The comment text is smaller in the editor than in the frontend

Archives:

Editor	Frontend
The dropdown appearance is different and has a label

File block:

Editor	Frontend
The file name appears like a link in the frontend but not in the editor

Search block:

Editor	Frontend
The placeholder and label font is a different font family and color.

Cover block:

Editor	Frontend
The cover block has a bckground color in the editor but not the frontend

Quotation:

Editor	Frontend
The "This citation is bold" is a different font size

When the block styles are disabled:

Editor	Frontend
In the frontend the citation text is italic, in the editor its smaller

Paragraph:

Editor	Frontend
There is additional space in the text around the drop cap. Also when paragraphs have a background color the edge of the block aligns with the text in the editor, but the text aligns with other text blocks in the frontend.

Columns:

Editor	Frontend
There is a bigger margin at the top of the columns block in the editor.

Post Title:

Editor	Frontend
The font size is bigger in the editor

Opting out of block styles:

Table:

Editor	Frontend
Tables in the frontend don't have a border

Buttons:

Editor	Frontend
In the frontend buttons overlap each other horizontally. The large button at the bottom is aligned left in the editor but centered in the editor.

Group:

Editor	Frontend
The group block extends to the edge of the screen in the editor but not in the frontend

Embed:

Editor	Frontend
The embed blocks are a different size on the frontend and the editor

Separator:

Editor	Frontend
With block styles:
Without block styles
The 100px max with is really problematic. Also not sure why the color gets lost

There is also a difference in margins for all blocks

TODO:

• Latest Comments Remove latest comments editor styles #30134
• Archives Themes: Fix the archives block frontend/editor parity #30141
• File block File block: Make the editor markup match the frontend #30148
• Search block Make the search block editor match the frontend #30176
• Cover block
• Quote Block Library - Quote: Fix the editor/frontend style parity. #30190
• Paragraph
• Columns Prevent the columns block from having a width > 100% #30229
• Post Title
• Table
• Buttons Prevent overlapping button blocks in the frontend #30253
• Group
• Embed Fix non responsive embed iframes styles #30254
• Separator Fix separator styles #30255

[youknowriad]

What's the problem for the buttons block (aside the margins between the blocks which are a separate thing cross blocks)

[scruffian]

What's the problem for the buttons block (aside the margins between the blocks which are a separate thing cross blocks)

That's all :)

[youknowriad]

@scruffian Do you think we can add a TODO list to the issue description to help clarify what's done, what's remaining...

[scruffian]

@scruffian Do you think we can add a TODO list to the issue description to help clarify what's done, what's remaining...

Done! I added another one I found for background colors...

[youknowriad]

@scruffian do you know we can clarify what is different for each block like:

• Buttons: margin
• Block: color for links, background ...

Sorry if I'm asking too much 😬 It's something you know right away cause you did the screenshot but it might not be obvious by just looking at the screenshots.

[MaggieCabrera]

I suppose you did these with Empty theme, right? I just wanted to point out that even though empty theme doesn't add css, it does include some custom supports and as we've found, removing things like add_theme_support( 'editor-styles' ); causes differences between the frontend and the editor.

[scruffian]

I added some details about the differences between the blocks under each screenshot.

[scruffian]

I suppose you did these with Empty theme, right? I just wanted to point out that even though empty theme doesn't add css, it does include some custom supports and as we've found, removing things like add_theme_support( 'editor-styles' ); causes differences between the frontend and the editor.

Yes, I did these tests with block styles enabled (add_theme_support( 'wp-block-styles' )). We should also do the same tests without this enabled.

These styles should not be loading in the editor unless the theme opts in since #29252 merged.

[scruffian]

I added some more differences which I found when they block styles are disabled.

[youknowriad]

@scruffian I haven't been able to reproduce the "Cover" block issue above, any example markup?

[MaggieCabrera]

@scruffian I haven't been able to reproduce the "Cover" block issue above, any example markup?

I couldn't reproduce myself, and I think he was using the content from https://theamdemo.wordpress.com/2019/06/24/gutenberg-cover/ I can give you access to it

[scruffian]

This seems to happen when using a background color that isn't defined, e.g.

<!-- wp:cover {"url":"https://theamdemo.files.wordpress.com/2020/10/qi-bin-w4hbafegiac-unsplash.jpg","id":28,"overlayColor":"red","minHeight":100,"minHeightUnit":"vh"} -->
<div class="wp-block-cover has-red-background-color has-background-dim" style="min-height:100vh"><img class="wp-block-cover__image-background wp-image-28" alt="" src="https://theamdemo.files.wordpress.com/2020/10/qi-bin-w4hbafegiac-unsplash.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Full height Cover</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

[youknowriad]

For the drop cap, for me, it's the same between frontend and backend, you can compare properly by having a long text in the paragraph to wrap the drop cap cause otherwise the difference you'll have is related to the margins (which is a cross block issue I'm leaving for its own issue as it's kind of big)

[youknowriad]

The Post Title block seems to be in the same size for me (default heading sizes)

[youknowriad]

Tables also look the same for me, I do see borders on the frontend.

[youknowriad]

I have a PR for the buttons block but I wasn't able to reproduce the center aligned one.

[youknowriad]

I guess the group block difference above is about the "padding" in the site editor right? If that's the case, I'll leave that separate because this padding has some wider implications

[paaljoachim]

Checking in.
What is the status of this issue?

[scruffian]

All of these issues were fixed I think we can close this.

[scott8035]

Was there a common theme among the fixes to all these issues? I'm having the same problem with a custom block created with ACF Pro, and I've no idea where to start looking.

[scruffian]

@scott8035, it will really depend on the block. Ideally you want the markup to be the same in the editor and on the frontend, and then also to use the same CSS in both places.