How to define a Block Style in an Innerblocks template

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 a className 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, an is-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)

Related Posts: