ブロック開発の環境構築におけるwp-scriptsとCreate Guten Blockのメモ

Cat WEBサイト構築Tag , , by cubismer
WordPressのGutenberg
WordPressのGutenberg

情報をいただいたりしたのでメモ的に。自分用というのもありますが、このテーマで情報を探している方に細かい説明は不要だと思いますので簡易な内容です。

後述しますが、wp-scriptsは仮の名前と言いますか正式な名称がわからなかっための記載なので、今後正式名称がわかれば書き換える予定です。

なお名称だけでなく内容の正確性も保証できませんのでその点も了承ください。

[2020.3.10追記]
新しい公式の仕組みがあるようなので、当記事をご覧になる場合は留意ください。

[2020.5.4追記]
新しい仕組みでの環境作成に関して書きました。

目的

  • WordPressのブロック開発環境をローカルにつくる
  • wp-scriptsかCreate Guten Blockのどちらかのツールを使って簡便につくる

違い

概要
wp-scripts 最低限の環境を簡単に作れる
Create Guten Block 完成された環境と、雛形を簡単に作れる
差異
wp-scripts
  • 最低限の環境なのでsrcフォルダやプラグイン用のPHPなどを自分で用意する必要がある
  • scriptsに記載することで、WPのルールに即したCSSのlintなどが使える
  • Sassなどは別途必要なパッケージを入れてwebpack.config.jsを作るなどする必要がある
  • index.asset.phpによって多少楽ができる
Create Guten Block
  • 解説付きの雛形も付いているのですぐに作成開始できる
  • 追加作業なしでSassが使える
  • 自分好みの設定にしたいなら手間がかかりそう

さらに簡単にまとめると以下のようになりそうです。

  • 最低限の環境だけあれば後は自分でやるなら、wp-scripts
  • 丸ごと用意された環境ですぐに始めたいなら、Create Guten Block

どちらも0から自作するより楽なの確かですが、インストール時の完成度からするとCreate Guten Blockの方が楽に思えました。

なお、wp-scriptsの方に「最低限」と書きましたが、後述するような機能もあるので低機能ということはまったくありません。

あくまで「インストール直後のそのままの状態からブロックを作り始められる環境」という点では「作り始めるまでに自分で多少の作業が必要」なことから　、「最低限」と書いていることを理解ください。

Create Guten Block

上記ページは検索上位で簡単に見つかるためここに書く必要はあまりないのですが、一応参考用に。

Create Guten Blockを本番環境用に使う

Create Guten Blockを本番で使うことを想定した場合、アップするファイルに悩みました。

Create Guten Blockの体裁としては丸ごとプラグイン用という形なので、極端な話すべてのファイルをあげても動作に問題はないはずです。

しかしながらnode_modulesのようなものをあげる意味はまったくないですし、かといって本番用にまとめたファイルを書き出す設定も見当たらず。

twitterでこの件ツイートしてみたところ、以下のように返答をいただけました。

Create Guten Blockを本番で使う際に余分なものを消していること、実際に本番で使われているとのことで。

検索経由で日本語の参考記事をみてもローカルでのテストっぽいところまでしか書かれておらず、Create Guten Blockは本番に使わないものではと疑い始めていたので、実務に基づく情報をいただけてとても助かりました。

wp-scripts

上記の1つ目がハンドブックのwp-scriptsについてのページですが、読むとわかる通り特定の名称がありません。

「公式のブロック構築用キット」のような名称が良いのかもしれませんが、これでは正式名称とは言い難く、とりあえずwp-scriptsにしてみた次第です。wp-scriptsも別のものの名称なので問題はありますが…。

なおwp-scriptsには色々と機能がつけられる模様なので、最終的に結構な多機能にできると思われます(後述&参考リンク2と３を参照のこと)。

こちらも本番用の出力ファイルがまとまっているわけではありませんが、buildディレクトリ丸ごととプラグイン用PHPファイル(と場合によってはCSSファイルなど)を上げればだいたいOKかと思います。

なお、wp-scriptsに関しても下記のように教えていただきました。

wp-scriptのセットアップ方法

基本的には上記のページの通りでインストールできるので当記事に書く必要はあまりないのですが、一応手順を簡単に書くと以下のようになります。
なおnpmを使った場合の方法です。

  1. ブロック作成用のディレクトリを作成(ハンドブックではmyguten-blockという名称)
  2. myguten-blockディレクトリに移動して、npm initと記述して実行
  3. 対話形式で、package nameとdescriptionとentry pointとauthorとlicense入力(他の項目はReturnを押すだけでもいい) 
    
