How to Add Custom Block Styles in WordPress
WordPress is a popular platform for building websites and blogs, and one of its key features is the ability to customize the appearance of different elements, including blocks. Blocks are the building blocks of content in WordPress, and they can be styled in various ways to match the design of your website. In this article, we will explore how to add custom block styles in WordPress and unleash your creativity.
What are Block Styles?
Before we dive into the process of adding custom block styles, let’s briefly explain what block styles are. According to the official Gutenberg documentation, block styles are alternative styles that can be applied to existing blocks. They work by adding a className to the block’s wrapper, which can be used to provide an alternative styling for the block if the block style is selected. In other words, block styles are options that users can click on when editing a block, injecting a classname to the block that can be referenced via CSS.
Why Register Custom Block Styles?
Now that we understand what block styles are, you might be wondering why you should bother registering custom block styles. Well, registering custom styles allows you to have different designs for your blocks that can be used in different contexts. For example, if your website has a white background and you insert a white picture in a post, it may not stand out. By registering a “Bordered” style for the Image block that adds a gray border around the image, you can make it pop and enhance its visibility.
In addition to enhancing the visual appeal of your blocks, registering custom block styles also simplifies the process of applying custom designs to blocks. Instead of relying on remembering class names and adding custom classnames for each block, registering custom block styles provides an easy and user-friendly way to apply custom designs to blocks.
How to Register a New Block Style
Now, let’s get into the technical details of how to register a new block style in WordPress. For the purpose of this guide, we will focus on server-side registering of custom styles using PHP instead of JavaScript, as it is easier and faster for most users.
To register a new block style with PHP, you will use the “register_block_style” function, which takes two arguments: $block and $style_properties. The $block argument specifies the block you want to add your styles to, and the $style_properties argument is an array that defines the style properties. For example, to add a new “Plain” style to the List block, you can use the following code:
“`php
function wpexplorer_register_block_styles() {
register_block_style(‘core/list’, [
‘name’ => ‘list-plain’,
‘label’ => ‘Plain’,
]);
}
add_action(‘init’, ‘wpexplorer_register_block_styles’);
“`
With this code added to your site, you will see a new option to select a “Plain” style when inserting a new list block.
How to Register Multiple Block Styles
If you want to add multiple styles to a block, you can use the “register_block_style” function for each style. However, if you are registering a large number of styles, it is recommended to create an array of the styles you want to register and loop through them. This approach keeps your code slim and avoids repetition.
Here is an example of using an array to register multiple block styles:
“`php
function wpexplorer_register_block_styles() {
$styles = [
‘core/list’ => [
[
‘name’ => ‘list-inside’,
‘label’ => ‘Inside’,
],
[
‘name’ => ‘list-square’,
‘label’ => ‘Square’,
],
[
‘name’ => ‘list-checkmark’,
‘label’ => ‘Checkmark’,
],
],
‘core/button’ => [
[
‘name’ => ‘button-three-d’,
‘label’ => ‘Three-D’,
],
],
];
foreach ($styles as $block => $style_props) {
register_block_style($block, $style_props);
}
}
add_action(‘init’, ‘wpexplorer_register_block_styles’);
“`
With this code, you will see three extra styles added to the list block, as well as a new style added to the button block.
Writing Slimmer Code
While the previous example demonstrates how to register multiple block styles using an array, you can further optimize your code by creating a function that handles the registration of styles. This approach follows the DRY (Don’t Repeat Yourself) principle and keeps your code clean and manageable.
Styling Your Block Styles with CSS
Registering custom block styles allows you to define the appearance of your blocks, but it doesn’t automatically change their visual representation. To apply custom styles to your blocks, you need to add CSS to your site that targets your custom styles.
When you select a block style in the Gutenberg editor, WordPress inserts a classname in the format “is-style-{name}” into the block’s class attribute. You can use this classname to target the block and apply custom CSS to it.
For example, let’s say you registered a custom “Checkmark” style for the List block. You can add the following CSS to your site to apply a custom checkmark design for your list:
“`css
@counter-style checkmark {
system: cyclic;
symbols: “2713”;
suffix: ” “;
}
.wp-block-list.is-style-list-checkmark {
list-style: checkmark;
}
“`
By adding this CSS to your theme’s style.css file, the WP custom CSS customizer field, or via a plugin, you will see your list styled correctly on the frontend.
To ensure that your custom block styles are styled consistently in both the backend and frontend, it is recommended to register your CSS along with your styles. You can do this by either loading a custom stylesheet or using inline CSS.
Conclusion
Adding custom block styles in WordPress allows you to unleash your creativity and customize the appearance of your blocks. By registering custom block styles using PHP, you can easily apply different designs to blocks and enhance the visual appeal of your website. Additionally, styling your block styles with CSS ensures that your custom designs are consistently applied in both the backend and frontend.
With the knowledge and techniques shared in this article, you can take your WordPress website to the next level by creating unique and visually stunning block styles that make your content stand out. So go ahead, explore the possibilities, and let your creativity shine!
