<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>

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

登録ブロック

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

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

<code>...</code>

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

npx @wordpress/create-block

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

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

編集および保存機(jī)能で何が起こっていますか？ WordPressブロック開発の微妙さの1つは、「バックエンド」と「Frontend」の區(qū)別です。これらのコンテキストでブロックのコンテンツをレンダリングするために使用されます。編集では、編集がブロックエディターからコンテンツをデータベースに保存して、WebサイトのFrontendでコンテンツをレンダリングします。

クイックテスト

ブロックがブロックエディターで動(dòng)作し、フロントエンドでレンダリングされるかどうかを迅速に操作して確認(rèn)できます。 index.jsをもう一度開き、編集を使用して機(jī)能を保存して、基本を返して、それらがどのように機(jī)能するかを説明します。

<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>

コンテンツ領(lǐng)域にブロックを入れた場(chǎng)合、編集関數(shù)からメッセージを返します：

記事を保存して公開する場(chǎng)合、フロントエンドで表示するときは、保存関數(shù)からメッセージを返す必要があります。

編集および保存関數(shù)は、SRCディレクトリの @wordpress/create-blockによって生成された2つの既存のファイルに関連付けられており、各ファイルに必要なその他のインポートが含まれていることに注意してください。さらに重要なことは、これらのファイルがブロックタグを含むコンポーネントの編集と保存を作成します。

<code>...</code>

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

npx @wordpress/create-block

スタイルブロック

{
  // 定義項(xiàng)目名稱
  "name": "block-example",
  // 使用語義版本控制設(shè)置項(xiàng)目版本號(hào)
  "version": "0.1.0",
  // 項(xiàng)目的簡(jiǎn)短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以將其替換為您自己
  "author": "The WordPress Contributors",
  // 標(biāo)準(zhǔn)許可信息
  "license": "GPL-2.0-or-later",
  // 定義主JavaScript文件
  "main": "build/index.js",
  // 我們?cè)陂_發(fā)過程中構(gòu)建和編譯插件所需的一切
  "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"
  },
  // 定義使用腳本包的哪個(gè)版本（撰寫本文時(shí)為24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

EditorStyleは、バックエンドに適用されるスタイルへのパスを提供します。

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

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

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

を使用しています

いくつかのCSSファイルをビルドディレクトリに配置し、src/block.jsonのパスを參照して、ビルドを?qū)g行してから実行できます。しかし、これは @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ファイルに書き込み、コンパイルプロセスを?qū)g証しています。

フロントエンドおよびバックエンドのスタイル

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

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>

それは今すべてです！ビルドを?qū)g行すると、これはbuild/style.cssにコンパイルされ、ブロックエディターとフロントエンドによって參照されます。

バックエンドスタイル

<code>...</code>

ブロックエディター固有のスタイルを作成する必要がある場(chǎng)合があります。これを行うには、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ビルドを?qū)g行すると、スタイルは両方のコンテキストでブロックに適用されます。

block.jsonの參照スタイル

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

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

<code>...</code>

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

NPMの実行開始を使用して監(jiān)視モードでビルドインモードを?qū)g行でき、コードを変更して保存するたびにコードが自動(dòng)的にコンパイルされます。

表面に觸れた

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

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

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

リファレンス

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

キーコンセプト（WordPressブロックエディターマニュアル）

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