Twenty Twenty-One: Pull Quote block font-size issue

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Download wordpress version 6.2 Beta.
2. Choose Twenty Twenty one theme."
3. Choose font-size from the options.

You can able to see there is no changes in the fonts both side.

I have attached video for better understanding.
Video URL :- ​https://share.cleanshot.com/WB0NjGrmL1VQhzkSP8FF

[poena]

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.

The pull quote style definitions were defined for the paragraph within the quote block directly. This was more specific than the style definitions that get added by changing the block attributes through block, thus resulting in the UI not changing as per user expectation.

The fix moves these definitions to block main level, and sets paragraph to inherit these styles. This way the inline style attributes set by the block take effect, and UI works as user would expect it to.

Trac ticket: 57854 (https://core.trac.wordpress.org/ticket/57854)

[poena]

Thank you for the pull request.

I have tested the changes to the SCSS files but I rebuilt the CSS locally using the npm commands. All the block's typography settings are working for the paragraph.

I see that not all typography options work with the cite.
I am torn wether or not the font size option should be applied to the cite, but I think it can be unexpected and confusing for users that only some of the options work.
What do you think?

[varjodesigns]

Replying to poena:

Thank you for the pull request.

I have tested the changes to the SCSS files but I rebuilt the CSS locally using the npm commands. All the block's typography settings are working for the paragraph.

I see that not all typography options work with the cite.
I am torn wether or not the font size option should be applied to the cite, but I think it can be unexpected and confusing for users that only some of the options work.
What do you think?

---

Thanks for testing it out, and for the insightful comment on the cite block supports!

If the typography settings cascade to the cite, there may be difficulty in maintaining the visual hierarchy of the cite in relation to the paragraph. Say you indeed chose a very large text size, and that resulted in both the cite and the paragraph assuming same size. This could be resolved by applying a multiplier for the cite size, but that might be unexpected to those users of the theme who may have customized this block for their sites, and might be less intuitive to overwrite per site.

I would therefore be inclined to leave the cite styling as it is. The cite in my personal opinion is mainly a helper label for the quote, while paragraph carries the main visual interest of the component. Unless the block is later parted so that both parts have their own supports, with maybe inheritance from main block, I would go with having the styles cascade to paragraph, whilst leaving the less visual cite component to work with the solid defaults it has.

And as for partially implementing typography supports, I feel that might indeed be more confusing than having them not apply to the cite at all. Ideally I think these two should have their own block supports in their future, so you could overwrite unwanted inheritance and achieve the look you really want to.

[poena]

The problem is that different users will always have different expectations.
See https://core.trac.wordpress.org/ticket/55991#comment:7

In the quote block users can now have separate styling by changing the cite through the block settings and having different sizes and colors on the inner blocks. But that is not possible with the pull quote.

I am not aware of any plans to change the pull quote to use inner blocks. I actually think this is intentional because with the quote block changes, most users will never need to use a pull quote block, since you can create the same designs with the quote block.

[varjodesigns]

That is a fair point as well, quote block seems like a good way to go around the problem for the users who want further control here.

For pullquote then, it then seems we should just go with a look and UX behaviour that is consistent with the theme, to suit most use cases. Which approach do you think is more in line with the design choices made in twentytwentyone in general? To have the supports cascade to cite or not? And should we in either case exclude the font-size, or maybe have it change size while keeping a relative size difference to the paragraph?

I am satisfied with either solution, and can implement the necessary changes to my pull request if needed.

[audrasjb]

As per today's bug scrub, let's move this to the next milestone as we are at the end of WP 6.3 beta cycle, so the discussion can continue.

[jivygraphics]

I pulled this patch down and ran it locally and I am seeing the pullquote responding as anticipated with the font-size changes in the block styler. I am also seeing the inability to modify the citation font-size this should maybe be created as a separte ticket to address if it has not been yet.

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

This is an update of #4575 to resolve merge conflicts. (This is also a WordCamp US project at contributor day.)

This is an update of #4575 to resolve merge conflicts. (This is also a WordCamp US project at contributor day.)

[jivygraphics]

Tested PR #5061 (​https://github.com/WordPress/wordpress-develop/pull/5061) locally everything seems to be working as anticipated with the pullquote sizing. Citation should be set as an enhancement off this ticket.

[whyisjake]

Related: #59187

[whyisjake]

In 56451:

Bundled Themes: Ensure that pull quotes are able to use the correct font
size.

Pull quote bodies weren't inheriting the correct styling from the block
editor. This ensure that will happen.

Props nidhidhandhukiya, poena, varjodesigns, jivygraphics, whyisjake.
Fixes #57854.

[sabernhardt]

Pullquote blocks on front end before [56451]

[sabernhardt]

front end with current trunk

[sabernhardt]

editor before [56451]

[sabernhardt]

editor with current trunk

[sabernhardt]

[56451] is missing the default font-size for anyone who does not use the size control.

font-size: var(--pullquote--font-size);

The font size had been 1.5rem for small screens and 2rem for screens at least 652 pixels wide, but the Pullquote paragraph now inherits

• 1.5em from the global styles for .wp-block-pullquote on the front and
• 1.25rem from .editor-styles-wrapper within the editor.

[sabernhardt]

I should also mention that [56451] reduces the citation's line-height down to the --pullquote--line-height value (1.3 instead of 1.6). That might not be a problem because wrapping to multiple lines is probably not very common, but I think the change was unintentional.

[darshitrajyaguru97]

Test Report for https://core.trac.wordpress.org/changeset/56451

Environment:
===========
PHP: 8.1.23
WordPress: 6.3.1
Browser: Chrome
Theme: Twenty Twenty One
Plugin: none

Steps:
=====
Activate Theme: Twenty Twenty One
Add PullQuote Block on Any Page
Apply Font-Size, Font-Style, Letter Specing on Block

Screenshots:
==========
Before Patch Screenshots:
Backend : ​https://prnt.sc/o4HPBxAnslDp
Frontend: ​https://prnt.sc/S1OyFE4qG4bd

After Patch Screenshots:
Backend : ​https://prnt.sc/m8S-TDhAigOU
Frontend: ​https://prnt.sc/J4i6DfB5SYFA

After Patch Result:
===============
Font-weight, Font-Size, Letter-spacing and Appearance get applied to the pullQuote block from frontend as well as backend
https://core.trac.wordpress.org/changeset/56451 Patch is Working fine as expected.

[poena]

Alternative patch with :not pseudo classes

[nicolefurlan]

Per https://core.trac.wordpress.org/ticket/55991#comment:46, this pullquote issue is similar to #55991 for the blockquote, and should have a similar solution. There are patches with different solutions on each ticket and I think there just needs to be some discussion and consensus about which path to take.

cc @poena, @audrasjb, @desrosj, @whyisjake

What does everyone think? Let's try to get this wrapped up for 6.4 RC1, which is less than one week away. Feel free to change the milestone if you think that will not happen.

[nicolefurlan]

I'm going to move this (and #55991) to 6.5 as it looks like these won't be addressed in this release cycle.

[sabernhardt]

Pullquote blocks on the front end with patch 57854-3.diff

[sabernhardt]

Pullquote blocks in the (iframe) editor with patch 57854-3.diff

[sabernhardt]

Test Report

Patch tested: 57854-3.diff​

Blocks tested: ​Pullquote blocks with—and without—typography settings

Actual Results with Patch:

On the front end:

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.6 is restored.

In the editor:

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

[sabernhardt]

I recommend committing 57854-3.diff.

Otherwise, r56451 should be reverted so the upcoming theme release does not change existing Pullquote blocks on the front end.

[nicolefurlan]

@hellofromTonya and @poena bringing your attention to this one. What do we think about committing 57854-3.diff per #comment:27?

[hellofromTonya]

Thanks @nicolefurlan for the ping. Thanks @sabernhardt for testing the patch. Setting myself to commit reviewer for the follow-up patch.

The 57854-3.diff changes the Sass files (props to @carolinan) .

For commit, those Sass files need to be built. I used the following build workflow:

npm install
npm run build

The PR is a confidence check for testing to ensure this built version is ready for commit.

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

[hellofromTonya]

@sabernhardt @poena can you check ​this PR which is the built version of the Sass changes in 57854-3.diff​? Before committing, want to make sure I built it correctly and it works as expected.

Thanks! This looks correct. I applied the 5504.diff file to another local installation, without running the build, and both style.css and style-editor.css had the new selectors. (The IE styles look correct too, but I did not check them within the browser.)

Firefox's element inspector is open for the ​editor and ​front end screenshots.

Awesome. Thanks @sabernhardt for the confidence check. Will mark this PR for commit.

[hellofromTonya]

Patch: ​https://github.com/WordPress/wordpress-develop/pull/5504

This is the built patch for commit, built from @poena's 57854-3.diff​ patch. It's ready for commit. Prepping now.

[hellofromTonya]

Second thought, will wait until tomorrow before committing to give time for @poena to weigh in on the patch and if this patch should be committed. Why? As @nicolefurlan noted, https://core.trac.wordpress.org/ticket/55991#comment:46 is also dealing with the qullquotes.

However, if Carolina is unavailable, will go ahead and commit the patch ahead of RC1.

[hellofromTonya]

Hey @sabernhardt, If you have time, can you help write a description (for the commit message) that describes what the patch is fixing? Thanks :)

