How to define default style for InnerBlocks template for Gutenberg Block Editor (WordPress)

Question

I am using gutenbergs' core block to make another block using InnerBlock. So, I want to change their default style like text align center.To start, I used officially supported way to create blocks Create-Guten-Block. My codes are as follows:

import {
    InnerBlocks, useBlockProps
} from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
    return (
        <div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/paragraph', { content: '$200' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/button', { placeholder : 'Buy Now' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                templateLock="all"
            />
        </div>
    );
}

WordPress uses has-text-align-left class to align a text in the block. Is there any way to define default style inside the core/button's text-align to center inside the template.

Answer 1

Yes, the core/button block supports align and can be set in the block attribute align within the InnerBlocks template, eg:

...
    ['core/button', { placeholder: 'Buy Now', align: 'center' }],
...

The resulting HTML then has the built-in style aligncenter applied and the button is now center aligned:

<div class="wp-block-button aligncenter">
    <a class="wp-block-button__link">Buy Now</a>
</div>