The Style Builder is part of the Block Styles feature. The Style Builder allows you to create custom styles for your WordPress blocks, without any coding knowledge.
The settings are divided into the following tabs. Colors, Spacing, Typography, Layout, and Border are available in the Free version of the PublishPress Blocks plugin. Text, Headings, Links, Media, Containers, and Interactive are available in the Pro version of the plugin.
Let's see an example of how this Style Builder works. Imagine that we're going to create a block style that uses the PublishPress brand colors.
- Click “Copy” next to the “Blue message” option.
- Enter a new “Style title” and “Class name”.
- Choose an “Identification color”.
- Enter the background and text colors to use for the block, as in this next screenshot:
You can click on the other tabs to add more customizations. In the screenshot below, I've opened the “Spacing” tab and entered a “Padding” option of 20px. This is now a block style that I can apply to any block on this WordPress site.
If you want to avoid the Style Builder and write your own CSS, you can do that via the “Custom CSS” tab.
After saving your block style, go to edit a post and you can apply your new style to any block:
