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

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

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

▼前回までの記事

ゆにメモ

【追記】WordPress 5がリリース！何が変わった？旧エディタを使い続ける方法は？

https://blog.universe-web.jp/538

こんばんは！最近なぜか腰の痛みが酷く、毎晩お灸をしたあとにサロンパスを貼って寝ている社員Aです👩私は20代前半なのですが、老後が心配でたまりません…！さて、本日はまもなくリリースされる「Wordpress5」の情報についてまとめていきたいと思います。※12/6リリース決定とのことで、詳細を追記しました。Wordpress5は2018年12月6日（木）リリース！WordPress 5.0のリリースは伸びに伸びて、開発サイクルページでは、12/6（木）にリリースされる旨が記載されています。 4年ぶりのメジャーアップデート Wordpress 5.0前回...

ゆにメモ

 

1 Pocket

WordPressのGutenberg（グーテンベルク）から旧エディターに戻す方法

https://blog.universe-web.jp/1925

こんにちは！社員Aです👩以前の記事でもうすぐWordPress 5.0がやってくるという記事を執筆しました。この中で、ブロック型エディタGutenberg（グーテンベルク）が標準搭載されるということを紹介しましたが、今回はそのGutenberg（グーテンベルク）を無効化し、旧エディターに戻す方法について書いていきたいと思います。 Gutenberg（グーテンベルク）を無効化したい理由メジャーアップデートにより、Wordpress5.0では、従来のビジュアルエディタからブロック型のエディタである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 というキーボードショートカットで表示することもできます)。

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

選択ショートカット

ブロックショートカット

テキスト整形

投稿の互換性について

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

高度にカスタマイズされたメタボックスについては継続して調査中で、単純に 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年まで続きます。

ゆにメモ

 

1 Pocket

WordPressのGutenberg（グーテンベルク）から旧エディターに戻す方法

https://blog.universe-web.jp/1925

こんにちは！社員Aです👩以前の記事でもうすぐWordPress 5.0がやってくるという記事を執筆しました。この中で、ブロック型エディタGutenberg（グーテンベルク）が標準搭載されるということを紹介しましたが、今回はそのGutenberg（グーテンベルク）を無効化し、旧エディターに戻す方法について書いていきたいと思います。 Gutenberg（グーテンベルク）を無効化したい理由メジャーアップデートにより、Wordpress5.0では、従来のビジュアルエディタからブロック型のエディタであるGutenberg（グーテンベルク）に変わります。...

▼前回までの記事

ゆにメモ

【追記】WordPress 5がリリース！何が変わった？旧エディタを使い続ける方法は？

https://blog.universe-web.jp/538

こんばんは！最近なぜか腰の痛みが酷く、毎晩お灸をしたあとにサロンパスを貼って寝ている社員Aです👩私は20代前半なのですが、老後が心配でたまりません…！さて、本日はまもなくリリースされる「Wordpress5」の情報についてまとめていきたいと思います。※12/6リリース決定とのことで、詳細を追記しました。Wordpress5は2018年12月6日（木）リリース！WordPress 5.0のリリースは伸びに伸びて、開発サイクルページでは、12/6（木）にリリースされる旨が記載されています。 4年ぶりのメジャーアップデート Wordpress 5.0前回...

ゆにメモ

 

1 Pocket

WordPressのGutenberg（グーテンベルク）から旧エディターに戻す方法

https://blog.universe-web.jp/1925

こんにちは！社員Aです👩以前の記事でもうすぐWordPress 5.0がやってくるという記事を執筆しました。この中で、ブロック型エディタGutenberg（グーテンベルク）が標準搭載されるということを紹介しましたが、今回はそのGutenberg（グーテンベルク）を無効化し、旧エディターに戻す方法について書いていきたいと思います。 Gutenberg（グーテンベルク）を無効化したい理由メジャーアップデートにより、Wordpress5.0では、従来のビジュアルエディタからブロック型のエディタであるGutenberg（グーテンベルク）に変わります。...