ページビルダー利用でWordPress5.0に更新した際の覚書・01(ブロックエディタ)

先週WordPress5.0がリリースされたので、当ブログもアップデートしたのですが、ブロックエディタ(Gutenberg)が出てこないなどの不安な挙動に出会ったりしました。そんなこともあり気づいた点を覚書しておきます。

2018年12月現在、Sydneyが推奨するページビルダーはElementorですが、当サイトでは以前推奨されていたPage Builder by SiteOriginを使っています。

1.アップデート

テーマやプラグインは最新版にしておきます。なお、テーマSydneyPage Builder by SiteOrigin(以降は、SOページビルダーと略します)ともに5.0で検証済みであることを確認しました。その上でサイトを5.0に更新。Google検索候補に「wordpress 5.0 真っ白」があるのは知っていたものの、当サイトは問題ありませんでした(キャッシュプラグインを使っていないからでしょうか?)。

2.ブロックエディタが出てこない

早速、エディタを試してみようと思い、投稿の新規追加や過去記事の編集をしてみたんですが、ブロックエディタで開かない。従来エディタ(クラシックエディタと呼ばれてますが、ブロックエディタでもクラシックと呼ぶものがあり、ややこしいのでここでは『従来エディタ』と呼びます)のままなんですよ。で、投稿一覧をよく見てみると、上部の新規追加ボタンの右側にくっついたドロップダウンがあるんですよ(下図①)。

これ、新規追加と表示されている部分と連動していなくて、いつもの癖で新規追加のテキスト部分を押すと従来エディタが開くんですね。

右側の▼を押すとページビルダーかブロックエディタを選択できるようになってるのです(下図②)。
ブロックエディタを選択するとブロックエディタが開きました。

今後は、▼を押すようにすればいいのですが、左側メニューの新規追加だと従来エディタ、既存の記事の編集の場合も従来エディタという具合です。(2018/12/17訂正:左の挙動だったんですが、投稿の場合もPageBuilder使うように設定を変えてもブロックエディタが開くようになってました。)「wordpress 5.0 ページビルダー」で検索しても、同様なケースが見当たらないので、おそらくページビルダーを使っていないユーザーであれば▼が表示されていないんだろうと思われました。私としては、この際投稿はブロックエディタしか使わないようにして早く慣れたいと思っていたので、▼は出て欲しくないのです。

①投稿一覧の新規追加ボタンの右隣に▼が表示

 

②新規投稿の右側の▼をクリックすると、エディタが選べる

3.SOページビルダーとエディタの関係

SOページビルダーは投稿タイプごとにページビルダーの使用、不使用を選べます。当サイトでは、投稿、固定ページともにページビルダー使用にしていました。この設定のために、上述の▼が出るのだろうと思われたので、投稿だけページビルダー不使用にしてみました(下図③)。

その状態で、投稿一覧を表示すると、▼がなくなり、新規追加ボタンのみになりました(下図④)。

ちなみに、これまでの投稿でページビルダーを使用していたのは2投稿あり、今後のメンテナンスのためにこの2投稿は、事前に通常のビジュアルエディタで編集し直しました。

③SOページビルダーの設定で、投稿ではページビルダーを使わないように

 

④SOページビルダーの設定変更後は、新規追加の右隣に▼が表示されない

4.今後はページビルダーを使うのか

当サイトの場合は、固定ページとProjectsでSOページビルダーを使っています。同様なページが今のブロックエディタで作れるのかわかりませんが、今後作れるようになったら使わなくなるでしょうね。

そもそもSOページビルダーをどうして使っているのかと言えば、テーマSydneyで推奨されていたものだったからです(2018年2月の時点では)。インポートしたデモデータのフロントページでも使われていたので、使わざるを得ないので使っていたわけです。

Sydneyの今の推奨ページビルダーElementorを有効化していると、ブロックエディタ上でElementorで開くためのボタンが表示されるのですよね(下図⑤)。
少し触ってみたものの使い方がよくわからずなのと、ブロックエディタから別なエディタに切り替えるってどうなんだろうと疑問です。

SOページビルダーは、SiteOriginのこちらの記事で紹介されている動画を見る限りは、ブロックエディタからSiteOrigin Layoutを選ぶことで同じエディタ内でブロックとして使えるように検討されていたようです。今のところは、5.0のブロックエディタ上にはSiteOrigin Widgetしかみあたりません。←誤りでした。よくよくみたらSiteOrigin Layoutがレイアウト要素の中にありました。つまりブロックエディタにSOページビルダーが同梱されたような感じでしょうか(言い過ぎ?)。別な機会に、SiteOrigin Layoutの挙動などは確認してみます。

⑤ページビルダーElementerプラグインを有効化すると、ブロックエディタ上でページビルダーに切り替え可能

※SiteOriginで紹介されていた動画も貼っときます(35秒あたりからです)

5.というわけで、ブロックエディタでこの記事を書いてみた

(1)新規追加でブロックエディタが開きます。
右ペインが記事の投稿、カテゴリーやタグ、アイキャッチの指定なのはこれまで通りですね。
ただ、当サイトの場合にところどころ日本語になっていません。検索すると日本語表示されている人もいるみたいですが、当サイトがプラグインかなにかとコンフリクトしてるのでしょうか?
また、ぱっと見だと、下書き保存のやり方がわかりません。

(2)とりあえず、タイトルを書いてみたら、下書き保存の表示が出てきました。

(3)投稿本文用に、ひとまずClassicを追加してみます。
文章を入力・・・と表示されているあたりにマウスをホバーすると+マークが出てくるので、そこから展開されるものを選びます。
あるいは、右側のアイコンによく使うものがスタックされているのでそこから選ぶことも可能。

(4)+マークから選ぶ場合はこんな感じ。

(5)追加しただけだと何も表示されてなくて焦ります。

(6)ブロックの中をクリックするなどしてアクティブにすると、従来エディタと同様なメニューがClassicブロックの上部に表示されました。メディア追加のボタンもあります。普通の投稿であれば、Classicブロックを1つ追加して書いていけば良さそうです。

(7)アクティブなブロックのメニューは上部にスティッキー表示されるので(最後の補足参照)、長い投稿で途中に画像を追加する場合も問題なさそうです。が、途中に画像を追加した直後はブロックの先頭が表示されるみたいなので、画像添付が多い場合は何度も下にスクロールしなければならず面倒です。章立てに合わせてブロックを分けるのがよいかもしれません。

(8)YouTubeなどの埋め込みも、今まで通りにYouTube側で作成した埋め込みコードをコピーして、ClassicブロックをビジュアルモードからHTMLモードに切り替えてペーストすれば大丈夫です。が、埋め込みはブロックを分けた方がよさそうです。手数が少なくて済むので。

Classicブロックの左端の「︙」をクリックしてHTMLモードに切り替えるやり方

(9)新たなブロックとして、埋め込みブロック・YouTubeを選択して作成する場合。

埋め込みブロック・YouTubeを追加します。

 

YouTubeのURLを左側に入れて、Embedボタンを押すだけ

(10)ブロックを削除したい場合は、ブロック上部のメニューの右端の「︙」をクリックするとブロックに対するオプションが出てくるので、そこから選びます。

 

(11)右側ペインより、パーマリンクを変更し、カテゴリー、タグ、アイキャッチを追加して公開します。やはり英日まじっているのが、気になりますね(12/20追記:バージョン5.0.2に更新で、日本語表記されました)

●ステータスとパーマリンク

●カテゴリーとタグ

●アイキャッチ画像

 

6.補足

  • 5の(7)で、ブロック上部のメニューがスティッキー表示されると書きましたが、そうならないときもありました。状況が特定できなかったのですが。とりあえず、ドラフト保存して、再度開いたら解消されました。
  • 5の(11)の右側ペインのスクリーンショットの配置は、Columnsブロックを追加して3カラムにして、各カラムにClassicブロックを指定して、そこに画像を入れるという具合にやってみました。3カラムにしても編集画面の幅内に収めないので、一瞬表示が崩れているように見えますが、右スクロールしていくと他の2カラムがあることに気づきます(これは別途まとめられたらまとめます)。
  • Classicブロックの他に、Classic Paragraphというのがあって、ほとんど同じなのですが、どちらを使ったらよいのでしょうか?おいおいですね。
  • 目次プラグインTable of Contents Plusを使っていますが、複数ブロックある場合でも問題なく目次化されました。

追記

2018年12月17日追記

記事投稿時の12/14は問題なかったのですが、本日管理画面のアイコンの一部が見えなくなってしまい… 。いくつかプラグインを更新したら文字化けしたのですが、テストサイトを作って当サイトで使っているプラグインを試したところ、文字化けの原因はCodeLightsだったようなので、このプラグインの使用を停止しました。

赤枠部分のアイコンが消えてしまった。ホバーすれば内容はわかるものの不便。特にメディアは□すら表示されず。