[wp-trac] [WordPress Trac] #53158: Twenty Twenty: Pullquote block editor styling does not match front

[WordPress Trac]

#53158: Twenty Twenty: Pullquote block editor styling does not match front
-------------------------------------+--------------------------
 Reporter:  sabernhardt              |       Owner:  sabernhardt
     Type:  defect (bug)             |      Status:  accepted
 Priority:  normal                   |   Milestone:  5.8
Component:  Bundled Theme            |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-refresh  |     Focuses:  css
-------------------------------------+--------------------------
Changes (by sabernhardt):

 * keywords:  has-patch => has-patch needs-refresh


Comment:

 @tomjdevisser Thanks for the patches! Sorry about my delay in
 reviewing...and because I did not realize earlier that this is quite
 complicated for your first bug. The 5.8 deadline is next Tuesday for
 review and commit, so I can make the next patch today (or tomorrow).

 53158-3.patch still has some extra spaces after commas and before an
 opening curly bracket, and the RTL changes do not match the LTR version.
 Plus, the wide and full quote blocks do not need the larger font size
 outside the media queries (even though I think this discrepancy helps
 indicate that the text can be bigger, the front end has the same font size
 for all pullquote alignments on screens narrower than 700px).

 I also just noticed that the left and right pullquotes are still centered
 in the editor. (My tests above only have one word per quote, so it's not
 obvious there.) When the font size increases to 32px, adding `.editor-
 styles-wrapper .wp-block-pullquote p` in the latest patch correctly
 applies that style. However, several other styles use the outdated `.wp-
 block[data-type="core/pullquote"][data-align="left"]` syntax. The next
 patch probably needs adjustments to at least these (which includes
 correcting the float direction with /*rtl:ignore*/):
 {{{
 .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-
 align="left"] .wp-block-pullquote,
 .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-
 align="left"] .wp-block-pullquote.is-style-solid-color blockquote {
         text-align: left;
 }

         .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-
 align="left"] .block-editor-block-list__block-edit,
         .editor-styles-wrapper .wp-block[data-align="left"] .wp-block-
 pullquote {
                 float: left;
                 margin-left: 20px;
                 max-width: 260px;
         }
 }}}

 I'll start by taking the additional selectors from the RTL stylesheet part
 of the previous patch [attachment:"53158-2.patch"], making the following
 edits:

 1. Adding `blockquote` to the wide selector (line 1334) where the font
 size increases to 48px;
   {{{
         .editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-
 pullquote blockquote p,
   }}}
 2. Making any necessary changes for the text alignment, max-width and
 float direction of left- and right-aligned pullquotes;
 3. Ensuring all the selector additions from the RTL stylesheet match the
 main (LTR) version.

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