Opened 2 years ago
Closed 7 months ago
#56554 closed defect (bug) (worksforme)
Twenty Eleven: Width issue in Button block
Reported by: | 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)
Change History (7)
#3
@
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
@
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
@
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.
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