Twenty Eleven: Width issue in Button block

[kajalgohel]

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

[hilayt24]

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

[ankitmaru]

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

[kajalgohel]

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

[samuelpress]

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.