Support adding classes to BlockListBlock in editor.BlockListBlock filter

[oxyc]

Is your feature request related to a problem? Please describe.

I'm creating a plugin that adds support for background colors to all blocks.

Describe the solution you'd like

It would be useful if there was a separate property for the wrapperClassName where you can extend the list. For example:

		const wrapperClassName = classnames( 'editor-block-list__block', {
			'has-warning': ! isValid || !! error,
			'is-selected': shouldAppearSelected,
			'is-multi-selected': isMultiSelected,
			'is-hovered': isHovered && ! isEmptyDefaultBlock,
			'is-shared': isSharedBlock( blockType ),
			'is-hidden': dragging,
			'is-typing': isTypingWithinBlock,
                        [ this.props.wrapperClassName ]: !! this.props.wrapperClassName,
		} );

Describe alternatives you've considered

At the moment the only way is to apply classes is to override className through wrapperProps but then you need redefine all the above classes making it very unstable.

What I currently opt for is providing the classes data-* attributes like align does but that means that themes need additional styling rather than just has-*-background-color.

[2one2]

I agree, styling with data attributes is not the best approach.

My proposed solution:

wrapperClassName

const editWrapperClassNames = blockType.getEditWrapperClassNames( block.attributes ) || '';

const wrapperClassName = classnames( 'editor-block-list__block', {
	'has-warning': ! isValid || !! error,
	'is-selected': shouldAppearSelected,
	'is-multi-selected': isPartOfMultiSelection,
	'is-hovered': isHovered && ! isEmptyDefaultBlock,
	'is-shared': isSharedBlock( blockType ),
	'is-hidden': dragging,
	'is-typing': isTypingWithinBlock,
        editWrapperClassNames,
} );

Block Configuration

getEditWrapperClassNames( attributes ) {
	const { color } = attributes;
	if ( 'light' === color ) {
		return [ 'color-light', 'background-dark' ];
	} else {
		return 'color-dark';
	}
},

[chrisvanpatten]

@aduth also proposed another idea which I really like in this comment: #7841 (comment)

[youknowriad]

The BlockListBlock supports a className prop now, so this is possible now. Thanks.

[mahdiyazdani]

@youknowriad Would you mind clarifying in which version className prop has been added?

[youknowriad]

I can't tell for sure, as it proved to be hard to navigate the history of that file but i can see that it's there for more than 6 months.