Стилизованный статический блок Gutenberg

Этот блок почти не отличается от предыдущего, за исключением различных стилей в редакторе и при опубликовании на сайте. Зачем это надо и где может найти практическое применение для меня загадка. Тем не менее, почти везде такой тип блока присутствует в статьях на эту тему. Так что выделяться не будем. Создадим его.
В index.php добавляется следующий код.

wp_register_style(
        'wwowa-gblock-simple-style-editor',
        plugins_url( 'editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
    );
    wp_register_style(
        'wwowa-gblock-simple-style',
        plugins_url( 'style.css', __FILE__ ),
        array( ),
        filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
    );
    register_block_type( 'wwowa-gblock/gblock-wgb-simple-style', array(
        'style' => 'wwowa-gblock-simple-style',
        'editor_style' => 'wwowa-gblock-simple-style-editor',
        'editor_script' => 'wwowa-gblock-simple-style',
    ) );

Тут все очевидно из названий стилей. Два разных стиля потом назначаются по месту использования. Скорее всего, это пример возможного использования стилей. Если стили небольшие их вполне можно прописать и через переменные, как в первом простом блоке. И стили в случае назначения через переменную прописываются непосредственно в коде, что тоже не всегда нужно.
Ну и соответственно небольшое отличие в коде скрипта функций редактирования и сохранения.

edit: function( props ) {
            return el(
                'p',
                { className: props.className },
                'Статическое содержимое с разными стилями в редакторе и на сайте.'   );  },
 save: function() {
           return el(
                'p',
                {},
                'Статическое содержимое с разными стилями в редакторе и на сайте..'   ); },

В результате получается две стилизации блока
редактор:

сайт:

Оставьте свой комментарий