Replies: 4 comments 3 replies
-
I believe we need to opt out the serialization on the wrapper by using the 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 I have tried this myself on my custom static block with the same approach, but somehow I also couldn't get them to work 🥲 Probably there are some steps missing that we accidentally skipped? 🤔💭 |
Beta Was this translation helpful? Give feedback.
-
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.
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>
);
} |
Beta Was this translation helpful? Give feedback.
-
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.
I don't see why this would be better than my method. You use |
Beta Was this translation helpful? Give feedback.
-
className of On the other hand, the advantage of
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. |
Beta Was this translation helpful? Give feedback.
-
I use "selectors" in my block.json definition like so:
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.2Beta Was this translation helpful? Give feedback.
All reactions