#55991 closed defect (bug) (fixed)
Twenty Twenty One: Unable to change size in Quote block
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 6.6 | Priority: | normal |
Severity: | normal | Version: | 6.0 |
Component: | Bundled Theme | Keywords: | has-patch has-screenshots has-testing-info commit |
Focuses: | Cc: |
Description
Hello Team,
In Twenty Twenty One Theme when we select Quote block and try to change size, nothing happens in Editor. In the front-end, the size change is reflected only for citation.
How to Replicate:
- Activate the Twenty Twenty One theme
- Insert Quote block
- Enter text and select size
https://www.loom.com/share/eb2d91e3bd90413184308d9f5452e785
Attachments (9)
Change History (87)
#1
@
3 years ago
- Milestone changed from Awaiting Review to 6.1
- Summary changed from Twenty Twenty One - Unable to change size in Quote block to Twenty Twenty One: Unable to change size in Quote block
#4
@
3 years ago
Hi!
These css variables are added to the theme to make it customizable. Removing them may be breaking existing sites.
Please test the text sizes on all supported WordPress versions - from 5.3.
Kindly remember that this theme is old enough that it also needs to be tested with the classic editor.
#5
@
2 years ago
Without the PR applied:
I am only able to reproduce the issue partially when I test with WordPress 6.1 alpha.
The text size of the quote changes in the editor, but not the front.
The citation does not change size in the editor, but does on the front.
#6
follow-up:
↓ 7
@
2 years ago
Personally, I would prefer if the citation was smaller than the quote text, but they can not be styled separately in the editor.
@jyolsna If I understand correctly, the expectation is for both the quote and cite to change size?
Note: In WordPress 6.1, the content of the quote block are blocks. Users can add more than a paragraph to it, and many blocks have their own font size setting.
#7
in reply to:
↑ 6
@
2 years ago
Replying to poena:
Personally, I would prefer if the citation was smaller than the quote text, but they can not be styled separately in the editor.
@jyolsna If I understand correctly, the expectation is for both the quote and cite to change size?
Note: In WordPress 6.1, the content of the quote block are blocks. Users can add more than a paragraph to it, and many blocks have their own font size setting.
Yes, I'm expecting both the quote and cite to change size simultaneously
#8
@
2 years ago
Testing instructions
To test patch 55991-2, the scss files in the theme needs to be built using the commands listed in the package.json file.
Next, add a quote block in the post editor.
Select the block. If you are testing on WordPress 6.1, make sure that it is the quote block that is selected, and not the default inner paragraph block.
Adjust the font size in the block settings sidebar.
Both the quote icon, the quote text and the citation size should change size.
Save and view the front.
Confirm that the sizes on the front are correct.
Notes
The padding: 0
is removed to make sure that the quote icon does not overlap the text when the font size increases.
This ticket was mentioned in PR #3436 on WordPress/wordpress-develop by whaze.
2 years ago
#9
apply 55991-2 patch and add compiled stylesheets
Trac ticket: https://core.trac.wordpress.org/ticket/55991
#11
@
2 years ago
- Keywords needs-testing added
Test Report
Patch tested: https://core.trac.wordpress.org/attachment/ticket/55991/55991-2.diff (followed by npm install && npm run build
in TT1 theme root in wordpress-develop:trunk
).
Expected Results (Reproduction)
- ✅ Typography size changes to the wrapping Quote block (which contains the paragraph and citation) were not reflected in the editor.
- ✅ In the frontend, the paragraph was unchanged, but the citation reflected the size selected in the editor.
Environment
- Hardware: MacBook Pro Apple M1 Pro
- OS: macOS 12.6
- Browser: Google Chrome 105.0.5195.125
- Server: nginx/1.23.1
- PHP: 7.4.32
- WordPress: 6.1-beta3-54390-src
- Theme: twentytwentyone v1.6
Actual Results (Patch)
- ✅ In the editor, the Quote block typography size change was reflected as expected, for both the paragraph and citation (Figure 1).
- ❌ In the frontend, the citation was sized like in the editor, but the paragraph font size remained unchanged (Figure 2).
Additional Information
- When the text size of the inner paragraph (not the wrapping Quote block) was changed in the editor and the post saved, its size was reflected in the frontend, but not the font weight.
Screenshots
#12
@
2 years ago
- Keywords changes-requested added
Thank you for the submitted patches, @poena and @whaze!
Noting here that PR #3436 does save the theme assets build step to test the patch (yay!), but as it uses 55991-2.diff as its base, yields in the same patch test results as reported in comment:11.
Tagging with changes-requested
as the patch doesn't appear to address the full issue in my testing. Leaving needs-testing
keyword in case anyone else would like to test the existing patches (I may be missing something?)
#13
@
2 years ago
- Milestone changed from 6.1 to 6.1.1
Unfortunately, we've run out of time to include this one with 6.1. Punting to 6.1.1 for the feedback above to be addressed.
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
2 years ago
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
2 years ago
#16
@
2 years ago
- Milestone changed from 6.1.1 to Future Release
As discussed in today's 6.1.1 bug scrub, there's been no response to the feedback above so moving to Future Release
until someone steps in to work on this.
#17
@
23 months ago
Patch tested: https://core.trac.wordpress.org/attachment/ticket/55991/55991-2.diff
Environment:
Hardware: MacBook Pro Apple M1 Pro
OS: macOS 13.2.1
Browser: Google Chrome version 111.0.5563.11
Server: nginx
PHP: 8.1.9
WordPress: 6.2-RC4-55587
Theme: twentytwentyone v1.8
I am unable to reproduce the following:
❌ In the frontend, the citation was sized like in the editor, but the paragraph font size remained unchanged (Figure 2).
The paragraph inside the quote block inherits the size from the classes on the parent.
:root .is-huge-text, :root .has-huge-font-size { font-size: var(--global--font-size-xxl); (...other styles here) }
#18
@
23 months ago
When the text size of the inner paragraph (not the wrapping Quote block) was changed in the >editor and the post saved, its size was reflected in the frontend, but not the font weight.
Tested in WordPress: 6.2-RC4-55587 as above:
In the block editor, I selected the default paragraph inside the quote block.
In the block settings sidebar (inspector) I changed the font weight by changing the Appearance option in the Typography panel.
The font weight and font style are added inline in the paragraph, overriding the theme CSS:
<blockquote class="wp-block-quote has-huge-font-size"> <p style="font-style:italic;font-weight:200">text</p> <cite>citation</cite></blockquote>
#19
@
23 months ago
Thanks, @poena, for the updated tests. In my testing today I was also unable to reproduce that exception originally cited in comment:11. Unfortunately that was too far back to try and repro the code/env with TT1 v1.6 to double-check those results 😅. I did, however, verify moving the patched TT1 v1.7 theme into a 6.1.1 install for good measure.
Test Report
Patch tested: https://core.trac.wordpress.org/attachment/ticket/55991/55991-2.diff 👍🏻
Environment
- Hardware: MacBook Pro Apple M1 Pro
- OS: macOS 12.6.3
- Browser: Safari 16.3
- Server: nginx/1.23.3
- PHP: 7.4.33
- WordPress: 6.1.1 and 6.3-alpha-55505-src (
trunk
) - Theme: twentytwentyone v1.7
Actual Results
- ✅ In the editor and frontend, the Quote block typography size change was reflected as expected, for both the paragraph and citation (Figures 1 and 2).
- ✅ When styling is applied directly to the inner Paragraph block (not the wrapping Quote block), both the font size and weight were added inline, overriding the Quote block style as expected (Figure 3). (See Additional Information on comment:11 for context.)
Supplemental Artifacts
#20
@
23 months ago
- Keywords has-testing-info added; changes-requested removed
- Milestone changed from Future Release to 6.3
Considering recent test results in comment:17, comment:18, and comment:19, I'm removing changes-requested
and moving this ticket to 6.3
for consideration.
#21
@
23 months ago
Note: Testing this while participating on Yoast contributor day.
Issue regarding Quote resizing no longer seems to exist as tested with the latest version of TwentyTwenty One and WordPress v6.2:
The Quote block typography size change was reflected as expected on both backend and frontend, for both quote and citation.
Hardware: MacBook Pro Quad-Core Intel Core i5
OS: macOS 13.2.1 (22D68)
Browser: Chrome Version 111.0.5563.146 (Official Build) (x86_64)
Server: Apache/2.4.56 (Debian)
PHP: 8.0.28
WordPress: 6.2
Theme: TwentyTwentyone v1.8
Editor:
Frontend:
Inline:
#22
@
23 months ago
Test Report
This report validates that the indicated patch addresses the issue.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/55991/55991-2.diff +
npm install && npm run build
Environment
- OS: macOS 13.1 (22C65), MacBook Pro Apple M2
- WordPress: 6.3-alpha-55505-src
- Browser: Chrome Version 111.0.5563.146 (Official Build) (arm64)
- Theme: Twenty Twenty-OneVersion: 1.8
Actual Results
- ✅ Issue resolved with patch.
Additional Notes
- Tested together with @piecebutechsup as part of the Yoast Contributor Day.
Supplemental Artifacts
#23
@
20 months ago
Test Report
This report validates that the indicated patch addresses the issue.
Patch tested: https://core.trac.wordpress.org/raw-attachment/ticket/55991/55991-2.diff
Environment
- OS: Windows 11 (22H2)
- Web Server: nginx/1.23.4
- PHP: 7.4.33
- WordPress: 6.3-alpha-55505-src
- Browser: Chrome Version 114.0.5735.110 (Official Build) (64-bit)
- Theme: Twenty Twenty-One
After Applying The Patch
- Followed the instructions of @poena
- ✅ The mentioned patch solves the issue
Screenshots
- Backend: https://prnt.sc/xgCLm-ZC5G6Q
- Frontend: https://prnt.sc/cpOvG-iNHYvt
This ticket was mentioned in Slack in #core by zunaid321. View the logs.
20 months ago
#25
@
20 months ago
- Keywords commit added
This ticket has a couple of test report, I am marking this for commit.
#26
@
20 months ago
The typo on "Only" could be fixed during the commit process.
If the user selects a custom font size (inline style), this does not change the citation font size. The specificity needed to increase to override .wp-block-quote cite
for the theme's presets, but I'm wary of increasing it further with blockquote:not([class*="font-size"]):not([style*="font-size"]) cite
.
#27
@
20 months ago
- Keywords commit removed
According to the comment by @sabernhardt above, I am going to remove the keyword commit
.
@poena, regarding the 55991-2.diff, I noticed that you removed the padding component. Could you please confirm if this removal was intentional or if it is part of the overall change?
#28
@
20 months ago
Hi
Removing the padding was intentional, for the editor to match the front.
With padding: 0
removed, the following style from core "theme.scss" is applied both in the editor and front:
.wp-block-quote { border-left: 0.25em solid; margin: 0 0 1.75em; padding-left: 1em; }
Because em is used, it will be relative to the font size setting.
This was the intention, but it has been 9 months and the order of the CSS seems to have changed since.
When I test this patch, the editor and front still does not match the way it should when the default font size is used.
#29
@
20 months ago
It looks like the editor only uses the "has-custom-font-size" class name for the button block. It would be useful here too.
#30
@
20 months ago
In 55991--3.diff I am trying something more drastic.
- The CSS variables that were used for the quote block are no longer applied, in favor of the typography settings.
Now, all typography settings should work, not only the font size.
- The CSS variables are kept in the theme, if someone needs to re-apply them.
They are also used for the font weight, and for the legacy style variations.
Users will see a style change for existing quote blocks if they have changed the CSS variables and activated the new theme version.
Testing needed
-Test if quote blocks that were created on older versions of WordPress look good enough when the theme is updated.
-Test that all typography settings work in the editor and front.
This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.
20 months ago
#32
@
20 months ago
This ticket was discussed during the bug scrub.
Manual testing is required for this task. Please ping @ironprogrammer and @webtechpooja to coordinate and perform the necessary tests.
This ticket was mentioned in Slack in #core-test by mai21. View the logs.
20 months ago
This ticket was mentioned in Slack in #core by audrasjb. View the logs.
20 months ago
#35
@
20 months ago
- Milestone changed from 6.3 to 6.4
As we still need to test the last patch and since we're approaching the end of the beta cycle of 6.3, let's move this ticket to 6.4, so it can be properly reviewed :)
This ticket was mentioned in Slack in #core-test by oglekler. View the logs.
18 months ago
#38
@
17 months ago
Test Report
I just tested latest patch provided by @poena.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/55991/55991--3.diff
Environment
- OS: Windows 11
- Web Server: Docker
- PHP: 8.0.28
- WordPress: 6.4-alpha-56267-src
- Browser: Google Chrome 116.0.5845.180 (Official Build) (64-bit)
- Theme: Twenty Twenty-Two
Actual Results
- ✅ I found improvement after applying the patch. The size is now working. I used size extra large (40) for this test.
Additional Notes
- Though the font-size is working properly, but the quote is not resizing. It remains same or little change happen that is negligible.
Supplemental Artifacts
Dashboard After Applying Patch:
Frontend After Applying Patch:
#39
@
17 months ago
Testing Report
I just tested the latest patch provided by @poena.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/55991/55991--3.diff
Environment
OS: macOS 12.5
Web Server: Docker
PHP: 8.0.28
WordPress: 6.4-alpha-56267-src
Browser: Google Chrome Version 115.0.5790.114 (Official Build) (arm64)
Theme: Twenty Twenty-one
Actual Results
I didn't find improvement after applying the patch. Changes to font size are not reflected in the editor. On the front end, font size is reflected on citation only.
The font size of quote text changes only if it is changed from the inner paragraph block.
#40
@
17 months ago
- Keywords changes-requested needs-refresh added; needs-testing removed
I tried the patch. blockquote > p
has correct size in the editor and on the front, but blockquote > cite
has no size change in the editor and size on the front is changes relatively, but still does not match the chosen value.
And the patch already needs a refresh.
#41
@
17 months ago
I agree with the change request.
I am not sure why there are such different test results only ten days apart.
#42
@
17 months ago
I wonder if the testing instructions were followed and the CSS changes were built from scss files.
#43
@
17 months ago
There is something wrong with the build process on trunk, even without the patch, changes to the
scss
files does not update the style.css file. It is possible that it is something local on my machine, but I have reset everything I can think of (Not only node_modules but entire wordpress-svn and wordpress-develop directories).
#44
@
17 months ago
Patch 55991-4.diff is refreshed and up to date with the latest changes to the theme.
Testing instructions
To test on wordpress-svn or wordpress-develop (git), I needed to do the following:
Install WordPress as usual following the instructions in the readme file for WordPress.
Next rename or delete the node_modules
folder inside wordpress-svn.
Without this step, the theme's own npm commands will not work.
Apply the patch.
In your terminal, go to the theme folder for twentytwentyone
Enter:
npm install
npm run build
On your WordPress install:
Activate the theme.
Create a new post and add a quote block. Next, add a classic block and add a quote inside.
Change the font size of the quote block: not the paragraph inside it.
Please test both a font size preset from the setting, and a custom size.
After performing the size test, please also change the font weight under Typography > Appearance.
What to test for:
- A quote in the classic block still works and looks the same as without the patch.
- The default font size still works in the editor and front.
- A font size preset works in the editor and front. (The presets are extra small to gigantic)
- Custom font sizes work in the editor and front. (Choose your own in the size input field)
- The citation changes size relative to the chosen font size, but smaller.
- The quote symbols changes size relative to the chosen font size
- Confirm that the font weight changes work in the editor and front.
#46
@
17 months ago
An option to not using the theme's custom variables could be to add more :not
pseudo classes like in this example for the pullquote: https://core.trac.wordpress.org/ticket/57854
Which ever is preferred, we should align the solutions for these two issues since they are very similar.
#48
@
16 months ago
Per #comment:46, this blockquote issue is similar to #57854 for the pullquote, 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
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.
#49
@
16 months ago
- Milestone changed from 6.4 to 6.5
I'm going to move this (and #57854) to 6.5 as it looks like these won't be addressed in this release cycle.
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
16 months ago
This ticket was mentioned in PR #5986 on WordPress/wordpress-develop by @poena.
13 months ago
#52
Trac ticket: https://core.trac.wordpress.org/ticket/55991
#53
@
13 months ago
I'm sure that after 20 months, you are all just as tired as I am of this issue.
I have submitted a new PR, but the testing instructions are the same as in #comment:44.
#54
@
12 months ago
Hey @poena and @sabernhardt,
Patch: https://github.com/WordPress/wordpress-develop/pull/5986
How do the changes committed in [57631] (for #57854) affect the patch?
#55
@
12 months ago
Some of the changes to the blockquote element in 5986 breaks the pull quote typography options.
#56
follow-up:
↓ 62
@
12 months ago
I pushed an update that reverted some of the changes on the blockquote element. But it still needs testing, so, we could punt it.
#57
@
12 months ago
Test Report
Description
Followed the instructions #comment:44
Patch tested: PR 5986
Environment
- WordPress: 6.5-beta1-57630-src
- PHP: 8.2.15
- Server: nginx/1.25.3
- Database: mysqli (Server: 8.0.36 / Client: mysqlnd 8.2.15)
- Browser: Chrome 121.0.0.0
- OS: macOS
- Theme: Twenty Twenty-One 2.1
- MU Plugins: None activated
- Plugins:
- Test Reports 1.1.0
Actual Results
Issue resolved with patch ✅
Screenshots
Before Apply PR Editor | After Apply PR Editor |
![]() | ![]() |
#58
@
12 months ago
- Milestone changed from 6.5 to 6.6
Thanks for the new PR and for the test, but as per #comment:56 and since the PR is failing the TT1 build github action, let's move this to 6.6.
Please feel free to move it back to 6.5 is we have a fully tested patch in the next days.
#59
@
12 months ago
The test for the version controlled theme files failed because I did not include the built CSS files.
Because the built CSS files often ends up creating merge conflicts when time passes and other changes are made meanwhile.
#60
@
12 months ago
Test Report
Tested Patch: https://github.com/WordPress/wordpress-develop/pull/5986
Description: Followed the Instructions as per #comment:44
Testing Environment:
OS: Windows
Web Server: Nginx
PHP: 8.1.23
WordPress: 6.5-beta2
Browser: Chrome
Theme: Twenty Twenty One
Active Plugins: None
Actual Results:
- Issue Resolved With Patch.✅
Screenshots:
Backend:
Before Patch: https://prnt.sc/UaEfm_jLg26H
After Patch: https://prnt.sc/5h6S7YoKfVtf
Frontend:
Before Patch: https://prnt.sc/lgdS1xsOKrWu
After Patch : https://prnt.sc/P64mhmIMLu2K
#61
@
12 months ago
Tested Patch: https://github.com/WordPress/wordpress-develop/pull/5986
Environment
- WordPress: 6.5-beta2-57673
- PHP: 8.0.30
- Server: TasteWP-S3 Official/3.0.0
- Database: mysqli (Server: 8.0.32-0ubuntu0.20.04.2 / Client: mysqlnd 8.0.30)
- Browser: Chrome 121.0.0.0 (Windows 10/11)
- Theme: Twenty Twenty-One 2.1
- MU-Plugins: None activated
- Plugins:
- WordPress Beta Tester 3.5.5
# Expected Results
When select the Quote block and try to change the size, it should be reflected in the editor.
# Actual Results
Issue Resolved when tested the patch
#62
in reply to:
↑ 56
@
12 months ago
Replying to poena:
I pushed an update that reverted some of the changes on the blockquote element.
@poena @sabernhardt Do the updates in the patch impact the changes made for #57854 (i.e. [57631])? In other words, if the patch is committed will #57854 need to be reopened to do a follow-up fix?
#63
@
12 months ago
If testing shows that we still need to make adjustments for both blocks to work, lets keep the changes to one ticket, and make the changes here before comitting.
That is, testing should be done for both the quote, pullquote, and classic editor quote with this PR applied.
I apologise for not updating the testing instructions in time. I did not mean to waste the testers time.
I did not find any more problems, but more eyes on it would not hurt.
This ticket was mentioned in Slack in #core-themes by karmatosed. View the logs.
10 months ago
#65
@
9 months ago
Test Report
Description: According to this report, the patch described works as expected.
PR tested: https://github.com/WordPress/wordpress-develop/pull/5986
Environment
- WordPress: 6.6-alpha-57778-src
- PHP: 8.2.19
- Server: nginx/1.25.5
- Database: mysqli (Server: 8.0.37 / Client: mysqlnd 8.2.19)
- Browser: Chrome 124.0.0.0
- OS: Windows 10/11
- Theme: Twenty Twenty-One 2.2
- MU Plugins: None activated
- Plugins:
- Test Reports 1.1.0
before Patch
Editor : https://prnt.sc/rDU2cuOJ3VcV
Frontend : https://prnt.sc/JG2KSRWDyh57
After Patch
Editor : https://prnt.sc/-saQ5qxvXHys
Frontend : https://prnt.sc/7SoO3soamBB_
✅ I tested the changes with the given PR and they work as expected.
#66
@
9 months ago
@imranhasanraaz it's not clear if you are confirming what @poena said in testing or just testing the PR. Can you please clarify?
If testing shows that we still need to make adjustments for both blocks to work, lets keep the changes to one ticket, and make the changes here before committing.
That is, testing should be done for both the quote, pullquote, and classic editor quote with this PR applied.
#70
@
9 months ago
I was going to commit this one, but it appears the PR has some conflicting files. @poena could you please update the PR accordingly so we can get this committed? Thank you!
This ticket was mentioned in PR #6710 on WordPress/wordpress-develop by @poena.
9 months ago
#72
Trac ticket: https://core.trac.wordpress.org/ticket/55991
#73
@
9 months ago
I wasn't able to update the PR. I submitted a new PR with only the changes to the .scss files.
The .css files need to be built by the tester /committer.
#74
@
9 months ago
- Status changed from accepted to assigned
To keep the check as there was a conflict, let me assign to you @audrasjb so you can confirm this now works. Thanks for updating @poena.
@SergeyBiryukov commented on PR #6710:
8 months ago
#76
Thanks for the PR! Merged in r58410.
@SergeyBiryukov commented on PR #3436:
8 months ago
#77
Thanks for the PR! Merged in r58410.
@SergeyBiryukov commented on PR #5986:
8 months ago
#78
Thanks for the PR! Merged in r58410.
Fixes Quote block font size not updating in editor and front end.