Применение стилей из таблицы стилей

В предыдущем разделе блок применял свои собственные стили с помощью встроенного styleатрибута. Хотя это может быть достаточно для очень простых компонентов, вы быстро обнаружите, что вам легче писать свои стили, извлекая их в отдельный файл таблицы стилей.

Редактор автоматически сгенерирует имя класса для каждого типа блока, чтобы упростить стилизацию. Доступ к нему можно получить из аргумента объекта, переданного в функции редактирования и сохранения:ES5ESNext

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType;

registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-02', {
    title: 'Hello World (Step 2)',

    icon: 'universal-access-alt',

    category: 'layout',

    edit: function( props ) {
        return el( 'p', { className: props.className }, 'Hello editor.' );
    },

    save: function() {
        return el( 'p', {}, 'Hello saved content.' );
    }
} );

Имя класса генерируется с использованием имени блока с префиксом wp-block-, заменяя /разделитель пространства имен одним -.

.wp-block-gutenberg-boilerplate-es5-hello-world-step-02 {
    color: green;
    background: #cfc;
    border: 2px solid #9c9;
    padding: 20px;
}

Постановка в очередь только для редактора блочных активов

Как и скрипты, стили вашего блока, связанные с редактором, следует ставить в очередь, назначая editor_stylesнастройку зарегистрированного типа блока:

<?php

function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step02-editor',
        plugins_url( 'step-02/block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' )
    );
    wp_register_style(
        'gutenberg-boilerplate-es5-step02-editor',
        plugins_url( 'step-02/editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'step-02/editor.css' )
    );

    register_block_type( 'gutenberg-boilerplate-esnext/hello-world-step-02', array(
        'editor_script' => 'gutenberg-boilerplate-es5-step02-editor',
        'editor_style'  => 'gutenberg-boilerplate-es5-step02-editor',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );

Постановка в очередь редактора и интерфейсных активов

В то время как скрипты блока обычно необходимы только для загрузки в редакторе, вам нужно будет загружать стили как в передней части сайта, так и в редакторе. Вы можете даже хотеть отличные стили в каждом контексте.

При регистрации блока вы можете назначить один или оба styleи editor_styleсоответственно назначить стили, всегда загруженные для блока, или стили, загруженные только в редакторе.

<?php

function gutenberg_boilerplate_block() {
    wp_register_style(
        'gutenberg-boilerplate-es5-step02',
        plugins_url( 'step-02/style.css', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'step-02/style.css' )
    );

    register_block_type( 'gutenberg-boilerplate-esnext/hello-world-step-02', array(
        'style' => 'gutenberg-boilerplate-es5-step02',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );

Поскольку ваш блок может использовать одни и те же стили в обоих контекстах, вы можете рассматривать его style.cssкак базовую таблицу стилей, в которую помещаются стили, специфичные для редактора editor.css.