WordPress 5.0 から投稿エディタがGutenbergというものに変わるらしい

158 view

今までWordPressの投稿エディタといえばTinyMCEでしたが、

TinyMCEエディタ

WordPressバージョン5.0からはデフォルトのエディタが「Gutenberg」というものに変わるようです。
(この記事の時点でのWordPressバージョンは4.9.8)

事前にインストールして試すことができるという事でしたので、少し触ってみました。

実際の表示

今回使用しているGutenbergのバージョンは3.6.2になります。バージョンによって機能等が変わっている場合があるので注意してください。

Gutenbergでの投稿画面

投稿画面を表示してみると、一見すると大きく変わっているように見えます。

しかし、実際に触ってみるとそこまでの違いは無いように私は感じました。

文章入力欄にカーソルを合わせれば文字装飾用ボタンも表示されますし、改行すれば次の段落になるようになっています。

右メニューも従来の項目と同じような構成になっていて、以前のエディタを使っていた人なら違和感なく使用できるかと思います。

どこが違うのか

おそらく一番大きな変更は、「ブロック」という区分けの仕方と、それによって設定できる項目が大幅に増えた点です。

ブロックとは

Gutenbergでは「ブロック」という設定が追加されています。

と言ってもそれほど難しい事ではなく、投稿コンテンツを段落や画像といった項目ごとに分けて考えるというだけです。

具体的な例としては、以下の画像になります。

この画像では単純に、ブロックを3つ配置し、段落ブロック、画像ブロック、リストブロックとそれぞれ設定しているだけです。

このようにブロックで区別することで、ブロックごとに装飾、並び替えといった事が簡単に可能になります。

ブロックの種類

特筆すべき点として、ブロックで設定できる項目の種類がとても多いという点があります。

  • 画像を並べて表示できる「ギャラリー」
  • 背景画像を置いてその上に文字をおける「カバー画像」
  • 2列以上に表示できる「カラム」
  • SNS埋め込み
  • アーカイブ・カテゴリー・最新の記事へのリンクリスト

他にも様々な項目がブロックの選択肢として実装されています。

今まではプラグインを使ったり、テンプレートにコードを直接書いたりという必要がありましたが、Gutenbergを使用する事でこれからは誰でも手早く機能的な部分が実現できます。

コードエディタについて

ビジュアルエディタは上記のように今までの感覚+追加機能といった形で使用できますが、コードエディタでは大きな変更があります。

見ていただくとわかるように、たくさんのコメントアウトが追加されています。

このコメントアウトの囲い1つずつがそれぞれブロックとなるので、コードエディタのみで構築する場合はこのコメントアウト用の記法を理解している必要があります。

Gutenbergへの移行時の注意点

表示崩れについて

前段でコードエディタでの記法について示しましたが、旧エディタで書かれた記事には当然このような記法は使われていません。

旧エディタで書かれた記事をGutenbergで開くと、Gutenbergに対応するように変換が可能ですが、記事の書き方は多岐にわたっているので、必ず完璧に変換が行われるとは限りません。むしろ、どこか崩れるものだと思っていた方がよいでしょう。

その為、移行を行う場合は必ずその前にテスト・確認を行いましょう。

editor-styleの適用について

今まで投稿画面でのCSS適用は、functions.phpに

add_editor_style();

の記述を書いていましたが、Gutenbergではこれが効かなくなっているようです。

Gutenbergでは、

add_action( 'enqueue_block_editor_assets', 'my_editor_style_setup' );

とフックをかけ、この関数内で

wp_enqueue_style();

を使用する事で、投稿画面へのCSSを適用できます。

しかし、既存のWPサイトで全てこの変更を行うというのはあまり現実的ではないように感じます。

正式に実装された際にはadd_editor_styleも有効になっていたらありがたいですね。

\ SNSでシェア /

WRITER

nakaya

制作部 nakaya

1990年生まれ。新潟出身。
16年8月入社。
趣味:スキー、卓球、バドミントン
犬が好き。

TAGS