WordPress’ block editor “Gutenberg” allows us to register custom block styles for a particular block. But since WordPress 5.4, we can use Block Variations to add other presets with different default settings.
For example, the core/heading block’s standard level is 2 when first inserted into the editor. We can programatically add a Block Variation of core/heading called “H3 Heading”, in which the standard level is 3. This is still a core/heading block, with all the usual options, but one which starts out as an H3, not an H2.
Using the regular block, we look for “Heading” in the Block Editor. Using a series of Block Variations, we could allow the user to use the much faster keyboard-entry method – e.g. /h3 – which would add a heading with the level pre-set at 3. Not necessary, but handy for users who prefer using the keyboard to write their content.
A full article about this technique is online at CSS Tricks.
Leave a Reply