Can't get block selectors to work

[Lovor01]

I use "selectors" in my block.json definition like so:

{
...
	"selectors": {
		"root": ".makeiteasy-popup-wrapper",
		"color": ".makeiteasy-popup-wrapper"
	},
}
...

although .makeiteasy-popup-wrapper class is defined inside block, background-color and color selectors (has-xxx-background-color etc.) are applied to root element. Did I misunderstand something? I am using WP 6.5.2

[fukou]

I believe we need to opt out the serialization on the wrapper by using the __experimentalSkipSerialization support flag, as per this comment by Aaron (source: https://make.wordpress.org/core/2023/07/17/introducing-the-block-selectors-api/#comment-45243).

The example can be seen here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/image/block.json#L109.

Notice that the border and shadow are using the __experimentalSkipSerialization: true. After that, on the selectors, they define the custom class to directly apply the styles to the respective element.

---

I have tried this myself on my custom static block with the same approach, but somehow I also couldn't get them to work 🥲
Someone else is also having the same issue (source: https://wordpress.org/support/topic/block-json-selectors-support/#post-17515043).

Probably there are some steps missing that we accidentally skipped? 🤔💭
We need someone to confirm this!

[Lovor01]

I think this should be raised to issue then.

Until then, I suggest workaround which I did:

1. destructure useBlockProps (e.g. classNames
2. divide classes into ones that should be applied to root element and ones which should be applied to some inner element (e.g. the ones starting with has-):

...
        const { className, style, ...restprops} = props

	const classes = className.split( ' ' );
	const classesWithoutHas = [],
		classesWithHas = [];
	for ( const singleClass of classes ) {
		if (
			singleClass.substring( 0, 4 ) === 'has-' ||
			singleClass.substring( 0, 5 ) === 'align'
		)
			classesWithHas.push( singleClass );
		else classesWithoutHas.push( singleClass );
	}
...

3. apply selected classes and style element to inner element of choice, the rest to root block element

[t-hamano]

From what I understand, the Block Selectors API is primarily used in Global Styles, when you want to generate CSS selectors for something other than a wrapper element.

If you want to apply block support styles to something other than wrapper elements in individual blocks, the Selectors API should not be relevant.

I think the following two points are important.

• Set __experimentalSkipSerialization to true for block support that you do not want to be applied to the wrapper element
• Use hooks or functions to get the class name and style object and apply it to any element

Below is an example of skipping the serialization of color support and applying it to the elements inside instead. There is no need to destructure useBlockProps or divide classes.

block.json:

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/test",
	"title": "Test",
	"supports": {
		"color": {
			"text": true,
			"__experimentalSkipSerialization": true
		}
	}
}

edit.js:

import classnames from 'classnames';
import { useBlockProps, __experimentalUseColorProps as useColorProps } from '@wordpress/block-editor';

export default function Edit( { attributes } ) {
	// Get the class name and style of the applied color
	const colorProps = useColorProps( attributes );

	// Since `__experimentalSkipSerialization` is true,
	// class names and styles related to color are not included here.
	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			<div
				// Apply color class names to the child element
				className={ classnames(
					'child-element',
					colorProps.className
				) }
				// Apply color styles to the child element
				style={ colorProps.style }
			>
				Child Element
			</div>
		</div>
	);
}

save.js

import classnames from 'classnames';
import {
	useBlockProps,
	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
} from '@wordpress/block-editor';

export default function save( { attributes } ) {
	// Get the class name and style of the applied color
	const colorProps = getColorClassesAndStyles( attributes );

	// Since `__experimentalSkipSerialization` is true,
	// class names and styles related to color are not included here.
	const blockProps = useBlockProps.save();

	return (
		<div { ...blockProps }>
			<div
				// Apply color class names to the child element
				className={ classnames(
					'child-element',
					colorProps.className
				) }
				// Apply color styles to the child element
				style={ colorProps.style }
			>
				Child Element
			</div>
		</div>
	);
}

[fukou]

Ah, understood! Thank you very much for your detailed explanation. I really appreciate it.

I had misunderstood the use of the Block Selectors API; I initially thought that by simply using the "selectors" inside the block.json, it would automatically apply the generated CSS to the element I've defined!

So apparently, I still need to use hooks/functions to get the class name to apply to the element other than a wrapper element 😅

[Lovor01]

After subsequent reading and thinking it over, I would say block selectors api affect where global styles defined in theme.json will be placed. And it seems it does not affect when you set some support feature (e.g. margin, color, padding, ...) on block instance in block editor. I would expect that it should work for both.

• Set __experimentalSkipSerialization to true for block support that you do not want to be applied to the wrapper element
• Use hooks or functions to get the class name and style object and apply it to any element

I don't see why this would be better than my method. You use __experimentalSkipSerialization and __experimentalUseColorProps which are experimental props and not guaranteed to work in future versions. My method is more futureproof.

[t-hamano]

I don't see why this would be better than my method.

className of useBlockProps contains all class names. Therefore, you will not be able to add a class name that includes has or align to the block wrapper div.

On the other hand, the advantage of useColorProps hooks etc. is that they can only extract class names generated purely by their block support.

You use __experimentalSkipSerialization and __experimentalUseColorProps which are experimental props and not guaranteed to work in future versions.

My understanding is that anything already in core will remain backwards compatible in the future, even those with the "__experimental" prefix. However, I'm not sure if this has been officially decided, so I'll look into it.

[Lovor01]

yes, className of useBlockProps contains all class names - that's why I created a function (I pasted it above) which divides classes into two groups, one with has and align and teh other one without. After that, you can add each group on whatever element you want.