Make WordPress Core

Opened 9 months ago

Last modified 2 months ago

#56554 new defect (bug)

Twenty Eleven: Width issue in Button block

Reported by: kajalgohel's profile kajalgohel Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.0.2
Component: Bundled Theme Keywords: needs-patch dev-feedback
Focuses: ui, css, administration Cc:

Description

In Twenty Eleven Theme, when we add Button block in editor side and change the Width settings of Button, we can see that the Width is not reflected in editor side.

Steps to replicate:
1: Activate the Twenty Eleven Theme
2: Add Button block
3: Choose Width from Width settings
4: View the page/post at editor side
5: Save Page/Post
6: View the page/post at front side

For better understanding I provide video attachment link.
Video link: https://share.cleanshot.com/SPJat9VXVPA8lMQUfZlD

Thanks

Change History (4)

#1 @hilayt24
9 months ago

  • Keywords reporter-feedback added; needs-patch removed

Hi @kajalgohel, Thanks for the ticket. But I can't reproduce the issue in the latest version, Can you please confirm? I am attaching the video for the same.

https://www.awesomescreenshot.com/video/11050758?key=6da3e35cb5e5f67233374665bc564d6a

#2 @ankitmaru
8 months ago

Hi @kajalgohel I am also not able to reproduce the issue in the latest package.

#3 @kajalgohel
8 months ago

  • Keywords needs-patch added; reporter-feedback removed

Hello @hilayt24, @ankitmaru

This issue is happening while we change the alignment of button block.
For better understanding I provide video attachment link.

Video URL: https://share.cleanshot.com/xFpM2ryqzOzPzn9MbPwg

Thanks

#4 @samuelpress
2 months ago

  • Keywords dev-feedback added

I am able to reproduce this on WordPress version 6.1.1 running the twenty eleven theme. https://share.getcloudapp.com/bLuleNQD

It seems in older themes, the block button was centered by introducing a wrapper element to apply the alignment https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-list/block.js#L182.

Here we have the css that applies the width styles to the block https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/button/style.scss#L41, the css doesn't work because of the specificity.

An easy way to fix it would be to add another declaration that takes the wrapper element into account. Unless there's something I'm missing.

Note: See TracTickets for help on using tickets.