Unlock Hidden Power: 6 Little-Known Ways to Master Custom Block Styles in WordPress

This method produces the same editor and frontend results as using a JSON file in the /styles folder:

• The style will be visible in the editor and on the frontend. 
• It is also available via the Editor → Styles → Blocks → Image section for global customization.

If the styles available in theme.json aren’t enough, you have a few options: 

• You can use the CSS property in JSON notation. The WordPress.org per-block CSS with theme.json article provides a good summary of how to do this. 
• You can use any of the methods below and add them to your functions.php file. 
• You can register the block style via register_block_style() and include the CSS in your theme’s overall style.css file, referencing the block and style class name. That being said, this is not recommended as these styles will always load, even if the block isn’t in use. A bug is also preventing the styles from loading on the frontend.
• You can use block stylesheets to only load the styles when the block is used, as outlined in the WordPress Theme handbook tutorial on block stylesheets. 

Method 3: add a block style with register_block_style() (PHP)

The register_block_style() function has three additional and optional parameters. They are listed on the documentation page for the WP_Block_Styles_Registry class that handles the registration and management of block styles.

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28