Some core blocks are positioned incorrectly in some core bundled themes

[talldanwp]

Originally reported on the Gutenberg github repo (​https://github.com/WordPress/gutenberg/issues/27599) by @burnuser.

I've tentatively milestoned for 5.6.1, but it needs a patch, so possibly more realistic in a later release.

---

Tested with WP 5,6 and latest Update of Themes:

[Repair of List block](​https://github.com/WordPress/gutenberg/issues/24780) with latest Theme Update works, but there are some other blocks like (sometimes) Quote and (in many cases) Code, Preformatted and Verse with the same problem of breaking the Layout in Gutenberg Editor on the left side. (Resulting webpage is always OK.)
The problems with Quote-block (in Twenty Sixteen and Twenty Twenty) seems based on WP 5.6 (OK with WP 5.5.3)

Twenty Fourteen:
[TwentyFourteen - Layout Problems](​https://user-images.githubusercontent.com/32030147/101607992-7eb57200-3a05-11eb-9bc9-cbac7d3da7a8.jpg)

Twenty Fifteen:
[TwentyFifteen - Layout Problems](​https://user-images.githubusercontent.com/32030147/101608776-701b8a80-3a06-11eb-8e0f-1cee4372115d.jpg)

Twenty Sixteen:
[TwentySixteen - Layout Problems](​https://user-images.githubusercontent.com/32030147/101608814-7c074c80-3a06-11eb-8497-e8aa8d972549.jpg)

Twenty Seventeen:
[TwentySeventeen - Layout Problems](​https://user-images.githubusercontent.com/32030147/101608847-87f30e80-3a06-11eb-83cc-8dc03157672e.jpg)

Twenty Twenty:
[TwentyTwenty - Layout Problems](​https://user-images.githubusercontent.com/32030147/101608887-96412a80-3a06-11eb-9f79-e97ec4dd5edd.jpg)

To reproduce
Steps to reproduce the behavior:

1. Make a testpage with different standardblocks
2. change Theme
3. check layout in Gutenberg
4. See the problem

Expected behavior
All WP Sandardblocks in WP Standardthemes should work with Gutenberg Block editor without breaking the visible layout in the editor!

Screenshots
If applicable, add screenshots to help explain your problem. => see above

Editor version (please complete the following information):

• WordPress version: 5.6 + 5.5.3
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? without Gutenberg

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox + Chrome
• Version: latest

[cristinasoponar]

Fixes the issue with the misalignment in Gutenberg editor for different block types in all themes

[poena]

Hi @cristinasoponar and thank you for the patch.

For testing, I have used this sample block content:
​https://gist.github.com/carolinan/492a820db258f3df2dd3a4269b597c21

I will start with the first theme and then continue testing the others.

Twenty Eleven

-Nice catch. The padding added to the quote block in the editor solves the problem with the positioning.

Since we are already making changes to the theme, can we also solve the following?
It is a question about how much effort we want to put into changing one of the oldest themes.

Quote and pullqote blocks: The font weight and font family in the editor does not match the front.
The text in the pullquote block is italic on the front, but not in the editor.

These two styles no longer target the correct elements:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyeleven/editor-blocks.css?rev=49803#L270
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyeleven/editor-blocks.css?rev=49803#L342
But for backwards compatibility, I believe that we need to keep these and add a second selector with
.editor-styles-wrapper.
I mean as in:

.edit-post-visual-editor .editor-block-list__block .wp-block-pullquote p,
.editor-styles-wrapper .wp-block-pullquote p {

The quote block citation also has a different style in the editor and front.
If we look at
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyeleven/editor-blocks.css?rev=49803#L280
the style is only applied if the classic editor is used (tested with the plugin, confirmed).
We only need to target the citation by adding a new selector: .wp-block-quote .wp-block-quote__citation.

The code block has a background color and padding in the editor, but not on the front.
The editor style for this is not being applied because the specificity is too low, it is being overwritten by the .editor-styles-wrapper pre style.
See https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyeleven/editor-blocks.css?rev=49803#L332
Adding a new selector with .editor-styles-wrapper before .wp-block-code would solve this.

[poena]

Twenty Thirteen

Unsurprisingly this theme has similar issues as Twenty Eleven.
-The change to the padding works well and the editor and front matches better.

The editor styles for the quote citations only targets the classic editor and would need a small update:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentythirteen/css/editor-blocks.css#L227

The pullquote blocks text size is inconsistent between the editor and front.
The theme does not add a font size and relies on the sizes provided by core, so I think we can leave this as is, I am not sure what the correct font size would be if we wanted to update this.

The code block has a background color and padding in the editor, but not on the front.
The editor style for this is inconsistent because one of the styles only target the classic editor:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentythirteen/css/editor-blocks.css#L167
and the other has too low specificity:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentythirteen/css/editor-blocks.css#L278

[poena]

Twenty Eleven quote block position, editor view.

[poena]

Twenty Thirteen quote block position, editor view. Left: Before. Right: After.

[poena]

The adjusted margin moves to the quote to the left of the rest of the content (front view)

[poena]

Twenty Fourteen

The patch works well.

As with the other themes (sorry, this is becoming repetitive),
the code block has a background color and padding in the editor, but not on the front.
The editor style for this is not being applied because the specificity is too low, it is being overwritten by the .editor-styles-wrapper pre style.
Adding a new selector with .editor-styles-wrapper before .wp-block-code would solve this.
See these lines:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyfourteen/css/editor-blocks.css#L151
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyfourteen/css/editor-blocks.css#L355

Twenty Fifteen

The removal of the max width for the pre tag works well.

I did not understand the purpose of the margin change in twentyfifteen/css/blocks.css.
With the style change applied, the qoute block is moved to the left, outside the rest of the content,
and only if the block is aligned to the left (the default).

I made a typo for the image description :) :
The adjusted margin moves the quote to the left of the rest of the content (front view)

I don't think the margin for the .rtl blockquote should be removed,
because it wont match the ltr blockquote from line https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyfifteen/css/editor-style.css#L111

Styles for the blockquote element are kept for backwards compatibility
for posts created before the block editor, but also for quotes in for example the HTML block.

The code block has a background color and padding in the editor, but not on the front.
The editor style for this is not being applied because the specificity is too low, it is being overwritten by the .editor-styles-wrapper pre style.
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyfifteen/css/editor-blocks.css#L638
Adding a new selector with .editor-styles-wrapper before .wp-block-code would solve this.

[poena]

Punting to 5.7, but not out of sight.

I want to see if there any plans for changing the padding and color settings for the code block, before we spend time on the suggested changes.

[poena]

Related: Code block font size option #52431

[kjellr]

I gave this a brief test today, and my general impression is that this is a definite improvement over what's existing. Thank you for the patch, and thanks for the thorough testing, @poena!

I want to see if there any plans for changing the padding and color settings for the code block, before we spend time on the suggested changes.

Which suggested changes are you referring to there? I also see a bunch of related font size/style issues with many of these blocks, but I think it makes sense to tackle those issues separately. The misalignment issue is really glaring in some of these cases, so it would be great to get that sorted out sooner rather than later.

Either way, I should be able to spend a little time tidying up this patch next week. 👍

[poena]

Which suggested changes are you referring to there? Besides the font sizes, there were none, -nothing that is being worked on.

Trac ticket: https://core.trac.wordpress.org/ticket/52009

Fixes alignment and style issues for the Quote, Verse, and Code blocks in Twenty Eleven, Twenty Thirteen, Twenty Fourteen, Twenty Sixteen, Twenty Seventeen, and Twenty Twenty.

Full changes are listed below.

---

## Twenty Eleven

Fixes block quote block layout problems in the editor by adding the 3em of left/right margin that is present in the front-end. Also fixes font styles for the quote and citations. Finally, properly styles the code block to match the front end.

Before:

After:

---

## Twenty Thirteen

Fixes block quote block layout problems in the editor by adding the 40px of left/right margin that is present in the front-end. Adds a less specific font style rule for block quote citations so that they're picked up in the editor. Matches the font-weight for these citations to the front end.

Before:

After:

---

## Twenty Fourteen

Fixes preformatted, verse, and code block layout problems in the editor by removing the max-width from the pre element. Adds some specificity to the wp-block-code styles to clear out the margin/padding, so that it matches the front end.

Before:

After:

---

## Twenty Fifteen

Fixes the alignment of code blocks by removing the max-width from the pre element. Changes the font for the Verse block to match the front end. Removes the padding, background, and border for code blocks in the editor so they match the front-end too.

Before:

After:

---

## Twenty Sixteen

Fixes the alignment of code blocks by removing the max-width from the pre element.

Fixes the alignment of blockquote blocks by removing the negative margins. Note that this indents the quotes a little bit which doesn’t _exactly_ match the front end. But it’s better than it was. I don’t think we can actually match the front end it without using relative positioning hacks, which I think we should avoid for now.

Removes the padding and border for code blocks in the editor so they match the front-end. Changes the font for the Verse block to match the front end.

Before:

After:

---

## Twenty Seventeen

Fixes the alignment of code blocks by removing the max-width from the pre element.

Removes the padding and border for code blocks in the editor so they match the front-end. Changes the font for the Verse block to match the front end.

Removed outdated (and unnecessary) editor-block-list__block selector from the blockquote rules to get them working again.

Before:

After:

---

## Twenty Twenty

Fixes the alignment of quote blocks by removing the 0 left and right margin. Corrects the font family and size used in Verse blocks to match the front end.

Before:

After:

[kjellr]

The PR above is a tidied up version of the original patch, including the feedback points above. This could use a review when someone has a moment!

[poena]

The PR looks good to me.

There is some awkwardness left if we want to continue:
In Twenty Fifteen, the pull quote has a left border in the editor but not the front.

In Twenty Sixteen the pull quote has a left border both in the editor and front.
I don't know if it is intended to have 3 borders including top and bottom?

In Twenty Twenty, right aligned quote blocks has a border on the left, and there is a big gap between the text and the border.

[kjellr]

Thanks! This patch is already pretty big, so I suggest we get these changes in and follow up with those separately. 😅

[ryelle]

In 50358:

Bundled Themes: Fix alignment and styles for quote, verse, and code blocks.

Updates older themes to fix alignment, spacing, and font issues to better match the frontend display. Applies to themes: Twenty Eleven, Twenty Thirteen, Twenty Fourteen, Twenty Sixteen, Twenty Seventeen, and Twenty Twenty.

Props burnuser, talldanwp, cristinasoponar, poena, kjellr
Fixes #52009.