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

公開: 2020-12-25

この投稿は、グーテンベルクのブロックパターンに関する完全ガイドの第2部であり、次の点が含まれています。

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

最初の部分では、ガイドでカバーされているすべてのトピックの最初の4つのポイントを確認しました。ブロックパターンとは何か、ページに事前定義されたパターンを挿入する方法、および一部で利用可能なパターンを見つける場所とコピーする方法です。ディレクトリ。 ここで、編集中のページにパターンを貼り付けることができることがわかりましたが、将来の使用のためにパターンライブラリに保存されることはありません。

グーテンベルクのパターンライブラリに新しいパターンを追加する場合は、そのパターンを作成して登録する必要があります。 基本的なコーディングスキルは必要ですが、非常に簡単です。 これが当てはまらない場合でも、心配しないでください。コーディングを必要とせずに同じ結果を達成する方法を後で学習します。

5.新しいパターンを作成します

ブロックパターンを作成するには、BlockPatternAPIを使用する必要があります。 具体的には、PHP関数register_block_pattern() 。 簡単な例で、従わなければならないさまざまな手順を簡単に見てみましょう。

しかし、始める前に、サイドノートを追加しましょう。 コードスニペットを使用してWordPressをカスタマイズするときは、そのスニペットをどこに書くべきかを常に自問する必要があります。 ほとんどのチュートリアルでは、アクティブなテーマのfunctions.phpファイルを推奨しています。これは、作業を完了するための最も簡単なソリューションですが、Davidは、すべてのカスタマイズを追跡するプラグインを作成する方法についてこの投稿を書き、これがより良いソリューションであると主張しました。 。

では、ブロックパターンはどうですか？ テーマに新しいブロックパターンの定義を追加するか（Twenty Twenty-Oneなどの一部のテーマにはすでに独自のテーマが含まれています）、カスタムプラグインに追加することもできます。 両方のソリューションの擁護者と批判者が見つかると確信しているので、ニーズに合ったものを選択してください。

＃1パターンを形成するブロックを設計する

前回の投稿ですでに述べたように、パターンは好きなようにグループ化されたブロックのセットです。 製品の基本的な機能を説明するセクションを作成するために使用できるブロックのパターンを作成するとします。

これを行うには、「パターンの作成」というタイトルのページで、最初にタイトルブロック「6機能セクション」を作成してから、3列のブロックを挿入します。

パターンを形成するブロックのセットを作成します。
パターンを形成するブロックのセットを作成します。

最初のブロックで画像を追加し、その下に機能のタイトルと説明を追加します。

パターンを形成するブロックのセットを作成します。
パターンを形成するブロックのセットを作成します。

次の2つのブロックで、画像、タイトル、説明をコピーします。 そして最後に、この行を複製して、6つの機能の説明を含むセクションを作成します。

私の新しいパターンを形成するブロックのセット。
新しいパターンを形成するブロックのセットをすでに作成しました。

もちろん、ブロックパターンを作成するのは、それを複数回使用する予定がある場合にのみ意味があります。

＃2ブロックの内容をコピーする

ブロックのセットを定義したら、マウスでブロックを選択し、ツールバーで[コピー]をクリックするだけです。

コピーを選択してクリックします。
パターンを構成するブロックのセットを選択し、[コピー]をクリックします。

＃3コピーされたHTMLコンテンツをエスケープする

問題を回避するには、コピーしたテキストをエスケープして、改行やタブ文字などの特殊文字をコンピューターが理解できるようにする必要があります。 onlinestringtools.comやJSONEscape/ Unescapeなどのオンラインツールを使用してテキストを簡単にエスケープできます。以前にコピーしたコードを貼り付けるだけで、正しくエスケープされたテキストが得られます。

＃4パターンを登録する

この時点で残っているのは、 register_block_pattern()関数を使用することだけです。 この関数は、パターンの名前とプロパティの配列の2つの引数を受け取ります。 この投稿の最後に、パターンで定義できるプロパティの詳細を示しますが、最初に、パターンを作成するために必要な手順を見てみましょう。

これが私たちの例です：

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

前のスニペットでわかるように、最初にパターンを識別するための一意の名前を指定し（ ruth-gutenberg-blocks-patterns/section-with-six-features ）、次にいくつかのプロパティを持つ配列を指定します。 title （「6つの機能を備えたセクション」）は、パターンのユーザーに表示され、 content自体が表示されます。 contentは、前の手順でエスケープしたテキストです。

＃5登録されたパターンでプラグインを作成する

パターンをエディターに登録するには、プラグインを作成するか、アクティブなテーマに配置します。 プラグインを作成する場合、これが必要です。

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

そして出来上がり！ ここでエディターを更新すると（もちろん、プラグインをアクティブ化したと仮定して）、新しいパターンが表示されます。

ブロックエディタで利用可能なパターン。
ブロックエディタで利用可能なパターン。

しかし、残念ながら、それはUncathegorizedの下にリストされています。 これは、ブロックが既存のカテゴリのいずれかに属しているのか、新しいカテゴリに属しているのかを示していないためです。

＃6パターンの新しいカテゴリを追加する

新しいブロックパターンを既存のカテゴリに追加することも、 register_block_pattern_category関数を使用して完全に新しいカテゴリを作成することもできます。 この関数は、カテゴリの名前とオプションの配列の2つの引数も取ります。 おなじみですか？

次に例を示します。

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

新しいカテゴリの準備ができたら、ブロックパターンを更新して、この新しいカテゴリの下にリストする必要があることを明示的に指定することを忘れないでください。

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

そして、あなたはそれを持っています：

指定されたカテゴリで作成されたブロックパターン。
指定されたカテゴリで作成され、使用可能なブロックパターン。

これで、作成した新しいページに追加して、適切と思われる変更を加えることができます。これは、新製品の発売のために新しいページで作成されたセクションで確認できます。

作成されたパターンで作成されたセクション。
作成されたパターンで作成されたセクション。

ブロックパターンのプロパティ

この例では、ブロックパターンのtitle 、 content 、およびcategoriesのプロパティを定義しましたが、さらに多くのプロパティがあります。 register_block_pattern関数について説明しているドキュメントに詳細が記載されていますが、要約は次のとおりです。

  • title （必須）：パターンのタイトル。
  • content （必須）：パターンのコンテンツ。
  • description ：インサーターでパターンを説明するために使用される視覚的に非表示のテキスト。 説明はオプションですが、タイトルがパターンの機能を完全に説明していない場合に強くお勧めします。
  • categories ：ブロックパターンをグループ化するために使用される一連のパターンカテゴリ。 ブロックパターンは複数のカテゴリで表示できます。
  • keywords ：ユーザーが検索中にパターンを発見するのに役立つエイリアスまたはキーワードのセット。
  • viewportWidth ：インサーターのパターンの幅を指定する整数。

カテゴリ登録の場合、これ以上小道具がないため、 labelプロパティを定義するだけで済みます。

今日、ブロックのパターンを作成して、Webサイトでいつでも利用できるようにするのは非常に簡単であることがわかりました。 次の投稿では、コードについて何も知らなくてもパターンを作成する方法を説明します。 見逃さず！

Unsplashのジョンキャメロンの注目の画像。