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

[WordPress Trac]

#57854: Twenty Twenty-One: Pull Quote block font-size issue
-------------------------------------+------------------------
 Reporter:  nidhidhandhukiya         |       Owner:  whyisjake
     Type:  defect (bug)             |      Status:  reopened
 Priority:  normal                   |   Milestone:  6.5
Component:  Bundled Theme            |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:
-------------------------------------+------------------------

Comment (by sabernhardt):

 == Test Report

 Patch tested: [attachment:"57854-3.diff"]

 Blocks tested:
 [https://gist.github.com/sabernhardt/5d188c43961399d90b7324abcffd7d23
 Pullquote blocks with typography settings]

 === Actual Results with Patch:

 **On the front end:**

 [attachment:"2021-pullquote-front-57854-3.diff.png" Front end screenshot
 with patch]

 1. ✅ The theme's styles applied to the default Pullquote's paragraph.
 {{{
 font-family: var(--pullquote--font-family); // = -apple-system, etc.
 font-size: var(--pullquote--font-size); // = 2rem on larger screens
 font-style: var(--pullquote--font-style); // = normal
 font-weight: 700;
 letter-spacing: var(--pullquote--letter-spacing); // = normal
 line-height: var(--pullquote--line-height); // = 1.3
 }}}
 2. ✅ The custom settings worked in other Pullquote blocks.
 {{{
 Font size: Extra large (2.5rem or 40px)
 Appearance: Light Italic (font-style: italic; font-weight: 300;)
 Line height: 2
 Letter spacing: 1px
 Letter case: Uppercase
 Text Decoration: Underline
 }}}
 3. ✅ The citation's `line-height` of 1.3 is restored.

 **In the editor:**

 [attachment:"2021-pullquote-editor-iframe-57854-3.diff.png" Editor
 screenshot with patch] (iframe editor)

 1. ✅ The theme's styles applied to the default Pullquote's paragraph.
 {{{
 font-family: var(--pullquote--font-family); // = -apple-system, etc.
 font-size: var(--pullquote--font-size); // = 2rem on larger screens
 font-style: var(--pullquote--font-style); // = normal
 font-weight: 700;
 letter-spacing: var(--pullquote--letter-spacing); // = normal
 line-height: var(--pullquote--line-height); // = 1.3
 }}}
 2. ✅ The custom settings worked in other Pullquote blocks.
 {{{
 Font size: Extra large (var(--global--font-size-xl) = 2.5rem)
 Appearance: Light Italic (font-style: italic; font-weight: 300;)
 Line height: 2
 Letter spacing: 1px
 Letter case: Uppercase
 Text Decoration: Underline
 }}}
 3. When the editor does not have the iframe (for example, if the Custom
 Fields panel is active), the citation's `line-height` inherits
 `var(--global--line-height-body)` from `.editor-styles-wrapper`. With the
 iframe, somehow the `.editor-styles-wrapper` style is not applied in
 WordPress 6.4, but that would be a separate issue.

 === Environment:

 OS: Windows 10
 PHP: 7.4.9 (WAMP)
 WordPress: 6.4 alpha-56944
 Browser: Firefox 118.0.2
 Theme: Twenty Twenty-One
 Plugins: Gutenberg 16.8.1

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