[wp-trac] [WordPress Trac] #52009: Some core blocks are positioned incorrectly in some core bundled themes

[WordPress Trac]

#52009: Some core blocks are positioned incorrectly in some core bundled themes
-----------------------------------------+---------------------
 Reporter:  talldanwp                    |       Owner:  (none)
     Type:  defect (bug)                 |      Status:  new
 Priority:  normal                       |   Milestone:  5.6.1
Component:  Bundled Theme                |     Version:  5.5.3
 Severity:  normal                       |  Resolution:
 Keywords:  has-patch needs-screenshots  |     Focuses:
-----------------------------------------+---------------------

Comment (by 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52009#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform