検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >WordPressブロック開発を開始します

WordPressブロック開発を開始します

Christopher Nolan
Christopher Nolanオリジナル
2025-03-10 11:11:10143ブラウズ

Getting Started With WordPress Block Development

WordPress開発は現在、あなたが初心者であろうと上級開発者であろうと、ブロックエディター（WordPress 5.0）やサイトエディター（WordPress 5.9）を含む「サイト全体の編集」（FSE）機能の導入を受けています。

私たちは5年間ブロックエディターと連絡を取り合っていますが、ドキュメントが欠落または時代遅れのいずれかであるため、その開発は依然として困難です。これは、FSE関数の急速な反復の現在の状況をより多く反映しています。

たとえば、

2018年には、Gutenberg Developmentの紹介に関する一連の記事がCSS-Tricksで公開されました。しかし、時間が経ち、その開発方法はまだ効果的ですが、それはもはや推奨されません（さらに、それが基づいているCreate-Guten-Blockプロジェクトはもはや維持されていません）。

この記事は、WordPressブロックの開発を開始し、現在のアプローチに従うのに役立つことを目的としています。もちろん、この記事が公開された後、状況は変わるかもしれません。しかし、たとえツールが時間の経過とともに開発されたとしても、コアの概念は同じままである可​​能性が高いため、私はそのコアアイデアに焦点を合わせようとします。

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>
通常のHTMLのように見えますよね？ ！技術的には、これは「シリアル化された」ブロックです。 HTMLコメント「TextAlign」：「右」のJSONデータに注意してください。これは、

属性 - ブロック関連属性です。

ブロックエディターを閉じてから、しばらくすると再び開くとします。ブロックエディターは、関連するpost_contentフィールドのコンテンツを取得します。その後、編集者は取得されたコンテンツを解析し、次のことに遭遇したときに次のように解析します。

それはそれ自体と話します：
<code>...</code>

わかりました、これはプルコートブロックのように見えます。まあ...プロパティもあります...私は、エディターのプロパティに基づいて、エディターにプルコートブロックのグラフィカルインターフェイスを構築する方法を教えてくれるJavaScriptファイルを持っています。このブロックがその完全な栄光の中で提示されるように、私は今これを行うべきです。

ブロック開発者として、あなたの仕事は
です

WordPressに、特定の種類のブロックと関連する詳細を登録することを伝えます。
  1. ブロックエディターにJavaScriptファイルを提供します。これは、データベースに保存するために「シリアル化」しながらエディタにブロックをレンダリングするのに役立ちます。
  2. スタイルやフォントなど、ブロックが適切に機能するために必要な他のリソースを提供します。
    4. シリアル化されたデータからグラフィカルなインターフェイス、およびその逆へのこの変換は、ブロックエディターでのみ発生することに注意することが重要です。フロントエンドでは、コンテンツが表示され、まったく同じ方法で保存されます。したがって、ある意味では、ブロックはデータをデータベースに入れる賢い方法です。

これにより、ブロックがどのように機能するかをより明確に理解できることを願っています。

ブロックはプラグインだけです

ブロックは単なるプラグインです。さて、技術的には、テーマに

ブロックを配置したり、1つのプラグインに複数のブロックを配置したりできます。ただし、通常、ブロックを作成したい場合は、プラグインを作成する必要があります。したがって、WordPressプラグインを作成したことがある場合は、WordPressブロックの作成方法を部分的に習得しました。

しかし、ブロックはもちろん、WordPressプラグインをセットアップしたことがないと仮定しましょう。どこから始めますか？ set block

ブロックとは何かを既に紹介しています。セットアップを開始して作成します。

ノードがインストールされていることを確認してください

これにより、NPMがブロックの依存関係をインストールし、コンテンツをコンパイルするのに役立つNPMおよびNPXコマンドにアクセスできます。NPXはパッケージをインストールせずにパッケージでコマンドを実行します。 MacOSを使用している場合は、ノードをインストールしている可能性があり、NVMを使用してバージョンを更新できます。 Windowsを使用している場合は、ノードをダウンロードしてインストールする必要があります。

プロジェクトフォルダーを作成

今では、コマンドラインに直接ジャンプする他のチュートリアルに出くわし、 @wordpress/create-blockというパッケージをインストールするように指示することができます。このパッケージは、開発を開始するために必要なすべての依存関係とツールを備えた完全なプロジェクトフォルダーを生成するため、素晴らしいです。

私は自分のブロックをセットアップするときにこのアプローチを個人的に取りますが、導入する主観的なコンテンツを排除し、理解のために基本的な開発環境の必要な部分のみに焦点を当てたいので、しばらく私を容認してください。

これらは私が具体的に指摘したいドキュメントです：

    readme.txt：これは、プラグインディレクトリの前面に少し似ています。これは通常、プラグインを説明し、使用とインストールの詳細を提供するために使用されます。 WordPress Plugin Directoryにブロックを送信すると、このファイルはプラグインページの登録に役立ちます。ブロックプラグイン用のGitHubリポジトリを作成する予定がある場合は、同じ情報を持つreadme.mdファイルを使用して、そこによく表示されるようにすることも検討してください。
    • package.json：これは、開発に必要なノードパッケージを定義します。インストール時に開きます。古典的なWordPressプラグインの開発では、Composer and Composer.jsonファイルの使用に慣れている場合があります。これは同等です。
    • Plugin.php：これはメインプラグインファイルです。はい、古典的なPHPです！プラグインのタイトルとメタデータをここに配置し、それを使用してプラグインを登録します。
これらのファイルに加えて、ブロックのソースコードを含める必要があるSRCディレクトリもあります。

これらのファイルと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
これはメインプラグインファイルにあり、好きなように名前を付けることができます。 index.phpやplugin.phpなどの一般名と呼ぶことができます。 Create-Blockパッケージは、インストール時に提供されたプロジェクト名として自動的に名前を付けます。この例を「ブロック例」と呼んでいるため、パッケージはこれらすべてを使用したブロックexample.phpファイルを提供します。

自分を著者にするなど、いくつかの詳細を変更する必要があります。これのすべてが必要なわけではありません。 「ヘッド」から始めたら、これに近いかもしれません：

{
  // 定义项目名称
  "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"
  }
}
これはすでにWordPressプラグインマニュアルの完全なパターンであるため、各行の正確な目的について詳しく説明しません。

ファイル構造

ブロックに必要なファイルを表示しました。ただし、 @wordpress/create-blockを使用している場合は、プロジェクトフォルダーに他の多くのファイルが表示されます。

以下は現在含まれているものです

すごい、たくさん！新しいコンテンツを指摘しましょう：
<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>
  • ビルド/：このフォルダーは、生産対策ファイルを処理するときにコンパイルされた資産を受信します。
  • node_modules：このフォルダーは、NPMインストールを実行するときにインストールされたすべての開発依存関係を保持します。
  • SRC/：このフォルダーには、コンパイルされてビルドディレクトリに送信されるプラグインのソースコードが保持されます。それらのそれぞれを後で見ます。
  • .EditorConfig：これには、コードの一貫性についてコードエディターを微調整するための構成が含まれています。
  • .Gitignore：これは、バージョン制御追跡から除外するローカルファイルを識別する標準リポジトリファイルです。あなたのnode_modulesは間違いなくここに含まれるべきです。
  • package-lock.json：これは、NPMインストールを使用してインストールされた必要なパッケージの更新を追跡する自動生成ファイルです。

メタデータをブロック

私はあなたと一緒にSRCディレクトリを掘り下げたいと思っていますが、最初にファイルの1つであるblock.jsonに焦点を当てます。 Create-Blockを使用している場合は、それを作成してください。 WordPressは、WordPressのコンテキストを提供するメタデータを提供してブロックを同時に識別し、ブロックエディターにレンダリングするメタデータを提供することにより、ブロックを登録するための標準仕様方法として使用するように懸命にプッシュしています。

以下は、 @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>
  • $スキーマファイルのコンテンツを確認するために使用されるスキーマ形式を定義します。必要なもののように聞こえますが、サポートされているコードエディターが構文を確認し、ツールチップやオートコンプリートなどの追加機能を提供できるため、完全にオプションです。
  • Apiversionとは、プラグインで使用されるブロックAPIのバージョンを指します。今日、バージョン2は最新バージョンです。
  • 名前は、プラグインを識別するのに役立つ必要な一意の文字列です。その前にCSS-Tricks/を追加したことに注意してください。これを名前空間として使用して、同じ名前の他のプラグインとの競合を回避するのに役立ちます。頭字語のようなもの（as/block-exampleなど）を使用することを選択できます。
  • バージョンは、新しいバージョンをリリースする際のキャッシュクリアリングメカニズムとしてWordPressによって推奨されます。
  • タイトルは、ディスプレイプラグインがどこにでも使用される名前を設定する必要な別のフィールドです。
  • カテゴリグループは、他のブロックでブロックし、ブロックエディターにそれらを一緒に表示します。現在存在するカテゴリには、テキスト、メディア、デザイン、ウィジェット、テーマ、埋め込みが含まれます。また、カスタムカテゴリを作成することもできます。
  • アイコンを使用すると、Dashiconsライブラリから何かを選択して、ブロックエディターのブロックを視覚的に表現できます。この例では、私たちが自分のプルコートなどを作っているので、フォーマットクオートアイコンを使用しています。これは確かに可能ですが、それは素晴らしいことですが、私たちは自分のものを作成するのではなく、既存のアイコンを利用できます。
  • editorscriptは、メインのJavaScriptファイルindex.jsが配置されている場所です。

登録ブロック

実際のコードに入る前にもう1つのことは、プラグインを登録することです。このすべてのメタデータを設定するだけで、WordPressを使用する方法が必要です。このように、WordPressはすべてのプラグイン資産を見つける場所を知っているため、ブロックエディターで使用するためにキューに入れることができます。

ブロックの登録は2段階のプロセスです。 PHPとJavaScriptに登録する必要があります。 PHPの側面については、メインプラグインファイル（この場合はブロックexample.php）を開き、プラグインタイトルの後に以下を追加します。 

<code>...</code>
これは、Create-Blockユーティリティが私にとって生成するものであるため、このような方法で機能が命名されています。異なる名前を使用できます。重要なのは、他のプラグインとの競合を避けることです。そのため、ここで名前空間を使用して可能な限りユニークにすることをお勧めします。

すべてのブロックメタデータを含むblock.jsonがSRCにある場合、なぜビルドディレクトリを指すのですか？これは、コードをコンパイルする必要があるためです。スクリプトパッケージは、SRCディレクトリ内のファイルのコードを処理し、Buildディレクトリの生産で使用されるコンパイルされたファイルを配置し、

block.json 
npx @wordpress/create-block
ファイル

をコピーします。 わかりました、登録ブロックのJavaScriptの側面に行きましょう。 src/index.jsを開き、次のように見えることを確認してください：

私たちはReactとJSXの世界に入っています！これは、WordPressを伝えます：

  • @wordpress/blocksパッケージからレジスタブロックタイプモジュールをインポートします。
  • block.jsonからメタデータをインポートします。
  • 対応するファイルからコンポーネントを編集および保存します。後でこれらのファイルにコードを追加します。
  • ブロックを登録して編集してコンポーネントを保存してブロックをレンダリングし、コンテンツをデータベースに保存します。

編集および保存機能で何が起こっていますか？ 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>
バックエンドタグ（src/edit.js）

私たちがしたことを見ていますか？ @wordpress/block-editorパッケージから小道具をインポートしています。これにより、後でスタイルに使用できるクラスを生成できます。また、翻訳を処理するために__国際化関数をインポートします。 

npx @wordpress/create-block
フロントエンドタグ（src/save.js）

これにより保存コンポーネントが作成されます。SRC/edit.jsとほぼ同じコンテンツを使用しますが、テキストはわずかに異なります。

同様に、CSSで使用できる素敵なクラスを手に入れました。

スタイルブロック

{
  // 定义项目名称
  "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"
  }
}
ブロックプロパティを使用してクラスを作成する方法を紹介しました。あなたはこれをCSS関連のWebサイトで読んでいるので、ブロックスタイルの書き方を具体的にカバーしていなければ、何かを見逃しているように感じます。

