WordPress:Gutenbergのブロック

WordPressの新しいエディタ「Gutenberg」 では投稿や固定ページを作るのにブロック(Block)という単位が導入されています。ブロックは、見出し、段落や画像を単位とする概念で、WordPressには標準でもイロイロなブロックが存在しています。ま、あまり使わないだろう——個人的にはいらない——ブロックもあるのですが、とにかく使ってみました。

ブロックを呼び出す

投稿や固定ページにブロックを挿入/追加するには、作成画面に表示されるブロックの追加アイコン(丸にプラスマーク)をクリックします。

ブロックの追加アイコン(丸にプラスマーク)をクリックしてブロックを追加する
ブロックの追加アイコンをクリックしてブロックを追加する

ブロックの追加アイコンは作成画面のあちこちで登場しますが、どれも同じようにブロックを呼び出します。

標準ブロックの種類

呼び出すことのできるブロックは今のところ( バージョン 5.0.3 )標準でこれだけあります。ブロックの性質によってカテゴリーに分けられています。

  • インライン要素
    1. インライン画像
  • 一般ブロック
    1. 段落
    2. 見出し
    3. リスト
    4. 画像
    5. ギャラリー
    6. 引用
    7. 音声
    8. カバー
    9. ファイル
    10. 動画
  • フォーマット
    1. カスタムHTML
    2. ソースコード
    3. クラシック
    4. 整形済み
    5. プルクオート
    6. テーブル
  • レイアウト要素
    1. ボタン
    2. カラム
    3. メディアと文章
    4. 続きを読む
    5. 改ページ
    6. 区切り
    7. スペーサー
  • ウィジェット
    1. ショートコード
    2. アーカイブ
    3. カテゴリー
    4. 最新のコメント
    5. 最新の記事
  • 埋め込み
    1. 埋め込み
    2. Twitter
    3. YouTube
    4. Facebook
    5. Instagram
    6. WordPress
    7. SoundCloud
    8. Spotify
    9. Flickr
    10. Vimeo
    11. Animoto
    12. Cloudup
    13. CollegeHumor
    14. Dailymotion
    15. Funny or Die
    16. Hulu
    17. Imgur
    18. Issuu
    19. Kickstarter
    20. Meetup.com
    21. Mixcloud
    22. Photobucket
    23. Polldaddy
    24. Reddit
    25. ReverbNation
    26. Screencast
    27. Scribd
    28. SlideShare
    29. SmugMug
    30. Speaker Deck
    31. TED
    32. Tumblr
    33. VideoPress
    34. WordPress.tv
  • 再利用可能
    1. ユーザーが保存したブロック

よく使うものカテゴリー

数が多いので毎回リストから選択して呼び出すのが大変ですが、たびたび使うブロックは「よく使うもの」カテゴリーに配置されてリストの先頭に表示されるようになっています。

使う頻度の高いブロックはよく使うブロックとしてリストの先頭に配置される
よく使うものとしてリストの先頭に配置された使用頻度の高いブロック

特別な再利用可能カテゴリー

再利用可能カテゴリーはGutenbergを使い始めたときには表示されていないはずです。ユーザーが一度作成したオリジナルのブロックを再利用ブロックとして追加すると、追加したブロックが表示されるようになります。

作成したブロックの詳細設定から再利用ブロックに追加を行うと再利用可能ブロックとして保存される
ユーザーのブロックを再利用可能ブロックに追加して保存する

再利用ブロックに追加するオリジナルのブロックに名前を付けて保存します。

ユーザーが作成したブロックに名前を付けて保存すると再利用可能ブロックになる
ユーザーが作成したブロックに名前を付けて再利用可能ブロックとして保存する

呼び出すには他のブロックと同じように、ブロックの追加アイコンをクリックしてリストから選びます。

再利用可能カテゴリーから保存したオリジナルのブロックを呼び出す
再利用可能カテゴリーから保存したオリジナルのブロックを呼び出す

ユーザーからはあまりいい評判を聞かないWordPressの新しいエディタGutenberg、私自身も批判的なところが多いのですが、再利用可能ブロックは便利じゃないかと思いました。

WordPress:IE11だとGutenbergの再利用ブロックが使えない

WordPressの新しいエディタ「Gutenberg」の再利用ブロック――一度作成したカスタムHTMLなどのブロックを保存しておいて別の投稿に挿入できる――が、InternetExplorer 11だとうまく機能しません。
WordPressのバージョン 5.0.3でプラグインをすべて無効にし、一切カスタマイズしていない素の状態でもダメでした。

ブロックは削除されたか、利用できません。

「ブロックは削除されたか、利用できません。」と表示されてしまう
別のブラウザで保存していた「再利用ブロック(Reusable block)」がIE11では表示されません

あらかじめ作成していた投稿を、InternetExplorer 11を使って編集しようとしたら再利用ブロックが表示されませんでした。
他のブロックを編集して更新して投稿を表示すると、編集画面では表示されなかった再利用ブロックの部分も問題なく表示されました。どうやら、再利用ブロックが削除されたわけではなく編集できない状態になっているようです。

確認してみましたが、 InternetExplorer 11自体はWordPressのGutenbergに対応しているようです。


Gutenberg はどのブラウザーに対応しますか ?
Gutenberg はモダンブラウザーおよび Internet Explorer 11 で動作するようになります。
Make WordPress handbook に対応ブラウザーの一覧があります。私たちの言う「モダンブラウザー」とは、ほとんどの場合、各メジャーなブラウザーの最新および過去2バージョンのことを意味しています。

Gutenberg についてのよくある質問

Edgeなどのモダンブラウザは問題がない

Microsoft Edgeでは再利用ブロックがちゃんと表示される
Microsoft Edgeや他のモダンブラウザだと問題なく再利用ブロックが表示されます

念のためInternetExplorer 11 以外のブラウザ、Microsoft Edge、Mozilla Firefox やGoogle Chromeなどのモダンブラウザでも確認しましたが、編集画面で再利用ブロックが表示されない問題はありませんでした。

表示だけでなく再利用できない

InternetExplorer 11 ではブロックの追加リストに再利用ブロックが出てこない
InternetExplorer 11 ではブロックの追加リストに再利用ブロックが出てこない

再利用ブロックは表示されないだけでなく、ブロックの追加のリストに表示される一覧にも出てきません。
この現象も InternetExplorer 11だけで、ほかのモダンブラウザでは認められませんでした。

使うべきじゃない InternetExplorer 11

この再利用ブロックの問題はおそらくGutenbergのバグだと思われますが、バグが修正されるのを待つよりは「 InternetExplorer 11 は使わない」というのが結論です。

モダンブラウザでは追加リストにちゃんと表示されている再利用ブロック
モダンブラウザでは追加リストにちゃんと表示されている再利用ブロック

あまりいい評判を聞かないWordPressのGutenbergですが、今後のことを考えたら慣れていかないといけません。できるだけ使い込んでみます。

WordPress:Gutenbergの編集画面が日本語化されない不具合修正

WordPressの新しいエディタ「Gutenberg」 で、編集画面の日本語翻訳が一部だけになるという不具合がバージョン 5.0.1の時点では存在しましたが、 バージョン 5.0.2で修正されたようです。

特定の条件下での不具合

不具合が生じたのは、 WordPressをサブディレクトリにインストールし、ルートドメインからは
https://mediadesign.jp/sub-dir/
のような状態でWordPressのトップページが表示される場合でした。

日本語訳が不完全な編集画面

バージョン 5.0.2へアップデート

WordPress のシステムをバージョン 5.0.2へアップデートしたところ、サブディレクトリにインストールした場合でもちゃんと日本語に翻訳されるようになりました。

バージョン5.0.2では日本語訳されている

それでもまだ新しいエディタに馴染めません・・・・・

WordPress:Gutenbergの編集画面が日本語化されない

WordPress5シリーズのリリースに伴って追加された新しいエディタ「Gutenberg」は、投稿内容をブロック単位で管理するようになっていて、「見出しブロック」「段落ブロック」「ソースコードブロック」「カスタムHTMLブロック」「ショートコードブロック」「最新の記事ブロック」等々を単位として投稿に追加・編集するようになりました。
使い慣れるまでにちょっと時間がかかりそうですが、少しずつ慣れるしかありませんね。でも不具合がちょっと・・・・

翻訳が不完全

WordPressのバージョン 5.0.0にアップデートした時点で、編集画面の日本語翻訳が一部だけだったので、今後のアップデートで修正されるのかと思っていたら、バージョン 5.0.1になっても不完全なままです。

日本語訳が不完全な編集画面

ただでさえ大きく変わったGutenbergエディタですから、こういった不具合があるとちょっとこれは使いにくいな、使うのやめようか、と思わざるをえません。

ちゃんと翻訳されてるサイトもある

ところが、別のWordPressサイトで投稿の新規追加を行うと、編集画面はちゃんと日本語訳されています。

日本語訳されている編集画面

違いは何だろう?

どちらのサイトもWordPressのバージョンは同じ 5.0.1です。
もちろん使っているテーマやプラグインは違っていますが、翻訳が一部だけのサイトの方がカスタマイズされていないWordPressなので、翻訳が不完全になる原因はテーマファイルやプラグインの不具合によるものではなさそうです。

原因は?

翻訳されているサイトと、されないサイトを比較してみると次のようなことがわかりました。

日本語訳が不完全なサイトはWordPressをサブディレクトリにインストールしていました。インストールしたディレクトリがサブディレクトリで、ルートドメインからは
https://mediadesign.jp/sub-dir/
のような状態でWordPressのトップページが表示されるようになっているとダメなようです。

一方で、日本語訳が表示されるのはルートドメインあるいはサブドメインのトップでトップページが表示されているサイトでした。
https://mediadesign.jp/ ルートドメインのトップ(日本語訳OK)
https://sub-dom.mediadesign.jp/ サブドメインのトップ(日本語訳OK)

また、サブディレクトリにインストールしている場合でも、プラグインの「
Gutenberg」を有効にしていると日本語訳が表示されるようになりました。どうも翻訳ファイルの読み込みがうまくできていないのが原因のようです。