Gutenbergブロックエディターのカスタムブロックを自作したい。しかもSassではなくStylusで。という、Stylus大好きスタイラサーのための環境構築編です。@wordpress/scripts をベースとなります。

ベーシックな部分はこちらを参考にさせていただきました。加えてSassに関連する部分をStylus版に変更した感じです。

【WordPress】カスタムブロックの作り方を書いてみた - Qiita -

ディレクトリ構成図

my-block-plugin
  ├ node_modules
  ├ public (公開フォルダ)
  │   ├ assets (buildフォルダ)
  │   └ my-block-plugin.php (プラグインのメインファイル）
  ├ src
  │   ├ editor.js (エディター用JS)
  │   ├ editor.styl (エディター用CSS)
  │   ├ script.js (エディター・フロント両用JS)
  │   └ style.styl (エディター・フロント両用CSS)
  ├ package.json
  ├ webpack.config.js
  └ (yarn.lock)

package.json

package.json （クリックで全体を表示)

package.json

{
  "name": "my-block-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "wp-scripts build --mode=development --config webpack.config.js --watch",
    "build": "wp-scripts build --mode=production --config webpack.config.js"
  },
  "author": "Watashi",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@lipemat/css-mqpacker": "^8.0.1",
    "@wordpress/block-editor": "^4.3.1",
    "@wordpress/blocks": "^6.20.1",
    "@wordpress/browserslist-config": "^2.7.0",
    "@wordpress/components": "^10.0.1",
    "@wordpress/dependency-extraction-webpack-plugin": "^2.8.0",
    "@wordpress/editor": "^9.20.1",
    "@wordpress/element": "^2.16.0",
    "@wordpress/scripts": "^12.1.1",
    "autoprefixer": "^9.8.5",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-declaration-sorter": "^5.1.2",
    "css-loader": "^3.6.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "path": "^0.12.7",
    "postcss-combine-duplicated-selectors": "^9.0.0",
    "postcss-loader": "^3.0.0",
    "sort-css-media-queries": "^1.5.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "terser-webpack-plugin": "^3.0.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-fix-style-only-entries": "^0.5.1",
    "webpack-merge": "^5.0.9"
  },
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ]
}

モジュールをざっくり分類するとこんな感じです。

モジュールをざっくり分類 (クリックで全体を表示)

WordPress公式
@wordpress/block-editor
@wordpress/blocks
@wordpress/browserslist-config 
@wordpress/components 
@wordpress/dependency-extraction-webpack-plugin 
@wordpress/editor 
@wordpress/element 
@wordpress/scripts 

JS/BABEL関連
@babel/core
@babel/preset-env 
@babel/preset-react 
babel-loader 
terser-webpack-plugin 

Stylus/CSS関連
@lipemat/css-mqpacker 
autoprefixer 
css-declaration-sorter
css-loader 
mini-css-extract-plugin 
optimize-css-assets-webpack-plugin
postcss-combine-duplicated-selectors
postcss-loader
sort-css-media-queries 
stylus
stylus-loader 
webpack-fix-style-only-entries 

その他
clean-webpack-plugin 
path 
webpack 
webpack-cli

モジュールごとの役割は webpack.config.jsのコメントにも書いてあります。

今回は使用していませんが、 img-loader, file-loader, url-loader, resolve-url-loader なども、もちろんSass同様に使えます。

webpack.config.js

webpack.config.js (クリックして全体を表示)

webpack.config.js

const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin')
const FixStyleOnlyEntriesPlugin         = require('webpack-fix-style-only-entries')
const MiniCssExtractPlugin              = require('mini-css-extract-plugin')
const OptimizeCSSAssetsWebpackPlugin    = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin               = require('terser-webpack-plugin')
const autoprefixer                      = require('autoprefixer')
const path                              = require('path')
const {CleanWebpackPlugin}              = require('clean-webpack-plugin')

// For PostCSS
const cssDeclarationSorter              = require('css-declaration-sorter')
const cssMqpacker                       = require('@lipemat/css-mqpacker')
const postCssCombineDuplicatedSelectors = require('postcss-combine-duplicated-selectors')
const sortCssMediaQueries               = require('sort-css-media-queries')

module.exports = (env, argv) => {
  // モードが development なら trueを返す
  function isDevelopment () {
    return argv.mode === 'development'
  }

  var config = {
    entry: {
      editor: path.resolve(__dirname, 'src', 'editor.js'),
      script: path.resolve(__dirname, 'src', 'script.js'),
      style: path.resolve(__dirname, 'src', 'style.styl')
    },

    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'public', 'assets')
    },

    optimization: {
      minimizer: [
        // JavaScriptを圧縮する
        new TerserWebpackPlugin({
          // sourceMapをmodeによって削除する
          sourceMap: isDevelopment()
        }),
        // CSSを圧縮する
        new OptimizeCSSAssetsWebpackPlugin(
          {
            cssProcessorOptions: {
              map: {
                inline: false,
                annotation: true
              }
            }
          }
        )
      ]
    },

    plugins: [
      // ビルドの度にビルドフォルダーを削除する
      new CleanWebpackPlugin(),

      // assets.phpファイルを出力する
      new DependencyExtractionWebpackPlugin(),

      // CSSをentryに指定したとき同名の不要なjsが出力されないようにする
      new FixStyleOnlyEntriesPlugin({
        extensions: ['styl', 'css']
      }),

      // CSSファイルを別ファイルで出力する
      new MiniCssExtractPlugin({
        filename: '[name].css'
      })
    ],

    devtool: 'source-map',

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                [
                  '@babel/preset-react',
                  {
                    // 通常は'React.createElement.xxxx'を記述しますが、WordPressのブロックエディターはWordPress用のReactを使用するため、以下のように記述します
                    'pragma': 'wp.element.createElement',
                    'pragmaFrag': 'wp.element.Fragment',
                    'development': isDevelopment()
                  }
                ]
              ]
            }
          }
        },
        {
          test: /\.(styl|css)$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader
            },
            {
              loader: 'css-loader'
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: () => [
                  // 重複するセレクタをまとめる
                  postCssCombineDuplicatedSelectors({
                    removeDuplicatedProperties: true
                  }),
                  // 重複するメディアクエリをまとめる
                  cssMqpacker({
                    // メディアクエリをソート
                    sort: sortCssMediaQueries
                  }),
                  // CSSの属性をソート
                  cssDeclarationSorter({
                    order: 'smacss'
                  }),
                  // ベンダープレフィックスを付与
                  autoprefixer({
                    // CSSグリッドを使う
                    grid: true
                  })
                ]
              }
            },
            {
              loader: 'stylus-loader'
            }
          ]
        }
      ]
    }
  }

  return config
}