[sabernhardt]

I ignored the higher specificity with :not(). Anyone who sets custom typography styles on .wp-block-pullquote p would need to edit the selector to override the proposed change. The current stylesheets may only need ​smaller changes, but it's too late in the cycle to consider a new approach.

I'll prepare a PR to revert the earlier commit, and then we can revisit this along with #55991.

[hellofromTonya]

Thanks @sabernhardt. I don't think a PR is needed for the revert. Rather, I can do it via svn. Working on it now.

[hellofromTonya]

A PR will be needed as there are merge conflicts in the .map files. @sabernhardt ping me when it's ready.

[56451] enabled setting custom typography options in the Pullquote block settings with Twenty Twenty-One. However, that changeset removed the theme's default font size for the paragraph, and it reduced the line height for the citation.

A similar issue exists with the Quote block, and reconsidering the Pullquote block change could help determine the best way to fix both.

Trac 57854

[sabernhardt]

@hellofromTonya All the checks passed on the revert PR 5508.

[hellofromTonya]

@sabernhardt Awesome :) I'm on it.

[hellofromTonya]

In 56959:

Bundled Themes: Revert 56451.

Reverts [56451] to avoid the following issues:

• missing the default font-size for anyone who does not use the size control.
• unintentional reduction in citation's line-height down to the --pullquote--line-height value (1.3 instead of 1.6).

