WordPress

WordPress: create-block して wp-env start する際の注意点

投稿日:2021年10月29日 更新日:

1. はじめに

WordPress のブロックを開発する際の注意点について書きます。

2. 今回、前提とする環境

今回の内容は、以下の環境を前提とします。

  • Windows 10
  • WSL2 の Ubuntu 20.04.2 LTS
    • こちらのターミナルから Docker を利用します。
  • Docker Desktop v4.1.1

また、Ubuntu 上で Node.js, npm の @wordpress/env パッケージは導入してあるものとします。

3. create-block して wp-env start する際の注意点

公式のチュートリアルなどでは、ブロックを開発する最初の段階、すなわち「ブロックの開発環境を準備する」ための操作として以下の手順が記載されています。

  1. @wordpress/create-block パッケージを使って、ブロックプラグインの雛形ディレクトリを生成する。
  2. ターミナル上でそのディレクトリに移動して「wp-env start」コマンドを実行し、ローカルにWordPressサイトを稼働させる。(Docker 内にWordPressサイトが構築されるが、ブロックプラグインは Dockerの外のまま利用できる)

公式のチュートリアルも含めて、ここの実際の手順が説明不足だったりしますので、1つ1つのコマンドについて順番に説明します。

(1) @wordpress/create-block パッケージを使って、ブロックプラグインの雛形ディレクトリを生成します。ここでは、プラグインのディレクトリ名を「my-block」にしています。

npx @wordpress/create-block my-block 

(2) 生成したディレクトリに移動します。

cd my-block 

(3) プラグインのファイルとディレクトリのパーミッションを変更します。(ポイント!)

Docker 側からこのディレクトリにアクセスできるようにパーミッションを緩くします。

chmod -R a-x,go-wx,u+w,a+rX .

(4) Docker 側に WordPress サイトを構築させます。

wp-env start

以下のように表示されたら成功です。

このように表示されたら成功です!

4. 参考

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

WordPress

WordPress 5.3 のエディターで、カスタムHTMLのボックスをリサイズ可能にする

WordPress 5.3 のエディターで、カスタムHTMLのボックスをリサイズ可能にする方法について説明します。

WordPress

【WordPress】特定の画像には Easy FancyBox を適用させない方法

目次1. WordPress の Easy FancyBox プラグインについて問題点2. 特定の画像リンクで、Easy FancyBox を適用させない方法3. デモ 1. WordPress の …

WordPress

このサイトのサイドバーウィジェットを、ウィジェットブロックエディターに対応しました

このサイトのサイドバーウィジェットを、ウィジェットブロックエディターに対応しました。

WordPress

【WordPress】Gutenberg をカスタマイズするための情報

WordPress の Gutenberg をカスタマイズするための情報を紹介します。

WordPress

WordPress 5.4 以降で記事にリンクを貼る際のオプション

WordPress 5.4 以降で、記事にリンクを貼る際のオプションについて説明します。