フロントエンドとバックエンドのスタイルを区別します

  • EditorStyleは、バックエンドに適用されるスタイルへのパスを提供します。
  • スタイルは、フロントエンドとバックエンドに適用される共有スタイルへのパスです。

    • Kev Quirkには、バックエンドエディターをフロントエンドUIのように見せる方法を示す詳細な記事があります。

    @wordpress /scriptsパッケージは、 /srcディレクトリのコードを処理し、コンパイルされた資産を /buildディレクトリに配置するときにblock.jsonファイルをコピーすることを思い出してください。ブロックの登録に使用されるbuild/block.jsonファイル。これは、SRC/block.jsonで提供するパスは、build/block.jsonに関連して記述する必要があることを意味します。 SASS

    を使用しています

    いくつかのCSSファイルをビルドディレクトリに配置し、src/block.jsonのパスを参照して、ビルドを実行してから実行できます。しかし、これは @wordpress/scriptsコンパイルプロセスを最大限に活用していません。これにより、SASSをCSSにコンパイルできます。代わりに、SRCディレクトリにスタイルファイルを配置し、JavaScriptにインポートします。

    これを行うとき、 @wordpress/scriptsがスタイルを処理する方法に注意する必要があります：

    style.cssまたはstyle.scssまたはstyle.sassという名前のファイルは、javascriptコードにインポートされたものがstyle-index.cssにコンパイルされます。
    • 他のすべてのスタイルファイルがコンパイルされ、index.cssにバンドルされます。
      • @wordpress/scriptsパッケージは、webpackを使用してバンドルされ、postcssプラグインを使用してスタイルを張られています。 PostCSSは、他のプラグインで拡張できます。スクリプトパッケージでは、SASS、SCSS、およびAutoprefixerのプラグインを使用します。これらはすべて、追加のパッケージをインストールせずに使用できます。

    実際には、 @wordpress/create-blockで最初のブロックを開始すると、SCSSファイルを非常にうまく開始できます。これらのファイルを使用してすぐに開始できます。

    editor.scssには、バックエンドエディターに適用されるすべてのスタイルが含まれています。

      style.scssには、フロントエンドとバックエンドで共有されるすべてのスタイルが含まれています。
    • ブロックCSSにコンパイルするSASSを書いて、それをしましょう。これらの例はあまりsassedではありませんが、私はまだそれらをSCSSファイルに書き込み、コンパイルプロセスを実証しています。
    フロントエンドおよびバックエンドのスタイル

    わかりました、フロントエンドとバックエンドに適用されるスタイルから始めましょう。まず、src/style.scssを作成する必要があります（ @wordpress/create-blockを使用している場合は既に存在します）。

    src/style.scssを開いて、ブロック属性から生成したクラスを使用して基本的なスタイルをいくつか掲載します：

    <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>
    それは今すべてです！ビルドを実行すると、これはbuild/style.cssにコンパイルされ、ブロックエディターとフロントエンドによって参照されます。

    バックエンドスタイル
    <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の参照スタイル

    edit.jsおよびindex.jsにスタイルファイルをインポートしましたが、コンパイルステップはビルドディレクトリ（index.css and style-index.css）で2つのCSSファイルを生成することを忘れないでください。ブロックメタデータ内のこれらの生成されたファイルを参照する必要があります。

    block.jsonメタデータにいくつかのステートメントを追加しましょう：

    <code>...</code>
    npm run build buildを再度実行し、WordPress Webサイトのプラグインをインストールしてアクティブ化すると、使用する準備が整いました！

    NPMの実行開始を使用して監視モードでビルドインモードを実行でき、コードを変更して保存するたびにコードが自動的にコンパイルされます。

    表面に触れた

    実際のブロックは、ブロックエディターの設定サイドバーとWordPressが提供するその他の機能を使用して、リッチなユーザーエクスペリエンスを作成します。また、ブロックには実際に編集と保存の2つのバージョンがあるため、コードの複製を避けるためにコードを整理する方法についても考える必要があります。

    しかし、これがWordPressブロックを作成する全体的なプロセスの謎を削除するのに役立つことを願っています。これは確かにWordPress開発の新しい時代です。物事を行う新しい方法を学ぶことは困難ですが、私はそれが発展するのを見るのを楽しみにしています。 @wordpress/create-blockのようなツールは、それが何をしていて、その理由を知っているのは素晴らしいことです。

    ここで紹介するコンテンツは変わりますか？可能性が非常に高い！しかし、少なくとも参考のためのベースラインがあります。なぜなら、WordPressブロックの成熟度に焦点を当て続けているからです。

    リファレンス

    繰り返しますが、私の目標は、この急速に成長している時代にブロック開発に入るための効率的なパスを計画することであり、WordPressドキュメントは追いつくのが少し難しいです。これらのコンテンツを整理するために使用したリソースは次のとおりです。

    キーコンセプト（WordPressブロックエディターマニュアル）
    • ブロックチュートリアル（WordPress Block Editor Manual）を作成します
    • block.jsonのメタデータ（wordpress blockエディターマニュアル）
      • コアブロックのソースコード（WordPress github）
      • @wordpress/scriptsパッケージ（wordpress github）で使用されるwebpack構成
      • ブロックエディターブロックを構築することを学ぶバックエンジニア、パート1（トムマクファーリン）
      • Ryan WelcherのTwitch Live Broadcast（RyanはAutomattic Developer Advocateです）

    以上がWordPressブロック開発を開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    php JavaScript composer json css scss html npm sass postcss webpack 命名空间 format 字符串 并发 JS github windows macos 数据库 ui 自动化 WordPress
    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：奇妙なCSSグラデーションバグから静的ノイズを作成します次の記事：奇妙なCSSグラデーションバグから静的ノイズを作成します

    関連記事

    続きを見る