WordPressのGutenbergのブロック作成に関して調べている際に、タブで開きすぎてどこが大事だったのかわからなくなるのでメモ的に参考文献リストのようにまとめておきたいと思います。
参考サイト
主にハンドブックに関わる内容。
- Handbook
- gitHub – WordPress/gutenberg
- Deprecations
廃止予定のコンポーネントなどが記載されている - Gutenberg Handbook 読書メモ (1)
- Gutenberg Handbook 読書メモ (2)
- Gutenberg Handbook 読書メモ (3)
- Gutenberg コードリーディングメモ
- WordPressの次世代エディタGutenbergを読む
Gutenbergに特化した情報サイト。
「初めての」や概要説明的なもの。
- Before Gutenberg – WPerが知っておくべきES6とReactのこと
- Gutenbergはじめてのカスタムブロック
- WordPress Gutenberg よく使いそうなコンポーネントまとめ
- [WordPress] はじめてのGutenberg Custom Block Type
- Gutenbergブロック開発
- [WordPress] Gutenbergの3つのレンダリング: 静的ブロックと動的ブロック、そしてクライアントサイドレンダリング
- How To Get Started with Attributes in Gutenberg Blocks
- One thousand and one way to extend Gutenberg today
- Learning Gutenberg: Series Introduction
動作サンプル的なものですが、全て使えるのかは不明。一部はパーツのデザインが崩れています。
wordpress.comにアカウントを作りサイトを登録している場合(かつログイン状態？)は、一部の表示内容がそのサイトの情報をつかって表示されるようです。
- Calypso – Gutenberg Components
コンポーネントがどう見えるのかの一覧 - Calypso – Gutenberg Blocks
ブロックがどう見えるのかの一覧
実例サンプル的なものですが、作成時期の都合で旧版だったり、JSXだったりそうでなかったり、構築方法が独自のものかもしれないなど、そのまま使えるとは限らない内容です。
- Gutenberg Block Examples
基本と思われる5種類の作例があり、JSとPHPを含めた全体的なコードを公開 - My first Gutenberg block(RSS feed)
試作的に作られたプラグインの説明。サイト内にあるリンクからGitHubにあるプラグインのコードを丸ごと閲覧可能 - How to Build Custom Gutenberg Blocks: a Beginner’s Guide
JSとPHPを含めた全体的なコードを多数掲載 - Basics of Building a Gutenberg Block
サイドバーに使うInspectorControlsの使用例 - Gutenberg Inspector Controls · GitHub
サイドバーに使うInspectorControlsの使用例 - Learning Gutenberg: Building Our Custom Card Block
Gutenbergに関する連載の１つで、画像のアップロードを含めたカード型パーツの作成チュートリアル - How to Use the Tooltip Component in Gutenberg
Tooltipの作例。Gutenberg関連の検索ではこの著者の記事や投稿が複数見つかる - 53 Resources for Developers & Designers building Blocks for Gutenberg
Gutenberg Times内の記事の１つで、53個のGutenberg関連リンクを掲載(開発者のブログなどもふくまれるので全て作例ではない) - Only show focused toolbar for Gutenberg Block with Multiple text fields
StackExchangのページで、質問者のコードがButtonとMediaUploadの作例として参照可能 - Changing a shortcode to a dynamic Gutenberg block
PHP側で処理をした内容を出力できるDynamic blockの例。テンプレートファイルやfnctions.phpに書いていた内容を出力できるため、ショートコードの替りに使える。 - Before Gurenberg – ブロックの情報保存先、特にカスタムフィールド
attributesのsourceやselectorについて触れられている - Interacting with Gutenberg’s RichText Component
RitcTextに任意の文字列を挿入できる貴重な実例。が、試してもうごかない…。 - Before Gutenberg – ブロックの入れ子InnerBlockの作成
parent:を使ったコード例。最低限の記述がどの程度なのかが見られる。
自分でカスタムする趣旨とは外れますが、便利そうなプラグインを見つけたので記載。カスタマイズの方向性などの参考に。
- Tool Set ※有料
- Advanced Gutenberg ※プラグインは無料で有料サポートプランあり
参考:Gutenberg のカスタムブロックを勉強するためにインストールした Advanced Gutenberg プラグインが予想以上に便利だった
カスタム方法ではなく使い方をまとめているサイトの模様。
CSS関連。
- Gutenbergと旧ビジュアルエディターの両方にカスタムCSSを反映する方法
- Example Theme Block Styles for Gutenberg
コアブロック(初期設定のブロック)のデザインに関わるCSS。 - テーマ を Gutenberg に対応させる時、最低限やっておく事
内容的にはCSSが絡んだ基本となる部分の設定方法。
言語関連。
サイトではありませんが、Reactわからない状態でGutenbergに取り組み始めて相当な数躓いたあとで読んで参考に読んだ（まだ「読んでいる」ですが)のが以下の本です。
留意点
Gutenbergの記事では、まず開発環境を作ってそこにブロック開発必要なコンポーネントなどを全て（あるいは必要に応じて)入れてから開発する前提のものが多くあります。
それらの記事のサンプルを動かすにはそういった環境構築が前提のため、その前提を用いない場合はコードの書換えが必要になります(書換え程度ではどうしようもないものもあるかもしれませんが)。
関連記事
Gutenberg(ブロックエディタ)に関連する記事一覧。
- [Gutenberg対応版]WordPressで複数のCSSをまとめてインラインCSSとして出力する
- @wordpress/create-blockで一つのプラグインに複数のブロックを入れる
- @wordpress/wp-env と @wordpress/create-block で簡単にブロック開発環境を作る
- 3度目のブロック開発環境(Docker Desktopとcreate-block)
- Gutenberg(ブロックエディタ)メモ
- Gutenberg(ブロックエディタ)メモ -Gutenbergの使い方で迷うところ
- Gutenberg(ブロックエディタ)メモ -ハンドブックでわからないところ1
- Gutenberg(ブロックエディタ)メモ -ハンドブックでわからないところ2
- Buttonを使う(MediaUploadとRichTextも含む)
- metaデータを設定する
- Templatesとplaceholderを使う
- Toggleを使う
- カスタムHTMLを使う
- サイドバー(Inspector)を設定する
- サイドバーを作ってcheckboxを使う
- サイドバーを作ってラジオボタンを使う
- ショートコードの代替案的なブロックを作る
- ラジオボタンでクラスを変更可能なコードエディタブロックを作る
- 登録されているショートコードの一覧を表示したブロックを作る
- AddQuicktagのGutenberg対応に関して
- Classic Editorプラグインに関して
- wp_is_mobile関数を利用して出し分け機能をもったブロックを作る
- 任意のHTMLタグを範囲選択で挿入可能なツールバーを付ける
- 任意のHTMLタグを範囲選択で挿入可能なボタンをRichTextのツールバーに追加する
- 自動でテーマCSSの指定箇所をGutenberg用CSSとして用いる方法の検討
- 自動で出力されるブロック用のCSSを取除く
- Gutenberg関連の参考サイト:メモ [現在表示中]
- WPのsetMeta()で複数のキーと値を保存する
- WPのブロックエディタでTypeError: Cannot read property ‘firstChild’ of nullのエラー:メモ
- WPのブロックエディタでUncaught Error: Minified React error #321のエラー:メモ
- WPのブロックエディタでタグをドロップダウンで変更する:メモ
- WPのブロックエディタでブロック追加用ボタンを表示させる:メモ
- WPのブロックエディタで親の値を子に設定する:メモ
- WPのブロック作成メモ
- WPの独自ブロックが設定されている時のみCSSやJSをフロントに表示する方法
- ブロック作成時のclassNameに関するメモ
- ブロック開発の環境構築におけるwp-scriptsとCreate Guten Blockのメモ
1人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
