ワードプレスの新エディター「Gutenberg」に慣れましょう。

ワードプレスは旧式のエディタ(TinyMCE)のサポートが無くなると発表しているそうですが、ブロックエディタを使わないようにするプラグインが未だに結構見つかります。しかも高評価!

オリジナルのエディタを使っている場合はワードプレスが保証している訳でも無いので、プラグインやテーマの作者が保証する問題で関係ないのですが、旧式のTinyMCEを使っていた場合、最初は違和感を覚えるブロックエディタでも、なるべく慣れるよう意識した方が良いかもしれません。

それに実はブロックエディタ内でも旧式のTinyMCEを使ったエディタ(クラシックという名のブロック)を「ブロック」として使用できますので、全く新しくなった一面もありますが、それと同時にハイブリッドなエディタという一面があります。

加えて、テーマやプラグインを編集する方にとっても良い側面があって、エディター自体がCSSで簡単にスタイリングできるようになっているので、使いやすいエディタのデザインや拡張機能が増えるんじゃないかと僕は見ています。以前のTinyMCEではエディタスタイルといって、CSSを用意して編集ページにおいてもデザインを反映させていましたが、旧式の場合はiframe内に出力されるようにしていた記憶がありますが、ブロックエディタでは編集ページの条件に当てはめて管理ページでCSSをロードするだけでスタイリングが出来ます。

記事を書くブロガーにとっては、ブロックごとにまとめて書くことが出来るので、構成が見やすくなります。見出しのレベル(H1~H6)に応じてアコーディオンを作って、エディター上で表示を切り替えることも可能でしょう。

僕も久々にブログに復帰したのでまだ慣れていないので、物足りない機能もあることは分かっているのですが、近い内にGutenbergの方が使い勝手が良いことに気付くことを期待しながら紹介していきます。

ワードプレスで標準エディタを使用するメリット

あくまで従来のTinyMCEベースのエディタと比較した場合ですが、まず、サポートが標準でついてくるのが有り難いのです。

それに加えて、冒頭でも書いたように従来のエディタがブロックとして使用できますので、セクションごとにエディタを配置して、編集箇所を纏めやすくなっています。

例えば、H2タグ毎にブロックを作っておくなど整理しておくと、編集画面での編集箇所を探しやすいですよね。

また、従来のエディタでカラムを作ってGutenbergと同様に編集しようとすると、エディタ機能をプラグインで別物にしてしまったり、自分で編集できるなら自分で編集するといった手法が取られると思います。少なくとも標準エディタでは利用できなかったと思います。

ただ、Gutenbergのようなブロックエディタをすでにプラグインの形で公開している開発者からすると、競合するコンテンツ編集機能をワードプレスコアに用意されたのは結構痛い気がします。ユーザーが最終的には選ぶ形になるでしょうが、僕は開発段階でプラグインとしては酷評されていたGutenbergを立てておこうと思います。

文章を書くだけであれば慣れるまでの敷居は高くない

レイアウトやら画像の挿入だけでなく、ショートコードやウィジェットなどのあらゆるアイテムをブロックとして使用できます。

テーマの設定により詳細なレイアウトやデザインをエディタ上で再現することも出来ますし、書きやすいようなデザインにすることももちろん可能です。

カラムを簡単に挿入できるようになったのは有り難いですし、以前のエディタで何故用意されてなかったのか不思議です。

ともあれ、テーマやプラグインによりエディタ上のデザインが左右される場合もありますが、基本的にはプレビューに近い形になっている筈ですので、仕上がりとの誤差を減らして1つの画面で見ることが出来るようになっているため、ページを書いている間に画面遷移してプレビューする回数が減りますので、時間の短縮になるでしょう。

エディタのカスタマイズがしやすくなった

プラグインなどでの拡張機能が増えやすくなったと思いますので、まだ少ないかもしれませんが、これから増えていくことは十分に考えられます。

僕も欲しいブロックは自分で作ろうかと思って、遅れながら今ドキュメントを読んでいるところで、テーマの編集がある程度落ち着いたらブロックも随時追加しようと思っています。

ブログも再開したので、便利な機能があった方が記事を書くにも楽です。

GutenbergはReactを使った編集画面の機能なんですが、僕は今までReact使ったことありませんでしたけど、一応さっと目を通してブロックが1つ作れましたので、1つを作成して新テーマで使えるようにしました。チャット形式でコメントを表示させるブロックです。

Nora

こんな感じでブロックを追加できます。 チャット形式のブロックコンテンツです。

反対側からコメントを書くことも出来ますので、対話形式で記入することも出来ます。

思っていた以上に結構簡単に追加できましたので、ブロックの追加方法なども紹介していこうと思っております。

関連記事:ワードプレスのエディター「Gutenberg」にカスタムブロックを追加する方法

再利用ブロックの登場

僕自身もプラグイン「Magic Tempalte Holder」を作成したので、部分的にテンプレート化して使い回すということをしていたのですが、ワードプレスコアがこれを用意してくるとは正直思っていませんでした。

しかも、他のブロックへの変換機能に加えて、便利なJSON形式でのインポート・エクスポート機能付き!

Nora

