WordPress

Gutenberg(WordPress Editor)の使い方

ワードプレスのブロックエディタを使うための基礎知識をステップバイステップで学ぶ

2018年、WordPressは長年使ってきたエディタから「Gutenberg」と名付けたエディタに移行しました。

かつてのエディタとは異なり、WordPressユーザーは現在、モダンなドラッグ&ドロップ式のブロックエディタを使用して、ウェブサイトの構築やカスタマイズ、コンテンツの公開、サービスや製品のオンライン販売を行っています。

このガイドでは、新しいエディタを使いこなそうとしている長年のユーザーの方にも、WordPressを初めてお使いになる方にも、そのコツをお教えします。このガイドでは、以下のことがわかります。

Gutenberg のブロックは、従来のエディタとどのように違うのか。
ブロックビルダーを使ってページを作成・編集する方法
Gutenberg ブロックの機能
サイドバーで追加設定を解除する方法
生産性を高めるためのツールバーの使い方
クラシックエディターとGutenbergブロックの比較
クラシックなエディタからGutenbergブロックへの切り替えは、WordPressにとって大きな飛躍です。エディターがどのように進化したかを見てみましょう。

クラシックなWordPressエディタ
2003年から2018年まで、WordPressはユーザーに基本的なテキストエディタを提供していました。

従来のWordPressのエディタは、典型的なWYSIWYG("What you see is what you get")エディタでした。

つまり、開いているフィールドにコンテンツを入力し、提供されているツールバーを使ってフォーマットすると、ウェブサイト上でテキストがほぼ同じように表示されるというものです。

WordPress-WYSIWYG-Editor

これはシンプルなインターフェースで、多くのWordPressユーザーが長年にわたって慣れ親しんできたものです。しかし、これには限界がありました。

例えば

WordPress-ページの例

これは、公開されたコンテンツがウェブサイトに表示される様子です。しかし、エディタからページへの翻訳が問題なく行われているかどうかは、「プレビュー」機能を使って確認するしかありませんでした。

実際のページの文脈の中でコンテンツを書くことはできません。また、より高度なデザインやレイアウトを構築するには、HTMLに精通していたり、プラグインに頼りすぎていたりする必要がありました。

2018年、WordPressは新しいWordPressエディタ(=Gutenberg)をリリースすることで、これらの制限を是正することに着手しました。

Gutenbergのブロックエディター
新しいWordPressエディタは、ドラッグ&ドロップ式のブロックエディタです。

グーテンベルク

これは、コンテンツが1つのメインエディタで書かれることがなくなったことを意味します。個々のブロックを所定の位置にドロップして、ページのコンテンツを構築していきます。

グーテンベルクのブロック

各ブロックを選択すると、固有のツールバーが表示されます。これにより、その時に必要な編集操作だけが表示されるので、より合理的でカスタマイズされた編集が可能になります。

また、Gutenberg エディターは、WordPress の初心者が自分で行うには時間がかかりすぎて難しいコンテンツやレイアウトの追加をはるかに容易にしました。

グーテンベルク・ブロックの例を見る

さらに、もう当てずっぽうではありません。ブロックエディターで作成したものが、ウェブサイト上でどのように表示されるかが決まります。フォント、スタイリング、レイアウトのすべてが一致します。

グーテンベルクを使用したWordPressページの例

どちらのWordPressエディタが優れているか?
クラシックなエディタとGutenbergのどちらが優れているかについては、ご自身で判断していただく必要があります。

WordPress には Gutenberg が自動的にインストールされていますが、まだブロックエディタに移行する準備ができていない場合は、クラシックエディタのプラグインをインストールすることができます。

また、他のエディタのアドオンオプションもあります。ElementorとBeaver Builderは、ドラッグ&ドロップ式のエディターとして人気がありますが、Block Categories
は、より多くの機能を必要とするプロのデザイナーや開発者に最適ですが。

ここでは、Gutenbergをより深く理解し、WordPressのドラッグ&ドロップエディターに何を期待すべきかを考えてみましょう。

Gutenbergブロックエディタの使い方
新しいページ(または投稿)を設定することで、Gutenbergブロックエディタを確認してみましょう。