my-block-plugin.php

プラグインのメインファイル。

my-block-plugin.php (クリックして全体を表示)

my-block-plugin.php

<?php
/**
 * Plugin Name: 僕のStylusブロック
 */

if ( !defined( 'ABSPATH' ) ) {
  exit;
}

add_action( 'init', 'my_block_plugin_register' );

function my_block_plugin_register() {
  $editor_asset = include( plugin_dir_path( __FILE__ ) . 'assets/editor.asset.php' );
  $script_asset = include( plugin_dir_path( __FILE__ ) . 'assets/script.asset.php' );

  // エディター用JSを登録
  wp_register_script(
    'my-block-plugin-editor-script',
    plugins_url( 'assets/editor.js', __FILE__ ),
    $editor_asset['dependencies'],
    $editor_asset['version']
  );

  // エディター・フロント両用JSを登録
  wp_register_script(
    'my-block-plugin-script',
    plugins_url( 'assets/script.js', __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  // エディター用CSSを登録
  wp_register_style(
    'my-block-plugin-editor-style',
    plugins_url( 'assets/editor.css', __FILE__ ),
    array( 'wp-edit-blocks' ),
    filemtime( plugin_dir_path( __FILE__ ) . 'assets/editor.css' )
  );

  // エディター・フロント両用CSSを登録
  wp_register_style(
    'my-block-plugin-style',
    plugins_url( 'assets/style.css', __FILE__ ),
    array(),
    filemtime( plugin_dir_path( __FILE__ ) . 'assets/style.css' )
  );

  // カスタムブロックの登録
  register_block_type(
    'my-block-plugin/my-block',
    [
      'editor_script' => 'my-block-plugin-editor-script', // エディター用JSを読み込む
      // 'script' => 'my-block-plugin-script', // エディター・フロント両用JSを読み込む
      // 'editor_style'  => 'my-block-plugin-editor-style', //  エディター用CSSを読み込む
      'style'  => 'my-block-plugin-style' //  エディター・フロント両用CSSを読み込む
    ]
  );
}

my_block_plugin , my-block-plugin の文字列はご自分のプラグイン名に合わせて変更してください。

register_block_type の部分では必要ないJS, CSSは必要に応じてコメントアウトしてください。今回のサンプルでは editor_script と style のみ使うので他はコメント化しています。

wp_register_style の第4引数 filetime は、ビルドするごとにブラウザキャッシュを消すための小技です。ただし、Stylus側が空でCSSが出力されていない場合にはエラーが出るのでご注意ください。

editor.js

editor.js (クリックして全体を表示)

editor.js

import { RichText } from '@wordpress/editor'
import { registerBlockType } from '@wordpress/blocks'

registerBlockType( 'my-block-plugin/my-block', {
  title: '僕のサンプル 青いブロック',
  category: 'common',
  icon: 'wordpress-alt',
  attributes: {
    text: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },

  edit: ( props ) => {
    const onChangeText = ( newText ) => {
      props.setAttributes( { text: newText } );
    };
    return (
      <div>
        <RichText
          className={ props.className }
          tagName="p"
          value={ props.attributes.text }
          onChange={ onChangeText }
        />
      </div>
    );
  },

  save: ( props ) => {
    return (
      <div>
        <p>{ props.attributes.text }</p>
      </div>
    );
  },
});

エディター画面のみで読み込まれるJS。実際にブロックを設計するファイルです。ここをReactで書いていきます。

内容は、動作確認用として、テキストを入力して表示するブロックのサンプルとなります。今回は環境構築が目的ということで、具体的な中身の解説は今回は割愛します。

style.styl

同じく動作確認用です。エディター、フロント両方で読み込まれるCSSです。

style.styl (クリックして全体を表示)

style.styl

.wp-block-my-block-plugin-my-block
  background-color: #5cb1e3
  border-radius: 4px
  color:  rgba(255,255,255,0.95)
  margin-top: 24px
  margin-bottom: 24px
  padding: 24px

動作確認

ターミナルでプラグインディレクトリへ移動して、ビルドしましょう。

npm run build

プラグインの public フォルダをまるごとWordPressの plugins フォルダ直下に入れます。僕は、テスト環境では publicフォルダのシンボリックリンクを作って pluginsフォルダ直下に入れています…が、もっといい方法があったら教えてください。

WordPressプラグイン画面で「僕のStylusブロック」を有効化します。

投稿編集画面へ行き、自作ブロックが「一般ブロック」の中に登録されているか確認し、あったら使ってみましょう。青い背景のブロックができます。

文字を書いて保存します。

フロント側をプレビューして文字が表示されていればOKです。

以上 @wordpress/scripts と Stylusを使った環境構築の一例でした。

参考文献

【WordPress】カスタムブロックの作り方を書いてみた - Qiita -
registerBlockTypeで指定する内容について - Qiita -