Gutenberg Block Editor のレビュー (WordPress パワー ユーザーによる)

この投稿では、Gutenberg プロジェクトの一部としてプラットフォームに導入された WordPress ブロック エディターをレビューします。 これは 4 年前から行われており、WordPress でこれまでに発生した中で最も物議を醸した変更の 1 つです。

時間が経って成熟した今、そういう感情が込められたトピックなので、私が参加するのは良い考えだと思いました.また、さまざまな記事でプラットフォームのあらゆる側面を何度もテストしています。 当然、これにはブロック エディターとその拡張機能が含まれます。

以下は、WordPress パワーユーザーの観点からの Gutenberg ブロックエディターの個人的なレビューです。 好きなこと、嫌いなこと、改善できると思うことについて話します。

WordPress ブロックエディター: 定義

長所と短所に飛び込む前に、まず、私たちが話していることを正確に理解しましょう. Gutenberg が最初に登場したとき、WordPress の投稿とページのエディターを置き換えただけだったからです。 ただし、今ではユーザー インターフェイスの他の部分に分岐しています。 したがって、私たちが同じページにいることを確認するために、グーテンベルクの一部は次のとおりです。

投稿/ページ エディター

これについてはすでに述べました。 これは、 [投稿/ページ] > [新規追加]に移動するか、既存のコンテンツを編集するときに表示されるものです。 WordPress 5.0 の元の Gutenberg 実装は、WordPress が以前使用していた TinyMCE を置き換えることによって、編集エクスペリエンスのこの部分を交換しただけでした。 当然、ここで投稿やページのコンテンツを編集しますが、テンプレートに関連するものはありません。

サイト編集者

最初はフルサイト編集 (FSE) として導入されましたが、グーテンベルクのこの部分は現在、サイト エディターに改名されています。 Twenty Twenty-Two や Twenty Twenty-Three などのブロック テーマを使用している場合は、 Appearance > Editorからアクセスできます。 ここでは、WordPress を使用して、ヘッダー、フッター、メニュー、ページ テンプレート、ウィジェット、ホームページなど、サイト アーキテクチャ全体を編集できます。

テンプレートエディタ

多くの人が気付いていないかもしれないことは、Gutenberg にはページまたは投稿テンプレート用のスタンドアロン エディターも含まれているということです。 繰り返しますが、これはブロック テーマでのみ使用できます。 使用されているテンプレートの名前をクリックすると、ページ/投稿エディターからアクセスできます。

そこから、現在のテンプレートを変更したり、カスタム ページ テンプレートを作成したりできます。 サイト エディターとはインターフェースが若干異なりますが、全体的には非常に似ています。

ウィジェットエディター

この部分は、ブロック エディターの残りの部分とは少し異なりますが、正式には Gutenberg プロジェクトの一部であるため、ここで言及する必要があります。 今では、ブロック エディターの UI はウィジェット管理にも拡張されています。 クラシック テーマの[外観] > [ウィジェット]の下にあります。 前述のように、ブロック テーマでは、ウィジェットの処理はサイト エディター内で行われます。

正直なところ、これについてはあまり言いたいことはありません。 必ずしも古いメニューよりも良くも悪くもないとは思いませんが、それはその仕事をしています。 したがって、以下でウィジェット エディターについて詳しく説明するつもりはありません。 他の誰かがこれについて強い感情や意見を持っている場合は、コメントで聞いてみたいです!

Gutenberg の投稿/ページ エディターのレビュー

Gutenberg ブロック エディターの内容について理解できたところで、さまざまな分割払いのパフォーマンスを確認してみましょう。 投稿/ページ エディターから始めます。

それについて私が好きなこと

まず、ブロック エディターでコンテンツを作成するのが好きです。 クラシック エディターに戻りたくありません。新しいエクスペリエンスのメリットに慣れすぎているからです。 これが私の理由です。

洗練されたモダンな

TinyMCE は、長い間 WordPress に貢献してきた真の主力製品です。 ただし、これは最新のソフトウェアではありません。

従来のエディターのエクスペリエンスは少しぎこちなく、2000 年代初頭には常に行き詰まっているように見えました。 それとは対照的に、Gutenberg やブロック エディターは単に最新のように見えます。

