Skip to content

Allow blocks to handle align as a classname instead of a wrapper block #31201

@dougwollison

Description

@dougwollison

What problem does this address?

Currently, if a block offers alignment handling, it wraps the block in a [data-align] div, regardless of if the block supports the light wrapper. This breaks any styling that relies on a block's placement in a container or relation to other blocks (e.g. first/last child, or proceeding a sepcific other block).

What is your proposed solution?

Either an alignWrapper support flag, or have the align support accept an object with the values and withWrapper specified (would also potentially allow additional alignment-related rules to be specified). This would then tell the with-data-align hook to apply it as a classname rather than wrapperProps.

The former is how I'm patching it in on a project, as a BlockListBlock filter that runs just before withDataAlign, removing the align proper from wrapperProps and adding it as a class instead.

addFilter( 'editor.BlockListBlock', 'premise/no-align-wrapper', createHigherOrderComponent( BlockListBlock => props => {
	const { name: blockName, className, wrapperProps, ...otherProps } = props;
	const alignWrapper = hasBlockSupport( blockName, 'premise/noAlignWrapper', true );

	if ( wrapperProps && ! alignWrapper ) {
		// extract the align value
		const { 'data-align': align, newWrapperProps } = wrapperProps;

		// add it a classname
		let newClassName = className;
		if ( align ) {
			newClassName = classnames( className, `align${ align }` );
		}

		// use the new classname + wrapper props, sans data-align
		return <BlockListBlock
			{ ...otherProps }
			name={ name }
			className={ newClassName }
			wrapperProps={ newWrapperProps }
		/>;
	}

	return <BlockListBlock { ...props } />;
} ), 9 );

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