2018年12月にWordPressのブロックエディタ「Gutenberg」が発表されたとき、これをどう期待すれば良いのかがわかりませんでした。確かに、ベータ版で遊ぶ時間は十分にありました。しかし、実際の立ち上げがどれくらいスムーズに進むのか、ユーザーや開発者がどれくらい新しいエディタを受け入れるのかは予測できませんでした。
今回の記事を最初に公開してから2年以上が経過し、Gutenbergエディタは大きな成長を遂げました。MVP（Minimum Viable Product、実用最小限の製品）としての発表から、より成熟したプロジェクトへと進化し、今や、最終的な目標「WordPressのための統一されたフルサイト編集体験を実現する」に近づきつつあります。
この最近の変化を受け、今回の記事ではGutenbergエディタを再訪し、まもなく登場予定の機能を含む、新しい特徴をご紹介します。
Gutenbergブロックエディタとは何か？
Gutenberg（グーテンベルク）は、「WordPressブロックエディタ」または単に「WordPressエディタ」とも呼ばれる、WordPressのコンテンツエディタです。2018年12月6日にリリースされたWordPress 5.0と共に登場しました。
「Gutenberg」という言葉を知らなくても、特に無効化していなければ、すべてのWordPressサイトに導入されているデフォルトのエディタになります。下図のような外観をしています。
GutenbergのWordPressエディタと、これまでのWordPressエディタ（現在は「クラシックエディタ」または「TinyMCEエディタ」と呼ばれます）との大きな違いは、コンテンツを作成するための新しいブロックベースのアプローチです。
Gutenbergでは、コンテンツ内のすべての要素が、簡単に操作できる「ブロック」です。段落もブロック、画像もブロック、ボタンもブロック、すべてがブロックです。
サードパーティの開発者もカスタムブロックを作成でき、WordPressのショートコードに対する長年の不満を解消できます。例えば、連絡先フォームを埋め込む場合、これまではショートコード（例：`[your-form-shortcode]`）を追加していましたが、これからはフォームプラグインのブロックをドロップするだけで済みます。
さらに、ブロックを使用して、複数のカラムデザインを構築したり、ブロックをグループ化してセクションを作成するなど、より複雑なレイアウトも作成できます。
以降ではブロックエディタの使い方をご紹介します。読み進めるうちに、コンテンツ制作を改善する、ブロックを使用したアイデアが浮かんでくるでしょう。
Gutenbergはただのコンテンツエディタではありません
一つ重要なポイントとして、Gutenbergプロジェクトの目標は、単なるコンテンツエディタを越えた所にあります。
この記事の執筆時点（2021年7月）では、Gutenbergはまだほとんどの部分が単なるコンテンツエディタですが、Gutenbergの長期的な目標は、「フルサイト編集」（Full Site Editing、FSE）への移行にあります。
フルサイト編集では、Gutenbergエディタを使用して、ウェブサイトの100％をデザインできます。例えば、WordPressテーマに付属するヘッダーオプションに制限されることなく、ブロックエディタを使用して、カスタムヘッダーをデザインできるようになります。
この機能はまだリリースされていませんが、近日中に提供される予定です。他にもいくつかの「PoC（概念実証）」プロジェクトがありますので、この記事の最後にご紹介します。
Gutenbergと人気の代替技術との比較
2年以上、WordPressブロックエディタを使用してきた中で、Gutenbergと他のソリューションの長所と短所が、よく見えてきました。
WordPressでコンテンツを作成する方法には、Gutenberg以外に大きく2つの方法があります。
- WordPress TinyMCEエディタ：WordPress 5.0以前にWordPressが使用していたクラシックエディタ
- ページビルダープラグイン：WordPressにビジュアルな、ドラッグ＆ドロップデザインを追加するサードパーティのプラグイン
一般に、クラシックTinyMCEエディタでは、よりシンプルなワープロのような操作感が得られ、ページビルダーでは、より柔軟なビジュアルと、ドラッグ＆ドロップのデザイン体験を得ます。
Gutenbergを含む3つのエディタをデザインの自由度で並べてみました。
クラシックTinyMCEエディタ（自由度低）＜Gutenberg＜ページビルダー（自由度高）
Gutenbergブロックエディタと代替技術の長所と短所について見ていきます。
Gutenbergとクラシックエディタの比較：長所と短所
まず、GutenbergとクラシックTinyMCEエディタを比較します。
長所：
- Gutenbergは、より視覚的な基礎デザインを提供します。
- コンテンツの埋め込みにショートコードを使用する必要はありません。統一されたブロックシステムが提供されます。
短所：
- Gutenbergで文章を書くと、各段落が独立したブロックになっているため、少々扱いにくいと感じる人もいます。特に長い記事の場合、テキストの操作は困難です。回避策として、他のエディタで文章を書き、完成したらGutenbergに貼り付けるという方法があります。
- Gutenbergのパフォーマンスは大幅に改善されましたが、大量の投稿ではまだ「待ち」が発生する場合があります。クラシックエディタではそれほどの待ちはありません。
従来のTinyMCEエディタの方がニーズに合うと感じる場合は、Gutenbergエディタを完全に無効化できます。
Gutenbergとページビルダーの比較：長所と短所
次に、Gutenbergとサードパーティのページビルダープラグインを比較します。
長所：
- Gutenbergはコア機能です。互換性の問題を心配する必要はありません。
- コア機能であるため、すべての開発者が自分のプラグインにGutenberg対応を組み込むことができ、互換性が向上します。
- Gutenbergは、クリーンで軽量なコードを出力します。すべての条件が同じであれば、通常、Gutenbergで作られたデザインは、ページビルダーで作られたデザインよりも、読み込みが速くなります。
短所：
- Gutenbergでは、ページビルダーと同程度のビジュアル編集は提供されません。クラシックエディタよりはアクセスしやすいものの、ページビルダーのように100％シームレスではありません。
- ページビルダーは、より柔軟なデザインとレイアウトのオプションを提供します。
- ほとんどのページビルダーは、より柔軟で流れるようなドラッグ＆ドロップ操作感を提供します。
比較結果の検討
大多数のユーザーにとって、Gutenbergの自由度は適切だと思います。
多くのユーザーはコンテンツ、特にブログ記事に、ページビルダーほどの自由度を必要としないでしょう。一方でブロックエディタでは、クラシックエディタでは難しいマルチカラムデザインやボタンの挿入を素早く実装できます。
これまでの説明を踏まえて、Gutenbergの使い方をご紹介します。
Gutenberg WordPressブロックエディタの使い方
Gutenbergブロックエディタを簡単に紹介したところで、次に、ブロックエディタを使用したコンテンツの作成方法を掘り下げていきます。
インターフェースの紹介から始め、エディタの使い方やワークフローの改善など、徐々に高度な方法を紹介していきます。
Gutenbergブロックエディタのインターフェース
エディタを開くとフルスクリーンで表示され、WordPress管理画面のサイドバーは隠されます。
エディタには3つのエリアがあります。
- コンテンツ：画面のほとんどはコンテンツが占めます。ビジュアルプレビューが表示され、サイトのフロントエンドでの表示を確認できます。100％正確ではありませんが、最終的なデザインのイメージはかなりつかめるはずです。
- トップツールバー：上部のツールバーでは、新しいブロックの挿入、元に戻す、やり直す、その他の重要な設定にアクセスできます。
- サイドバー：サイドバーには、2つのタブがあります。「投稿」タブでは、カテゴリー、タグ、アイキャッチ画像など、投稿レベルの設定を行えます。「ブロック」タブには、選択したブロックの設定が表示されます（詳細は後述します）。
より集中した執筆体験のためにサイドバーを隠すには、右上にある「歯車」アイコンをクリックします。サイドバーを再表示するには、「歯車」アイコンをもう一度クリックします。
例えば、新しいデフォルトテーマ「Twenty Twenty-One」を使用している場合、エディタのインターフェースは次のようになります。
ブロックの追加
投稿に通常の段落テキストを追加するには、クリックして入力し始めるだけで済みます。「Enter」キーを押すたびに、エディタは新しい段落ブロックを自動的に作成します。
その他のコンテンツについては、明示的に新しいブロックを挿入する必要があります。画像、ボタン、動画の埋め込みなどには、ブロックを使用します。
新しいブロックを追加するには、インターフェイスにある「＋」アイコンをクリックします。左上にはメインのブロックインサーターアイコンがありますが、他にもインターフェイス内に、小さなブロックインサーターインターフェースを開くアイコンがあります。
まず最初に、新しいブロックを挿入する場所にマウスカーソルを移動します。例えば、ボタンの下に新しいブロックを追加する場合、ボタンの下をクリックして、「＋」アイコンをクリックします。
サイドパネルに、利用可能なすべてのブロックがカテゴリー別に表示されます。希望のブロックを検索するか、リストからオプションを選択します。ブロックの上にカーソルを移動すると、ブロックが何をするのかの説明とプレビューが表示されます。
ブロックは、クリックするだけで挿入されます。例えば、通常の画像を挿入するには、画像ブロックをクリックします。
次に、画面の指示に従って画像をアップロードするか、メディアライブラリから既存の画像を選択します。
基本の書式設定オプション
ブロックに基本的な書式を設定するには、ブロックをクリックしてフローティングツールバーを表示します。
通常のテキストの書式設定は、ここで行います。
- 太字や斜体への変更
- リンクの挿入
- 配置の変更
- インラインコード、打ち消し線、下付き文字などの書式の追加
例えば、コンテンツにリンクを挿入する場合、まず、リンクを貼るテキストを選択します。この例では、「For other types of content」を選択しています。次に、ツールバーのリンクアイコンをクリックすると、リンク挿入オプションが表示されます。
高度なブロック設定
すべてのブロックには、サイドバーに追加の設定があります。2、3個しか設定のないブロックもあれば、デザイン、レイアウト、機能など、多くのオプションを持つブロックもあります。
ブロックの設定を開くには、エディタでブロックをクリックして選択します。次に、サイドバーの「ブロック」タブをクリックすると、設定が表示されます。
下図は、自由度の高いブロックの一つである、ボタンブロックの設定画面です。色を変える、幅を広くする等、様々なオプションがあります。
ブロックの設定を変更すると、すぐにエディタ側に反映されます。
繰り返しになりますが、各ブロックには、ブロック固有の設定があります。例えば、段落ブロックの設定を開くと、基本的なタイポグラフィと色のオプションがあります。下図は、テキストの強調に、背景色を適用した例です。
ブロックの並べ替え
Gutenbergでは、他のエディタでのテキストと同じように、ブロックをコピー＆ペーストできます。それ以外に、ブロックを並べ替える方法が2つあります。
まず、数ブロック分だけ上下に移動する場合は、フローティングツールバーの上下の矢印を使います。
また、大きな移動には、ドラッグ＆ドロップを使用します。矢印の左にある「6つの点」のアイコンをクリックします。
そして、マウスのボタンを押し下げたたまま、ブロックをページ上の任意の場所にドラッグします。
他のサイトからのコンテンツの埋め込み
Gutenbergには、YouTube、Vimeo、Soundcloudなどのサードパーティのソースからコンテンツを埋め込む専用のブロックが用意されています。このオプションはすべて、ブロックインサーターの「埋め込み」セクションにあります。
例えば、YouTubeの動画を埋め込むには
- 専用のYouTubeブロックを追加する。
- 動画へのダイレクトURLを貼り付ける。
- 「埋め込み」をクリックする。
エディタ内では、埋め込まれた動画のプレビューが表示されます。
マルチカラムレイアウト、グループレイアウトの作成
前述したように、従来のTinyMCEエディタに対するブロックエディタの大きな利点の一つが、カスタムコードやショートコードに頼らずに、複雑なレイアウトを作成できる点です。
ブロックエディタにはこれを助ける、2つのデフォルトブロックが用意されています。
- カラム：マルチカラムレイアウトを作成する。
- グループ：複数ブロックをグループ化する。例えば、グループブロックを使用して、多数のブロックの後ろに表示される、セクション全体の背景色を設定できます。
これらのブロックは、いずれもブロックの「入れ子」として動作します。つまり、1つまたは複数のブロックが、別のブロックの中に入って一緒に動作します。
ここではカラムブロックを使用した例で説明しますが、グループブロックも基本的には同じです。
例として、2カラムレイアウトを作成し、左のカラムには通常の段落テキスト、右のカラムにはボタンを配置します。
まず、ブロックインサーターを使用して、カラムブロックを追加します。すると、好みのレイアウトを選択するプロンプトが表示されます。
この例では、2カラムの「50 / 50」レイアウトを選択します。すると、中に「＋」アイコンを含む、2つの同じ大きさのボックスが表示されます。コンテンツを挿入するには、この「＋」アイコンをクリックして、ブロックインサーターインターフェースを開きます。
カラムに最初のブロックを追加した後で「＋」アイコンをクリックすると、さらにブロックを挿入できます。また、カラムの外側からカラムにブロックをドラッグ＆ドロップできます。
Gutenbergでの生産性を上げる10のコツ
Gutenbergの基本的な仕組みを理解したところで、次に、ブロックエディタをより効果的に使うためのヒントやコツをご紹介します。
1. /（スラッシュ）を使用して素早くブロックを挿入する
多くのブロックを挿入する場合、手動で一つ一つブロックインサーターを開くのは面倒です。よく使うブロックの名前を覚えてしまえば、キーボードの /（スラッシュ）だけで素早くブロックを挿入できます。
これには、「Enter」キーを押して新しい段落ブロックを開始したところで、/ を入力し、次に、挿入するブロックの名前を入力していきます。
入力を始めると、クエリに一致するすべてのブロックのリストが表示されます。キーボードの矢印を使って移動し、「Enter」キーを押して挿入するブロックを選択します。
以下は、この方法を使用して素早く画像ブロックを挿入する例です。
2. デスクトップから画像をドラッグして挿入する
多くの画像を挿入する場合、ブロックエディタにはもう一つの時間を節約する機能があります。画像をアップロードする前に、一々画像ブロックを追加する必要はありません。
デスクトップから画像ファイルを直接、投稿の希望する場所にドラッグできます。画像ファイルをサイトのコンテンツの上にドラッグすると、画像が表示される場所に青い線が表示されます。
ファイルを離すと、WordPressは自動的にファイルをアップロードし、適切な位置に画像ブロックを挿入します。
3. マークダウン記法の利用
コンテンツ作成にマークダウン記法を愛用している方へ朗報です。ブロックエディタはマークダウン記法の一部、主に見出し系の記法をサポートします。
例えば、H3タグで見出しブロックを挿入する場合、ハッシュタグを3つ入力した後（###）、スペースキーを押します。エディタが自動的にH3に変換するため、そのまま見出しテキストを入力できます。
さらに高度なマークダウン記法のサポートが必要であれば、無料プラグイン「EditorsKit」等をインストールできます。EditorsKitプラグインでは、太字、斜体、取り消し線にマークダウンを使用できます。Gutenbergプラグインについては、この記事の後半で詳しくご説明します。
4. 書式設定ツールバーをエディタの先頭に固定する
ブロックの上に書式設定ツールが「浮いて」いるのが好きでなければ、先頭のツールバーの下に、書式設定ツールバーを固定する機能があります。
5. ブロックとその設定すべてをコピーする
ブロックエディタでは、他のエディタと同じようにテキストをコピー＆ペーストできます。「Ctrl＋C」を押すか、または右クリックで「コピー」を選択してください。
ただし、この方法では、ブロックの設定を保持したままブロック全体をコピー＆ペーストできません。その場合は次の手順に従ってください。
- ブロックを選択する。
- ブロックツールバーの縦3点リーダーをクリックする。
- 「コピー」を選択する。
このようにコピーしたブロックは、通常と同じように、「Ctrl＋V」または、右クリックで「貼り付け」を選択して、貼り付けできます。
6. ブロックリストビューを使用して、ブロックを素早く選択する
ほとんどの場合、ブロックの選択は自明で、エディタ上で対象のブロックをクリックするだけです。しかし、カラムブロックやグループブロックの中にブロックが入った「入れ子」のブロックの場合、ブロックの選択は少し面倒になります。
ブロックエディタにはこの問題を解決する、「リストビュー」オプションがあります。リストビューは先頭のツールバーにあり、開くとすべてのブロックが表示されます。入れ子のブロックもインデントして表示されます。
このリスト上でクリックしてブロックを選択できます。また、リスト上でブロックにカーソルを合わせると、エディタがそのブロックをハイライト表示します。
次の例では、以下のようにブロックが入れ子になっています。
- 最初の親のカラムブロック
- 入れ子になった、各カラムブロック
- 1つのカラム内の、入れ子のグループブロック
グループブロック内の、入れ子の見出しブロック
このとき、メインの親ブロックを選択するには、リストビューを開き、一覧表示の中から選択します。
7. ブロックごとに、または、投稿全体に対してコードエディタを開く
Gutenbergブロックエディタの利点の1つとして、コードを書かずに、多くのスタイルとレイアウトオプションを設定できます。ただし上級者の場合、直接コードにアクセスしたい場面もあるでしょう。
Gutenbergエディタにはいくつかの異なるオプションが用意されています。
まず、個々のブロックの、コードのみを編集できます。これは、CSSクラスの挿入など、ちょっとした調整をするのに便利です。ブロックのツールバーからドロップダウンメニューを開き、「HTMLとして編集」を選択します。
このオプションを選択すると、他のブロックのビジュアルなプレビューはそのままに、そのブロックだけがコードエディタで表示されます。
次に、ブロックエディタのカスタムHTMLブロックがあります。カスタムHTMLブロックでは、完全なHTMLスニペットを埋め込めます。使用するにはブロックを追加して、コードを貼り付けます。
最後に、文書全体をコードエディタで開けます。右上のドロップダウン、またはキーボードショートカット「Ctrl＋Shift＋Alt＋M」を使用します。
文書全体をコードエディタで開くと、Gutenbergのブロックフォーマットのマークアップも表示されます。テキストの移動が少し煩雑なことに注意してください。
8. キーボードショートカットを覚える
ブロックエディタには、多用する操作のために、多くのキーボードショートカットが用意されています。ショートカットは、時間をかけて学ぶ価値があります。何度もマウスをクリックする必要がなくなり、生産性が向上します。
ここでは、最も一般的なショートカットをご紹介します。Macユーザーは、「Ctrl」を「Command（⌘）」に置き換えてください。
- ブロックリストビューを開く ─ Shift＋Alt＋O
- 変更の保存 ─ Ctrl＋S
- 最後の変更の取り消し ─ Ctrl＋Z
- 最後の取り消しの取り消し ─ Ctrl＋Shift＋Z
- 選択したブロックの複製 ─ Ctrl＋Shift＋D
- 選択したブロックの削除 ─ Shift＋Alt＋Z
- 選択したブロックの前に新しいブロックを挿入 ─ Ctrl＋Alt＋T
- 選択したブロックの後に新しいブロックを挿入 ─ Ctrl＋Alt＋Y
また、エディタ上では、すべてのキーボードショートカットの完全なチートシートを開けます。キーボードショートカット「Shift＋Alt＋H」を押すか、エディタの右上隅にある縦3点リーダーメニューアイコン（⋮）をクリックして、ドロップダウンからキーボードショートカットを選択してください。
9. ブロックを非表示にして、インターフェースを整理する
ブロックエディタには、デフォルトで多くのブロックが追加されていますが、おそらくそのすべてを使用することはないでしょう。「ブロックマネージャー」と呼ばれる機能を使用すると、使わないブロックを無効化し、非表示にして、インターフェースを整理できます。
10. ジャンプリンク用のアンカーを追加する
最後に、ブロックエディタ専用のHTMLアンカーリンク機能をご紹介します。この機能を使用すると、コンテンツの特定のセクションへのジャンプリンクを作成できます（例：目次）。
クラシックエディタでは、コードを使用して、手動でHTMLアンカーを追加する必要がありました。しかし、Gutenbergでは、すべてのブロック設定の「高度な設定」エリアの「HTMLアンカー」フィールドに、ジャンプリンク用のテキストを入力するだけで済みます。
ブロックエディタの高度なコンセプトの紹介
ここまでで、エディタの仕組みと、より効率的に作業を行うためのヒントについて、詳しく説明しました。基本的な知識を得たところで、より高度な戦略的機能を2つ紹介しましょう。
- ブロックパターン
- 再利用ブロック
ブロックパターン
ブロックパターンは、基本的にテンプレートであり、レイアウト内に配置したブロックの集まりです。ボタンを並べただけの小さなものから、セクション全体、あるいはページ全体のテンプレートまであります。
WordPressにはブロックパターンが組み込まれていますが、サードパーティのプラグイン開発者が、独自のパターンを追加することもできます。
新しいパターンを挿入するには、メインのブロックインサータの「パターン」タブから挿入します。
挿入したブロックパターンを構成するすべてのブロックは、手動で個別に追加したブロックと同じように、完全に編集できます。
現在、コアのGutenbergエディタでは、ブロックパターンを作成できません（コーディングの方法を知っている場合を除きます）。しかし、Justin Tadlock氏の無料プラグイン「Block Pattern Builder」を使えば、これを解決できます。このプラグインを有効化すると、Gutenbergを使用してデザインを作成し、そのデザインをパターンとして保存できます。
まず、「Block Patterns」＞「Add New」にアクセスし、エディタを使用して新しいパターンを作成します。完成したら必ず公開してください。
終了したら、他のブロックパターンと同じように挿入できます。「未分類」セクションを探してみてください。
また、WordPressのコアチームは、WordPress.orgで公式のブロックパターンライブラリを公開しました。コピー＆ペーストでエディタに挿入できます。ブロックパターンライブラリのサイトで「コピー」ボタンをクリックし、エディタに貼り付けてください。
再利用ブロック
再利用ブロックは、1つまたは複数のブロックをグループとして挿入できる集まりです。ブロックパターンと似ていますが、1つだけ重要な違いがあります。
ブロックパターンが、最初の雛形であり、各インスタンスを個別に編集できるのに対し、再利用ブロックは、挿入するすべてのインスタンスで共通です。
再利用ブロックを更新すると、その変更は自動的に既存のすべてのインスタンスに適用されます。
例えば、再利用ブロックを使用して、すべてのコンテンツで共通のCTA（Call to Action、行動喚起）を作成できます。CTAを更新する場合は、再利用ブロックを一度更新するだけで、サイト全体のCTAを変更できます。
Gutenberg WordPressエディタで再利用ブロックを作成するには、クリックしてドラッグし、1つまたは複数のブロックを選択します。次に、「再利用ブロックに追加」オプションをクリックします。なお、上で紹介したプラグインでも、この方法でブロックパターンを作成できます。
ブロックはグループ化されます。再利用ブロックには、サイドバーのブロックの設定で名前を付けられます。
名前をつけると、再利用ブロックを検索できるようになり、「/」を使用して、素早くブロックを挿入できます。
再利用ブロックを変更すると、記事を更新する際にその変更を公開するかどうかのオプションが表示されます。変更の公開を決定すると、変更は自動的に再利用ブロックのすべてのインスタンスに適用されます。
プラグインでブロックエディタを拡張する
これまでは一部の例外を除き、ブロックエディタのコア機能にフォーカスしてきました。
ブロックエディタの優れた点のひとつは、WordPressサイトの他の部分と同様に、プラグインを使用して拡張できる点です。
プラグインはいくつかの異なる目的で使用できます。
- 新しいコンテンツブロックの追加：プラグインは、デザインに利用可能な新しいブロックを追加できます。今のところ、Gutenbergプラグインの最も一般的な使用例です。
- 新しいテンプレートやブロックパターンの追加：コアのブロックパターンシステムを利用するプラグインもあれば、独自テンプレートシステムを構築したプラグインもあります。
- エディタインターフェースや機能の変更：プラグインを使用してエディタ自体を変更できます。例えば、マークダウンの記法を追加できます。
Gutenberg専用に作られたプラグイン以外にも、多くのWordPressプラグインがブロックエディタを使用できます。
例えば、問い合わせフォームのプラグインを使用している場合、プラグインがフォーム埋め込み用の専用ブロックを提供しているかもしれません。問い合わせフォーム以外の、他の多くのプラグインも同様です。
エディタの基本をマスターしたら、こうしたプラグインを試して使い勝手が向上するかどうかを確認してみても良いでしょう。
この記事を書いている時点で人気のオプションを紹介します。
詳細については、WordPress.orgのブロック対応プラグインセクションをご参照ください。
Gutenberg WordPressエディタとフルサイト編集
この記事の冒頭でも説明したように、Gutenbergプロジェクトは単なるコンテンツエディタ以上のものを目指しています。
長期的な計画として、WordPressは「フルサイト編集」に移行する予定です。これは名前が示すとおり、最終的にはGutenbergエディタを使用してサイトのすべての部品を編集できるようにすることを目標とします。部品には、サイトのヘッダー、フッター、サイドバーなども含まれます。
WordPress 5.0でのブロックエディタの登場とは異なり、フルサイト編集は反復的なアプローチで実装されています。新しいリリースは、前のリリースをベースに少しずつ機能を追加しています。
例えば、WordPress 5.8からは、ブロックエディタでサイトのウィジェットを管理できるようになりました。また、サイトのロゴ、ナビゲーション、投稿一覧用のテンプレートを作成するクエリーループなど、テーマに特化した新しいブロックも登場しました。
正式なフルサイト編集はまだ開発中ですが、一部の勇敢なテーマ開発者はすでにブロックベースのテーマをリリースしており、フルサイト編集がどのように機能するかを示す良い例をいくつか出してきています。
さらに、プラグイン版Gutenbergでは、実験的なフルサイト編集機能の一部にアクセスできます。
ここで2つの例を見ましょう。
- 現在、WordPress 5.8で実装されている、コアのフルサイト編集機能
- 実験的な機能に基づく「完全な」フルサイト編集で想定される動作
ウィジェットの代わりにブロックを使用する
WordPress 5.8からはデフォルトで、サイドバーとフッターの制御にウィジェットでなく、ブロックを使用するようになりました。ただし、このデフォルトの動作は必要に応じて無効化できます。
ウィジェットエリアの内容をブロックエディタで管理するには、「外観」＞「ウィジェット」にアクセスします。
各ウィジェットエリアには独立したエディタがあり、アコーディオントグルをクリックすると開きます。また、上部にあるフック付きの矢印アイコンをクリックすると、異なるウィジェットエリア間でブロックを移動できます。
新しいテーマブロックの使用
WordPress 5.8では新たに、サイト内に動的なコンテンツを挿入する専用のテーマブロックが追加されました。このブロックは、今後のリリースでテーマテンプレートをデザインする際にも、極めて重要な役割を果たすはずです。
例えば、あるページに最新コンテンツの一覧を埋め込むとします。このとき、クエリーループブロックを追加するだけで、ブログの投稿など、特定の投稿タイプのコンテンツを動的に挿入できます。またカテゴリー、投稿者、キーワードなどでフィルタリングもできます。
クエリーループブロックの内部に他のテーマブロックを入れ子で挿入し、表示するコンテンツのテンプレートを制御できます。例えば、投稿日ブロックをテンプレートに追加することで、各投稿の日付を表示できます。
WordPress 5.8のクエリーループブロックでは、基本的に、独自のブログ一覧ページをデザインします。フルサイト編集では、この機能をテーマ全体に拡張するはずです。次にそちらを見ていきます。
コンテンツテンプレートのデザイン
テンプレート編集モードも、WordPress 5.8の新機能のひとつです。ブロックを使用して、投稿やページのテンプレートをデザインできます。
現在、この機能はテーマ開発者が明示的に有効にした場合にのみ利用できます。使用中のテーマの開発者がまだ有効にしていない場合、この機能は表示されません。
WordPress 5.8のテンプレート編集モードに対応したテーマを使用している場合、投稿やページの編集時にサイドバーの「投稿/ページ」タブに新しい「テンプレート」セクションが表示されます。新しいテンプレートの作成や、既存テンプレートを選択できます。
新しいテンプレートを作成する際には、テンプレートに名前を付けると分かりやすくなります。次に、特別なテンプレートエディタモードと、前のセクションで詳しく説明した新しいテーマブロックを使用して、テンプレートをデザインします。
フルサイト編集の例「Blockbase」
Blockbaseは、Automattic制作のテーマであり、フルサイト編集の一種のPoC、または自由に遊べる叩き台と考えられます。まだ実験中のため、この機能がコアのWordPressソフトウェアに実装される前に変更される可能性があります。しかし、フルサイト編集の概念は伝わるでしょう。
Blockbaseテーマとプラグイン版のGutenbergをインストールすると、新しい「サイトエディタ」エリアが表示され、テーマの構築に、これまで見てきたエディタを使用できるようになります。
ただし、単一の投稿やページを個々に構築するだけではない点が、決定的に異なります。代わりに、Gutenberg WordPressブロックエディタを使用して、サイトのすべてのコンテンツが使用する、実際のテンプレート、たとえば、ヘッダーテンプレートを作成できます。
そのために、上で見たテーマブロックをはじめ、様々な新しいデザインブロックが用意されています。
異なるテンプレート間を移動するには、左上のWordPressロゴをクリックすると、他のテンプレートの編集や新しいテンプレートを作成できます。
繰り返しになりますが、Gutenbergエディタの最終的な目標は、すべてのテーマテンプレートレイアウトの制御です。この目標が実現したとき、WordPressのサイト作成は、2021年の「普通の制作」とは大きく異なっているでしょう。
まとめ
2018年以降、Gutenbergブロックエディタは大きな進化を遂げました。今後、フルサイト編集への移行が予定されていて、ブロックエディタはWordPressの中でますます重要な存在となるに違いありません。
この記事では、ブロックエディタの基本から高度なヒント、機能まで、あらゆることを紹介しました。また、フルサイト編集が将来どうなるかについても見てきました。
まだ移行の準備ができていないという方は、恒久的にGutenbergを無効にした上で、クラシックエディタを使用できます。ただし、Gutenbergは今後も成長し続けます。いつまでも無視できるものではありません。
ブロックエディタに関する質問や感想がありますか？もしあれば、今回の記事への良い感想、悪い感想も含めて、ぜひご意見をお聞かせください。
Brianの最大の情熱の一つは10年以上使用してきたWordPressです。複数のプレミアムプラグインさえ開発しています。Brianの趣味はブログや映画やハイキングなどです。TwitterでBrianとつながりましょう。
コメントを残す