広々としていて、最小限に設計されており、清潔です。 また、すべての重要な設定と情報を簡単に見つけることができます。 私としては、それが他のコンテンツ管理システムに採用されていることに驚きはありません。

あなたが見たもの、それがあなたの手に入れたものだ

第二に、編集体験がページの最終結果とより一致していることを楽しんでいます. TinyMCE では、エディター スタイルを追加する機能がありましたが、コンテンツがサイトでどのように表示されるかを確認するには、常にページをプレビューする必要がありました。

これは特に、ボタンやフォームなどの非典型的な要素に当てはまります。 TinyMCE では、ショートコードを介してこれらを追加することがしばしば必要でした。 その結果、何が起こっているのかを解読するために意味を知る必要がある括弧でいっぱいの文書になってしまうことがありました。

それとは対照的に、Gutenberg のブロック エディターでは、ショートコード ブロックを明示的に使用する場合を除いて、通常は完成した要素がエディターに表示されます。 そうでない場合でも、少なくとも有効なプレースホルダーがあります。

これは、コンテンツにビジュアルを追加するのに非常に便利です。 昔は、記事に「[スクリーンショット]」のようなものをたくさん投稿して、画像を含めたい場所をマークして見つけなければなりませんでした。 Gutenberg では、執筆中に画像ブロックを追加するだけで、スクリーンショットを追加するときにそれらを埋めることができます。

これは、前後に切り替えることなく投稿コンテンツを構築するための優れた方法です。 もちろん、完全に並行した体験ではありません。 たとえば、画像に別の配置が必要かどうかを確認する必要があることがよくあります。 でも前よりずっといいです。

ナビゲートしやすい

Classic Editor について覚えていることの 1 つは、次のとおりです。 多くの。 スクロール。

以前の一節を読み直したり、投稿の別の部分を変更したりしたい場合は、マウスホイールを使用するしかありませんでした. これにより、コンテンツ全体を見失いやすくなり、特定の場所を見つけるのが困難になることもありました。

これは、ブロック エディターではまったく異なるものです。 左上の小さなiアイコンをクリックすると開くメニューは、実際に私が最も頻繁に使用するオプションの 1 つです。

見出しから投稿全体の内訳を確認でき、グーテンベルクではクリック 1 つで別のセクションにジャンプできます。 これは非常に便利です。特に、私のように非常に長い文章を書く傾向がある場合はなおさらです。

より良いもの

もちろん、投稿/ページ エディターを使用することがバラバラで蝶々ばかりというわけではありません。 それにも欠点があり、そのうちのいくつかは深刻と言えます。

パフォーマンス

私の主な問題は、エディターの時々むらのあるパフォーマンスです。 それを実行するために必要なすべての JavaScript は、実際にブラウザーに負担をかける可能性があります。

適切な例として、前述したように、私はより長い記事を書く傾向があります。 私自身のブログでは、通常、投稿の長さは少なくとも 3,000 ～ 4,000 語で、それよりもいくらか長くなります。

私は最近新しいラップトップにアップグレードしましたが、冗談ではありませんが、主な理由の 1 つは、ブロック エディターが 5 年前のマシンで一定数の単語を入力すると使用できなくなったことです。 それはクロールに遅くなり、通常のタスクを実行するのに非常に時間がかかるため、投稿のセクションを新しい記事にコピーし、そこで編集してからコピーし直すことを余儀なくされることがありました. クラシック エディターでそれを行う必要があったことを覚えていません。

したがって、これは改善が必要な深刻な領域です。 安定性についても言いたいことがありますが、それについては後で説明します。

キーボード ショートカットがない

Classic Editor で私が最も気に入った点の 1 つは、堅牢なキーボード ショートカットのセットです。 テキストを見出しに変更したり、見出しを別の順序に変更したり、順序付きリストと順序なしリストを切り替えたりすることが簡単にできます。 すべてマウスに触れることなく。

これは、ブロック エディターから欠落している部分です。 適切なキーボード ショートカットがありますが (右上隅のメニューで見つけるか、 Shift+Alt+Hを押して見つけます)、それらは TinyMCE ほどカバーしていません。

はい、好みのブロックを入力するためのスラッシュ コマンドがあります (これは素晴らしいことです)。 ただし、既存のテキストを見出しに変更したり、h2 から h3 に切り替えたりする場合は、通常、マウスを使用する必要があります。

多分それは個人的なペットの不満かもしれませんが、私の意見では間違いなくもっと良いものです.

サイト エディターの詳細

この Gutenberg レビューの次は、Site Editor について話しましょう。 ここでも、良いこともあれば、改善できることもたくさんあります。 ただし、これはまだ開発中のプロジェクトであることに注意してください (メニュー項目の横にあるベータタグで示されています)。

したがって、以下で言及することのいくつかを、一粒の塩で取る必要があります.

サイト エディターが得意とすること

私は、サイト エディターがすでに優れていると思うことから始めています。

とてもパワフルな

サイト エディターが多くのことを実行でき、技術者以外のユーザーに信じられないほどのパワーを与えることは否定できません。

ページ テンプレートのカスタマイズ、ヘッダー、フッター、その他のサイト要素の作成と変更 — ほんの数年前までは、PHP を知っているか、誰かを雇うか、ページ ビルダー プラグインをインストールする必要がありました。 さて、適切なテーマを使えば、それは WordPress のネイティブ機能であり、それは単に素晴らしいことです. さらに、ワンクリックで Web サイトのスタイル全体を変更できる機能は、驚くべきものです。

どちらも、非開発者が自分のサイトに非常に基本的な変更を加え、基本的に自分でカスタム テーマを作成することを可能にします。 特に、他の Web サイトで使用するために変更をエクスポートすることもできるためです。 これは間違いなく進歩であり、多くの人が WordPress を愛する理由と完全に一致しています。

ブロック パターンとテンプレート パーツ

ページ コンテンツを決定的に変更するのに最も役立つ 2 つのツールは、ブロック パターンとテンプレート パーツです。 数回クリックするだけで、クエリ ループのレイアウトを完全に変更したり、ヘッダーとフッターを切り替えたりできることは、非常に貴重です。

さらに、開発者が本当に釘付けにしたのは、パターン ディレクトリからのブロック パターンを含めて、簡単にブロック パターンを追加できることです。 コピーして貼り付けるだけで、必要な場所ですぐに利用できます。 非常に短時間で完全に肉付けされたレイアウトを構築できます。

改善の余地

同時に、ブロック エディターのこの部分に対して平準化できるかなりの量の批判があります。

最もユーザーフレンドリーではない

私はサイト エディターが提供する強力な機能を高く評価していますが、ユーザーの観点からすると、必ずしも使いやすいとは限りません。 ユーザー インターフェイスは、ページや投稿の編集には十分に機能するように凝縮されていますが、サイト全体のカスタマイズがより複雑になるため、多くの場合、設定を探す必要があります。 メニューの数は限られているため、目標を達成するには多くのクリックを行う必要があります。

それとは別に、それはしばしば小さなことです：

• リスト ビューでマウスを使用してブロックを移動するのは非常に困難です。 多くの場合、それらは望ましくない場所に行き着きます。
• 一般に、ページ要素の配置は少し面倒です (しゃれが意図されています)。
• Web サイトの構築に慣れている人でも、どこで何をすべきかを見つけるのに時間がかかる場合があります。

最もややこしい作業は、メニューの作成です。 正直なところ、この時点で完全に理解できたかどうかさえ確信が持てません。 ページ上でそれを行うのと同じようにできますが、実際には何もできない古い UI に移動するブロック オプションの [メニューの管理]リンクもあります。

これがユーザーの間で多くのフラストレーションを引き起こしていることがわかり、批判のいくつかは完全に有効であることがわかります.

ドキュメントの欠如

これは上記と密接に関連しています。 サイト エディターを使用しているときに、少なくとも Google では、特定の問題に対する適切なヘルプを見つけるのが非常に難しいことに気付きました。 公式のサポート ページがあることは知っていますが、素晴らしい仕事をしているサポート チームから離れたくありません。

しかし、実際には、多くの場合、特定のタスクを実行する方法を試行錯誤する必要がありました。頼りになる適切なリソースを実際に見つけることができなかったからです。 特に、特定のブロック関数に関するヘルプを探している場合。

おそらくこれはすべてかなり新しいという事実によるものかもしれませんが、サイト エディターに関する良い記事が明らかに不足していることに気付きました。

不足している機能

私を悩ませているもう 1 つのことは、Site Editor では (まだ) できないことがいくつかあるということです。 例には、負のマージンの設定やボックス シャドウの作成が含まれます (ただし、ロードマップにはあります)。

