I cannot replicate align like core audio in edit mode in my custom block

Greetings,

Inspecting elements in the editor I saw that core/image and core/audio (among others) have a wrapper div.wp-block[data-align=”…”] which has a child figure with all the rest of classNames.

In that way, the user can click on the image to give focus to the block and the BlockControls are positioned well (relative to the floating child).

But every one of my custom blocks get the wrapper div with all the classnames and the data-align.

I can′t see in Gutenberg’s code how to replicate the right behaviur.

The only way I can give focus to my block is using the Block navigation tree.

const { BlockAlignmentToolbar, BlockControls } = wp.editor;
const { Component } = wp.element;

wp.blocks.registerBlockType( 'melange/test-aligns', {
	category:    'melangeLayout',
	title:       'Test aligns',
	description: '',
	attributes: {
		align: { type: 'string',  default: null, },
	},
//	supports: { align: true },
	edit: function({attributes, setAttributes}) {
		return <>
			<BlockControls>
				<BlockAlignmentToolbar
					value    = { attributes.align }
					onChange = { align => setAttributes(align) }
				/>
			</BlockControls>
			<p>Hello world!</p>
		</>
	},
	getEditWrapperProps(attrs) {
		return { 'data-align': attrs.align };
	}
});

The whole project is quite complex. I’ve managed with other challenges but this one beats me.

Thanks a lot for your help,
– Albin

• This topic was modified 4 years, 2 months ago by Albin.