Make WordPress Core

Opened 8 weeks ago

Closed 9 days ago

#60885 closed defect (bug) (duplicate)

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

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: ui, css, administration Cc:

Description

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,

Change History (2)

#1 @poena
8 weeks ago

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;
	}
}

#2 @sabernhardt
9 days ago

  • Keywords dev-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Thanks! This is already tracked on #58099.

Note: See TracTickets for help on using tickets.