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.

Only removing the styles will not work because it will affect existing websites.

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.