Skip to content

block.json: Expose supports > layout via block attributes and allow it to be overwritten #53094

@danieldudzic

Description

@danieldudzic

What problem does this address?

In my custom block, I'm trying to control the block layout by utilizing the core blocks, without introducing unnecessary complexity/nesting.

For now, I am using a Group block wrapper, which I am changing based on the block settings selected.

255547514-33097810-554d-4f97-b21a-297d4a2e33ce

I wish I could utilize:

{
	"supports": {
		"layout": {
			"default": {
				"type": "flex",
				"flexWrap": "nowrap"
			}
		}
	}
}

and then just update the layout via edit.tsx in the same manner I'm doing with the Group block attributes:

const block = select( 'core/block-editor' ).getBlock( clientId );
	block?.innerBlocks.forEach( ( innerBlock ) => {
		if ( innerBlock.name === 'core/group' ) {
			const updatedBlock = {
				...innerBlock,
				attributes: {
					...innerBlock.attributes,
					layout: setGroupAttributes( attributes.thumbnailsPosition ),
				},
			};
			dispatch( 'core/block-editor' ).updateBlock(
				innerBlock.clientId,
				updatedBlock
			);
		}
	} );


This would enable the same functionality, without the unnecessary Group block wrapper.

What is your proposed solution?

Expose the "supports": { "layout": {} } via block attributes proving a way to update them.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions