^{Originally posted by mburridge May 31, 2023}
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.