With 6.4 RC1 happening shortly, this revert is necessary to avoid shipping this issues in the release, while giving the time needed to resolve in the next cycle.

Follow-up to [56451].

Props sabernhardt, nicolefurlan.
See #57854.

Committed via https://core.trac.wordpress.org/changeset/56959.

[hellofromTonya]

[56451] has been reverted via [56959], which removes the changes made in the 6.4 cycle.

Moving to 6.5 to give more time to align with #55991, gain consensus, and then resolve. Also resetting has-patch keyword, as a new patch will be needed.

Thank you everyone for your contributions :)

[poena]

Thank you for managing this while I have needed to be away.

[skyakash12]

Hi,

Test Report
Patch - ​https://github.com/WordPress/wordpress-develop/pull/5504

Environment
Operating System: Windows
WordPress: v6.3.1
Theme: Twenty Twenty One
Browser: Chrome

Expected Result: The Pullquote block font-size, letter spacing should be applied as per the selection ☑️

Screenshot:

Before: ​https://prnt.sc/ZpUXg0qpS6zr
After: ​https://prnt.sc/WYb56yRrbtmJ

Thanks

[sabernhardt]

#56005 was marked as a duplicate.

[sabernhardt]

#57378 was marked as a duplicate.

[sabernhardt]

#58767 was marked as a duplicate.

1. The font-family variable remains on the paragraph (both editor and front) so the citation continues to use the body font even when the site redefines var(--pullquote--font-family).
2. The font-size, font-style, font-weight, letter-spacing and line-height are set on the Pullquote block to allow overriding with the sidebar settings. Then the block's paragraph element inherits those styles.
3. When the settings do not give a custom line-height from the sidebar, these stylesheets set the paragraph to var(--pullquote--line-height) instead of inheriting 1.6 from the block styles. This patch uses :where() to avoid increasing specificity.