まずは、画面左側のWordPressメニューから。新しいWebページを作りたい場合は、「ページ」にカーソルを合わせて「新規追加」を選択します。新しいブログ記事を作成したい場合は、「Posts」にカーソルを合わせて「Add New」を選択します。

ワードプレス-新規ページの追加

タイトルの追加
新しいページや記事を作成したら、「タイトルの追加」ブロックでタイトルを付けます。

最初のブロックの作成
ウェブページに掲載するコンテンツの大部分は段落で構成されています。そのため、Gutenbergが最初に提供するブロックは常に段落ブロックとなっています。

Gutenberg-New-Paragraph-Block

パラグラフから始めたい場合は、「Start writing or type / to choose a block」と書かれた空のブロックにカーソルを合わせます。入力すると、あなたのコンテンツがブロックを埋めていきます。

ブロック内のコンテンツをカスタマイズする
段落のスタイルをカスタマイズするには、段落のすぐ上に表示されるツールバーを使います。

整列
ほとんどのGutenbergブロックでは、ブロック内のコンテンツの配置を変更することができます。

Gutenberg-Alignment

デフォルトでは左揃えです。また、コンテンツの中央揃えや右揃えも可能です。

書式設定
ブロック内にテキストがある場合、いつでも太字でフォーマットすることができます。

Gutenberg-Paragraph-Bold

テキストをイタリックにします。

