Have you ever feel the need to expand the possibilities of your editor and add some custom styles to the elements? Whether you want to broaden the customization in WordPress widely or simply add paddings, Gutenberg provides you with additional free WordPress customizer CSS options.
From this quick and simple tutorial, you will learn how to do customization in WordPress and style the Gutenberg blocks and how it is related to the reusable blocks.
First and foremost, Gutenberg native WordPress editor provides you with a free opportunity to add various CSS classes to blocks or groups of blocks. After that, you can use these classes in Customizer to style elements.
Reusable Gutenberg blocks
Reusable blocks are used in Gutenberg to literally reuse one block in a few places at once. This tool is quite useful if you have a CTA block that you need to place on various pages.
We have a simple block that consists of an image and text block. Give your block a CSS class, which you will use to add styles in Customizer.
Now let’s create a reusable block from the cover one. Firstly, you have to click on the three-dotted icon and press the “Add to Reusable blocks” text.
Give a name to your block. Don’t worry, you can change the name in no time by simply clicking on the “Edit” button.
Customization in WordPress
If you want to change the appearance of any Gutenberg block, you can easily override the default styles of your theme. Now that you have a block, which you want to edit, you have to open WordPress customizer.
Once you open the Additional CSS tab, you will see an editor area, where you will write the name of the class you want to style (don’t forget to write “.” before the name od the class) and the style properties.
WordPress customizer CSS properties
Let’s have a simple talk about the CSS tools and attributes. As you have already learned, CSS has the widest variety of properties, which is only growing day by day. It will take hours trying to describe and talk about all the CSS tools, however, we can divide them into groups and highlight the biggest ones:
- text and fonts;
- colors and backgrounds;
- the box model: margins, padding, and borders;
- visual formatting: dimensions, display, and positioning;
- generated content and lists;
Now let’s focus on our media block. Come back to the WordPress customizer. Here in the brackets, we will write down some of the CSS properties.
- the new background color may be closely related to the concept to the design of your website, or vise versa it can be bright and eye-catching;
- you may set the new color for text as well;
- the font-family property allows you to add a font and its style;
- add letter spacing if necessary;
- a border can be set both for the whole block or for one particular side. Moreover, you can set its width, style, and color at once;
- same comes with the text shadow – simply set the width for the sides and the shadow color.
Congratulations! Now you know a little more about the WordPress customizer CSS properties and can create custom styles for blocks. Moreover, as we made the block reusable, you can simply add it with all the styles to any page of your website, which is quite timesaving.
We hope you liked our simple and quick tutorial on customization in WordPress for Gutenberg blocks and reusable blocks. Subscribe to our newsletter and stay in touch for more useful tutorials and instructions!