There are no best practices for custom blocks in the new WordPress Block Editor yet and we are currently in a first phase of experimentation. Technical possibilities have to be explored step by step in order to find the best concept for WordPress blocks.
In the development of GT Blocks I am currently following some basic rules and considerations which in my opinion improve the quality and sustainability of my blocks and are aimed at the target group of GermanThemes.
I would like to briefly introduce my basic ideas and concept for WordPress Blocks.
CSS classes instead of inline styles
As far as possible I avoid inline styles in my blocks and use CSS classes instead. The big problem with inline styles is that blocks are hardcoded and difficult to customize. When changing the styling, each block has to be changed individually instead of a global class.
An example: I use a custom block for quotations on 200 posts and design it to match the theme with a spacing of 18px and a 4px frame. Border and margin will be saved as inline styles and will end up as HTML attribute
style="margin: 18px; border: 4px solid" in the content of the post.
When changing the theme, this styling no longer fits and should be changed. Now 200 blocks have to be adjusted individually. With two CSS classes
.border-thick, however, the styling can be modified globally and provided by the theme. Design and content are separated from each other.
Block styles instead of design options
From the first thought for CSS classes it follows that the WordPress blocks offer only a number of different styles, instead of various design options.
Instead of a range option with input field for individual pixel values, there is a selection field for spacing with small, medium and large. This is the only way to implement block options as CSS classes and avoid inline styles.
For example, instead of half a dozen settings for frames and drop shadows, the theme provides two block styles that match the shading of the block to the rest of the design and look the same for all blocks on all sides.
Usability instead of feature overload
Ultimately, it is also a question of usability.
The classic Page Builder plugins for WordPress such as Visual Composer, Divi, Elementor and Beaver Builder offer numerous settings that allow you to define every little detail. These plugins are designed for power users who often only use this system to build all their websites and customer projects.
For “normal” users the Page Builder is often too overloaded and complicated. It takes a lot of training time to find your way around. In the beginning, you are rather overwhelmed by the options. If you know your way around, these tools are of course incredibly flexible and powerful.
But you also need a good eye and know-how for design. Flexible options for designing your own website are still no guarantee that the result will look good. Typography, colours, spacing and alignment of elements have to be carefully coordinated in order to create a harmonious overall picture.
With WordPress Blocks this story will repeat itself.
Sooner or later there will be very flexible blocks with numerous settings that will turn users into designers across the entire website. At the latest, when blocks are introduced outside the editor, the possibilities will be endless.
Personally, I prefer a middle course between usability and flexibility. Blocks should offer the most useful options, but not be full of features.
Conclusion on my concept for WordPress Blocks
You may have noticed that all the points say about the same thing and are closely related. And basically, developers have always had to consider exactly what features and functions they add to their software.
I hope this article explains the background why the WordPress Blocks of GermanThemes don’t offer input fields for individual pixel values and generally get along with less design options. I also hope that the article has highlighted the advantages of this concept.