現在、WordPress 向けの開発は奇妙であることを認めましょう。 WordPress を初めて使用する場合でも、長い間使用してきた場合でも、「フルサイト編集」 (FSE) 機能の導入。 ブロックエディタ (WordPress 5.0) と サイトエディター (WordPress 5.9) により、WordPress のテーマとプラグインを構築する従来の方法が覆されました。
Block Editor に初めて出会ってから XNUMX 年が経ちましたが、ドキュメントが不足しているか、古くなっているため、開発は困難です。 これは、FSE 機能がどれだけ速く動いているかについての声明のようなものです。 ジェフは最近の投稿で嘆いた.
適切な事例: 2018 年に、 入門シリーズ グーテンベルク開発への参入については、ここ CSS-tricks で公開されました。 それ以来、時代は変わり、その開発スタイルは今でも機能していますが、 お勧めできません もう（さらに、 create-guten-block 基になっているプロジェクトも維持されなくなりました)。
この記事では、現在の方法論に沿った方法で WordPress ブロック開発を開始できるように支援します。 したがって、はい、これが公開された後、状況が大きく変わる可能性があります. しかし、ツールが時間の経過とともに進化しても、コアのアイデアは同じままである可能性が高いため、ブロック開発の本質を捉えることができる方法でそれに焦点を当てようとします.
クレジット： WordPress ブロックエディターハンドブック
WordPressブロックとは正確には何ですか?
のような用語が意味するものとの混乱を解消することから始めましょう。 ブロック. WordPress 5.0 に至るまでのこれらの機能に関するすべての開発は、「グーテンベルク」 —ご存知のように、の発明者 印刷機.
それ以来、「グーテンベルク」は、ブロック エディターやサイト エディターを含む、ブロックに関連するすべてを説明するために使用されてきたため、一部の人々が混乱するほど複雑になりました。 名前を軽蔑する. さらに、 グーテンベルクプラグイン 実験的な機能が含まれている可能性がテストされている場所。 そして、この「フルサイト編集」をすべて呼び出すことで問題が解決すると思われる場合は、 それにも懸念があります.
したがって、この記事で「ブロック」を参照する場合、WordPress ブロック エディターでコンテンツを作成するためのコンポーネントを意味します。 ブロックはページまたは投稿に挿入され、特定の種類のコンテンツの構造を提供します。 WordPress には、段落、リスト、画像、動画、音声などの一般的なコンテンツ タイプの「コア」ブロックがいくつか付属しています。 いくつか挙げると.
これらのコア ブロックとは別に、カスタム ブロックも作成できます。 それがWordPressブロック開発の目的です（コアブロックをフィルタリングして機能を変更することもありますが、まだ必要ではないでしょう）.
ブロックの機能
ブロックの作成に飛び込む前に、ブロックが内部でどのように機能するかを理解する必要があります。 それは間違いなく、後で私たちのフラストレーションを大幅に軽減します.
私がブロックについて考えるのはかなり抽象的です。私にとって、ブロックは、いくつかのプロパティ (属性と呼ばれる) を持ち、いくつかのコンテンツを表すエンティティです。 これはかなり漠然としているように聞こえますが、私と一緒にいてください。 ブロックは基本的に XNUMX つの方法で現れます。ブロック エディターのグラフィカル インターフェイスとして、またはデータベース内のデータのチャンクとしてです。
WordPress Block Editor を開いてブロック、たとえば Pullquote ブロックを挿入すると、素敵なインターフェイスが表示されます。 そのインターフェイスをクリックして、引用されたテキストを編集できます。 ブロック エディター UI の右側にある [設定] パネルには、テキストを調整し、ブロックの外観を設定するためのオプションがあります。
派手なプルクォートの作成が完了し、[公開] をクリックすると、投稿全体がデータベースに保存されます。 wp_posts テーブル。 グーテンベルクのおかげで、これは新しいことではありません。 WordPress は投稿コンテンツをデータベース内の指定されたテーブルに保存します。 しかし、何が新しいかというと Pullquote ブロックの表現 に保存されるコンテンツの一部です post_content のフィールド wp_posts 列で番号の横にあるXをクリックします。
この表現はどのように見えますか？ 見てください：
It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.
The Encyclopedia of world peas
普通の HTML に見えますよね!? これは、技術用語では「シリアル化された」ブロックです。 HTML コメントの JSON データに注目してください。 "textAlign": "right". それは 属性 - ブロックに関連付けられたプロパティ。
ブロック エディタを閉じて、しばらくしてからもう一度開いたとします。 関連するコンテンツ post_content フィールドはブロック エディタによって取得されます。 次に、エディタは取得したコンテンツを解析し、次の内容に遭遇した場合:
...…それは自分自身に大声で言います:
OK、それはプルクォート ブロックのように思えます。 うーん.. 属性もあります… 私は、エディタ内の Pullquote ブロックのグラフィカル インターフェイスをその属性から構築する方法を教えてくれる JavaScript ファイルを持っています。 このブロックをすべての栄光でレンダリングするには、今それを行う必要があります。
ブロック開発者としてのあなたの仕事は:
- 特定のタイプのブロックを登録したいことを、まあまあの詳細とともに WordPress に伝えます。
- JavaScript ファイルをブロック エディターに提供します。ブロック エディターでブロックをレンダリングすると同時に、ブロックを「シリアル化」してデータベースに保存するのに役立ちます。
- ブロックが適切に機能するために必要な追加リソース (スタイルやフォントなど) を提供します。
注意すべきことの XNUMX つは、シリアル化されたデータからグラフィカル インターフェイスへの変換 (およびその逆) はすべて、ブロック エディターでのみ行われるということです。 フロントエンドでは、コンテンツは保存されているとおりに表示されます。 したがって、ある意味では、ブロックはデータベースにデータを配置するための優れた方法です。
うまくいけば、これにより、ブロックがどのように機能するかが明確になります。
ブロックは単なるプラグインです
ブロックは単なるプラグインです。 まあ、技術的には、あなたは できる テーマにブロックを配置すると、 できる 複数のブロックをプラグインに入れます。 しかし、多くの場合、ブロックを作成したい場合は、プラグインを作成することになります。 したがって、WordPress プラグインを作成したことがある場合は、WordPress ブロックを作成する方法をすでに理解しています。
しかし、ブロックどころか、WordPress プラグインをセットアップしたことがないと仮定しましょう。 どこから始めますか？
ブロックの設定
ブロックとは何かについて説明しました。 ものを作るための設定を始めましょう。
ノードがインストールされていることを確認してください
これにより、アクセスできるようになります npm および npx コマンド、ここで npm ブロックの依存関係をインストールし、コンパイルに役立ちます。 npx パッケージをインストールせずにコマンドを実行します。 macOS を使用している場合は、おそらく既に Node があり、使用できます nvm バージョンを更新します。 Windows を使用している場合は、 ノードをダウンロードしてインストールする.
プロジェクト フォルダを作成する
ここで、コマンドラインに直接ジャンプして、というパッケージをインストールするように指示する他のチュートリアルに出くわすかもしれません。 @wordpress/create-block. このパッケージは、開発を開始するために必要なすべての依存関係とツールを含む完全に形成されたプロジェクト フォルダーを吐き出すため、優れています。
私は自分のブロックを設定するときに個人的にこのルートを使用しますが、ベースラインの開発環境を理解するために必要な部分だけに焦点を当てて、それが導入する独断的なものをカットしたいので、ちょっと冗談を言います.
これらは、具体的に呼び出したいファイルです。
readme.txt: これは、プラグイン ディレクトリの前面のようなもので、通常、プラグインを説明し、使用法とインストールに関する追加の詳細を提供するために使用されます。 ブロックを ワードプレスプラグインディレクトリ、このファイルはプラグイン ページの作成に役立ちます。 ブロック プラグイン用の GitHub リポジトリを作成する予定がある場合は、README.mdファイルに同じ情報が含まれているため、そこにうまく表示されます。package.json: 開発に必要な Node パッケージを定義します。 取り付けの際に開けてみます。 従来の WordPress プラグイン開発では、Composer とcomposer.json代わりにファイル。 これはそれと同等です。plugin.php: これはメインのプラグイン ファイルです。そうです、これは従来の PHP です。 ここにプラグインのヘッダーとメタデータを配置し、それを使用してプラグインを登録します。
これらのファイルに加えて、 src このディレクトリには、ブロックのソース コードが含まれているはずです。
これらのファイルと src 開始するために必要なのはディレクトリだけです。 そのグループのうち、次のことに注意してください。 技術的に必要なファイルは XNUMX つだけです (plugin.php) プラグインを作成します。 残りは、情報を提供するか、開発環境の管理に使用されます。
前述の @wordpress/create-block パッケージは、これらのファイル (およびその他のファイル) をスキャフォールディングします。 必需品ではなく、自動化ツールと考えることができます。 とにかく、それは仕事をより簡単にするので、以下を実行することで自由にブロックを足場にすることができます:
npx @wordpress/create-blockブロックの依存関係をインストールする
前のセクションで説明した XNUMX つのファイルが準備できていると仮定して、依存関係をインストールします。 まず、必要な依存関係を指定する必要があります。 編集することでそれを行います package.json。 使用中 @wordpress/create-block ユーティリティを使用すると、以下が生成されます (コメントが追加されました。JSON はコメントをサポートしていないため、コードをコピーする場合はコメントを削除してください)。
{
// Defines the name of the project
"name": "block-example",
// Sets the project version number using semantic versioning
"version": "0.1.0",
// A brief description of the project
"description": "Example block scaffolded with Create Block tool.",
// You could replace this with yourself
"author": "The WordPress Contributors",
// Standard licensing information
"license": "GPL-2.0-or-later",
// Defines the main JavaScript file
"main": "build/index.js",
// Everything we need for building and compiling the plugin during development
"scripts": {
"build": "wp-scripts build",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
},
// Defines which version of the scripts packages are used (24.1.0 at time of writing)
// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
}コメントなしで見る
{
"name": "block-example",
"version": "0.1.0",
"description": "Example block scaffolded with Create Block tool.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
"main": "build/index.js",
"scripts": {
"build": "wp-scripts build",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
} @wordpress/scripts ここでの主な依存関係はパッケージです。 ご覧のとおり、 devDependency 発達を助けるということです。 どうして？ それは、 wp-scripts コードをコンパイルするために使用できるバイナリを、 src へのディレクトリ build ディレクトリなど。
WordPress がさまざまな目的のために維持している他のパッケージが多数あります。 たとえば、 @wordpress/components パッケージが提供する いくつかのプレハブ UI コンポーネント WordPress ブロック エディターは、WordPress の設計基準に沿ったブロックの一貫したユーザー エクスペリエンスを作成するために使用できます。
あなたは実際にはしません 必要 これらのパッケージを使用したい場合でも、これらのパッケージをインストールすることはできません。 これらが原因です @wordpress 依存関係はブロック コードにバンドルされていません。 代わりに、 import ユーティリティ パッケージのコードを参照するステートメント — など @wordpress/components — コンパイル中に「アセット」ファイルを作成するために使用されます。 さらに、これらのインポート ステートメントは、インポートをグローバル オブジェクトのプロパティにマッピングするステートメントに変換されます。 例えば、 import { __ } from "@wordpress/i18n" の縮小版に変換されます const __ = window.wp.i18n.__。 （window.wp.i18n グローバルスコープで利用可能であることが保証されているオブジェクトです。 i18n パッケージ ファイルがエンキューされます)。
プラグイン ファイルにブロックを登録する際、ブロックのパッケージ依存関係を WordPress に伝えるために、「assets」ファイルが暗黙的に使用されます。 これらの依存関係は自動的にキューに入れられます。 これらはすべて舞台裏で処理されます。 scripts パッケージ。 そうは言っても、コード補完とパラメーター情報の依存関係をローカルにインストールすることを選択できます package.json ファイル：
// etc.
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
},
"dependencies": {
"@wordpress/components": "^19.17.0"
}さてその package.json セットアップが完了したら、コマンド ラインでプロジェクト フォルダーに移動して実行することで、これらすべての依存関係をインストールできるはずです。 npm install.
プラグイン ヘッダーを追加する
従来の WordPress プラグイン開発から来ている場合は、すべてのプラグインのメイン プラグイン ファイルに、WordPress がプラグインを認識し、WordPress 管理画面のプラグイン画面にプラグインに関する情報を表示するのに役立つ情報のブロックがあることをご存じでしょう。
ここに @wordpress/create-block 創造的に「Hello World」と呼ばれるプラグイン用に生成されました。
<?php
/**
* Plugin Name: Block Example
* Description: Example block scaffolded with Create Block tool.
* Requires at least: 5.9
* Requires PHP: 7.0
* Version: 0.1.0
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*
* @package create-block
*/これはメインのプラグイン ファイルにあり、好きなように呼び出すことができます。 あなたはそれを一般的なものと呼ぶかもしれません index.php or plugin.phpを選択します。 create-block パッケージは、インストール時にプロジェクト名として指定したものを自動的に呼び出します。 この例を「ブロックの例」と呼んでいるので、パッケージには block-example.php このすべてのものをファイルします。
自分自身を作成者にするなど、いくつかの詳細を変更する必要があります。 そして、そのすべてが必要なわけではありません。 これを「ゼロから」作成した場合、次のようになります。
<?php
/**
* Plugin Name: Block Example
* Plugin URI: https://css-tricks.com
* Description: An example plugin for learning WordPress block development.
* Version: 1.0.0
* Author: Arjun Singh
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*/各行の正確な目的については説明しません。 WordPress プラグインハンドブックで確立されたパターン.
ファイル構造
ブロックに必要なファイルは既に確認しました。 しかし、あなたが使用している場合 @wordpress/create-block、プロジェクト フォルダーに他のファイルの束が表示されます。
現時点でそこにあるものは次のとおりです。
block-example/
├── build
├── node_modules
├── src/
│ ├── block.json
│ ├── edit.js
│ ├── editor.scss
│ ├── index.js
│ ├── save.js
│ └── style.scss
├── .editorconfig
├── .gitignore
├── block-example.php
├── package-lock.json
├── package.json
└── readme.txtふー、多いですね！ 新しいものを呼び出しましょう:
build/: このフォルダーは、本番用のファイルを処理するときにコンパイルされたアセットを受け取りました。node_modules：これは、実行時にインストールしたすべての開発依存関係を保持しますnpm install.src/: このフォルダには、コンパイルされてbuildディレクトリ。 ここにある各ファイルを少しだけ見ていきます。.editorconfig: これには、コードの一貫性のためにコード エディターを適応させるための構成が含まれています。.gitignore: これは、バージョン管理の追跡から除外する必要があるローカル ファイルを識別する標準のリポジトリ ファイルです。 君のnode_modulesここに必ず含まれているはずです。package-lock.json: これは、インストールした必須パッケージの更新を追跡するための自動生成ファイルです。npm install.
ブロック メタデータ
を掘り下げたい src ディレクトリはあなたと一緒ですが、最初にその中のXNUMXつのファイルだけに焦点を当てます: block.json。 使用したことがある場合 create-block 、それはすでにあなたのためにそこにあります; そうでない場合は、先に進んで作成してください。 WordPress は、ブロックを認識してブロック エディターでレンダリングするための WordPress コンテキストを提供するメタデータを提供することで、これをブロックを登録するための標準的で標準的な方法にするのに苦労しています。
ここに @wordpress/create-block 私のために生成された：
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "create-block/block example",
"version": "0.1.0",
"title": "Block Example",
"category": "widgets",
"icon": "smiley",
"description": "Example block scaffolded with Create Block tool.",
"supports": {
"html": false
},
"textdomain": "css-tricks",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
}実際には さまざまな情報の束 ここに含めることができますが、実際に必要なのは name および title. 超最小バージョンは次のようになります。
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "css-tricks/block-example",
"version": "1.0.0",
"title": "Block Example",
"category": "text",
"icon": "format-quote",
"editorScript": "file:./index.js",
}$schemaファイル内のコンテンツの検証に使用されるスキーマ形式を定義します。 これは必須のように思えますが、サポートするコード エディターが構文を検証し、ツールヒント ヒントやオートコンプリートなどのその他の追加アフォーダンスを提供できるようにするため、完全にオプションです。apiVersionのどのバージョンを指すか ブロックAPI プラグインが使用します。 現在、バージョン 2 が最新です。nameプラグインの識別に役立つ必須の一意の文字列です。 これに接頭辞を付けたことに注意してくださいcss-tricks/同じ名前を持つ可能性のある他のプラグインとの競合を避けるために、名前空間として使用しています。 代わりにイニシャルなどを使用することもできます (例:as/block-example).version何かです WordPressは使用を提案します 新しいバージョンがリリースされたときのキャッシュ無効化メカニズムとして。titleもう XNUMX つの必須フィールドで、プラグインが表示される場所で使用される名前を設定します。categoryブロックを他のブロックとグループ化し、ブロック エディタにまとめて表示します。 現在の既存のカテゴリは次のとおりです。text,media,design,widgets,theme,embed、作成することもできます カスタムカテゴリ.iconから何かを選択できます ダッシュコン ライブラリ をクリックして、ブロック エディタでブロックを視覚的に表現します。 私は使用していますformat-quoteこの例では、独自のプルクォートのようなものを作成しているためです。 独自のアイコンを作成するのではなく、既存のアイコンを活用できるのは素晴らしいことですが、それは確かに可能です。editorScriptはメインの JavaScript ファイル、index.js、命。
ブロックを登録する
実際のコードに入る前の最後の作業は、プラグインを登録することです。 そのすべてのメタデータをセットアップしただけで、WordPress がそれを使用する方法が必要です。 そうすれば、WordPress はすべてのプラグイン アセットの場所を認識し、ブロック エディタで使用するためにキューに入れることができます。
ブロックの登録には XNUMX つのプロセスがあります。 PHP と JavaScript の両方に登録する必要があります。 PHP 側では、メインのプラグイン ファイル (block-example.php この場合)、プラグイン ヘッダーの直後に次を追加します。
function create_block_block_example_block_init() {
register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_block_example_block_init' );これは、 create-block 私のために生成されたユーティリティなので、関数の名前はそのままです。 別の名前を使用できます。 ここでも重要なのは、他のプラグインとの競合を回避することです。そのため、ここで名前空間を使用して、できるだけ一意にすることをお勧めします。
function css_tricks_block_example_block_init() {
register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'css_tricks_block_example_block_init' );なぜ私たちは build ディレクトリの場合 block.json すべてのブロック メタデータが含まれている src? これは、コードをまだコンパイルする必要があるためです。 の scripts パッケージは、 src ディレクトリに配置し、本番環境で使用されるコンパイル済みファイルを build ディレクトリ、また をコピーする block.json file プロセスインチ
よし、ブロックを登録する JavaScript 側に移りましょう。 開く src/index.js 次のようになっていることを確認します。
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});React と JSX の世界に入ります! これは、WordPress に次のように指示します。
- インポートする
registerBlockTypeモジュールを@wordpress/blocksパッケージ。 - からメタデータをインポート
block.json. - インポートする
EditおよびSave対応するファイルからのコンポーネント。 後でこれらのファイルにコードを入れます。 - ブロックを登録し、
EditおよびSaveブロックをレンダリングし、そのコンテンツをデータベースに保存するためのコンポーネント。
どうしたの？ edit および save 機能？ WordPress ブロック開発のニュアンスの XNUMX つは、「フロント エンド」から「バック エンド」を区別することです。これらの関数は、これらのコンテキストでブロックのコンテンツをレンダリングするために使用されます。 edit バックエンドのレンダリングを処理し、 save サイトのフロント エンドでコンテンツをレンダリングするために、ブロック エディターからデータベースにコンテンツを書き込みます。
クイックテスト
ブロック エディタでブロックが機能し、フロント エンドでレンダリングされることを確認するための簡単な作業を行うことができます。 開けましょう index.js 再び、 edit および save 関数がどのように機能するかを示すいくつかの基本的なコンテンツを返す関数:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
const { name } = metadata;
registerBlockType(name, {
edit: () => {
return (
"Hello from the Block Editor"
);
},
save: () => {
return (
"Hello from the front end"
);
}
});これは基本的に、以前と同じコードの簡素化されたバージョンですが、メタデータを直接指しているだけです。 block.json ブロック名を取得し、 Edit および Save ここから関数を直接実行しているためです。
これを実行してコンパイルできます npm run build コマンドラインで。 その後、ブロック エディターで「Block Example」というブロックにアクセスできます。
ブロックをコンテンツ領域にドロップすると、ブロックから返されるメッセージが返されます。 edit 関数：
投稿を保存して公開すると、 save フロントエンドで表示するときの機能：
ブロックの作成
すべてが接続されているように見えます！ 元の状態に戻すことができます index.js テストの前に、物事が機能していることを確認しました:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});ていることに注意してください edit および save 関数は、 src そのディレクトリ @wordpress/create-block 生成され、各ファイルに必要な追加のインポートがすべて含まれています。 ただし、さらに重要なことは、これらのファイルが Edit および Save ブロックのマークアップを含むコンポーネント。
バックエンドのマークアップ (src/edit.js)
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Edit() {
return (
{__("Hello from the Block Editor", "block-example")}
);
}私たちがそこで何をしたか見てください。 から小道具をインポートしています @wordpress/block-editor 後でスタイリングに使用できるクラスを生成できるパッケージ。 も輸入しています __ 翻訳を扱うための国際化機能。
フロントエンドのマークアップ (src/save.js)
これにより、 Save コンポーネントとほぼ同じものを使用します src/edit.js わずかに異なるテキスト:
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Save() {
return (
{__("Hello from the front end", "block-example")}
);
}ここでも、CSS で使用できる素敵なクラスを取得します。
スタイリング ブロック
ブロック props を使用してクラスを作成する方法について説明しました。 あなたは CSS に関するサイトでこの記事を読んでいるので、ブロック スタイルの記述方法を具体的に説明しなければ、何かを見落としているような気がします。
フロントエンドとバックエンドのスタイルを区別する
あなたが見てみると block.json セクションに src ディレクトリには、スタイルに関連する XNUMX つのフィールドがあります。
editorStyleバックエンドに適用されるスタイルへのパスを提供します。styleフロントエンドとバックエンドの両方に適用される共有スタイルのパスです。
Kev Quirk に詳細な記事があります これは、バックエンド エディターをフロントエンド UI のように見せるための彼のアプローチを示しています。
思い出して @wordpress/scripts パッケージは block.json ファイル内のコードを処理するとき /src ディレクトリに移動し、コンパイルされたアセットを /build ディレクトリ。 それは build/block.json ブロックの登録に使用されるファイル。 つまり、私たちが提供するすべてのパスを意味します src/block.json に関連して書かれるべきです build/block.json.
Sassの使用
いくつかの CSS ファイルを build ディレクトリ内のパスを参照してください src/block.json、ビルドを実行して、それを XNUMX 日と呼びます。 しかし、それでは、 @wordpress/scripts Sass を CSS にコンパイルできるコンパイル プロセス。 代わりに、スタイル ファイルを src ディレクトリに移動し、JavaScript にインポートします。
その際、次の点に注意する必要があります。 @wordpress/scripts プロセス スタイル:
- という名前のファイル
style.cssorstyle.scssorstyle.sassが JavaScript コードにインポートされ、コンパイルされてstyle-index.css. - 他のすべてのスタイル ファイルは、コンパイルされてバンドルされます。
index.css.
@wordpress/scripts パッケージの使用 ウェブパック バンドル用と @wordpress/scripts 使用 PostCSS プラグイン スタイルを処理するための作業用。 PostCSS は、追加のプラグインで拡張できます。 の scripts package は、Sass、SCSS、および Autoprefixer 用のものを使用します。これらはすべて、追加のパッケージをインストールせずに使用できます。
実際、最初のブロックをスピンアップすると、 @wordpress/create-block、実行を開始するために使用できる SCSS ファイルを使用すると、有利なスタートを切ることができます。
editor.scssバックエンド エディターに適用されるすべてのスタイルが含まれています。style.scssフロントエンドとバックエンドの両方で共有されるすべてのスタイルが含まれています。
ブロックの CSS にコンパイルする小さな Sass を記述して、このアプローチの実際の動作を見てみましょう。 サンプルはあまり Sass-y ではありませんが、コンパイル プロセスを示すために SCSS ファイルに書き込んでいます。
フロント および バックエンド スタイル
では、フロント エンドとバック エンドの両方に適用されるスタイルから始めましょう。 まず、作成する必要があります src/style.scss （使用している場合はすでにそこにあります @wordpress/create-block）そして、それをインポートすることを確認してください。これはで行うことができます index.js:
import "./style.scss";開く src/style.scss ブロックの props から生成されたクラスを使用して、そこにいくつかの基本的なスタイルをドロップします。
.wp-block-css-tricks-block-example {
background-color: rebeccapurple;
border-radius: 4px;
color: white;
font-size: 24px;
}とりあえず以上です！ ビルドを実行すると、これがコンパイルされます build/style.css ブロック エディタとフロント エンドの両方から参照されます。
バックエンド スタイル
ブロック エディタに固有のスタイルを記述する必要がある場合があります。 そのために、作成します src/editor.scss （再び、 @wordpress/create-block あなたのためにこれを行います）、そこにいくつかのスタイルをドロップします：
.wp-block-css-tricks-block-example {
background-color: tomato;
color: black;
}次に、それをインポートします edit.js、これは私たちを含むファイルです Edit コンポーネント (必要な場所にインポートできますが、これらのスタイルはエディター用であるため、ここにコンポーネントをインポートする方が論理的です):
import "./editor.scss";今、私たちが走るとき npm run build、スタイルは両方のコンテキストでブロックに適用されます。
スタイルの参照 block.json
スタイリング ファイルを edit.js および index.jsですが、コンパイルのステップで XNUMX つの CSS ファイルが生成されることを思い出してください。 build ディレクトリ： index.css および style-index.css それぞれ。 これらの生成されたファイルをブロック メタデータで参照する必要があります。
にいくつかのステートメントを追加しましょう block.json メタデータ：
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "css-tricks/block-example",
"version": "1.0.0",
"title": "Block Example",
"category": "text",
"icon": "format-quote",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
}ラン npm run build もう一度、WordPress サイトにプラグインをインストールして有効化すれば、すぐに使用できます。
あなたが使用することができます npm run start ビルドを監視モードで実行し、コードに変更を加えて保存するたびにコードを自動的にコンパイルします。
表面をなぞっています
実際のブロックは、ブロック エディターの設定サイドバーや WordPress が提供するその他の機能を利用して、リッチなユーザー エクスペリエンスを作成します。 さらに、基本的に XNUMX つのバージョンのブロックがあるという事実 — edit および save — コードの重複を避けるために、コードをどのように編成するかについても考慮する必要があります。
しかし、これが WordPress ブロックを作成する一般的なプロセスの謎を解き明かすのに役立つことを願っています. これは、WordPress 開発における真の新時代です。 新しいやり方を学ぶのは大変ですが、どのように進化していくのか楽しみです。 のようなツール @wordpress/create-block 助けになりますが、それでも、それが何をしているのか、そしてその理由を正確に知ることは素晴らしいことです。
ここで説明した内容は変更されますか? 最も可能性が高い！ しかし、少なくとも、WordPress ブロックを作成するためのベスト プラクティスを含め、WordPress のブロックが成熟していくのを見守っているため、作業のベースラインができています。
参考文献
繰り返しになりますが、ここでの私の目標は、物事が急速に進化し、WordPress のドキュメントが追いつくのに少し苦労しているこの季節に、ブロック開発に取り掛かるための効率的な道筋を描くことです. これをまとめるために使用したリソースを次に示します。
