Twenty Twenty: Calendar block does not apply font size from block option

[nidhidhandhukiya]

Steps to reproduce the issue.

1. Activate Twenty Twenty theme.
2. Choose Calendar block.
3. Change the font size.

Now check the both the side editor and frontend.
You can able to see that whatever the font size you have choosen that is applied n editor side but there is no difference in font size in the front side.

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

[yuvrajsinh2211]

Testing of: https://core.trac.wordpress.org/attachment/ticket/59996/59996.patch

Tested in the below environment:

PHP: 8.1.9
WordPress: 6.4
Theme: Twenty Twenty
Browser: Chrome
Plugin: No plugins

---

Before Patch Screenshot:

Backend: ​https://prnt.sc/4WqBl0Q9wpid
Frontend: ​https://prnt.sc/QQCKgIgFh01k

---

After-Patch Screenshot:

Backend: ​https://prnt.sc/pw4lvLtWm1xY
Frontend: ​https://prnt.sc/c9noJG3wvc0m

After the patch, you can see the difference in font size on the front side.

As tested, Patch is working properly.

[anveshika]

Patch Used - https://core.trac.wordpress.org/attachment/ticket/59996/59996.patch

Environment-

OS: Windows 10
Web Server: Apache/2.4.57 (Ubuntu) mod_fcgid/2.3.9 OpenSSL/1.1.1f
PHP: 8.0.29
WordPress: 6.4.2
Browser: Google Chrome
Theme: Twenty-Twenty

Before Patch-
After Patch-

Test result-

The patch works as expected.

[sabernhardt]

before the patch, the font size for any Calendar block is 1.8rem at a screen width larger than 700 pixels

[sabernhardt]

with the patch, the default font size increases to 2.1rem while custom sizes are supported

[sabernhardt]

Related: #56157

Since its initial version, Twenty Twenty has specified ​a smaller size for tables, either 1.6rem for small screens or 1.8rem for screens wider than 700 pixels.

If the Calendar block is ever inserted inside a post, inherit would increase the font size for any Calendar block that does not specify its own size. The .entry-content class sets the size at 1.8rem or 2.1rem for larger screens.

In the widget area, where the Calendar block usually belongs, the proposed change would set the default font size to 1.8rem for all screens.

To avoid unexpected changes, the patch should only apply when the user selects a font size for the block.

[darshitrajyaguru97]

Test report for https://core.trac.wordpress.org/attachment/ticket/59996/59996.patch

Environment:
===========
PHP: 8.1.9
WordPress: 6.4
OS: Windows
Server: nginx
Theme: Twenty Twenty
Plugin: No Plugin

Screenshots:
Before Patch
Backend: ​https://prnt.sc/-tPBJjH7qnNB
Frontend: ​https://prnt.sc/ArS10T9x-yTS

After Patch
Backend: ​https://prnt.sc/-tPBJjH7qnNB
Frontend: ​https://prnt.sc/8hcvdm6OeK77

After Applying patch it's working well.

[shailu25]

Patch Updated

[shailu25]

Updated Patch as per suggested in above comment.

[karmatosed]

Unfortunately, there seems to be something up with the current patch applying, so I'm going to suggest it is checked for refresh; thanks.

[shailu25]

Updated Patch.

[shailu25]

@karmatosed I have Updated Patch.

[karmatosed]

@shailu25 does your patch take into account the update by @sabernhardt though? Unless I am mistaken it might not. I am referring to this specifically.

If the Calendar block is ever inserted inside a post, inherit would increase the font size for any Calendar block that does not specify its own size. The .entry-content class sets the size at 1.8rem or 2.1rem for larger screens.

[shailu25]

@karmatosed font-size: inherit Will apply only when custom font size selected in the backend side Calendar Block (As per @sabernhardt Suggested)

.wp-block-calendar[class*="-font-size"] table,
.wp-block-calendar[style*="font-size"] table {
	font-size:inherit;
}

else It will show default font size.

[sabernhardt]

Thanks! Patch 3 does what I had suggested, though I disagree with the placement and the changes might not be complete.

• These styles would fit best in the Blocks section, between Button and Columns block styles.
• In addition to the table element, the navigation probably should inherit the same font size.
• The rule should include a space after the colon.
• The /* Block ---- */ section-header comments are set to the same length (adding or removing hyphens as necessary) in Twenty Twenty.

[sabernhardt]

inherits font size for both table and navigation when Calendar block specifies a different size

[sabernhardt]

I'll reopen #56157 for the Table block.

[karmatosed]

In 58819:

Twenty Twenty: Calendar and Table blocks do not apply custom font size.

This fixes adding a custom font size to a Calendar and Table block. This was only an issue for custom font size entering.

Props nidhidhandhukiya, yurajsinj2211, ankit-k-gupta, anveshika, sabernhardt, darshitrajyaguru97, shailu25, umesh84, SergeyBiryukov.
Fixes #59996, #56157.

[karmatosed]

Thank you everyone, I tested it and moved to commit. I also closed the table block one with a note on commit as a result.

[yuvrajsinh2211]

@karmatosed you have mentioned my wrong username (yurajsinj2211)

My Correct Username is yuvrajsinh2211

[sabernhardt]

My Correct Username is yuvrajsinh2211

Your username is corrected in Core props for both [58819] and [58907].