Find out how to support and add WordPress block editor font styles and sizes to Genesis Sample child theme through code.
Most text blocks in WordPress block editor allow you to adjust the font size. In particular, they give you the option to choose between normal, medium, large and huge, or even write the number of pixels.
As with the color palettes, the editor also gives you the opportunity to standardize the parameters of these buttons to make the design of the website more homogeneous.
In this case, you will learn how to take advantage of normal, medium, large and huge text settings to display exactly the dimensions you decide in Genesis Sample.
This is ideal for your customers, as it makes it easier for them to use text formats with greater consistency. And that always has a positive impact on the design.
Ready to go?
Supporting WordPress block editor font sizes in Genesis Sample
Add the following code in functions.php:
To see this and another 997 code snippets of this website, login or subscribe here.
With this snippet you give support and at the same time you assign certain dimensions to each variation. Of course, you can adjust the number of pixels according to your needs.
Now all that remains is to add the corresponding styles to style.css:
To see this and another 997 code snippets of this website, login or subscribe here.
On the other hand, if you don’t need the 4 predefined sizes and want to disable, for example, the “huge” option, it is as simple as removing that array from the previous snippet. In that case, it would look like this:
To see this and another 997 code snippets of this website, login or subscribe here.
Please note that the details in this example are intended for Genesis Sample (version 2.6). However, you can also use it in any Genesis child theme (or WordPress one). Just change the text-domain‘genesis-sample’ to that of your child theme.
If you want to completely adapt the styles of your child theme to the block editor, in addition to the above changes you must:
Conclusions
The WordPress block editor should work seamlessly in any Genesis child theme. But if you want to get the most out of it and make the child theme look perfect, depending on the child theme it is possible that you need to make several adjustments.
With this tutorial you will make sure that the editor font sizes are displayed as you want them in Genesis Sample.
And this is just a part of what you could to implement. You have the option to check the tutorial with all the optimizations you need to make to your child theme to make sure it is compatible with the block editor.
Any questions? Let me know in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
