グーテンベルクブロックパターンの完全ガイド（III）

これは、次のトピックを含むブロックパターンに関する完全ガイドの3番目で最後の部分です。

1. ブロックパターンの概要
2. ページにパターンを挿入する
3. ディレクトリで利用可能な事前定義されたパターンおよびその他
4. ディレクトリで利用可能なパターンをサイトに追加します
5. パターンを最初から作成する方法
6. 開発者でない場合のパターンの作成方法
7. 再利用可能なブロックをブロックパターンに変換する方法
8. ブロックパターンを使用したテーマ
9. 公式ドキュメント。

最初の部分では、ガイドでカバーされているすべてのトピックの最初の4つのポイントを確認しました。ブロックパターンとは何か、ページに事前定義されたパターンを挿入する方法、および一部のディレクトリで利用可能なパターンを見つける場所とコピーする方法です。 。 第2部では、ポイント5について詳しく説明しました。コードを使用してパターンを最初から作成する方法です。 そして、この最後の投稿では、最後の4つのポイントを見ていきます。開発者でなくてもパターンを作成する方法、再利用可能なブロックをブロックパターンに変換する方法、ブロックパターンを使用するテーマ、そして最後に、どこで見つけることができるかです。パターンに関する公式ドキュメント。

6.開発者でない場合にパターンを作成する方法

前回の投稿で、コードを使用してパターンを作成するために実行する必要のある手順をすでに説明しましたが、この時点で、開発者でなくてもパターンを作成できることがわかります。 はい、プラグインを使用して行います。 実際、パターンを作成するためのプラグインは複数あります。

• ジャスティンタッドロックによるブロックパターンビルダー、
• BlockMeister –BlockMeisterによるBlockPatter Builder、
• ページビルダーグーテンベルクブロック–GoDaddyによるCoBlocks

3つすべてが同じように機能しますが、若干の違いがあります。 それらのいずれかをインストールすると、新しいオプションがWordPress管理メニューに表示されるため、新しいパターンを作成し、作成されたパターンのリストを管理できます。

Block Patterns Builderプラグイン（つまり、左側の画像）の場合、[Block Patterns]メニューに2つのオプションがあります。1つは新しいパターンを作成するオプションで、もう1つは既存のパターンを一覧表示して編集するオプションです。 BlockMeisterプラグイン（中央の画像に示されている）の場合、パターンのカテゴリを管理するための3番目のオプションも追加されます。 また、CoBlock（最後の画像に表示）の場合、そのメニューは[外観]の下に表示されます。

3つのプラグインすべてで、新しいパターンを作成すると、ページや投稿の編集に使用するのと同じエディターが開きます。 パターンに名前を付けて、必要なブロックを定義するだけです。 パターンの準備ができたら、保存します。

前のスクリーンショットは、BlockMeisterプラグインによって提供されるブロックパターンエディターを示しています。 ご覧のとおり、右側のサイドバーに、名前、スラッグ、説明、パターンの幅、カテゴリなどの追加のプロパティが多数用意されています。 一方、Justin Tadlockプラグインでは、カテゴリを追加できません。 また、CoBlocksを使用すると、パターンのプロパティを追加することもできます。

3つのプラグインのいずれかを使用すると、パターンを保存した後、投稿およびページエディタの[ + ]ボタンをクリックしてパターンを使用できるようになり、必要なときに挿入できるようになります。

ご覧のとおり、適切なプラグインを使用していれば、ページデザインで使用できるパターンを簡単に作成できます。

7.再利用可能なブロックをブロックパターンに変える方法

グーテンベルクをしばらく使用していて、それを使用してページをデザインしている場合は、特定のデザインを複数のページに複製するための再利用可能なブロックも作成したに違いありません。 少なくとも私はやった！ パターンについて初めて聞いたとき、それらは再利用可能なブロックとほとんど同じだと思ったのを覚えています…しかし、そうではありません。2つの概念の間にはいくつかの関連する違いがあります。

再利用可能なブロックは、異なるページに挿入できるブロック（またはブロックのグループ）であり、その内容はすべてのページで同じです。 つまり、後で変更する場合は、すべてのインスタンスを更新する必要があります。 したがって、再利用可能なブロックを他のブロックとは異なるものにする場合は、最初にそれを通常のブロックに変換する必要があります。

一方、ブロックパターンは、カスタマイズできるように設計されています。これは、挿入後に微調整する必要がある基本的なデザインとして機能します。 もちろん、オプションは無制限です。 このパターンのアイデアは、ブロックを組み合わせて魅力的に見せるための出発点を提供することです。

通常のブロックに変換してから便利にカスタマイズするというアイデアで再利用可能なブロックを作成した場合は、これらのブロックをブロックパターンに変換する方が理にかなっています。 どうすればこれを行うことができますか？

JBAudrasのReusableBlockExtendedプラグインは、この機能を提供します。 それをどのように行うか見てみましょう。

プラグインをインストールすると、再利用可能なブロックを管理するためのメニューオプションが表示されます。 [すべての再利用可能なブロック]をクリックすると、定義したブロックのリストが表示されます。

上の画像でわかるように、再利用可能なブロックのリストには2つのブロックが表示され、それぞれについて、使用されている場所、使用できるショートコードとPHP関数、およびボタンが表示されます。ブロックパターンに変換できます。

[ブロックパターンに変換]ボタンをクリックすると、パターンが作成され、エディターの[再利用可能なブロックから変換]カテゴリで使用できるようになります。

8.ブロックパターンを使用したテーマ

この記事の執筆時点では、WordPress.orgテーマディレクトリにカスタムブロックパターンのテーマがすでに14あり、リストは急速に増えています。

• WordPress.orgによるTwentyTwenty-Oneバージョン1.0
• C9スターターバージョン2.4.4bycovertnine
• CovertnineによるC9Workバージョン2.3.1
• Automatticによるシードレットバージョン1.1.2
• exsthemeによるExSバージョン0.9.0
• uxlによるCorderoバージョン1.2.2
• DinevDmitryによるBigwigsバージョン0.7.1
• nobitaによるエマルジョンバージョン1.6.9
• WordPress.orgによるTwentyTwentyバージョン1.6
• VWTHEMESによるVWヘルスコーチングバージョン0.6.5
• WordPress.orgによる29バージョン4.9.6
• DinevDmitryによる執筆バージョン1.3.0
• WordPress.orgによる27バージョン2.5
• WordPress.orgによる26バージョン2.3

この機会に、テーマ開発者であり、WordPress 5.5に含まれる事前定義されたブロック（コアブロックパターン）を削除したい場合は、次のコードで実行できます。

 remove_theme_support( 'core-block-patterns' );

9.公式ドキュメント

最後に、ここにブロックパターンに関するいくつかの便利なリンクがあります。

• エンドユーザー向け–パターンをブロックして、パターンとは何か、パターンにアクセスする方法、投稿やページにパターンを追加する方法、コンテンツに合わせてパターンをカスタマイズする方法を理解するための紹介ビデオ。 このビデオは、WordPressトレーニングチームによって公開されたワークショップです。
• エンドユーザー向け–ドキュメンテーションチームによって作成されたブロックパターンドキュメンテーション。
• 開発者向け– Gutenbergチームによって公開されたBlockAPIのドキュメントのBlockPatternsページで、前の投稿ですでに説明しました。

以上です！ このガイドがお役に立てば幸いです。 不足している情報があると思われる場合は、下のコメントセクションでお気軽にお知らせください。

UnsplashのPatrickHendryによる注目の画像。