Make WordPress Core

Opened 2 years ago

Closed 7 months ago

#56554 closed defect (bug) (worksforme)

Twenty Eleven: Width issue in Button block

Reported by: kajalgohel's profile kajalgohel Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.0.2
Component: Bundled Theme Keywords: close
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

Attachments (1)

SCR-20240412-rqga.png (52.3 KB) - added by karmatosed 7 months ago.
Aligned button

Download all attachments as: .zip

Change History (7)

#1 @hilayt24
2 years 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
2 years ago

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

#3 @kajalgohel
2 years 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
20 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.

#5 @karmatosed
7 months ago

  • Keywords close added; needs-patch dev-feedback removed

This seems to be working as I will show in screenshots for me. I tested in Twenty Eleven and as you can see 100% created a 100% button to test. I also did the following to check alignment:

  • Made a 50% button.
  • Aligned text.
  • Aligned the button itself.

Now, if this is a case of needing more steps and others can reproduce please provide. However in the recent version of WordPress this doesn't seem to be an issue for me, so I am going to cautiously add a close keyword to this until we have those steps.

@karmatosed
7 months ago

Aligned button

#6 @karmatosed
7 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

I am going to close this for now, thank you everyone for your collaboration.

Note: See TracTickets for help on using tickets.