WordPress開発は現在、あなたが初心者であろうと上級開発者であろうと、ブロックエディター（WordPress 5.0）やサイトエディター（WordPress 5.9）を含む「サイト全体の編集」（FSE）機能の導入を受けています。
私たちは5年間ブロックエディターと連絡を取り合っていますが、ドキュメントが欠落または時代遅れのいずれかであるため、その開発は依然として困難です。これは、FSE関数の急速な反復の現在の状況をより多く反映しています。
たとえば、2018年には、Gutenberg Developmentの紹介に関する一連の記事がCSS-Tricksで公開されました。しかし、時間が経ち、その開発方法はまだ効果的ですが、それはもはや推奨されません（さらに、それが基づいているCreate-Guten-Blockプロジェクトはもはや維持されていません）。
この記事は、WordPressブロックの開発を開始し、現在のアプローチに従うのに役立つことを目的としています。もちろん、この記事が公開された後、状況は変わるかもしれません。しかし、たとえツールが時間の経過とともに開発されたとしても、コアの概念は同じままである可能性が高いため、私はそのコアアイデアに焦点を合わせようとします。
最初に、「ブロック」などのいくつかの用語を明確にしましょう。 WordPress 5.0より前のこれらの機能のすべての開発は、コード名「Gutenberg」（印刷の発明者）とともに使用されました。
それ以来、「Gutenberg」は、ブロックエディターやサイトエディターを含むブロックに関連するすべてを説明するために使用されているため、一部の人々が名前を嫌うほど複雑になっています。最も重要なことは、将来に含まれる可能性のある実験機能をテストするためのGutenbergプラグインもあります。このすべての「ウェブサイト全体の編集」を呼び出すことが問題を解決できると思う場合、いくつかの懸念もあります。したがって、この記事では、「ブロック」を参照するときに、WordPressブロックエディターでコンテンツを作成するコンポーネントを参照します。ブロックはページまたは記事に挿入され、特定の種類のコンテンツの構造を提供します。 WordPressには、パラグラフ、リスト、画像、ビデオ、オーディオなど、一般的なコンテンツタイプの「コア」ブロックが付属しています。
これらのコアブロックに加えて、カスタムブロックを作成することもできます。これは、WordPressブロック開発の焦点です（コアブロックをフィルタリングして機能を変更することもできますが、当面は必要ない場合があります）。
ブロックの役割
私は抽象的にブロックを理解するのが好きです：特定のコンテンツを表す特定の属性（属性と呼ばれる）を持つエンティティ。私はこれが曖昧に聞こえることを知っていますが、説明するために私に我慢してください。ブロックは基本的に、ブロックエディターのグラフィカルインターフェイスとして、またはデータベース内のデータブロックとしての2つの方法で現れます。
WordPressブロックエディターを開いてブロック（プルコートブロックなど）を挿入すると、素敵なインターフェイスが得られます。インターフェイスをクリックして、参照されるテキストを編集できます。ブロックエディターUIの右側にある設定パネルには、テキストを調整し、ブロックの外観を設定するためのオプションを提供します。
美しい引用の作成が終了し、パブリックをクリックすると、投稿全体がデータベースのwp_postsテーブルに保存されます。これはグーテンバーグのために新しいものではありません。これが物事が常に機能してきた方法です-WordPressは、データベースの指定されたテーブルに記事のコンテンツを保存します。しかし、新しいものは、プルコートブロックの表現は、wp_postsテーブルのpost_contentフィールドに保存されているコンテンツの一部であるということです。
この表現はどのように見えますか？見てみましょう：
<blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
<cite>The Encyclopedia of world peas</cite>
</blockquote>属性 - ブロック関連属性です。
ブロックエディターを閉じてから、しばらくすると再び開くとします。ブロックエディターは、関連するpost_contentフィールドのコンテンツを取得します。その後、編集者は取得されたコンテンツを解析し、次のことに遭遇したときに次のように解析します。それはそれ自体と話します：
<code>...</code>
わかりました、これはプルコートブロックのように見えます。まあ...プロパティもあります...私は、エディターのプロパティに基づいて、エディターにプルコートブロックのグラフィカルインターフェイスを構築する方法を教えてくれるJavaScriptファイルを持っています。このブロックがその完全な栄光の中で提示されるように、私は今これを行うべきです。
ですブロック開発者として、あなたの仕事は
WordPressに、特定の種類のブロックと関連する詳細を登録することを伝えます。
これにより、ブロックがどのように機能するかをより明確に理解できることを願っています。
ブロックはプラグインだけです
しかし、ブロックはもちろん、WordPressプラグインをセットアップしたことがないと仮定しましょう。どこから始めますか？ set block
ブロックとは何かを既に紹介しています。セットアップを開始して作成します。プロジェクトフォルダーを作成
私は自分のブロックをセットアップするときにこのアプローチを個人的に取りますが、導入する主観的なコンテンツを排除し、理解のために基本的な開発環境の必要な部分のみに焦点を当てたいので、しばらく私を容認してください。
これらは私が具体的に指摘したいドキュメントです：
これらのファイルとSRCディレクトリを開始するのに十分です。そのグループでは、プラグインを作成するには実際に
（Plugin.php）のみが必要であることに注意してください。残りは情報を提供するか、開発環境を管理するために使用されます。前述の @wordpress/create-blockパッケージは、これらのファイルを私たちのために構築します（その他）。必要ではなく、自動化ツールと考えることができます。とにかく作業を簡単にするので、次のコマンドを実行することでブロックを自由に使用して使用できます。 ブロック依存関係のインストール
前のセクションで記載されている3つのファイルを準備し、依存関係をインストールする時が来たとします。まず、必要な依存関係を指定する必要があります。これを行います。package.jsonを編集します。 @wordpress/create-blockユーティリティを使用する場合、以下が生成されます（注釈が追加されました; JSONは注釈をサポートしていないため、コードをコピーする場合は、注釈を削除してください）：
<blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
<cite>The Encyclopedia of world peas</cite>
</blockquote><blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
<cite>The Encyclopedia of world peas</cite>
</blockquote> necommentedバージョンを表示
`` `json
{
「名前」：「ブロック例」、
「バージョン」：「0.1.0」、
「説明」：「Create Blockツールで足場にあるブロックの例」、
「著者」：「ワードプレスの寄稿者」、
「ライセンス」：「gpl-2.0-or-later」、
「メイン」：「build/index.js」、
「スクリプト」：{
「ビルド」：「WPScripts Build」、
「フォーマット」：「WPScriptsフォーマット」、
「Lint：CSS」：「WP-Scripts Lint-Style」、
「Lint：JS」：「WP-Scripts Lint-JS」、
「Packages-Update」：「WP-Scripts Packages-date」、
「Plugin-Zip」：「WP-ScriptsプラグインZIP」、
「start」：「wpscripts start」
}、
「devdependicies」：{
「@wordpress/scripts」：「^24.1.0」
}
}
<code>...</code>
Package.jsonがセットアップされたので、コマンドラインのプロジェクトフォルダーに移動してNPMインストールを実行することにより、これらすべての依存関係をインストールできるはずです。
クラシックなWordPressプラグインの開発から来た場合、すべてのプラグインがメインプラグインファイルに情報があることを知っているでしょう。これにより、WordPressがプラグインを認識し、WordPress管理パネルのプラグイン画面に情報を表示するのに役立ちます。
以下は、「hello world」と呼ばれる創造的に呼ばれる @wordpress/create-blockによって作成されたプラグインです。
npx @wordpress/create-block
自分を著者にするなど、いくつかの詳細を変更する必要があります。これのすべてが必要なわけではありません。 「ヘッド」から始めたら、これに近いかもしれません：
{
// 定义项目名称
"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",
// 定义主JavaScript文件
"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"
},
// 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
}ファイル構造
以下は現在含まれているものです
すごい、たくさん！新しいコンテンツを指摘しましょう：
<code>
这里的@wordpress/scripts包是主要的依赖项。如您所见，它是一个devDependency，这意味着它有助于开发。如何？它公开了wp-scripts二进制文件，我们可以使用它来编译我们的代码，从src目录到build目录，等等。
WordPress维护了许多其他软件包，用于各种目的。例如，@wordpress/components软件包为WordPress区块编辑器提供了一些预制UI组件，可用于为区块创建一致的用户体验，并符合WordPress设计标准。
您实际上*不需要*安装这些软件包，即使您想使用它们也是如此。这是因为这些@wordpress依赖项不会与您的区块代码捆绑在一起。相反，任何引用实用程序软件包代码的导入语句——例如@wordpress/components——都用于在编译期间构造“资产”文件。此外，这些导入语句被转换为将导入映射到全局对象的属性的语句。例如，import { \_\_ } from "@wordpress/i18n"被转换为const \_\_ = window.wp.i18n.\_\_的缩小版本。（window.wp.i18n是一个保证在全局范围内可用的对象，一旦相应的i18n软件包文件被排队）。
在插件文件中注册区块期间，隐式使用“资产”文件来告诉WordPress区块的软件包依赖项。这些依赖项会自动排队。所有这些都在幕后完成，前提是您使用的是scripts软件包。也就是说，您仍然可以选择在package.json文件中本地安装依赖项以进行代码完成和参数信息：
```json
// etc.
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
},
"dependencies": {
"@wordpress/components": "^19.17.0"
}</code>以下は、 @wordpress/create-blockが私のために生成するものです：
<blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
<cite>The Encyclopedia of world peas</cite>
</blockquote><blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
<cite>The Encyclopedia of world peas</cite>
</blockquote>実際のコードに入る前にもう1つのことは、プラグインを登録することです。このすべてのメタデータを設定するだけで、WordPressを使用する方法が必要です。このように、WordPressはすべてのプラグイン資産を見つける場所を知っているため、ブロックエディターで使用するためにキューに入れることができます。
ブロックの登録は2段階のプロセスです。 PHPとJavaScriptに登録する必要があります。 PHPの側面については、メインプラグインファイル（この場合はブロックexample.php）を開き、プラグインタイトルの後に以下を追加します。
<code>...</code>
すべてのブロックメタデータを含むblock.jsonがSRCにある場合、なぜビルドディレクトリを指すのですか？これは、コードをコンパイルする必要があるためです。スクリプトパッケージは、SRCディレクトリ内のファイルのコードを処理し、Buildディレクトリの生産で使用されるコンパイルされたファイルを配置し、
block.jsonnpx @wordpress/create-block
をコピーします。 わかりました、登録ブロックのJavaScriptの側面に行きましょう。 src/index.jsを開き、次のように見えることを確認してください：
私たちはReactとJSXの世界に入っています！これは、WordPressを伝えます：編集および保存機能で何が起こっていますか？ WordPressブロック開発の微妙さの1つは、「バックエンド」と「Frontend」の区別です。これらのコンテキストでブロックのコンテンツをレンダリングするために使用されます。編集では、編集がブロックエディターからコンテンツをデータベースに保存して、WebサイトのFrontendでコンテンツをレンダリングします。
ブロックがブロックエディターで動作し、フロントエンドでレンダリングされるかどうかを迅速に操作して確認できます。 index.jsをもう一度開き、編集を使用して機能を保存して、基本を返して、それらがどのように機能するかを説明します。
<blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
<cite>The Encyclopedia of world peas</cite>
</blockquote>コマンドラインでnpm runビルドを実行してコンパイルできます。その後、ブロックエディターの「ブロック例」という名前のブロックにアクセスできます。
コンテンツ領域にブロックを入れた場合、編集関数からメッセージを返します：
記事を保存して公開する場合、フロントエンドで表示するときは、保存関数からメッセージを返す必要があります。
ブロックを作成しますすべてが正常であるように見えます！すべてが問題ないことを確認したので、テスト前にindex.jsにあるものに復元できます：
編集および保存関数は、SRCディレクトリの @wordpress/create-blockによって生成された2つの既存のファイルに関連付けられており、各ファイルに必要なその他のインポートが含まれていることに注意してください。さらに重要なことは、これらのファイルがブロックタグを含むコンポーネントの編集と保存を作成します。
<code>...</code>
npx @wordpress/create-block
これにより保存コンポーネントが作成されます。SRC/edit.jsとほぼ同じコンテンツを使用しますが、テキストはわずかに異なります。
スタイルブロック
{
// 定义项目名称
"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",
// 定义主JavaScript文件
"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"
},
// 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
}フロントエンドとバックエンドのスタイルを区別します
Kev Quirkには、バックエンドエディターをフロントエンドUIのように見せる方法を示す詳細な記事があります。
@wordpress /scriptsパッケージは、 /srcディレクトリのコードを処理し、コンパイルされた資産を /buildディレクトリに配置するときにblock.jsonファイルをコピーすることを思い出してください。ブロックの登録に使用されるbuild/block.jsonファイル。これは、SRC/block.jsonで提供するパスは、build/block.jsonに関連して記述する必要があることを意味します。 SASS
を使用していますこれを行うとき、 @wordpress/scriptsがスタイルを処理する方法に注意する必要があります：
style.cssまたはstyle.scssまたはstyle.sassという名前のファイルは、javascriptコードにインポートされたものがstyle-index.cssにコンパイルされます。
実際には、 @wordpress/create-blockで最初のブロックを開始すると、SCSSファイルを非常にうまく開始できます。これらのファイルを使用してすぐに開始できます。
editor.scssには、バックエンドエディターに適用されるすべてのスタイルが含まれています。
わかりました、フロントエンドとバックエンドに適用されるスタイルから始めましょう。まず、src/style.scssを作成する必要があります（ @wordpress/create-blockを使用している場合は既に存在します）。
<blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
<cite>The Encyclopedia of world peas</cite>
</blockquote>バックエンドスタイル
<code>...</code>
ブロックエディター固有のスタイルを作成する必要がある場合があります。これを行うには、src/editor.scssを作成します（繰り返しますが、 @wordpress/create-blockがこれを行います）。
<blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
<cite>The Encyclopedia of world peas</cite>
</blockquote>今、npm runビルドを実行すると、スタイルは両方のコンテキストでブロックに適用されます。
block.jsonの参照スタイルblock.jsonメタデータにいくつかのステートメントを追加しましょう：
<code>...</code>
NPMの実行開始を使用して監視モードでビルドインモードを実行でき、コードを変更して保存するたびにコードが自動的にコンパイルされます。
表面に触れた
しかし、これがWordPressブロックを作成する全体的なプロセスの謎を削除するのに役立つことを願っています。これは確かにWordPress開発の新しい時代です。物事を行う新しい方法を学ぶことは困難ですが、私はそれが発展するのを見るのを楽しみにしています。 @wordpress/create-blockのようなツールは、それが何をしていて、その理由を知っているのは素晴らしいことです。
ここで紹介するコンテンツは変わりますか？可能性が非常に高い！しかし、少なくとも参考のためのベースラインがあります。なぜなら、WordPressブロックの成熟度に焦点を当て続けているからです。
リファレンス
キーコンセプト（WordPressブロックエディターマニュアル）
以上がWordPressブロック開発を開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
