↑上記のことでサーバー移行したのを機に、テーマも変更しました。
長らくお世話になったSimplicity2ですが、まさか約2年前から更新が止まっていたとは露知らず……。
ちょうどサーバー移行の際にXServer公式サイトで公式テーマ「Cocoon」を見かけたので即決。便利な機能に感心しつつ、それにあわせて環境も見直していました。
その過程で避けては通れなかったのが「ブロックエディター」。
これまで幾度となく回避してきたものの、刷新を進める今こそ絶好のタイミング。ここで逃したら、たぶん今後もずっと使わない気がする──。
そう考え、意を決してブロックエディターに挑戦してみることにしました。
クラシックエディターにこだわっていた理由
理由はシンプルで、HTMLやCSSを触るのが好きだから。
クラシックエディターではビジュアルを使ったことはなく、コード(HTML)一筋の使い方をしていました。コードを学びながら自分好みにカスタマイズし、少しずつ理想の形に仕上げていく。その過程がたまらなく楽しくて、コンテンツ作成よりむしろそっちにのめり込んでいたほどです。
ミスっても自分で書いたコードなので原因を探しやすく、あれこれ模索して解決できたときの達成感もひとしお。長年クラシックエディターで書いてきたこともあり、単純に慣れていたという理由もありますけれどね。
そこへ突如として現れたのが、ブロックエディター。
導入当初は操作方法がまったく分からず、「なにこの使いにくいエディター！」と半ばキレ散らかしながらクラシックエディターへ戻ったのを今でも覚えています。
渋々ブロックエディターに移行した理由
しかし次第にクラシックエディターの立場はじわじわと弱くなっていき、一方で存在感を増していくブロックエディター。
そして心の片隅にずっと引っかかっていたのが、Classic Editorプラグインのサポート期間に対する不安。これが一番大きかったですね。
公式では「少なくとも2024年まで、または必要なくなるまでの間、完全にサポート・保守されます」とされています。
出典:Classic Editor公式プラグインページ
文面通りに受け取れば、現状は「必要なくなるまで」という曖昧な期間であり、長期的に安心できるとは言えません。
とはいえ需要は相変わらず高く、現時点でも直近での更新が確認できるほか、最新のWordPressにも対応しています。
ただしサポートはあくまで延長的な扱いであり、今後の方針次第では突然終了する可能性も否定できません。
サポート終了が忙しい時期に重なって慌てることになるのだけは避けたいところです。
そのため今後はブロックエディターが主流になっていくのは確実で、いずれはそれに合わせる必要が出てきます。それなら余裕のあるうちに慣れて備えておいたほうがいいだろうな、と判断するに至りました。
ブロックエディターの主な機能と実際の使用感
標準のビジュアルエディターでの使用を前提としています。
初ビジュアルなので、もしかするとビジュアルエディターとしての機能をブロックエディター固有の機能だと勘違いして書いている部分があるかもしれません。その点はご了承ください。
まず初めに、ブロックエディターは文章や見出し、画像などをそれぞれ独立した「ブロック」として扱い、それらを組み合わせて記事を作成していく仕組みです。
文章を地続きで書いていたクラシックエディターとは、この点が大きく異なりますね。
ブロックエディターにはさまざまな機能がありますが、特に押さえておくべきは以下の4つ。
- ブロックインサーター
- ドキュメント概観
- ブロックツールバー
- 設定
これらの役割を押さえておけば、基本的な操作は十分理解できます。
必要なブロックをすぐ追加できるブロックインサーター
見出し・リスト・画像などのブロックを1ポチで追加できる機能です。
ブロックインサーターから選ぶだけで、必要なブロックを即座に記事へ挿入できます。あとはそこに文字を書いたり画像を追加したりするだけ。
これが想像以上に便利でした。HTMLタグを調べたり記述したりする必要があったものが、ほぼ1ポチで用意できます。記事作成の手間もかなり減りました。
ブロックごとに役割が決まっているため、例えばリストブロックならEnterキーを押すだけで項目を追加できます。都度<li></li>を書く必要はありません。
なかでも特に便利だと感じたのはテーブルですね。カラム数と行数を指定するだけでポンッと表のひな形を作成でき、あとから行や列を自由に増減できます。
クラシックエディターでは<th><tr><td>と目が滑るコードを見ながら編集していただけに、表をそのまま操作できるブロックエディターは圧倒的に作業しやすくなりました。
欲を言えば、ブロックインサーター内の並び替えや固定ができればパーフェクトでした。
「よく使うもの」を表示させておけば、その名の通りよく使うブロックを最大6個まで目立つ位置に表示できますが、自分で選べるわけでもなく固定もできないため、無いよりはマシな妥協案という印象です。
上部に検索窓があることから、おそらくここにブロック名を入力して直接呼び出す使い方が基本なのでしょう。
ただ、個人的にはそこでキーボード操作を挟む手間があまり好きではないため、ポチポチ中心の操作感をもう少し自分の使い方に合わせて調整できれば、より快適に使えたように感じます。そこだけは少し噛み合いませんでした。
記事全体を把握しやすいドキュメント概観
記事全体の構造がブロック単位で一覧表示される機能です。
これを見るだけで「今どこを書いているか」「全体がどういう構成になっているか」がすぐに把握できます。一見すると地味な機能ですが、意外と実用性がありました。
特に便利なのがジャンプ機能とブロックの移動機能。
ジャンプ機能はリストビュー上のブロックをポチるだけで、その箇所へ一瞬で移動できる仕組みです。
本文はすべて「段落」と表示されるので細かい位置特定は難しいものの、見出しや画像などのブロックを手がかりにおおよその場所は絞り込めます。中でも見出しはタイトルがそのまま表示されるため、最も目印として使いやすいです。
記事が長くなるほど、この機能のありがたさを実感します。クラシックエディターだとひたすらスクロールするしかなかったですからね。
そしてもうひとつがブロックの移動機能。リストビュー上のブロックをドラッグ&ドロップするだけで簡単に順序を変更できます。距離の離れた位置の移動も一気に済ませられるため、かなり便利な機能でした。
不満はほとんどありませんが、あえて挙げるならアイコンがやや紛らわしい点です。「テキストの配置」と似た「Ξ(横3本ライン)」なので、慣れないうちは少し混乱するかもしれません。
手軽に装飾できるブロックツールバー
装飾やブロックごとの設定変更を行える機能です。
- 文章ブロック:文字の装飾(太字、色変更、リンク挿入など)
- 見出しブロック:見出しレベルの変更
- リストブロック:順序の有無
- テーブルブロック:行や列の増減
といったように、選択したブロックに応じて利用できる機能が切り替わります。
タグを考える必要が無く、すべて直感的に操作できるうえ、その場ですぐ反映結果を確認できるため非常に楽です。
タグ打ちだと装飾を重ねるほどコードも長くなり、変更するたびにプレビューで確認したりと何かと面倒でした。それがブロックエディターならポチポチ操作するだけ。装飾のハードルもぐっと下がりました。
ちなみに、上の画像は上部に固定されたタイプのブロックツールバーです。
オプション設定によって、
選択したブロックの真上に表示される「追従タイプ」に切り替えることもできます。
基本的な機能自体はどちらも同じですが、追従タイプの場合のみ「⋮⋮(ドラッグ)」アイコンが表示されるのが特徴です。
「^(上に移動)」「v(下に移動)」は1段落ずつ丁寧に上下を移動させる操作で、前後の入れ替え向き。一方で「⋮⋮(ドラッグ)」は見えている範囲内であれば複数段まとめて移動できますが、それ以上の距離になるとやや効率が落ちるため、近距離向きといったところです。長距離の移動はドキュメント概観のほうが扱いやすいですね。
用途によって細かく使い分けができるのは便利に感じました。
クラシックエディターのように文章を選択してそのままドラッグで移動することはできないため、操作の違いには少し慣れが必要です。
見た目を直感的に整えられる設定
ブロック全体の見た目や編集環境を直感的に調整できる機能です。
「設定」という名称の都合上なにかとややこしいのですが、
オプションの中にある設定ではなく、「公開」の左にある四角いほうの設定です。
ブロックツールバーと機能が一部重なって見えますが、整理すると「その場の部分編集」がブロックツールバー、「ブロック全体の性質・構造・詳細設定」が設定という違いになります。
個人的にはあまり頻繁に触る機能ではありませんでしたが、「ボーダー」や「スタイル」などは要所で使う場面がありそうでした。
ざっくりとこんな感じのものが作れます↓
ここが本文なのかもしれない
これがポチポチするだけで作れるわけですから、すごいですね。
スマホブラウザ版での編集はやや難あり
ブラウザによって挙動が変わることがありますが、ここでは最も利用者の多いGoogle Chromeを前提としています。
クラシックエディターの頃から、スマホではブラウザ版(モバイル表示)を使ってきました。本文入力欄にテキストやHTMLタグをそのまま打ち込んでいくだけなので、操作自体は至ってシンプル。特に困ることはありませんでした。
しかしブロックエディターでは少し事情が変わります。ブロックインサーターなどのUIが編集画面に重なる形で表示されるため、ちょっと窮屈さを感じました。スマホのような小さな画面で操作する以上、これは仕方のないことなんですけれどね。
また、使い勝手にもいくつかの違いが見受けられます。
実際の操作感として特に気になったポイントは以下の3つです。
ブロックの移動方法が限られる
ブロックツールバーは上部固定タイプと追従タイプの2種類があると述べましたが、どうやらスマホブラウザ版では追従タイプにはできないようです。
オプションで「トップツールバー(チェックを入れると上部固定)」のチェックを外しても、表示は上部固定のままでした。一応ブラウザ版(PC表示)でなら追従タイプにもできますが、画面全体がかなり小さくなってしまうため、そのまま使うのは少し厳しそうです。
さらに、ブラウザ版(PC表示)の追従タイプでは「⋮⋮（ドラッグ）」アイコン自体は表示されるものの、実際のドラッグ操作はうまく機能しませんでした。
さらにいうと、ドキュメント概観からのブロック移動も同様に使えません。ドラッグしようにも、指で長押しした時点でパソコンで右クリックをしたときの挙動になり、メニューが開いてしまいます。
そのため現状では、スマホブラウザ版でのブロック移動は実質的に「^(上に移動)」「v(下に移動)」のみ。大きく構成を組み替えるような作業はやりづらそうでした。
改行ができない？
パソコンでは「Enter」を押すと段落が作られるため、改行したい場合は「Shift」+「Enter」を使うのが基本です。
しかし当然ながらスマホにShiftキーは無いので、その手は使えません。
そのため、「改行はどうやって……？」と戸惑い、しばらく途方に暮れてしまいました。
実際には改行する方法はあったのですが、このあたりの操作方法については、後日改めてまとめます。
入力を受け付けなくなる
画面をタップしても本文にテキストカーソルが表示されず、文字入力ができなくなる現象に何度か遭遇しました。
エディターがフリーズしたのかと思いましたが、タイトルの編集やブロックインサーターなどの操作は問題なし。ただ本文だけが入力できない状態です。
こうなってしまった場合は、一度ページを更新するか、オプションからコードエディターに切り替えたあと再びビジュアルエディターに戻すことで解消されました。
編集画面を見ながら推敲し、いざ書き始めようとしたタイミングで発生するので、はっきりとした原因は分かりません。自分の環境の問題かもしれませんが、わりとストレス要素なので、ここだけでもなんとか改善されて欲しいものです。
まとめ
クラシックエディターに慣れていたことや、HTMLやCSSを触るのが好きだったこともあり、正直なところブロックエディターにはあまり積極的ではありませんでした。今頃こうして記事を書いている時点で、そのあたりはお察しください。
それでも実際に使ってみると、印象はガラッと180°変わりました。最初は戸惑うことも多かったものの、慣れてくると想像以上に扱いやすい。記事作成の効率や表現の自由度はむしろ向上しているように感じますね。
細かいクセのような部分は確かにありますが、その多くは慣れていくうちに解消できそうなものばかり。気付けば「思っていたより悪くないどころか、普通に使える」という印象に変わっていました。
結局のところ、食わず嫌いに近い状態だったのかもしれません。
タグを使う機会がどんどん減っていくことに一抹の寂しさはありますが、便利さを前にして背に腹は代えられないのも事実。
今後は、よほどの理由がない限りブロックエディターにお世話になっていきます。
