これを読めば分かる!WordPress5.0のGutenberg(グーテンベルク)のすべて

         

Wordpress

これを読めば分かる!WordPress5.0のGutenberg(グーテンベルク)のすべて

2018年12月11日 8:00 

これを読めば分かる!WordPress5.0のGutenberg(グーテンベルク)のすべて

おはようございます!社員Aです👩

先週リリースされたWordPress5.0について、今までにも2記事執筆していますが、今回の記事では新しいブロック型エディタである「Gutenberg(グーテンベルク)」について徹底解説していきたいと思います。

▼前回までの記事



ついにリリースされたWordPress5.0

12/6(木)にリリースされたWordPress5.0。4年ぶりのメジャーアップデートとのことで話題になっています。

前回Wordpress4.0がリリースされたのは、2014年の9月4日でした。

それからも4.x.xのアップデートを重ね、ついに今年の8月2日に4.9.8がリリースされました。

メジャーアップデートとなるのは、4年ぶりのこととなります。

 

ブロック型エディタGutenbergが標準搭載

 

メジャーアップデートにより、Wordpress5.0では、従来のビジュアルエディタからブロック型のエディタであるGutenberg(グーテンベルク)に変わりました。

“Gutenberg” とは、WordPress の新しいエディター体験を作り出すためのプロジェクト名です。このプロジェクトのゴールは、誰でもリッチな投稿のレイアウトができるような、ブログ投稿や固定ページ編集における新しい体験を作ることにあります。

 

Gutenbergの特徴

  1. 少ないプラグインでより多くを実現
  2. モダンで、マルチメディア重視のレイアウトを作成
  3. すべての画面サイズと端末で動作
  4. 実際のサイトと同様に表示されるエディター

 

Gutenbergの問題点とは?

一見便利で進化したように見えるエディタGutenbergですが、問題点があるとすれば、現在のビジュアルエディタでカスタマイズをしている方は、それらの互換性がなくなったり使用できなくなる可能性があります。

例えば、TinyMCE Advancedは標準エディタの機能を拡張できる有名なプラグインで、このブログでも使用していますが、それらが新エディタGutenbergにうまく互換していけるのか、その点が心配ですね。

また、今まで標準エディタで執筆したブログ記事がブロック型エディタであるGutenbergで見たときに崩れたりする可能性があるようです。

そのため、本番サイトなどをWordpress5にアップデートする前に、開発環境などでアップデートしたり、Gutenbergのプラグインをインストールしてみて、事前に確認をしていた方が良さそうです。

 

Gutenberg(グーテンベルク)を無効化したい理由

現時点で使うことのできるGutenbergをなぜ、旧エディターに戻したいユーザーが多いのか調べたところ、主に下記のような声が多かったです。

  • 初心者には使いやすいと書かれているが、現エディタに慣れているユーザーにしたら使いにくい
  • Gutenbergが他のプラグインの対応をしていない
  • エディター系プラグインがほとんど未対応
  • iPhoneアプリではGutenbergが使えない
  • 既存コンテンツに何らかの影響が発生する可能性が高いため、事前に検証が必要
  • Gutenbergで作成したページはHTMLのタグ構造が変わっている箇所がある

 



「ブロック」って何?

ブロックは、Webページのコンテンツを作成するためにまとめられた、コンテンツを整理して構成するための抽象的なユニットです。

今まで異なる方法でカバーされていた「ショートコード」「埋め込み」「ウィジェット」「投稿フォーマット」「カスタム投稿タイプ」「テーマオプション」「メタボックス」その他のフォーマット要素などを統一的に進化させたものです。 ユーザーは、WordPress でできる幅広い機能を、明快で一貫した方法で利用できます。

初めてサイトを構築中の方、ブログをリニューアルする方、仕事でコードを書いている方、すべてのユーザーにとってコンテンツの見え方がもっと柔軟になりました。

新しいブロックエディターでも訪問者に対する Web サイトの見え方は変わりません。あらゆる種類のメディアをすばやく挿入し、満足のゆくまで配置を変更できます。コンテンツの各パーツは、それぞれのブロックの中にあって他のブロックと分離され、簡単に移動することができます。また HTML や CSS のスキルがある人に対してもブロックエディターが邪魔することはありません。WordPress は作成物でなく、プロセスを簡素化しました。

たくさんのブロックがデフォルトで利用可能なほか、コミュニティによるブロックが日々追加されています。

 

 

Gutenbergの使い心地について

個別の文章 (パラグラフ) はそれぞれ「ブロック」になりますが、これらのブロックの作成や編集は現在の WordPress エディターの使い心地と同じか、それ以上にシンプルなものになるようデザインされています。

 

Gutenbergで使えるショートカット

Gutenbergは多くのショートカットを利用できます。

利用できるすべてのキーボードショートカットを表示するヘルプのモーダル画面も用意されています。

新エディターの右上にあるメニューに行って「キーボードショートカット」をクリックすれば、全一覧を見ることができます (または、Linux/Windows では Shift+Alt+H キー、macOS では ⌃⌥H というキーボードショートカットで表示することもできます)。

 

エディターショートカット

ショートカットの説明 Linux/Windows ショートカット macOS ショートカット
キーボードショートカットを表示する。 Shift+Alt+H ⌃⌥H
変更を保存する。 Ctrl+S ⌘S
最後の変更を取り消す。 Ctrl+Z ⌘Z
最後に取り消した変更を再実行する。 Ctrl+Shift+Z ⇧⌘Z
設定サイドバーを表示・非表示。 Ctrl+Shift+ ⇧⌘
ブロックナビゲーションメニューを開く。 Shift+Alt+O ⌃⌥O
エディターの次の部分に移動する。 Ctrl+` ⌃`
エディターの前の部分に移動する。 Ctrl+Shift+` ⌃⇧`
エディターの次の部分に移動する (代替版)。 Shift+Alt+N ⇧⌥N
エディターの前の部分に移動する (代替版)。 Shift+Alt+P ⇧⌥P
一番近いツールバーに移動する。 Alt+F10 ⌥F10
ビジュアルエディターとコードエディターを切り替える。 Ctrl+Shift+Alt+M ⇧⌥⌘M

 

選択ショートカット

ショートカットの説明 Linux/Windows ショートカット macOS ショートカット
入力中にすべてのテキストを選択する。もう一度押すと全ブロックを選択。 Ctrl+A ⌘A
選択部分をクリアする。 Esc Esc

 

ブロックショートカット

ショートカットの説明 Linux/Windows ショートカット macOS ショートカット
選択したブロックを複製する。 Ctrl+Shift+D ⇧⌘D
選択したブロックを削除する。 Shift+Alt+Z ⌃⌥Z
選択したブロックの前に新しいブロックを追加する。 Ctrl+Alt+T ⌥⌘T
選択したブロックの後に新しいブロックを追加する。 Ctrl+Alt+Y ⌥⌘Y
新しいパラグラフを追加した後にブロックタイプを変更する。 / /

 

テキスト整形

ショートカットの説明 Linux/Windows ショートカット macOS ショートカット
選択したテキストを太字にする。 Ctrl+B ⌘B
選択したテキストをイタリック体にする。 Ctrl+I ⌘I
選択したテキストに下線を付ける。 Ctrl+U ⌘U
選択したテキストをリンクに変換する。 Ctrl+K ⌘K
リンクを削除する。 Ctrl+Shift+K ⇧⌘K
選択したテキストに打ち消し線を追加する。 Shift+Alt+D ⌃⌥D
選択したテキストを等幅フォントで表示する。 Shift+Alt+X ⌃⌥X

 



投稿の互換性について

投稿には後方互換性があります。ショートコードもそのまま動きます。

高度にカスタマイズされたメタボックスについては継続して調査中で、単純に Gutenberg を無効化するプラグインから、Gutenberg のロードの可否を自動で検出するソリューションまで幅広く検討しているとのことです。

 

Gutenbergのブラウザ対応について

