Twenty Nineteen: Button block size is not changing when we trying to change using block setting.

[viralsampat]

Hello,

I have reviewed the "Button block" and found that its size is not changing when we are trying to change button width using block setting.

Here, I have attached its video.
Issue: ​https://share.cleanshot.com/tn6SMppzqfWDCxdlZTgd

Environment info:

---

• WordPress version: WordPress 6.5-beta2 running,
• Theme: Twenty Nineteen Version: 2.7
• Browser: Google Chrome, Version 123.0.6312.87 (Official Build) (arm64)
• Device: MacBook Air M1
• OS: macOS 14.4.1 (23E224
• Gutenberg plugin: Version 18.0.0

Thanks,

[poena]

Thank you for the report.

I can reproduce this on 6.6 alpha, 6.5.0, and 6.4.3. Theme version: 2.8. No plugins active.
I can only reproduce it when the custom fields UI is enabled/opened, so when the editor is not iframed.

The 100% width button shows correctly in the editor and front, but the 25, 50 and 75 are using the wrong width in the block editor.

The CSS for the button widths is overwritten.
I am using the 75% wide button in the example:

.editor-styles-wrapper .wp-block .wp-block {
    width: initial;
}

.wp-block-buttons>.wp-block-button.wp-block-button__width-75 {
    width: calc(75% - var(--wp--style--block-gap, .5em)* .25);
}

From the themes editor.scss file:

/** === Content Width === */

.wp-block {
	max-width: 100%;

	@include media(tablet) {
		width: calc(8 * (100vw / 12));
	}

	@include media(desktop) {
		width: calc(6 * (100vw / 12 ));
	}

	// Only the top level blocks need specific widths, therefore override for every nested block.
	.wp-block {
		width: initial;
	}
}

[sabernhardt]

Thanks! This is already tracked on #58099.