Применение стилей Gutenberg Wordpress на фронт-энде как на бэк-энде

Я новичок в Гутенберге, и я пытался найти ответ как на английском так и на русском, но не нашел, поэтому если этот вопрос уже встречался, киньте ссылочку пожалуйста.

Я пытаюсь просто создать кнопку в Гутенберге. Вот мой код:

const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const {RichText, InspectorControls, ColorPalette} = wp.editor;

const {Button, ButtonGroup, PanelBody, PanelRow} = wp.components;
console.log('here');

registerBlockType('catarri/gut-abend-block', {

    title: __('Colorful block', 'gutenberg'),
    description: __('One of many blocks', 'gutenberg'),
    category: 'common',
    attributes: {
        button_name: {
            type: 'string',
            source: 'text',
            default: 'button'
        },
        button_color: {
            type: 'string',
            default: '#fff'
        },
        button_bg: {
            type: 'string',
            default: '#333'
        }
    },
    edit: (props) => {
        const {button_name, button_bg} = props.attributes;
        const {button_color} = props.attributes;
return ([
    <InspectorControls>
        <PanelBody title={__('Button Section', 'gutenberg')}>
        </PanelBody>
            <PanelRow title='Button Text color'>
            <ColorPalette value={button_color} onChange={new_val => props.setAttributes({button_color: new_val})} />
            </PanelRow>
            <PanelRow title='Button Background Color'>
                <ColorPalette value={button_bg} onChange={new_val => props.setAttributes({button_bg: new_val})} />
            </PanelRow>
        
        
    </InspectorControls>,
    <ButtonGroup>
        <Button style={{backgroundColor: button_bg}}>
<RichText style={{color:button_color, padding: '5px 10px'}} value={button_name} onChange={new_val => props.setAttributes({button_name: new_val})}/>
        </Button>
    </ButtonGroup>
    
])
    },
    save: (props) => {
        const {button_name, button_bg, button_color} = props.attributes;
        return (
        <Button style={{backgroundColor: button_bg}} className={props.className}>
            <RichText.Content value={button_name} style={{color: button_color, padding: '5px 10px'}} tagName='span' />
            </Button>
        )
    }
})

и вот что получается. В админке(зелёная кнопка):

Гутенберг подключает свои стили в бэк-энде, класс "components-button", я сохраняю этот класс для вывода на фронт, но там эти стили уже не поддерживаются, и кнопки получаются разными по стилям.

Вот фронт:

И вот вопрос как мне вывести стили Гутенберга, либо как их отключить в бэк-энде, чтоб получить соответствие.