そのいずれかを利用したい場合でも、カスタム CSS を使用する必要があります。 これは、a) 初心者ユーザーにはわからないことであり、b) エディターの目的に反するものです。 少なくとも、Site Editor を使用して基本的なページ構造と広範なデザイン ストロークを構築するハイブリッド アプローチを余儀なくされますが、最終的な仕上げのためにスタイル シートに戻る必要があります。

もちろん、CSS が提供する可能性のあるすべてのオプションをエディターが提供することを期待することはできません。 ただし、機能セットがまだ少し薄いように見える場合があります。

一方、それは単にサイト エディターが置かれている難しい位置にあります。特定の機能が欠けているため、ページ ビルダーとは言えませんが、WordPress カスタマイザーのような基本的なオプションをはるかに超えています。 結果として、それは常に有利になるとは限らない中間の灰色の領域のどこかに行き着きます。

安定

最後に、フルサイト編集の最大の欠点の 1 つであり、グーテンベルグのレビューに含める必要があるトピックの 1 つは安定性です。 Site Editor は、私がこれまでに最も多くのクラッシュを目にしたものです。

これまでのところ、大きなデータの損失につながったことは一度もありません。つまり、クラッシュする前に行ったことを常に簡単かつ迅速にやり直すことができました。これは、主に優れた自動保存機能によるものです.

ただし、前述のパフォーマンスの問題とともに、安定性は間違いなく最も注目に値する領域です。

テンプレートエディタ

前述のとおり、これはページ/投稿エディターにタグ付けされたエディターです。 これは、フルサイト編集エクスペリエンスの少し簡素化されたバージョンです。

その目的は、サイト エディターに戻ることなく、その場でページ テンプレートを変更することだと思います。 これは一般的には良い考えですが、これは私が最も使用していないブロック エディターの部分であると言わざるを得ません。 したがって、それに対する私の意見は比較的中立です。 とはいえ、持っていないわけではありません。

ヒアズ・ホワット・アイ・ライク

テンプレート エディター自体の機能を見てみましょう。

使用目的に適しています

このエディターの真の目的が外出先でテンプレートを変更することである場合、十分に機能していると思います。 注目の画像とページ タイトルの順序を変更したり、フォントや色を切り替えたり、ヘッダーやフッターを変更したりすることもできます。

そのため、ページや投稿に取り組んでいて、テンプレートに関する何かを変更する必要があることに気付いた場合、すばやく簡単に変更できます。 または、その場でカスタム ページ テンプレートを作成することもできます。 そうすれば、変更をその 1 つのページだけに適用したり、他の選択したコンテンツに割り当てることができます。 繰り返しになりますが、以前は間違いなくコード エディターが必要だったものに、コードは必要ありません。

乗れなかったもの

一方で、あまり気に入らなかったのがこちら。

初心者にとってはおそらく混乱する

Template Editor の主な問題点は、Web サイトの構築についてあまり知らない初心者にとって、どこで何をすべきかを理解するのが難しいことです。 たとえば、テンプレート エディターでページをコンテンツで埋めることは想定されておらず、テンプレート自体に構造的な変更を加えてから、ページ/投稿エディターでコンテンツを追加するだけです。

ここでも、ユーザーにその適用方法を適切に教えずに、これほど多くの力をユーザーの手に渡すにはどうすればよいかという問題があります。

最終的な考え: Gutenberg レビュー

以上、WordPress のブロック エディターのレビューと Gutenberg プロジェクトの実装について、日常的にこのプラットフォームを専門的に扱っている人物によるものです。

たくさんの批判があったとしても、私は一般的に新しい編集体験の大ファンです. 特に、投稿とページのブロック エディターは見逃したくありません。 もちろん、改善の余地はありますが、すでに十分なレベルにあることは間違いありません。

さらに、上記のリストは決して網羅的なものではありません。 私は自分の仕事で私に起こった最も重要な点に焦点を当てました. ポジティブにもネガティブにも話すことができるものは他にもあります。 ただし、これらは大まかなストロークです。 あなたの意見は何ですか？

私のグーテンベルクのレビューに同意しますか? ブロックエディターとその実装方法についてどう思いますか? 以下のコメントで共有してください！