Gutenberg-Paragraph-Italic(パラグラフ・イタリック

または、ハイパーリンクを追加します。

Gutenberg-Paragraph-Link

リンクを新しいブラウザウィンドウで開くようにしたい場合は、ハイパーリンクバーの下向き矢印をクリックします。変更が完了したら、「戻る」矢印をクリックしてリンクを保存します。

その他のスタイルオプション
ツールバーの下向き矢印をクリックすると、テキストのスタイル設定オプションが追加されます。

Gutenberg-More-Text-Options

"Code" は、コードエディタで書かれたかのようにテキストをスタイリングします。

Gutenberg-Paragraph-Code

"Inline image "では、テキストを画像で囲むことができます。

Gutenberg-Paragraph-InlineImage

ご覧のとおり、これはGutenbergで画像とテキストを横に並べるための効率的な方法ではありません(別の方法については後ほどご紹介します)。

最後のオプションでは、ハイライトされたテキストに取り消し線を追加することができます。

Gutenberg-Paragraph-Strikethrough

その他のブロックオプション
ツールバーの最後のボタンは、常にその他のブロックオプションを表示します。

Gutenberg-More-Block-Options

これらのオプションは、編集しているブロックの種類にかかわらず同じです。

これらの機能を簡単にまとめてみましょう。

ブロック設定を隠す。右側のサイドバーを表示しなくなります。
複製:このブロックの複製を作成します。このブロックの完全な複製を作成します。
前に挿入:このブロックの上に新しい空のブロックを追加します。このブロックの上に新しい空のブロックを追加します。
後に挿入:このブロックの下に新しい空のブロックを追加します。このブロックの下に新しい空のブロックを追加します。
HTMLとして編集。HTMLで記述したい場合に、ブロックをコードエディタにします。
再利用可能なブロックに追加。ブロックを保存して、サイト内の他の場所で再利用できるようにします。
ブロックを削除」:ブロックを削除します。ブロックを削除します。
ブロックの変形
ツールバーにはもうひとつ、注意が必要なボタンがあります。

Gutenberg-Switch-Blocks

このボタンは常にこのように見えるわけではありませんが、最初のボタンでは、現在のブロックを関連するブロックに変形させることができることを覚えておいてください。

例えば、ParagraphのようなテキストベースのブロックをHeading、List、Quoteに変えることができます。しかし、パラグラフを画像やセパレーターラインに変えることはできません。そのためには、新しいブロックが必要です。

新しいブロックの追加
ページに新しいブロックを追加するには、いくつかのオプションがあります。

前後に挿入
ブロックのツールバーに「前から挿入」「後から挿入」のオプションがあるのはご存知でしょう。これがひとつの方法です。

既存のブロックからクリックして離れ、ブロックの上にカーソルを置くと、小さなプラス記号が表示されます。

それをクリックすると、ブロックが表示されます。

Gutenberg-Add-Block-Plus-Sign

すでにあるブロックの上に新しいブロックを追加したいものを選びます。

ブロックの下の部分にカーソルを合わせると、同じようにプラス記号が表示されます。唯一の違いは、今あるブロックの下に新しいブロックが追加されることです。

キーボードを使う
新しいブロックを追加するもうひとつの方法は、キーボードの「Return」キーを押すことです。

Gutenberg-Add-Block-Enter

これで、すぐに新しい段落ブロックがページに追加されます。

これを別の種類のブロックに変更したい場合は、新しいブロックの左にあるプラス記号を使ってください。

Gutenberg-Change-New-Block

または、スラッシュ(/)の後に使いたいブロックの名前を入力してください。

Gutenberg-Change-Block-Slash

例えば、画像を追加したい場合は、「/image」と入力します。ブロックのオプションは、一致する名前を入力すると自動的に表示されます。

ツールバーからブロックを追加する
ツールバーにある基本的なブロック追加機能を使うこともできます。

Gutenberg-Add-Block

オプションをスクロールするか、探しているブロックの名前を入力してください。

ブロックの移動
ブロックの作成を開始した後、ブロックの表示順に不満を感じることがあるかもしれません。また、下に置くべきブロックを上に置いてしまったこともあるでしょう。

ブロックを削除したり、あるブロックから別のブロックにコンテンツをカット&ペーストしたりする必要はありません。解決策は簡単です。

Gutenbergは、ドラッグ&ドロップ式のブロックエディタです。つまり、ブロックを好きな場所に簡単に移動できるのです。

これには2つの方法があります。

移動矢印を使う
1つ目の方法は、各ブロックの左側にある移動矢印を使うことです。移動させたいブロックの上にカーソルを置くと、上矢印と下矢印が表示されます。

Gutenberg-Move-Arrows

ブロックを上下に一度だけ移動させたい場合は、このオプションが有効です。

Gutenberg-Moved-Block

ドラッグ&ドロップを使う
もっと思い切ってブロックの配置を変えたい場合は、ドラッグ&ドロップを使うといいでしょう。

これは、矢印と同じ場所にあります。動かしたいブロックの上にカーソルを置き、中央に表示されているドットをつかみます。そうすると、カーソルが手の形に変わります。

Gutenberg-Grab-Drag-and-Drop

ブロックをページの新しい部分に移動させるときは、ブロックを下に落とす前に暗い線が表示されることを確認してください。

Gutenberg-Move-Block

これにより、ブロックを利用可能なスペースに移動させていることがわかります。この線がないと、ドラッグ&ドロップが機能しません。

ブロックの削除
ブロックを完全に削除したい場合は、このオプションもあります。

これはすでに見たことがあると思います。ブロックの追加オプションの中にあります。ブロックの削除」をクリックすると、ブロックが削除されます。

昔ながらの方法で削除することもできます。ブロックの中にカーソルを置いて、キーボードの「Delete」ボタンで削除してください。

ただし、テキストベースのブロックの場合は、コンテンツを削除してからでないと、この方法では削除できませんのでご注意ください。画像や埋め込みウィジェットなど、それ以外のものについては、「Delete」キーで削除できます。

また、ブロックをハイライトして(カーソルをドラッグして)から、「Delete」キーを押すこともできます。この方法は、一度に複数のブロックをハイライトして削除したい場合に便利です。

再利用可能なブロックの作成
再利用可能なブロックは、ブログ記事のプロモーションブロックやコールトゥアクションのように、サイト全体で使用できる要素を作成したい場合に便利です。

Gutenberg-Create-Reusable-Block

ブロックを必要なページに再作成するのではなく、ブロックオプションを開き、「再利用可能なブロックに追加」をクリックします。そして、名前を付けます。

Gutenberg-Name-Reusable

保存されたブロックは、他のGutenbergブロックと同じように取り出して使用することができます。このブロックは、"Reusable "という新しいカテゴリーに入っています。

Gutenberg-Reusable-Category

Gutenbergブロックのツアー
従来のWordPressエディタは、ユーザーが複雑なコンテンツやレイアウトを作成する上で、多くの不満を抱えていました。Gutenbergブロックは、その障害を取り除きます。

それでは、ブロックについてご紹介します。

ブロックのカテゴリー
WordPressでは、ブロックをカテゴリー別に分類することで、うまく整理しています。

共通ブロック
これらはあなたの共通のブロックです。

共通ブロック

ページで使用する基本的なテキストやビジュアルの要素がここに入ります。

書式設定ブロック
書式設定を行うためのブロックです。

書式設定ブロック

これらのほとんどは開発者向けのブロックなので、あまり必要ないかもしれません。表やプル引用のブロックは、便利かもしれません。

レイアウトブロック
これらはあなたのレイアウトブロックです。

レイアウトブロック

コンテンツに切れ目を入れたい場合(大きなスペースや区切り線など)や、特別な要素(ボタンなど)を追加したい場合は、ここで見つけることができます。

ウィジェットブロック
これらはあなたのウィジェットです。

ウィジェット・ブロック

ほとんどの場合、これらの要素はブログのサイドバーの中に置かれるべきもので、ページに表示されるべきものではありません。唯一の例外は、このWPFormsの例のように、他のプラグインによって作成されたブロックです。

埋め込みブロック
これらはあなたのエンベッドです。

Embeds-Blocks

これは他のプラットフォームからコンテンツを持ってくるために使います。YouTubeの動画や、SoundCloudのクリップ、Twitterの投稿などを埋め込むのに適しています。

最もよく使われるGutenbergブロック
ご覧のように、Gutenbergには何十種類ものブロックがあります。とはいえ、WordPressでページや投稿を作成する際に誰もが使う要素は決まっていますので、まずは基本的なことから覚えていきましょう。

パラグラフブロック
ページにプレーンテキストを追加するには、Paragraphブロックを使用します。

パラグラフブロック

見出しブロック
ページにヘッダーを追加するには、Heading ブロックを使用します。

見出しブロック

H2、H3、H4ボタンは、ページ内に新しいトピックを導入したり、コンテンツを読みやすくするために使用します。また、H2、H3、H4ボタンを使うと、ページの見出しに階層性を持たせることができます。

リストブロック
リストブロックでは、ページに箇条書きや番号付きのリストを追加できます。

リストブロック

読みやすさの向上にも有効です。

画像ブロック
Imageブロックを使って、ページに画像を追加します。

イメージブロック

ドライブから画像をアップロードしたり、メディアライブラリにすでに存在する画像を選択することができます。

ビデオブロック
ビデオブロックを使って、ページに画像を埋め込みます。

ビデオブロック

動画ファイルをアップロードしたり、ライブラリから選択したり、リンクから取り込んだりすることができます。

動画は容量が大きいので、VimeoやYouTubeなどの動画共有プラットフォームにファイルを保存するのがベストな方法です。そして、それをリンクで埋め込んでください。

ここでは、「ビデオ」ブロックは使用しません。代わりに、対応する埋込みを探します。

YouTubeにはそのようなものがあります。

Vimeoのように。

Vimeo-Embed

ページに追加したい音声ファイル(ポッドキャストやサウンドトラックなど)についても、同様の処理を行う必要があります。Audioブロックまたは対応する埋め込み(Spotifyのような)を使用してください。

ボタンブロック
訪問者や読者にアクションを起こさせるには、ボタンブロックを使用します。

ボタンブロック

訪問者や読者に次のような行動を促すことができます。"Schedule Now", "Sign Up", "Read More "などです。

メディア・テキストブロック
先に述べたように、段落ブロックの「インライン画像」オプションは、テキストと画像を統合するには非効率的な方法です。その代わりに、「メディアとテキスト」ブロックを使ってください。

メディアとテキストのブロック

コラムブロック
2つの異なるブロック(同じタイプまたは異なるタイプ)を横に配置するもう1つの方法は、Columnsブロックを使用することです。

列ブロック

右や左に列を追加するには、列の中のブロックにカーソルを合わせてプラス記号を押します。新しいブロックを追加するのと同じですが、この場合は水平方向に追加されます。

ソーシャルメディア埋込用ブロック
ソーシャルメディアの埋め込みコードを使って投稿を自分のページに配置するのではなく、ここに投稿へのリンクを追加します。

ソーシャルメディアエンベッド

Facebook、Twitter、Instagram用の埋め込みブロックがあるので、ソーシャルメディアの投稿に対応する埋め込みブロックを見つけてください。

クラシックブロック
クラシックブロックでは、クラシックエディターを使ってWordPressでコンテンツを作り続けることができます。

グーテンベルク・クラシック・ブロック

クラシックブロックは、ウェブサイトがクラシックエディタからGutenbergエディタに移行する際にも活躍します。Gutenbergは、テキストを自動的に独自のブロックに変換しようとはしません。クラシックエディタのインターフェイスに入れるだけです。

クラシックのブロックをGutenbergのブロックに変換したい場合は、「その他のオプション」で「ブロックに変換」を選択してください。

Gutenberg-Convert-Blocks

エディタ内の各要素を対応するブロックに変換するように最善を尽くしてくれます。

Gutenberg-Converted-Blocks

変更を保存する前に、出力されたブロックにエラーがないか確認することを忘れないでください。

WordPressプラグインのブロック
WordPress ユーザーが使用している一般的なプラグインのほとんどは、Gutenberg に対応しています。これらのプラグインは、エディタに表示される特別なブロックを作成している場合があります。

例えば、WPForms のようなコンタクトフォームプラグインを使用している場合は、それに対応したブロックが表示されます。

WPForms-Block

プラグインでフォームを作成し、ここで提供されるドロップダウンにフォームを配置するだけです。フォームのショートコードを探し出して貼り付ける必要はもうありません。

人気のSEOプラグインであるYoastも、Gutenbergに新しいブロックを追加しています。

Yoast-Blocks

WordPress の E コマースソリューションである WooCommerce も同様のことを行っています。

WooCommerce-Blocks

また、Ultimate Addons for Gutenbergのように、ビルダーに新しいブロックを大量に追加する「究極」のGutenbergプラグインもあります。

アルティメットアドオン-Gutenberg

この種のプラグインは、ブロックビルダーの機能を拡張します。Googleマップや証言ブロック、Eコマース機能など、特殊な要素を必要とするウェブサイトを構築している場合は、これらのようなプラグインを使ってGutenbergに追加することができます。

ドキュメントとブロックのサイドバーの概要
ブロックエディタの使い方を理解したところで、次にドキュメントとブロックのサイドバーに注目してみましょう。

ドキュメントサイドバー
カーソルがタイトルブロックや、ブロックが存在しないページのどこかにあるとき、サイドバーはドキュメントの設定を示します。

これらは、ページの状態や外観などをコントロールすることができます。

ここでは、主なものをご紹介します。

ステータスと可視性
ステータスと可視性このパネルでは、ページを見ることができる人(公開、非公開、パスワードで保護されている)や、(すぐには公開されない場合でも)いつ公開されるかを調整できます。ページを完全に削除したい場合は、このパネルで削除できます。その場合もこのパネルで行うことができます。

Permalink
Permalinkこのパネルを使って、スラッグ(URLの識別部分)を変更します。例えば、以下のようになります。

https://mywebsite.com/gutenberg-block-builder/

特集画像
注目の画像注目の画像とは、あなたのブログの記事がメインのブログフィードに表示されたときに人々が目にするサムネイル画像のことです。この画像は、ソーシャルメディアでリンクのプレビューを表示する際にも使用されます。

カテゴリー
カテゴリーこれは、ブログ記事でのみ使用できます。トピックを整理するために使用します。

タグ
タグこれもブログ記事でのみ利用可能な設定です。記事に含まれるキーワードを追加して、読者が関連するトピックのコンテンツを見つけやすくするために使用します。

ブロックサイドバー
ページ上のブロック(タイトルを除く)の中にカーソルを置くと、サイドバーがブロックエディタに切り替わります。

ブロック・サイドバー

このサイドバーでは、必要に応じて、ブロックの追加編集オプションが提供されます。ブロックサイドバーは、作業しているブロックの種類に応じて変化します。

例えば、段落サイドバーには、編集オプションが表示されます。

段落-ブロック-サイドバー

テキストのサイズだけでなく、ブロックのテキストや背景の色も調整できます。CSSクラスの使い方を知っていれば、「詳細設定」を使って、ブロックの外観をさらにカスタマイズすることができます。

一方、画像サイドバーでは、これらの設定が可能です。

イメージブロック・サイドバー

画像にALTテキスト(SEOに重要)を追加したり、画像サイズを変更したり、画像をウェブページにリンクさせることができます。

Twitterの埋め込みのように、サイドバーでの追加設定ができないブロックもあります。

Twitterブロック・サイドバー

唯一できることは、「詳細設定」でカスタムCSSクラスを作成することです。

結論:ブロックツールバーでブロックを完全に編集できないと感じた場合は、サイドバーで追加オプションを確認してください。

ツールバーをどう使うか
エディターの最後の部分であるツールバーの使い方をご紹介します。

Gutenberg-Toolbar

ツールバーは、「プレビュー」と「公開」ボタンを格納するだけの場所のように見えるかもしれませんが、それ以外にも多くのことができ、またそうすべきです。

基本的な部分を確認してみましょう。

ブロック
ツールバーの最初のボタンは、新しいブロックにアクセスするためのものです。

Gutenberg-Toolbar-Blocks

元に戻す/やり直し
次の2つのボタンは、ページに加えた最後の変更を元に戻す(左向きの矢印)、またはやり直す(右向きの矢印)ことができます。

Gutenberg-Toolsbar-Undo

ページ情報
訪問者が目を通しやすいページを作成したい方のために、「i」(インフォ)ボタンでコンテンツの概要を確認できます。

Gutenberg-Toolbar-Info(グーテンベルク・ツールバー・インフォ

見ることができます。

何文字書いたか。
見出しの数、その下のタイトルの内訳。
何段落あるか
何ブロック使ったか。
ここで注目すべき最も重要な情報は、単語数と見出し数です。

ページ構造
ツールバーの次の部分では、ページを作成するために使用した各ブロックが表示されます。

Gutenberg-Block-Navigation

これを使うと、作業したいブロックに瞬時にスクロールできます。これは、長いページや投稿のコンテンツを編集する際に便利です。

設定の保存
最初の3つのボタンは、ページや記事を作成するたびに使用します。

Gutenberg-Save-Settings

下書き保存」を使うと、ページの作成中に変更した内容を非公開で保存できます。

プレビュー」を使うと、ウェブサイト上でページを見ることができます。

公開」を使用して、本番のウェブサイトにページをプッシュします。ページが公開されると、このボタンは「更新」に変わります。ページの新バージョンを保存し、サイトにプッシュするにはこのボタンを使います。

設定
歯車(設定)アイコンをクリックすると、Gutenbergサイドバーの表示・非表示を切り替えることができます。無効にするとこのようになります。

Gutenberg-Toolbar-Settings-Disabled(グーテンベルク-ツールバー-設定-無効

有効にした場合はこのように表示されます。

Gutenberg-Toolsbar-Settings-Enabled(グーテンベルク-ツールバー-設定-有効

その他のオプション
ツールバーの最後のボタンは、追加のオプションやツールを表示します。Gutenbergのワークスペースをパーソナライズしたい場合にお使いください。

Gutenberg-Toolsbar-More-Options(グーテンベルク・ツールバー・モア・オプション

表示
表示」に関わる最初のオプション群です。

Gutenberg-Toolsbar-View(グーテンベルク・ツールバー・ビュー

"Top Toolbar" ツールバーをブロックの外に出し、画面の上部に貼り付けます。

Gutenberg-Top-Toolbar

編集オプションは、選択したブロックに応じて変化します。唯一の違いは、今はページの一番上にしか配置されていないことです。

"スポットライトモード "では、使用していないブロックがフェードアウトします。

Gutenberg-Spotlight-Mode

一度に1つのブロックに集中する手助けが欲しい場合、これは有効にしておくと便利なツールです。

"Fullscreen Mode "は、Gutenbergの気が散らないライティングモードです。

Gutenberg-Fullscreen-Mode(フルスクリーンモード

上と左のWordPressメニューと、右のGutenbergサイドバーが削除されます。

エディターモード
次のオプション群は、エディターモードのためのものです。

Gutenberg-Options-Editor

デフォルトでは、Gutenbergはユーザーを「ビジュアルエディター」にします。

HTMLでページを構成したい場合は、「コードエディタ」に切り替えることができます。

Gutenberg-Code-Editor

しかし、HTMLでブロックを編集する場合、より効果的でクリーンな方法は、個別に処理することです(おそらくページ全体のコードを編集する必要はないので)。

コードエディタは、「HTMLとして編集」でアクセスできます。

Gutenberg-Edit-HTML

これでブロックがHTMLに変換されます。

Gutenberg-HTML-Block

お好みで編集してください。ビジュアルモードに戻したい場合は、ブロックオプションを開いて「ビジュアルで編集」を選択してください。

Gutenberg-Edit-Visual

ツール
Gutenbergには、エディタでの作業を効率化するためのツールセットも用意されています。

Gutenberg-Tools(グーテンベルク-ツール

最初のツールは、「ブロックマネージャー」です。

Gutenberg-Block-Manager

先ほどのブロックナビゲーションツールとは異なり、このツールでは使用しないブロックを無効にすることができます。そうすれば、いざ新しいブロックを探すときに、使わないブロックを探す必要がなくなります。

"Manage Reusable Blocks "をクリックすると、再利用可能なブロックのエディタが表示されます。

Gutenberg-Reusable-Blocks

ここに保存されたブロックが格納されます。ブロックの親コピーを編集する(または全く新しいブロックを作成する)には、ここで行います。

GutenbergによってWordPressでのコンテンツ作成が容易になったのは確かですが、アクションの中には面倒なものもあります。Gutenbergの「ショートカット」を使えば、最後に行った編集を元に戻したり、ブロックを複製したり、ハイライトされたテキストをイタリックにしたり、変更を保存したりといったことが、キーボードだけでできるようになります。

Gutenberg-Keyboard-Shortcuts

コンテンツのコピー」オプションは、ページ上のすべてのブロックをハイライトしてコピーするだけです。これを使って、内容やデザインが似ている新しいページを作ることができます。ページ」→「新規追加」と進み、空のページにブロックを貼り付けるだけです。

最後のオプションは「オプション」と呼ばれています。このオプションは、サイドバーのドキュメント設定の一部を無効にすることができますが、実際の機能は、サイドバーのドキュメント設定の一部を無効にすることです。

Gutenberg-Sidebar-Options

繰り返しになりますが、エディタの中に使わない部分(ページ属性など)がある場合は、ここで無効にすることで、必要な要素の邪魔にならないようにすることができます。

まとめ
WordPressは初日から同じエディタを使っていたため、Gutenbergが導入された当初は反発もありました。

しかし、WordPressの周りに積み上げられているドラッグ&ドロップの競合(Wix、Shopify、Squarespaceなど)を見ると、変化の時が来ていたのです。

このエディタの進化が功を奏し、WordPressはあらゆるレベルのユーザーに対応できるようになりました。ブロックエディタでウェブサイトを構築することで、ユーザーは以下のようなメリットを得られるようになりました。

パーソナライズされたエディタビューにより、生産性が向上する。
コンテンツの作成やカスタマイズが容易になる。
より高度なコンテンツ制作が、従来のような技術的なノウハウを必要とせずに可能になる。
再利用可能なブロックにより、デザインのスピードアップとサイト全体の一貫性が確保されます。
コンバージョン要素(コールトゥアクションボタンやフォームなど)の追加と設定が容易になります。
人気のあるプラグインやテーマはGutenbergに対応しています。
発売までの時間を短縮。
2022年から、クラシックエディターは使えなくなります。そのため、Gutenbergをどのように活用するかを考えるには、今が絶好の機会です。

-WordPress