Skip to content

Block layout: Wide and Full are not available for custom container blocks if __experimentalLayout: constrained is used #43731

@CreativeDive

Description

@CreativeDive

Tested in Gutenberg 14 RC2.

The wide and full options for the inner blocks will only appear if a content width is defined, which can be done by the theme, in the global styles interface or on the block itself.
Check if your theme's theme.json has something like "layout": { "contentSize": "840px", "wideSize": "1100px"} in its settings object. If it doesn't, and you haven't defined content sizes anywhere in the block or the global styles editor, then "wide" and "full" options won't appear for children.

@tellthemachines thank you, it's very important to know how the things should be working to test if everything is working fine or not.

Now I can get you the full bug report.

Test Case 1: Custom container block

  1. "layout": { "contentSize": "840px", "wideSize": "1100px"} is set in theme.json.
  2. "__experimentalLayout": { "type": "constrained" } is set in the block.json inside the support object.
  3. Add a new block (in that case my custom container block).
    ----> "Inner blocks respect content width" is NOT enabled by default.
    ----> Is this a bug ? 🐛

Test Case 2: Custom container block

  1. Same like in test case 1.
  2. But additionally "attributes": { "layout": { "type": "object", "default": { "type": "constrained" } } }, is set in the block.json
  3. Add a new block (in that case my custom container block).
    ----> "Inner blocks respect content width" is enabled by default.
  4. Copy the block and look inside the block code:
    ----> The block code does not contain"type":"constrained"
    --------> I think that is correct and expected.

Test Case 3: Custom container block

  1. Same like in test case 1.
  2. But additionally "attributes": { "layout": { "type": "object", "default": { "type": "constrained" } } }, is set in the block.json
  3. Add a new block (in that case my custom container block).
    ----> "Inner blocks respect content width" is enabled by default.
  4. Set a custom content size in the sidebar field.
    ----> The inner blocks get the width from the content size field
  5. Copy the block and look inside the block code:
    ----> The block code contains "type":"constrained"
    --------> I think that is correct and expected.
  6. Add a core/cover block to the inner block component of this block.
  7. You say when a content size is entered, "wide" and "full" should be available for child blocks. I wish it would be like this.
    ----> But it does not work! It seems it's a BUG! 🐛 ‼️

Bildschirmfoto 2022-08-30 um 08 16 26

I will now test the same with the core/group block to see a comparison.

Originally posted by @CreativeDive in #33374 (comment)

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] LayoutLayout block support, its UI controls, and style output.[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions