Using CSS custom properties in a block.

[mburridge]

The Block Supports API allows you add colour and spacing settings to your block with a simple definition in block.json. However, this only allows "block level" styling, and is fine for simple blocks. If your block is more complex and consists of a hierarchy of HTML elements which need to be styled using the CSS cascade, and you want to allow users to have control over that styling, then another solution needs to be sought.

This solution is not immediately obvious and involves using CSS custom properties (also called CSS variables) which get their values from the block attributes and passes them to the block's wrapping element's useBlockProps hook. A similar task can be done with render.php in a dynamic block, where the CSS custom properties are instead passed to the get_block_wrapper_attributes function.

The proposed post is a tutorial that illustrates using CSS custom properties in a block project.

[mburridge]

Resources: https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/

[ndiego]

@mburridge this article should probably also cover the new Selectors API. This will be included in 6.3 and is a more official way to apply block support styles to different elements of a block.

[bph]

Conversation locked after. Continue discussion on the issue

• Using CSS custom properties in a block. #124

[mburridge]

Now published: Styling blocks: empowering users with CSS custom properties