HTML block: The dimensions UI is displayed when the does not support Dimensions.

[shimotmk]

Description

The UI is displayed in a block that does not support Dimension.

Step-by-step reproduction instructions

1. Paste the code below into the block editor.

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:html -->
Custom HTML
<!-- /wp:html --></div>
<!-- /wp:group -->

2. Click on the custom HTML block and the Dimension panel is displayed.

3. The values set in the Dimension panel are not saved and have no effect in the front end.

Screenshots, screen recording, code snippet

dimension.mp4

Environment info

WordPress 6.2.2
Gutenberg 16.0.0
Twenty Twenty-Three 1.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

Thanks for reporting @shimotmk. I have confirmed and am going to add this to the 6.3 Project Board.

[Mamaduka]

I believe this is a new feature and not a bug. See #45364 and #44467.

The dev note and user documentation are still pending.

[ndiego]

I believe this is a new feature and not a bug. See #45364 and #44467.

Yeah, this is true, but the HTML block us unique in that these settings will not work with it. The frontend is just what's placed in the HTML block, there is no wrapper.

[ramonjd]

I'm thinking something like "layout": false," in html/block.json should disable this. It should, but it doesn't 😄 I tried.

[shimotmk]

This bug applies not only to HTML blocks Shortcode or Classic or It's happening in a custom block.

[ramonjd]

I did play around with this yesterday, by adding a specific property to the block.json, e.g.,

"layout": {
    "allowSizing": false,
}

It needs a further check in the dimensions hook (packages/block-editor/src/hooks/dimensions.js) and component (packages/block-editor/src/components/global-styles/dimensions-panel.js). I'm not sure if this is the right approach.

It's not easy to grok for me, due to the semantic contradiction though, which flows through to the supports components. "allowSizingOnChildren": true is a layout flag, but it's controlling something in the dimensions panel.

[tellthemachines]

The dev note and user documentation are still pending.

The dev note was published here during the 6.2 cycle. I'm not sure what user documentation would be required or where it would have been published.

[tellthemachines]

Regarding the actual problem 😄 custom HTML is a bit of an edge case, in that its editor presentation doesn't match the front end and it doesn't necessarily have a single container.

I guess this will require some sort of off-switch for the child layout controls, but it's not fully clear where they should reside. The display of these controls is decided by the parent block (for all of its children) inside the layout support, thought the controls themselves display as part of the dimensions panel.

This might also be impacted by the changes in #49459.

[tellthemachines]

I'm going to remove this from the 6.3 board because it's not a regression from this release, but an edge case tied to an existing feature.

[shimotmk]

It looks like this bug can be fixed!
Could someone please take a look at this PR?
#53092