WordPress Developer Blog のブロックの開発・カスタマイズに有用な情報源
WordPress.org の Developer Blog から WordPress のブロックの開発・カスタマイズに有用な記事をまとめました。
記事の投稿日が 2023 年 3 月〜 2024 年 8 月までのものを集めています。 順序は投稿日の降順（日付が新しいもの順）です。
とても有用な記事ですが Developer Blog には他のトピックの記事も多く埋もれてしまうので、まとめてチェックしたい方はまとめページとしてご活用ください。
WordPress のブロックの拡張方法
How to extend a WordPress block – WordPress Developer Blog
投稿日: 2024/08/15
イントロの抜粋:
ブロックを拡張する方法は多岐にわたります。 本記事では拡張方法と現在ある制約について詳しく解説します。 議論を分かりやすくするため、手法を 2 つのセクションに分けました。 1 つめセクションではブロックサポートの修正、ブロックスタイルの追加、ブロックバリエーションの登録に関する API に焦点を当てます。 2 つめのセクションでは、完全にカスタマイズされた機能を追加する方法を紹介します。
主な内容:
- ブロック API の使用
- ブロックサポートの変更
- ブロックスタイルの登録
- ブロックバリエーションの登録
- カスタム機能の追加
- 動的レンダリングと静的レンダリング
- ブロック属性の追加
- エディターユーザーインターフェースの追加
- 保存されるマークアップの変更
- ブロックのフロントエンドマークアップの変更
- 現在ある制約
- 最後に
WordPress の編集体験を改善（キュレーション）する 15 の方法
15 ways to curate the WordPress editing experience – WordPress Developer Blog
投稿日: 2024/07/04
イントロの抜粋:
特定のニーズに合わせてインターフェースを調整して WordPress のエディタをカスタマイズするとユーザー体験を大幅に向上できます。 編集環境をキュレーションすることで、コンテンツ作成の効率化、余分な要素の削減、一貫性の確保、利用可能なツールの適切性を確保できます。
この投稿ではエディタをキュレーションする 15 の方法を紹介し、現在 WordPress で利用可能なさまざまな手法を紹介します。
主な内容:
- キュレーション手法の適用
- キュレーションの例
theme.jsonの設定- 特定のブロックの無効化
- ブロックバリエーションの登録解除
- ブロックスタイルの登録解除
- ブロックサポートの無効化
- ブロックサポートの有効化
- ブロックのロックのユーザーインターフェースの無効化
- コードエディターの無効化
- インスペクタタブの無効化
- Openverse の無効化
- デフォルトの画像サイズの設定
- ブロックディレクトリの無効化
- パターンディレクトリの無効化
- テンプレートエディターへのアクセスの無効化
- リッチテキストブロックのフォーマットオプションの登録解除
アニメーション付きタイムラインプラグインの作り方
How to create an animated timeline plugin – WordPress Developer Blog
投稿日: 2024/06/13
イントロの抜粋:
独特なタイムライン体験の作成方法をご案内します。 ブロックを使ってタイムラインを作り、アニメーション用のカスタム CSS を登録し て、 JavaScript を使ってビューポート内の交差要素を観察する方法を学んでください。 もちろん、ページ上で要素が動くのを好まない人もいるので、アニメーションを無効にする方法も説明します。
主な内容:
- ブロックでタイムラインを作成
- アニメーションタイムラインプラグインのセットアップ
- HTML タグプロセッサーとブロックフィルタ
- カスタム CSS とカスタム JavaScript ファイルの登録
- アニメーションスタイルの追加
- アニメーション JavaScript の追加
- ブロックパターンの登録
Block Bindings を使った書評サイトの構築パート 2: クエリ・パターン・テンプレート
投稿日: 2024/06/06
イントロの抜粋:
このシリーズのパート 1 では、カスタムブロックを作成する時間やリソースが与えられないという制約のあるクライアントプロジェクトを想定しました。 その代替案として Block Bindings API と併せてカスタムフィールドを使用するオプションがありました。
このチュートリアルのパート 2 では、パート 1 の続きとしてブロックテーマでカスタムフィールドを使用する実践的な手順を紹介します。
主な内容:
- クエリによるポストの検索
- パターン
- テンプレート
- カスタムフィールドと接続されたブロックの UI の未来
InnerBlocks とポストメタを使ったマルチブロックプラグインのセットアップ
Setting up a multi-block plugin using InnerBlocks and post meta – WordPress Developer Blog
投稿日: 2024/05/22
イントロの抜粋:
現在
create-blockユーティリティは一度にひとつのブロックしか作成できず、複数のブロックを設定するオプションは提供していません。 例えば、 2 つ以上の関連するブロックを作成したい場合、特にあるブロックが別のブロックを使う形でユーザー体験を改善したい場合はどうでしょうか？ ポストメタを使ってユーザーに追加のコンテキストを提供したい場合はどうでしょうか？ これらは一般的なユースケースであり WordPress が常に優れている分野です。ここでは
create-blockユーティリティを使用してマルチブロックのアプローチを構築する方法について学びます。
主な内容:
- マルチブロックプラグインの設定
- 投稿メタの登録
- レビューブロックの構築
- レビューカードブロックの構築
- レビューブロックの使用制限
Block Bindings を使った書評サイトの構築パート 1: カスタムフィールド・ブロックバリエーション
投稿日: 2024/05/06
イントロの抜粋:
あなたが働く制作会社が新しいクライアントを獲得した状況を想像してください。 このクライアントは完全な改修が必要な書評サイトを運営しています。 各書籍にひもづける評価、著者、ページ数、 Goodreads へのリンクなど、いくつかのカスタムフィールドを追加する必要があります。
会社はちょうどクラシックベースの WordPress 開発からブロックエディタを完全に受け入れる形に移行している最中です。 仕事の制約上、クライアントが必要とするすべてのメタデータやカスタマイズに対してカスタムブロックを作成することはできません。 もう少し効率的な解決策が必要です。
ここで登場するのが Block Bindings API です。 この API の基本的な紹介については、以前の投稿で取り上げました。
Block Bindings API の真の力は、ブロックバリエーションやパターンのような WordPress 内の他の API やシステムとの組み合わせにあります。 これらを組み合わせを使い始めたら、ブロックシステムの上で達成できる可能性はほぼ無限に感じられます。
クライアントの書評サイトの基盤を一緒に構築しましょう。
主な内容:
- プロジェクトの設定
- カスタムフィールドの登録
- 問題と解決策: カスタムフィールドをブロックに接続する
- ブロックバリエーションを使ったひもづけられたブロックの挿入
- メタ入力 UI の追加
WordPress 6.5 の Block Hooks API の探求
Exploring the Block Hooks API in WordPress 6.5 – WordPress Developer Blog
投稿日: 2024/03/25
イントロの抜粋:
WordPress 6.4 で導入された Block Hooks API は、ブロックテーマにブロックを動的に挿入することを可能にする拡張機構です。 例えば、ユーザーが自分で追加しなくても、プラグインがサイトの主要なナビメニューに eCommerce ショッピングカートブロックを追加できます。
WordPress 6.5 では、コミュニティからリクエストのあった新しい機能が多数追加され、 API が拡張されています。 ナビゲーションメニュー、ユーザーが編集したテンプレート、テンプレートパーツ、パターンにブロックを挿入できます。 2 つの新しいフィルターにより、挿入されたブロックの属性をカスタマイズできます。 静的レンダリングのブロックなどのサポートなども追加されました。
この記事では、複数の実用的な例を通して Block Hooks API の活用方法について包括的な概要を提供します。
主な内容:
- ブロックフックの作成方法
- 基本（例 1 ）
- コンテキストとブロック属性（例 2 ）
innerContentとinnerBlocks（例 3 ）- ナビゲーションメニュー（例 4 ）
PHP を使ったブロックバリエーションの登録方法
How to register block variations with PHP – WordPress Developer Blog
投稿日: 2024/03/14
イントロの抜粋:
WordPress はカスタムブロックバリエーションを登録する新しい方法を間もなく提供します。 以前は JavaScript ベースの Variations API を通じてそれらを登録していましたが、 WordPress 6.5 では専用の PHP フィルターフックを使用してバリエーションを定義できるようになります。
このフックの追加は、より大きなパフォーマンスに関するパッチの一部であり、詳細は開発ノートに記載されています。 プラグインやテーマの作者にとってうれしいことは、バリエーションを登録するプロセスがよりかんたんになることです。
この変更は JavaScript での開発をあまり快適だと感じない開発者にブロックシステムとの統合の機会を新たに提供します。
主な内容:
- ブロックバリエーションのフックとコールバック
- カスタムバリエーションの構築
- バリエーション引数のカスタマイズ
ブロックベースのメガメニューの紹介
An introduction to block-based mega menus – WordPress Developer Blog
投稿日: 2024/02/29
イントロの抜粋:
メガメニューはウェブデザインで広く使用されており、ブロックテーマの登場以降私は WordPress のナビゲーションブロックにシームレスに組み込む方法を探してきました。 3 月末にリリース予定の WordPress 6.5 には、ブロックベースのメガメニューを実現するための Interactivity API などの機能が含まれています。 この記事では、これらの新しいツールを使用したアプローチを紹介します。
メガメニューを必要とするサイトはかぎられています。 このチュートリアルが表面的にあなたのワークフローに関係ないように見えてもぜひ読んでみてください。 この記事には WordPress 6.5 の新機能を用いたブロックプラグインの設計に関する情報が含まれています。 ここで取り上げる多くの概念はメガメニューを超えて広く適用できます。 例:
- カスタムテンプレートパートエリアの作成方法
- ナビゲーションブロックにカスタムブロックを追加する方法
- Interactivity API を使うプロジェクトの設定方法
- コアコンポーネントを使ってブロック開発を効率化する方法
主な内容:
- カスタムテンプレートパーツエリアの追加
- ナビゲーションブロックへのメガメニューの追加
block.jsonとブロックスタイルの更新、カスタムアイコンの追加- エディタユーザーインターフェースの追加
- フロントエンドの構成
- インタラクションの追加（ Interactivity API ）
あなたの WordPress テーマにスターターパターンを追加する
Adding starter patterns to your WordPress themes – WordPress Developer Blog
投稿日: 2024/01/31
イントロの抜粋:
もしあなたが空の画面の前に座ってどこから始めればいいのか考えたことがあるなら、あなたはユーザーと多くの共通点を持っています。 そして、スターターパターンを使って彼らをサポートすることができます。 スターターパターンには2つの種類があります：
- ページパターン: これらの選択可能なパターンは、新しい投稿、ページ、またはカスタム投稿タイプのエントリーを作成するときに表示されます。 （WordPress 6.0で追加）
- テンプレートパターン: これも選択可能で、サイトエディターから新しいテンプレートを作成する際に表示されます。 （WordPress 6.2で追加さ）
スターターパターンについて聞いたことがありませんか？それでも大丈夫です。 これらがどのように機能し、なぜ使用すべきなのかを説明します。
この投稿では、デフォルトのTwenty Twenty-Fourテーマを使用して、これらの機能がどのように動作するかを探ります。
主な内容:
- スターターページパターン
- スターターテンプレートパターン
- パターン再利用のヒント
- 「通常」のパターンをスターターパターンにネストする
- テンプレート内でスターターパターンを使用する
特定のブロックの無効化
How to disable specific blocks in WordPress – WordPress Developer Blog
投稿日: 2024/01/29
イントロの抜粋:
WordPress で特定のブロックを無効にしたいと思ったことはありませんか？編集体験をシンプルにしたい、サイト全体で一貫性を保ちたい、その他どんな理由であれ、この記事を読めばその方法がわかりますよ。
基本的に WordPress におけるブロック制限は PHP でも JavaScript でも可能です。 このどちらを選ぶべきかは既存のサイトの状態や個人の好みによって大きく変わります。
主な内容:
- 個人設定の利用する
- PHP でブロックを無効にする
- JavaScript でブロックを無効にする
- ブロックバリエーションを無効にする
allowedBlocks属性を使ってブロックを無効にする
ブロック属性の理解
Understanding block attributes – WordPress Developer Blog
投稿日: 2023/09/14
イントロの抜粋:
ブロックの属性には、一見思われるよりも多くの側面があります。 ブロックにはいくらでも多くの属性を持たせることができ、これらはブロックの
block.jsonファイルの attributes （属性）プロパティで定義されます。ブロック属性はブロックのデータやコンテンツを格納する変数です。 ユーザーはそこに保存された値を修正したり更新したりできます。
主な内容:
- シンプルブロックの解剖学
- ソースとセレクタープロパティ
- HTML 属性をソースとして使う
- クエリをソースとして使う
ブロックのスタイリング: CSS カスタムプロパティでユーザーに力を与える
Styling blocks: empowering users with CSS custom properties – WordPress Developer Blog
投稿日: 2023/08/08
イントロの抜粋:
Block Supports API を使用すると、色や間隔のようなスタイル設定を含む、さまざまなオプションをかんたんにブロックに追加できます。
主な内容:
- なぜブロックで複雑なマークアップ？
- CSS カスタムプロパティ
Edit()コンポーネント- 設定インタフェースの追加
save()関数- 動的ブロック
クライアントサイドフィルタを使った編集体験の改善
Curating the Editor experience with client-side filters – WordPress Developer Blog
投稿日: 2023/03/24
イントロの抜粋:
今日ウェブサイトのコンテンツ管理は WordPress 6.2 で導入された新しいクライアントサイドフィルターのおかげでよりかんたんになりました。
blockEditor.useSetting.beforeフィルターと呼ばれるこの機能はこれまでに不可能だった水準のキュレーションを可能にします。この記事ではその詳細と新しい機能について詳しく解説します。
主な内容:
- クライアントサイドフィルタから始める
- ブロック属性による設定の制限
- ユーザー権限と投稿タイプによる設定の制限
- ブロックのコンテキストに基づく設定の制限