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

The code referenced in this post is also available on GitHub: 

You’ll want to have a basic understanding of CSS to follow along. Being comfortable with theme.json is also key, and knowing a bit about PHP and WordPress hooks will definitely come in handy.

To follow along or use the example code, you can use Studio, our free and open source local development environment, available for Mac and Windows.

1. What are custom block styles?
2. Method 1: add a block style via a JSON file (/styles folder) 
3. Method 2: register block style in PHP and style it via theme.json
   1. Register block style 
   2. Add styling to theme.json
4. Method 3: add a block style with register_block_style() (PHP)
   1. 3a. Use the style_data parameter
   2. 3b. Use the inline_style parameter
   3. 3c. Use the style_handle parameter
5. Method 4: register block styles using JavaScript + CSS
6. Optional: removing unwanted core block styles
7. Summary: custom block styles at a glance
8. Resources to learn more

What are custom block styles?

Custom block styles let you define alternative visual treatments for existing blocks, like adding a border, changing the background, or tweaking typography. 

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