Easily Add Custom CSS Styles to WordPress Blocks
We just released something really cool for the WordPress block editor. You can just create your own styles for any block.
For example, I want some blocks with the purple and yellow colors of the PublishPress band. That's super-easy.
Check out this screenshot below. In the right menu, I can pick from dozens of different styles.
You can create these styles using our “Style Builder”. It's all no-code. You can use color pickers for everything. This is free for everyone in the PublishPress Blocks plugin.
Table of Contents
How to Use Block Styles
This Block Styles feature allows you to create custom styles for your WordPress blocks, without any coding knowledge. Here's how to use the Block Styles:
- After installing the PublishPress Blocks plugin, go to the “Blocks” link in the WordPress admin menu.
- Click “Block Styles”.
Let's see an example of how this Style Builder works. We're going to create a block style that uses those PublishPress brand colors.
- Click “Copy” next to the “Blue message” option.
- Enter a new “Style title” and “Class name”.
- Choose an “Identification color”.
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.
- On the “Colors” tab, enter the background and text colors to use for the block, as in this next screenshot:
- After saving your block style, go to edit a post and you can apply your new style to any block. Use the “Block Styles” dropdown in the left sidebar.
More About PublishPress Blocks
There are many more cool features in the PublishPress Blocks plugin. Here are just a few:
- Block Controls: You can control which blocks are visible on your website and who is able see them.
- Block Usage: Search for and find any usage of blocks on your site.
- Reusable Blocks: Create blocks that can be used multiple times across your WordPress site.
- Auto Insert Blocks: Automatically insert reusable blocks into posts. You can choose to insert your blocks according position, categories, tags, and other criteria.
Your Complete Toolkit for the WordPress Block Editor
PublishPress Blocks is the plugin that gives you more control over the WordPress block editor. You get a complete set of management tools for your blocks.