//ハンドブックの例
package name: (myguten-block) myguten-block
version: (1.0.0)
description: Test block
entry point: (index.js) build/index.js
test command:
git repository:
keywords:
author: mkaz
license: (ISC) GPL-2.0-only
About to write to /home/mkaz/src/wp/scratch/package.json:
  4. ここまでで該当ディレクトリにpackage.jsonが出力される
  5. npm install –save-dev –save-exact @wordpress/scriptsと記述して実行
  6. buildやsrcフォルダを作る

SCSSを使う

すでに紹介している以下のページから記述を引用します。唯一の正解ということではありませんが、実際に試して動作は確認したので参考にできると思われます。

まずwp-scriptを作成したディレクトリに必要なパッケージをインストール。


npm install --save-dev postcss-preset-env mini-css-extract-plugin path css-loader node-sass sass-loader postcss-loader ignore-emit-webpack-plugin

続いて同じくwp-scriptを作成したディレクトリにwebpack.config.jsという名称でJSファイルを作成して以下を記述します。


const defaultConfig = require( './node_modules/@wordpress/scripts/config/webpack.config.js' );
const path = require( 'path' );
const postcssPresetEnv = require( 'postcss-preset-env' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const IgnoreEmitPlugin = require( 'ignore-emit-webpack-plugin' );

const production = process.env.NODE_ENV === '';

module.exports = {
  ...defaultConfig,
  entry: {
    index: path.resolve( process.cwd(), 'src', 'index.js' ),
    style: path.resolve( process.cwd(), 'src', 'style.scss' ),
    editor: path.resolve( process.cwd(), 'src', 'editor.scss' ),
  },
  optimization: {
    ...defaultConfig.optimization,
    splitChunks: {
      cacheGroups: {
        editor: {
          name: 'editor',
          test: /editor\.(sc|sa|c)ss$/,
          chunks: 'all',
          enforce: true,
        },
        style: {
          name: 'style',
          test: /style\.(sc|sa|c)ss$/,
          chunks: 'all',
          enforce: true,
        },
        default: false,
      },
    },
  },
  module: {
    ...defaultConfig.module,
    rules: [
      ...defaultConfig.module.rules,
      {
        test: /\.(sc|sa|c)ss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: ! production,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                postcssPresetEnv( {
                  stage: 3,
                  features: {
                    'custom-media-queries': {
                      preserve: false,
                    },
                    'custom-properties': {
                      preserve: true,
                    },
                    'nesting-rules': true,
                  },
                } ),
              ],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: ! production,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    ...defaultConfig.plugins,
    new MiniCssExtractPlugin( {
      filename: '[name].css',
    } ),
    new IgnoreEmitPlugin( [ 'editor.js', 'style.js' ] ),
  ],
};

あとはsrcディレクトリにstyle.scssとeditor.scssというSCSSファイルを作成し、そこにSCSSを記述すれば完成です。

index.asset.php

index.asset.phpの中身は以下のようになっています。


return array('dependencies' => array('wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx');

ここで、index.jsに以下のように追加したと仮定します。


import { RichText } from '@wordpress/block-editor';

すると以下のようになります。


return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => 'yyyyyyyyyyyyyyyyyyyyyy');

ここまでを踏まえて、プラグイン用のPHPに以下のように書いておけば、index.jｓにコンポーネントを読み込ませるたびに自動でPHPの方にも追加してくれるようになります。


$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
wp_register_script(
  'my-block',
  plugins_url( 'build/index.js', __FILE__ ),
  $asset_file_js['dependencies'],
  $asset_file_js['version']
);

index.jsに書いただけでPHPに書き忘れることが結構あったので、その部分が解消されるのは嬉しいところです。

この件の詳細は前出のハンドブックのページで確認可能ですが、webpack.config.jsでSCSSを使えるようにしていると同じようにPHPファイルが作成されます。

  • style.asset.php
    (style.scssという名前で作成してwebpack.config.jsで設定した場合)
  • editor.asset.php
    (editor.scssという名前で作成してwebpack.config.jsで設定した場合)

ただ、SCSSの場合はバージョン用文字列ぐらいにしか使わないように思えるので、JSのようにincludeしないならSCSS用のasset.phpは必須ではないファイルに思えます。

スクリプト


{
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  }
}

上記のように設定すればそれぞれ用意された機能を実行できます。これらの機能自体は最初から組み込まれているので、package.jsonに記述するだけで使えます。

なお、CSSのLintなどはWordPressのコーディングルールに即しています(変更などは可能)。

スクリプトに関しては下記などを参照のこと。

参考

結び

再入門な感じなので、まだ調べながらといった状態です。

楽なのはCreate Guten Blockだと思いますが、多少手間がかかるものの公式が用意したものの方が後々都合が良いのかもしれないと考え、wp-scriptsを使ってみようかと考えています。

[2020.5.4追記]
冒頭にも書きましたが再度の追記です。新しい仕組みでの環境作成に関して書きました。

5人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