[wp-trac] [WordPress Trac] #57854: Pull Quote block font-size issue in Twenty Twenty One theme

[WordPress Trac]

#57854: Pull Quote block font-size issue in Twenty Twenty One theme
------------------------------+---------------------
 Reporter:  nidhidhandhukiya  |       Owner:  (none)
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  6.3
Component:  Bundled Theme     |     Version:
 Severity:  normal            |  Resolution:
 Keywords:  needs-refresh     |     Focuses:
------------------------------+---------------------
Changes (by poena):

 * keywords:   => needs-refresh
 * milestone:  Awaiting Review => 6.3


Comment:

 Hi!
 Thank you for the report and the patch.

 I am able to reproduce the issue.
 The theme CSS overrides all block typography options except for the casing
 and text decoration.

 The patch does not solve the issue. Twenty Twenty-One uses sass, changes
 made to the css files are overwritten when the sass files are built.

 The theme has an extra folder for the block styles. The correct files to
 adjust for the pull quote block are:
 twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss
 twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss


 To solve the issue, the pull quote paragraph styles needs to have a lower
 specificity than the block options.
 For this block, the block options adds classes to the wrapping
 {{{figure}}} element, while the theme styles the inner paragraph directly.


 Current theme styles:
 {{{
         p {
                 font-family: var(--pullquote--font-family);
                 font-size: var(--pullquote--font-size);
                 font-style: var(--pullquote--font-style);
                 font-weight: 700;
                 letter-spacing: var(--pullquote--letter-spacing);
                 line-height: var(--pullquote--line-height);
                 margin: 0;
         }

 }}}

 {{{p { font-family: var(--pullquote--font-family); }}}} should only apply
 if the block does not have a font family selected in the block option.

 {{{p { font-size: var(--pullquote--font-size); }}}} should only apply if
 the block does not have a font size selected in the block option.
 And so on.

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