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 テーマ STINGER 8 で、style.css の変更をすぐに反映させる方法

WordPress の無料テーマである STINGER 8 のカスタマイズのお話です。 スポンサードリンク 目次1. 問題点2. 対策準備作業style.css に変更を加えた後に必要な作業3. まと …

WordPress

【WordPress】img タグに自動的に追加される属性について

WordPressの投稿ページに画像を貼った場合、その img タグに自動的に追加される属性について説明します。

WordPress

【WordPress】Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが表示されました

WordPressで、Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが発生しました。

WordPress

WordPress: サイトヘルスの特定のチェック項目を無効にする方法

WordPress: サイトヘルスの特定のチェック項目を無効にする方法について説明します。

Web Vitals

WordPress: 特定の記事に特定のCSSを出力する方法

WordPress: 特定の記事に特定のCSSを出力する方法