Skip to content

Blocks: Differences between editor and frontend #29976

@scruffian

Description

@scruffian

Latest Comments:

Editor Frontend
Screenshot 2021-03-18 at 11 45 49 Screenshot 2021-03-18 at 11 45 44
The comment text is smaller in the editor than in the frontend

Archives:

Editor Frontend
Screenshot 2021-03-18 at 11 50 37 Screenshot 2021-03-18 at 11 50 41
The dropdown appearance is different and has a label

File block:

Editor Frontend
Screenshot 2021-03-18 at 11 35 25 Screenshot 2021-03-18 at 11 35 44
The file name appears like a link in the frontend but not in the editor

Search block:

Editor Frontend
Screenshot 2021-03-18 at 11 54 44 Screenshot 2021-03-18 at 11 54 49
The placeholder and label font is a different font family and color.

Cover block:

Editor Frontend
Screenshot 2021-03-18 at 12 10 32 Screenshot 2021-03-18 at 12 10 38
The cover block has a bckground color in the editor but not the frontend

Quotation:

Editor Frontend
Screenshot 2021-03-18 at 12 13 53 Screenshot 2021-03-18 at 12 13 47
The "This citation is bold" is a different font size

When the block styles are disabled:

Editor Frontend
Screenshot 2021-03-19 at 14 44 43 Screenshot 2021-03-19 at 14 44 49
In the frontend the citation text is italic, in the editor its smaller

Paragraph:

Editor Frontend
Screenshot 2021-03-18 at 12 16 23 Screenshot 2021-03-18 at 12 16 30
Screenshot 2021-03-19 at 13 00 45 Screenshot 2021-03-19 at 13 00 51
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
Screenshot 2021-03-18 at 13 36 40 Screenshot 2021-03-18 at 13 36 48
There is a bigger margin at the top of the columns block in the editor.

Post Title:

Editor Frontend
Screenshot 2021-03-19 at 13 05 09 Screenshot 2021-03-19 at 13 05 20
The font size is bigger in the editor

Opting out of block styles:

Table:

Editor Frontend
Screenshot 2021-03-19 at 14 11 47 Screenshot 2021-03-19 at 14 11 38
Tables in the frontend don't have a border

Buttons:

Editor Frontend
Screenshot 2021-03-19 at 14 31 29 Screenshot 2021-03-19 at 14 31 22
Screenshot 2021-03-19 at 14 31 44 Screenshot 2021-03-19 at 14 31 51
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
Screenshot 2021-03-19 at 14 37 58 Screenshot 2021-03-19 at 14 37 42
The group block extends to the edge of the screen in the editor but not in the frontend

Embed:

Editor Frontend
Screenshot 2021-03-19 at 14 53 49 Screenshot 2021-03-19 at 14 53 56
Screenshot 2021-03-19 at 14 53 20 Screenshot 2021-03-19 at 14 53 26
Screenshot 2021-03-19 at 14 53 05 Screenshot 2021-03-19 at 14 53 10
Screenshot 2021-03-19 at 14 52 48 Screenshot 2021-03-19 at 14 52 54
Screenshot 2021-03-19 at 14 52 28 Screenshot 2021-03-19 at 14 52 33
Screenshot 2021-03-19 at 14 52 05 Screenshot 2021-03-19 at 14 52 09
Screenshot 2021-03-19 at 14 51 35 Screenshot 2021-03-19 at 14 51 46
The embed blocks are a different size on the frontend and the editor

Separator:

Editor Frontend
With block styles:
Screenshot 2021-03-23 at 16 54 05 Screenshot 2021-03-23 at 16 54 11
Without block styles
Screenshot 2021-03-23 at 16 55 22 Screenshot 2021-03-23 at 16 55 33
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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] BlocksOverall functionality of blocks[Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions