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

前の記事で章立てごとにブロックを作ればよさそうと書きましたが、Classicブロックを連続して追加すると、当初の編集時は追加した分表示されていますが、一度保存して開きなおすとブロックが統合されることがわかりました。そのような覚書をざっくり書いていきます。

タイトルが内容と微妙に一致してないですが、覚書の2ということで。

それと、ブロックエディタのメニューの一部(というか多く)が日本語化されていない件について言及されている方がいました。(追記:12/19公開の5.0.2で対応)

https://twitter.com/ixkaito/status/1073084883461754882

エディタ系プラグインでブロックエディタに対応しているもの(ブロックになっている)

当サイトで使っているものに限って言えば

  • TinyMCE AdvancedはClassic Paragraphを追加
  • Page Builder by SiteOriginはSiteOrigin Layoutを追加(レイアウト要素)
  • SiteOrigin Widget(ウィジェット)ただしβ版 1.14.0で対応済みと思われる
  • Syntax Highlighter Code(フォーマット)

エディタ系プラグインでブロックエディタに対応していないもの

それらは、Classicブロック、Classic Paragraphブロックのメニューにアイコン表示されます。
当サイトで使っているものに限って言えば

  • Enlighter(Syntax Highlighter入れててブロック化されているので、使用中止でもよいのか)
  • SiteOrigin CodeLights(アイコンが文字化けするので使用中止)

同じ種類のブロックを連続して追加した場合

編集保存後にその後に開くと、連続したブロックが統合されるものと統合されないものがある。

  • 統合されるもの:Classicブロック
  • 統合されないもの:(たぶん)上記以外全部
    試したのは、Classic Paragraph、Paragraph、List、Image、Code、SyntaxHighlighter Code、Heading、Quote、SiteOrigin Layout、File
  • 章立てごとにブロックをわけるのであれば、以下のどちらかでよくて、
     Classic Paragraphを複数使用
     HeadingsとParagraphを使用
    ブロックエディタ的には後者な気がするのだけど、リストを使うときはリストブロックにしないといけないし、画像を入れるときはImageブロックにしないといけない(Inline Imageもあるが使い方がよくわからない)ので、一見面倒な気が。あ、HeadingsとClassicを使えばよいのか。

ブロックの移動方法

Quote、Paragraphと続いているブロックの順序を逆にする(Paragraph、Quoteの順に)場合は、例えば、Paragraphブロックの右1/4辺りでホバーすると∧や∨の表示が出てきて、それを押すと上に移動することができるが、ちょっとわかりにくい…

blockeditorのmove up例①
①移動したいブロックの右側1/4あたり(右半分ではない)をホバーすると、枠外に移動表示がでてくる
blockeditorのmove upの例②
②例えば、「∧」にホバーするとMove Upの表示が出てきます
blockeditorのmuveup例③
③「∧」をクリックすると、ブロックが上に移動します

※フルスクリーンモードにすれば気づきやすいです(後方に追記)。

Paragraphブロックについて

  • ボールド、イタリック、取り消し線、リンクはブロックの上部メニューで一部のテキストに対して指定できる
  • テキストの色や背景色、フォントサイズ変更は右側のブロックメニューで指定できるが、一部のテキストだけの変更ができず、全部変わってしまう
  • なお、色の変更の場合にColor Settingsで表示される色はテーマによって変更されるようだ(SydneyとTwenty Nineteenでの表示が異なっていた)

Listブロックについて

  • Listブロック中で、shift+Enterの改行はできない(次のリスト項目になる)
  • 他のエディタで編集したテキストをListブロックにペーストする場合、改行コードが含まれているとリストブロックにペーストされず、直下にパラグラフブロックが追加されてそこにペーストされる

その他

  • FileブロックはPDFなどをダウンロードしてもらう場合に使うと思うが、Downloadボタンが並記されるのでわかりやすい気が(表示しないようにも選択可能)
  • ただ、Downloadのボタンの色が黒い(#32373c)のだけど、編集画面で変更はできない
  • 12/20追記:記事投稿時はWordPressのバージョンが5.0.1でしたが、本日12時台に5.0.2に自動更新されました。ブロックエディタのメニューもだいぶ日本語化されました。
  • 12/20追記:ブロックの移動方法で、上下に移動の表示が見づらいと書きましたが、フルスクリーンモードにすれば左側のメインナビゲーションが非表示になるので、移動表示は見づらくないです。フルスクリーンモードは、ブロックエディタ表示中にツールバーの右端の「︙」をクリックして展開されるオプションから切り替え可能です。
    フルスクリーンモードにして左ペインを非表示にした場合