Make WordPress Core

Opened 12 months ago

Last modified 2 months ago

#55991 accepted defect (bug)

Twenty Twenty One: Unable to change size in Quote block

Reported by: jyolsna's profile jyolsna Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version: 6.0
Component: Bundled Theme Keywords: has-patch has-screenshots needs-testing has-testing-info
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:

  1. Activate the Twenty Twenty One theme
  2. Insert Quote block
  3. Enter text and select size

https://www.loom.com/share/eb2d91e3bd90413184308d9f5452e785

Attachments (3)

55991.diff (4.8 KB) - added by deepakvijayan 12 months ago.
Fixes Quote block font size not updating in editor and front end.
ca1ded2c3d89b043495d8bd39b8b62b9.gif (415.5 KB) - added by audrasjb 12 months ago.
Patch appears to work
55991-2.diff (3.8 KB) - added by poena 8 months ago.
Only apply the default font size if there is no user set font size.

Download all attachments as: .zip

Change History (25)

@deepakvijayan
12 months ago

Fixes Quote block font size not updating in editor and front end.

#1 @SergeyBiryukov
12 months 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

@audrasjb
12 months ago

Patch appears to work

#2 @audrasjb
12 months ago

  • Keywords has-patch has-screenshots added

#3 @audrasjb
12 months ago

  • Owner set to audrasjb
  • Status changed from new to accepted

#4 @poena
12 months 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.

Last edited 12 months ago by poena (previous) (diff)

#5 @poena
8 months 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: @poena
8 months 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.

@poena
8 months ago

Only apply the default font size if there is no user set font size.

#7 in reply to: ↑ 6 @jyolsna
8 months 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 @poena
8 months 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.


8 months ago
#9

apply 55991-2 patch and add compiled stylesheets

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

#10 @audrasjb
8 months ago

Alright, this looks good to me.
@poena are we ok to go with this patch?

#11 @ironprogrammer
8 months 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

Figure 1: Editor after patch
https://cldup.com/PGtRB1kMva.png

Figure 1: Frontend after patch
https://cldup.com/SRr6QRAoLG.png

#12 @ironprogrammer
8 months 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 @desrosj
8 months 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.


7 months ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 months ago

#16 @JeffPaul
7 months 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 @poena
2 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 @poena
2 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>
Last edited 2 months ago by poena (previous) (diff)

#19 @ironprogrammer
2 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

Figure 1: Editor
https://cldup.com/tC9u6Ek6uO.png

Figure 2: Frontend
https://cldup.com/8mBqKvNljy.png

Figure 3: Inline style override
https://cldup.com/Pi7GqWe-HR.png

#20 @ironprogrammer
2 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 @suascat_wp
2 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:

https://tinyurl.com/2cnlznrm

Frontend:

https://tinyurl.com/26semu95

Inline:

https://tinyurl.com/28vpe86m

Last edited 2 months ago by suascat_wp (previous) (diff)

#22 @sannevndrmeulen
2 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

Note: See TracTickets for help on using tickets.