I can’t determine the syntax to use (or if it is even supported) to
define the blocks’ style. For example, I would like the Button to use
the “Outline” style instead of its default “Fill” style.
Yes it’s supported and the syntax is quite easy.
Excerpt from the block styles documentation:
Block Styles allow alternative styles to be applied to existing
blocks. They work by adding aclassName
to the block’s wrapper. This
className
can be used to provide an alternative styling for the
block if the block style is selected. See the Getting Started with
JavaScript
tutorial
for a full example.Example:
wp.blocks.registerBlockStyle( 'core/quote', { name: 'fancy-quote', label: 'Fancy Quote', } );
The example above registers a block style named
fancy-quote
to the
core/quote
block. When the user selects this block style from the
styles selector, anis-style-fancy-quote
className will be added to
the block’s wrapper.
So you would just need to add className
with the value is-style-<style name>
to the template attributes like so for the core/button
block and the Outline style (is-style-outline
):
[
'core/button',
[
'text' => 'Button 1',
'align' => 'center',
'className' => 'is-style-outline', // add is-style-<style name> to the class list
],
]
Tried & tested working in WordPress 5.8.1 — see style.scss
for other core styles like is-style-squared
. (that link, however, is for the “master” branch in the GitHub repo, so the styles there may not yet available in the current WordPress release)