#57854 closed defect (bug) (fixed)
Twenty Twenty-One: Pull Quote block font-size issue
Reported by: | nidhidhandhukiya | Owned by: | hellofromTonya |
---|---|---|---|
Milestone: | 6.5 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | has-patch commit has-testing-info |
Focuses: | css | Cc: |
Description
Steps to reproduce the issue :-
- Download wordpress version 6.2 Beta.
- Choose Twenty Twenty one theme."
- 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
Attachments (8)
Change History (70)
#2
@
21 months ago
- Summary changed from Pull Quote block font-size issue in Twenty Twenty One theme to Twenty Twenty-One: Pull Quote block font-size issue
This ticket was mentioned in Slack in #core by oglekler. View the logs.
18 months ago
This ticket was mentioned in Slack in #core by varjodesigns. View the logs.
18 months ago
This ticket was mentioned in PR #4575 on WordPress/wordpress-develop by @varjodesigns.
18 months ago
#5
- Keywords has-patch added; needs-refresh removed
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)
#7
follow-up:
↓ 8
@
17 months ago
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.
#8
in reply to:
↑ 7
@
17 months ago
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.
#9
@
17 months ago
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.
#10
@
17 months ago
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.
This ticket was mentioned in Slack in #core by audrasjb. View the logs.
17 months ago
#12
@
17 months ago
- Milestone changed from 6.3 to 6.4
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.
#13
@
16 months ago
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.
This ticket was mentioned in PR #5059 on WordPress/wordpress-develop by @whyisjake.
16 months ago
#14
Trac ticket: https://core.trac.wordpress.org/ticket/57854
This ticket was mentioned in PR #5061 on WordPress/wordpress-develop by @whyisjake.
16 months ago
#15
This is an update of #4575 to resolve merge conflicts. (This is also a WordCamp US project at contributor day.)
This ticket was mentioned in PR #5061 on WordPress/wordpress-develop by @whyisjake.
16 months ago
#16
This is an update of #4575 to resolve merge conflicts. (This is also a WordCamp US project at contributor day.)
#17
@
16 months ago
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.
#19
@
16 months ago
- Owner set to whyisjake
- Resolution set to fixed
- Status changed from new to closed
In 56451:
#20
@
15 months ago
- Keywords needs-patch added; has-patch needs-testing removed
- Resolution fixed deleted
- Status changed from closed to reopened
[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.
#21
@
15 months ago
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.
#22
@
15 months ago
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.
#24
@
14 months ago
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.
#25
@
14 months ago
- Milestone changed from 6.4 to 6.5
I'm going to move this (and #55991) to 6.5 as it looks like these won't be addressed in this release cycle.
#26
@
14 months ago
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
- ✅ 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
- ✅ 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
- ✅ The citation's
line-height
of 1.6 is restored.
In the editor:
Editor screenshot with patch (iframe editor)
- ✅ 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
- ✅ 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
- When the editor does not have the iframe (for example, if the Custom Fields panel is active), the citation's
line-height
inheritsvar(--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
#27
@
14 months ago
- Focuses css added
- Keywords commit added; needs-testing removed
- Milestone changed from 6.5 to 6.4
- Priority changed from normal to high
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.
#28
@
14 months ago
@hellofromTonya and @poena bringing your attention to this one. What do we think about committing 57854-3.diff
per #comment:27?
#29
@
14 months ago
- Owner changed from whyisjake to hellofromTonya
- Status changed from reopened to reviewing
Thanks @nicolefurlan for the ping. Thanks @sabernhardt for testing the patch. Setting myself to commit reviewer for the follow-up patch.
This ticket was mentioned in PR #5504 on WordPress/wordpress-develop by @hellofromTonya.
14 months ago
#30
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
#31
@
14 months ago
@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.
@sabernhardt commented on PR #5504:
14 months ago
#32
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.
@hellofromTonya commented on PR #5504:
14 months ago
#33
Awesome. Thanks @sabernhardt for the confidence check. Will mark this PR for commit.
#34
@
14 months ago
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.
#35
@
14 months ago
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.
#36
@
14 months ago
Hey @sabernhardt, If you have time, can you help write a description (for the commit message) that describes what the patch is fixing? Thanks :)
#37
@
14 months ago
- Keywords commit removed
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.
#38
@
14 months ago
Thanks @sabernhardt. I don't think a PR is needed for the revert. Rather, I can do it via svn. Working on it now.
#39
@
14 months ago
A PR will be needed as there are merge conflicts in the .map
files. @sabernhardt ping me when it's ready.
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
14 months ago
This ticket was mentioned in PR #5508 on WordPress/wordpress-develop by @sabernhardt.
14 months ago
#41
[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.
@hellofromTonya commented on PR #5508:
14 months ago
#45
Committed via https://core.trac.wordpress.org/changeset/56959.
#49
@
13 months ago
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
This ticket was mentioned in PR #5894 on WordPress/wordpress-develop by @sabernhardt.
11 months ago
#53
- Keywords has-patch added
- 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 redefinesvar(--pullquote--font-family)
. - The
font-size
,font-style
,font-weight
,letter-spacing
andline-height
are set on the Pullquote block to allow overriding with the sidebar settings. Then the block's paragraph element inherits those styles. - When the settings do not give a custom
line-height
from the sidebar, these stylesheets set the paragraph tovar(--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); }
#54
@
11 months ago
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).
#55
@
10 months ago
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
#56
@
10 months ago
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
#60
@
10 months ago
Note the PR to be committed is https://github.com/WordPress/wordpress-develop/pull/5894
#61
@
10 months ago
- Keywords has-testing-info added
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 commented on PR #5894:
10 months ago
#63
Committed via https://core.trac.wordpress.org/changeset/57631.
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);
} 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.