Moving styles from the paragraph element to the block should not affect the citation, which has had its own styles for font-size, font-style, font-weight and letter-spacing.

blockquote cite,
blockquote footer {
  font-weight: normal;
  letter-spacing: var(--global--letter-spacing);
}
.wp-block-pullquote .wp-block-pullquote__citation,
.wp-block-pullquote cite,
.wp-block-pullquote footer {
  font-size: var(--global--font-size-xs);
  font-style: var(--pullquote--font-style);
}

Trac 57854

[poena]

Patch tested: PR 5894, linked above.

Test results:

WordPress trunk, 6.5-alpha-56966-src -Issues resolved

WordPress 6.0.3 -Issues resolved

WordPress 5.3 -This version did not support custom font sizes, and the visible styling is unchanged which is correct.

The user's style choices correctly overrides the WordPress core block style and the theme style for blockquote p:

• The line height is correctly using the --pullquote--line-height, unless customized.

• Custom line height, font size, appearance, letter spacing, and text transforms chosen by the user in the block setting is inline on the wrapping <figure> element, inherited by the paragraph inside the <blockquote>.

• Preset font sizes are correctly inherited from the class names .has-name-font-size which are on the wrapping figure element.

• The citation is unaffected (Some users expects the citation to also adapt to the styling, but this theme does not support that).

[shailu25]

Test Report

This Report validates that the patch works as expected.✅

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/5894

Environment:

WordPress - 6.4.2
OS - Windows
Browser - Firefox
Theme: Twenty Twenty-One
PHP - 8.0.18
Active Plugin - None

Actual Results:

• After Applying the patch Pull Quote block's font-size issue is Resolved.✅
• Pull Quote block's font-size,font-style, font-weight, letter-spacing, line-height are showing properly as per selected in Back-end.✅

Screenshots:

Before Patch:
Back-end : ​https://prnt.sc/q7OiJPcoHfZx
Front-end: ​https://prnt.sc/g3BiZ0I36mjG

After Patch:
Back-end : ​https://prnt.sc/wAYZooN395TR
Front-end: ​https://prnt.sc/A2M4XHld5mn9

[harshgajipara]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/5894

Environment

OS: Windows
PHP: 8.1.9
WordPress: 6.4.2
Browser: Chrome
Theme: Twenty Twenty-One
Plugins: None activated

Actual Results:

✅ Before patch: Pull Quote block's properties not working.
Backend: ​https://prnt.sc/MSMKVGLLH1GP
Frontend: ​https://prnt.sc/3Q1tSKWiNVhC

✅ After patch: Pull Quote block's properties working properly.
Backend: ​https://prnt.sc/mEz4JKg2hzVA
Frontend: ​https://prnt.sc/YTa_N7Ypcj3U

[poena]

Note the PR to be committed is ​https://github.com/WordPress/wordpress-develop/pull/5894

[hellofromTonya]

Patch: ​https://github.com/WordPress/wordpress-develop/pull/5894

The patch LGTM. Given the level and thoroughness of testing, I agree with @poena it's ready. I'm in the process of preparing the commit.

[hellofromTonya]

In 57631:

Bundled Themes: Support pullquote block typography options in Twenty Twenty-One.

Pullquotes were not inheriting the correct styling from the block
editor. This commit resolves the issue by supporting typography options.

1. The font-family variable remains on the paragraph (both editor and front) so the citation continues to use the body font even when the site redefines var(--pullquote--font-family).

2. The font-size, font-style, font-weight, letter-spacing and line-height are set on the Pullquote block to allow overriding with the sidebar settings. Then the block's paragraph element inherits those styles.

3. When the settings do not give a custom line-height from the sidebar, these stylesheets set the paragraph to var(--pullquote--line-height) instead of inheriting 1.6 from the block styles. This patch uses :where() to avoid increasing specificity.

Moving styles from the paragraph element to the block should not affect the citation, which has had its own styles for font-size, font-style, font-weight and letter-spacing.

Follow-up to [56959], [56451], [55089], [55088], [49574], [49320], [49216].

Props sabernhardt, poena, darshitrajyaguru97, harshgajipara, shailu25, skyakash12.
Fixes #57854.

Committed via https://core.trac.wordpress.org/changeset/57631.

[sabernhardt]

#60821 was marked as a duplicate.