Unlock Hidden Power: 6 Little-Known Ways to Master Custom Block Styles in WordPress
Once you save your code changes:
- Your new style is added to the Styles panel for that particular block.
- The block editor shows a preview when you hover over the button.
- The Styles engine attaches the CSS class
is-blue-border
to the block in the editor and on the frontend. - When opening the Global Styles via Styles → Blocks → Image, the styles can be changed by the user for the whole site.
To organize your block style code, you can create a subfolder in the styles folder called /blocks
and keep them all together. A few theme developers found they could reduce the length of their functions.php
file considerably by implementing subfolders instead.