Использование стилевых компонентов в Wordpress в функции сохранения Гутенберга

Question

Я пытаюсь использовать styled-component и другие реагирующие компоненты в функции save (), но она не работает, styled-component прекрасно работает в редакторе (функция edit), здесьмой код для блока:

const { __ } = wp.i18n;  
const { registerBlockType } = wp.blocks;

import styled from 'styled-components';


registerBlockType( 'gutenword-blocks/posts', {
    title: 'Styled Div',
    icon: 'admin-page',
    category: 'layout',


    edit: function( props ) {
        const StyledDiv = styled.div`
            height: 300px;
            width: 300px;
            background: red;
        `;
        return <StyledDiv></StyledDiv>;
    },

    save() {
        const StyledDiv = styled.div`
            height: 300px;
            width: 300px;
            background: red;
        `;
        return <StyledDiv></StyledDiv>;

    },
} );

Ожидаемое поведение При добавлении блока должен отображаться красный квадрат на экране редактора и во внешнем интерфейсе

Текущее поведение Красный квадрат отображается только в редакторе, а на внешнем интерфейсе ничего не отображается