Gutenberg はモダンブラウザーおよび Internet Explorer 11 で動作します。

「モダンブラウザー」とは、ほとんどの場合、各メジャーなブラウザーの最新および過去2バージョンのことを意味しています。

 

TinyMCEとの連携について

TinyMCE は、ウェブ上でリッチテキストを有効化するための最適なツールのひとつです。

Gutenberg 内では、TinyMCE はまさにそれを行います。ほぼすべてのテキストフィールドは、TinyMCE によってリッチテキストを使えるように拡張されています。

テキスト、リスト、または単に1個の画像キャプションであっても、テキストをリッチに拡張するためにブロック内で TinyMCE を呼び出せます。

 

フロントエンドからの投稿・ページ編集について

Gutenbergは主に編集画面での投稿・ページ編集の置き換えとして設計されています。

とは言うものの、フロントエンド編集は、フロントエンドとまったく同じに見えるエディターとよく混同されます。

これは、テーマが各ブロックをカスタマイズしてフロントエンドと同じスタイルを提供することによって Gutenberg が可能にすることでもあります。

 

カスタム投稿タイプへの対応について

カスタム投稿タイプが Gutenberg を活用できる方法はいくつもあります。

計画としては、カスタム投稿タイプがどのブロックをサポートするかを指定できるようにし、投稿タイプごとにデフォルトブロックを定義できるようにするということを考えているようです。

現在はこのようにはなっていませんが、投稿タイプがコンテンツフィールドを無効にすれば、下部の「上級者向け」セクションがページを埋めるようになります。

 

入れ子ブロックの導入について

現在、入れ子ブロックサポートに向けたインフラを実装中とのことです。これにより、さらにカスタマイズの機会が開かれることを期待しています。

ブロック作成者はさらに、構築の際にコンポーネンツと HTML を別のブロックの中に入れ子にすることができるようになります。

入れ子ブロックを操作する UI はまだ改善を重ねているところで、タイミングによっては最初のバージョンの Gutenberg には含まれません。

 

ブロックへのスタイルの追加について

ブロックは独自のスタイルを提供でき、テーマはそれに追加したり、それを上書きしたりできます。

またはブロック自体はスタイルをまったく提供せず、テーマが用意したものに完全に依存することもできます。

 

ブロックスタイルはフロントエンドとバックエンドでどう動作するのか

ブロックはベースの構造的 CSS スタイルを提供することができ、テーマはそれにスタイルを追加できます。

例えば区切り線 (<hr/>) のような一部のブロックにはフロントエンドスタイルが必要ないかもしれませんが、ギャラリーのようなその他のブロックには必要になるでしょう。

その他の機能、例えば新しい「幅広」と「全幅」配置オプションは、単にブロックに適用され、この配置を提供する CSS クラスです。

 

エディタースタイルの動作について

通常のエディタースタイルはオプトイン方式であり、ほとんどのケースで動くとのことです。

以下のフックを使い、テーマが追加スタイルシートを読み込むこともできます。

function gutenbergtheme_editor_styles() {
    wp_enqueue_style( 'gutenbergtheme-blocks-style', get_template_directory_uri() . '/blocks.css');
}
add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' );

 

ショートコードの動作について

ショートコードはこれまでと同じように動作します。

コードをタイピングする代わりに、共通の挿入ツールのトレーを使ってブロックを選び、設定やプレビューのためのリッチな UI を手に入れられます。

公式では、「ショートコードをブロックにアップグレードすることをおすすめします」と書かれていました。

 

投稿コンテンツを PHP または JS でパースして返す方法

JS の場合
var blocks = wp.blocks.parse( postContent );
PHP の場合
$blocks = gutenberg_parse_blocks( $post_content );

 

Gutenberg(グーテンベルク)を無効化する方法

下記の記事でGutenberg(グーテンベルク)を無効化する方法について記述しています。

プラグインもしくはコードの追加で無効化できます。

WordPress による Classic Editor プラグインのサポートは、2021年まで続きます。

 

 

▼前回までの記事

 

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