スタイルシートによるスタイルの適用

前のステップでブロックはインラインの style 属性でスタイルを適用しました。シンプルなコンポーネントであればこの方法でも構いませんが、スタイルは別のスタイルシートファイルに書いたほうが便利です。

各ブロックタイプで簡単にスタイルできるようエディターは自動的にクラス名を生成します。クラス名は edit 関数、save 関数に渡される object 引数でアクセスできます。このステップではクラス名を使用するスタイルシートを作成します。

ESNext

import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
    title: 'Example: Stylesheets',

    icon: 'universal-access-alt',

    category: 'layout',

    example: {},

    edit( { className } ) {
        return <p className={ className }>Hello World, step 2 (from the editor, in green).</p>;
    },

    save() {
        return <p>Hello World, step 2 (from the frontend, in red).</p>;
    },
} );

ES5

( function( blocks, element ) {
    var el = element.createElement;

    blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
        title: 'Example: Stylesheets',
        icon: 'universal-access-alt',
        category: 'layout',
        example: {},
        edit: function( props ) {
            return el(
                'p',
                { className: props.className },
                'Hello World, step 2 (from the editor, in green).'
            );
        },
        save: function() {
            return el(
                'p',
                {},
                'Hello World, step 2 (from the frontend, in red).'
            );
        },
    } );
}(
    window.wp.blocks,
    window.wp.element
) );

クラス名はブロック名の前に wp-block- を付け、名前空間セパレーター / を - で置換して生成されます。

エディターアセットとフロントエンドアセットのエンキュー

スクリプト同様、ブロックのスタイルもエンキューする必要があります。以前のセクションで説明したように、スタイルの editor_style ハンドルはエディター画面への適用に対してのみ使用し、エディターとサイトのフロントエンドの両方に適用される共通スタイルには style ハンドルを使用します。

style でエンキューされるスタイルシートは基本のスタイルで最初にロードされ、editor_style スタイルシートは後でロードされます。

コードで見ていきます。ファイル editor.css を作成してください。

.wp-block-gutenberg-examples-example-02-stylesheets {
    color: green;
    background: #cfc;
    border: 2px solid #9c9;
    padding: 20px;
}

新しい style.css ファイルは以下を含みます。

.wp-block-gutenberg-examples-example-02-stylesheets {
    color: darkred;
    background: #fcc;
    border: 2px solid #c99;
    padding: 20px;
}

新しいスタイルを使用するようにプラグインを構成します。

<?php
/**
 * Plugin Name: Gutenberg Examples Stylesheets
 */

function gutenberg_examples_02_register_block() {
    wp_register_script(
        'gutenberg-examples-02',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    wp_register_style(
        'gutenberg-examples-02-editor',
        plugins_url( 'editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
    );

    wp_register_style(
        'gutenberg-examples-02',
        plugins_url( 'style.css', __FILE__ ),
        array( ),
        filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
    );

    register_block_type( 'gutenberg-examples/example-02-stylesheets', array(
        'style' => 'gutenberg-examples-02',
        'editor_style' => 'gutenberg-examples-02-editor',
        'editor_script' => 'gutenberg-examples-02',
    ) );
}
add_action( 'init', 'gutenberg_examples_02_register_block' );