Make WordPress Core

Opened 2 years ago

Closed 5 weeks ago

#56109 closed defect (bug) (wontfix)

Twenty Twenty-One: Button font size issue when we change the alignment

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.0
Component: Bundled Theme Keywords: has-patch close 2nd-opinion
Focuses: Cc:

Description

Activate Twenty Twenty one theme.
Take a button block.
Align button to any left, center or right.
Then add font size it should not reflect on button on the editor side it should work properly on the user side.
If you make button alignment to none then this issue will not happen.

I have attached video for better understanding.
Video url :- https://share.cleanshot.com/RM7ldWCN165aUBR4vzxm

Attachments (4)

#56109.patch (633 bytes) - added by kajalgohel 2 years ago.
patch added
56109.1.patch (601 bytes) - added by multidots1896 2 years ago.
added patch
56109.2.patch (668 bytes) - added by devtanbir 2 years ago.
56109.3.2.patch (601 bytes) - added by nidhidhandhukiya 2 years ago.

Download all attachments as: .zip

Change History (15)

@kajalgohel
2 years ago

patch added

#1 @kajalgohel
2 years ago

  • Keywords has-patch added; needs-patch removed

#2 @nidhidhandhukiya
2 years ago

  • Version set to 6.0

@multidots1896
2 years ago

added patch

#3 @SergeyBiryukov
2 years ago

  • Summary changed from Twenty Twenty one theme button font size issue when we change the alignement. to Twenty Twenty-One: Button font size issue when we change the alignment

@devtanbir
2 years ago

#4 @poena
2 years ago

Hi!

Targeting the class .has-custom-font-size on the button like in patch 56109.1 will work better than removing the CSS property in patch 56109.2.

  • This is because removing the CSS property will break existing sites that uses it.
  • Is there a way we can make the selector less specific than in patch 56109.1?
  • The theme uses sass and the CSS files are generated with the build tools and commands listed in the package.json file. This means that the changes need to be made to the .scss files, or the changes will be overwritten.

The correct scss file to update for the button block's editor view is
twentytwentyone/assets/sass/05-blocks/button/_editor.scss

#5 @nidhidhandhukiya
2 years ago

Hello @poena,
As per your suggestion i have applied patch with the given path.
Once we apply this solution we need to run the command.
By opening terminal at this path.
core/trunk/wp-content/themes/twentytwentyone

npm run build:style-editor

Then our css build and automatically add to the style-editor.css

#6 @poena
21 months ago

  • Keywords needs-refresh added

Hi
I apologize for taking so long to get back to this ticket.
In patch 56109.3.2, the wrong file is updated. The change was made to the separator block, not the button.

#7 @karmatosed
2 months ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to Future Release

#8 @karmatosed
6 weeks ago

  • Keywords changes-requested added; needs-refresh removed

This needs to have the correct file updated, just looping back to request that happens.

#9 @karmatosed
5 weeks ago

  • Keywords needs-testing removed

#10 @sabernhardt
5 weeks ago

  • Keywords close 2nd-opinion added; changes-requested removed

The block library styles inherit custom font sizes for Button blocks now (GB43934), and the editor does not have the Left/Center/Right alignment options anymore. I think this ticket could be closed without changing the theme.

Last edited 5 weeks ago by sabernhardt (previous) (diff)

#11 @karmatosed
5 weeks ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Sounds good to me, I am happy to close this thank you.

Note: See TracTickets for help on using tickets.