Set default value for “Additional CSS class(es)” for specific block types

Question

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.

Answer 1

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