Set default value for “Additional CSS class(es)” for specific block types
-
26-04-2021 - |
Pregunta
For the columns
block type, I'd like to add in a default value of wp-block-columns--padded
in the "Additional CSS class(es)" field, the idea being that the user could remove or modify the class as needed (i.e. removing it to disable all padding, changing it wp-block-columns--padded-extra
for additional padding, etc.). Is it possible to do this via a filter or something similar? I did look in to wp.hooks.addFilter
, but that didn't allow the user to edit the classes that I added.
Solución
A simple solution would be to register custom block style variations for the core/columns
block and let the user select your custom padding settings from these, instead of editing class names in the extra classes field (which isn't too comfortable from a user's perspective). Gutenberg automatically outputs class names in the form is-style-(name of block style variation)
when a variation is selected and you can also set a default one. You can do it with JS, more info here: https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#block-style-variations
Or, quite simply, with PHP: https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#server-side-registration-helper
But if you need some granular control style variations are not the right solution.
More "premium" would be to add a custom Inspector Controls panel for your padding settings in the block sidebar with wp.hooks
. But you will need to write hooks for settings
with blocks.registerBlockType
(for your custom padding attribute(s)), for edit
with editor.BlockEdit
(the sidebar controls' logic and maybe editor classes - if you want to show the changes on-the-fly in the editor) and for save
with blocks.getSaveElement
( to bring your classes to frontend). Much fun but way more work ;)
Starting point: https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#filters