WordPress｜Gutenbergカスタムブロック｜CSS別ファイル

  • 投稿日
  • 更新日
  • 著者 kngsmym
  • カテゴリー gutenberg
  • カテゴリー WordPress

ブロック追加の基本は前項にて。

前項参照のうえで、以下に変更を加えたファイルを記載。

WordPress｜Gutenbergブロック追加｜編集不可ブロック
自分でシンプルに追加（編集不可ブロック） functions.phpに追加したいブロックの記述を書けば追加でき…
blog.wald-grun.biz

CSSを別ファイルにて設定する場合、cssファイルを用意してプラグインの定義ファイルにそれぞれCSS定義の記述を追加して以下のようにする。

index.php

<?php
/**
 * Plugin Name: My Gutenberg
 */

function my_gutenberg_sample() {

  // ブロックに使用するスクリプトを登録
  wp_register_script(
    'my-gutenberg-script',
    plugins_url( 'block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element' ),
    '1.0.0',
    true
  );

  // エディタ用のcssファイル登録
  wp_register_style(
    'my-gutenberg-style-editor',
    plugins_url( 'editor.css', __FILE__ ),
    array( 'wp-edit-blocks' ),
    '1.0.0',
    'all'
  );

  // 表示用のcssファイル登録
  wp_register_style(
    'my-gutenberg-style-front',
    plugins_url( 'style.css', __FILE__ ),
    array(),
    '1.0.0',
    'all'
  );

  // ブロックの登録
  // パラメータとしてブロックで使用するスクリプトとCSSを指定
  register_block_type( 'my-gutenberg/my-sample00', array(
    'editor_script' => 'my-gutenberg-script',
    'editor_style' => 'my-gutenberg-style-editor',
    'style' => 'my-gutenberg-style-front',
  ) );

}
add_action( 'init', 'my_gutenberg_sample' );

wp_register_style()を新たに追加。register_block_type()にeditor_styleとstyleを追加。

block.js

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

  blocks.registerBlockType( 'my-gutenberg/my-sample00', {
    title: 'My Gutenberg Sample',
    icon: 'format-aside',
    category: 'layout',
    edit: function( props ) {
      return el(
        'p',
        { className: props.className },
        'テスト'
      );
    },
    save: function( props ) {
      return el(
        'p',
        { className: props.className },
        'テスト'
      );
    },
  } );
}(
  window.wp.blocks,
  window.wp.element
) );

インラインで記述していたblockstyleを削除。

パラメータとしてstyleにblockstyleを指定していたが、そちらをclassNameの指定に変更。classNameはpropsからデフォルトのclass名を取得。

ここで取得されるclass名は.wp-block-[プラグインのスラッグ名]-[ブロック名]となる。今回は.wp-block-my-gutenberg-my-sample00のはずなので、それらのclassにcssファイルでスタイルを指定する。

cssファイル

上記の設定に応じたcssファイルを用意する。

editor.css

投稿画面用のcssを記述する。

style.css

サイト側での表示用cssを記述する。

以下は一例

.editor-styles-wrapper .wp-block-my-gutenberg-my-sample00 {
  background-color: #efa336;
  color: #fff;
  padding: 16px;
}

本来.wp-block-my-gutenberg-my-sample00に指定すればよいが、使用しているテーマで.editor-styles-wrapper pにスタイルが設定されているため、上書きできるよう.editor-styles-wrapperによって詳細度を上げている

.wp-block-my-gutenberg-my-sample00 {
  background-color: #efa336;
  color: #fff;
  padding: 16px;
}