プラグイン「Magic Tempalte Holder」の更新を保留しているのはこの為です。どうGutenbergに対応させようか考えもので、ブロックをまとめて保存できるような形にしてしまうのが良いのでしょうかね。

まぁ便利な機能になった気がしますので良しとしておきますが、改善点が見つかれば更新してブロックやボタンを追加しときます。

現在のブロックエディタへの不満点

実際に使ってみると、以前のエディタを使っていた頃の癖などが残っているので、ちょっと手こずる場面がしばしば。

慣れれば解決するだろうと思っていることもありますが、自分で機能を追加しようと思っている部分もあります。

ブログなどの記事を作成するのであれば、結構文字を打ち込むことの方が多いと思いますが、スムーズに書けないとちょっとイライラしてしまいますので、そういった一面もちょっと紹介。

クラシックブロック内でないと以前のショートカットが使えない?

既に冒頭にも書いたように、Gutenbergでは、以前のクラシックエディタをブロックとして使用することが出来ますので、このブロック内においては同様のショートカットキーが利用できるのですが、それ以外のブロックにおいてはショートカットキーは異なるものが設定されています。

ブロックの追加方法を調べていると、ショートカットキーはブロック毎に設定できるようになっていると判明しました。

見出しのH2タグまでであればキーボードのみの入力で問題ありませんが、H3となると「/(スラッシュ)」を入力してブロック「見出し」を選択した後、そこからマウスで操作して見出しの種類を選択しないといけません。

見出しブロックは標準でH2タグなのですが、パラグラフと見出しに関して使用できるショートカットキーは「Bold(太字)」「Italic(イタリック)」「リンク」「削除(訂正)」といったタグで、以前のようにパラグラフから見出しタグなどを変換するようなショートカットキーがなくなっていますので、ブログとして文章を書いていくセクションではクラシックエディタのブロックを頼りたくなってしまうのが現状な気がします。

Nora

ショートカットキーを知ってる方いらっしゃいましたら教えてくださいませ〜(´;ω;`) 僕はマウスに手を伸ばすのが面倒になると、「Shift」+「Tab」を使って編集中ブロックのツールボタンに移動して、H3を選択していますが、他に方法があるならめちゃ助かります。

1つ前に戻すショートカット「コマンド」+「Z」が怖い

時々ワードプレスのカスタマイズコードを紹介していきますので、僕もソースコードなどを書く際に使用されるブロック「ソースコード」を使おうと思った時に気が付いた現象で、クラシックブロックを使用している方は既にご経験済みかもしれません。

「あっ間違えた」と思って反射的に「コマンド」+「Z」で動作を1つ前に戻すショートカットを使うことはよくあると思います。

が! Gutenbergではこのショートカットが作用する動作の単位は、「同じブロック内に続けて入力している間は全て1回の動作」となっており、次のブロックに何かを入力するまで次の動作だと認識しないイメージです。

つまり、クラシックブロックでは特に気を付ける必要があるのですが、長文の文章を書いている時にうっかりと小さなミスで「コマンド」+「Z」を押してしまうと、ブロック内のコンテンツが全部消えます。これは本当に改善して欲しいです。怖すぎます。

色々試してみましたが、この現象が起こるのは、何故か「クラシックエディタなどの改行可能なブロックでのみ」のようで、通常のパラグラフブロックや見出しブロックでは何の問題もありませんでした。

クラシックブロックはショートカットが便利で僕も使いがちなのですが、なるべく細かいパラグラフブロックを使うように努力した方が良いということでしょう。

Nora

きっと「コマンド」+「Z」はクラシックエディタ離れを促す罠! ミスタッチにご注意を (੭ु ˃̶͈̀ ω ˂̶͈́)੭ु⁾⁾ バンバン!

WooCommerceの対応

今の所、WooCommerceの商品ページの作成においてはGutenbergではなく旧式のクラシックエディタが採用されています。

商品ページってそのページのプレビューよりも、商品データの管理の方が優先されるでしょうから、そちらを意識して管理しやすいフォームデザインのクラシックエディタが使われているのだと思われますが、これがいつか切り替わってしまうのか、と想像すると結構ビクついてしまいます。

実際、WooCommerceの商品を紹介するためのブロックがプラグイン化されて公開されていますから、商品ページ以外のGutenbergを使ったページでWooCommerceブロックは作られています。

いつか切り替わる時期が来るかもしれませんよね。

どうしてもクラシックエディタに戻したい場合

使い慣れた古き良きクラシックエディタに戻す方法も、当然プラグイン化されていて残っています。

こうやってプラグイン化しておいてくれるのはワードプレスの良いところですね。

ただ、サポートがどこまで及ぶのかはハッキリ言って未知数ですし、この記事では既に書きましたが、Gutenberg内でクラシックエディタをブロックとして使用できるため、あまり意味があるようには感じませんが、それでもクラシックエディタをこよなく愛する方は「プラグイン」->「新規追加」から「Classic Editor」を検索してください。

高評価なものが多く見つかりますので、この記事が凄く対立するような意見を持っているように感じます(笑)

有効化するだけで以前のエディタに戻りますが、Gutenbergでもクラシックエディタのブロック使えますからね〜

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください