Gutenberg と WordPress 5.0 のブロックエディターで違っていたところ

WordPress 5.0 がでましたね！僕はさっさとアプデートしてしまいましたが、巷ではまだ迷われている方が多いようですね（有料テーマ開発者界隈では僕が1日目の記事で予想していた流れが見え始めているようですがどうでしょう？）。

さて、Snow Monkey は WordPress 5.0 リリース以前から Gutenberg プラグインをインストールしてブロックエディター対応を進めていました。が、WordPress 5.0 のベータ版/RC 版では動作確認していなかったので、先日 RC 版を試してみたら、あれ？というところがいくつかあったのでそれを書いてみたいと思います。

ブロックエディター上でデフォルトのスタイルを外すための処理の違い

gutenberg_override_style() が無くなっていたので、その中身の処理に書き換えました。

Gutenberg プラグイン

gutenberg_override_style( 'wp-block-library-theme', null );

WordPress 5.0

wp_deregister_style( 'wp-block-library-theme' );
wp_register_style( 'wp-block-library-theme', null, [], 1 );

JavaScript 部分の翻訳方法の違い

gutenberg_get_jed_locale_data() が無くなって wp_set_script_translations() という関数が追加されています。

また、gutenberg_get_jed_locale_data() が mo ファイルを直接読めたのですが wp_set_script_translations() は mo ファイルじゃなくて json ファイルを読むようになっているので、json ファイルを生成する必要があります。

Gutenberg

$locale  = gutenberg_get_jed_locale_data( 'テキストドメイン' );
$content = 'wp.i18n.setLocaleData( ' . json_encode( $locale ) . ', "テキストドメイン" );';
wp_add_inline_script(
	'紐付ける JavaScript のハンドル名',
	$content,
	'before'
);

WordPress 5.0

wp_set_script_translations(
	'紐付ける JavaScript のハンドル名',
	'テキストドメイン',
	'翻訳ファイルの格納場所 /languages'
);

json 形式の翻訳ファイルは po2json という npm で配布されているライブラリを使えば簡単に生成できます。

$ npm install --save-dev po2json

でインストールして、

{
  ... 省略 ...
  "scripts": {
    "po2json": "po2json languages/snow-monkey-blocks-ja.po languages/snow-monkey-blocks-ja-snow-monkey-blocks-editor.json -f jed"
  }
}

のような感じで package.json に記述して、

$ npm run po2json

で生成できます。最初の引数が po の位置、2番目の引数が json を書き出す位置で、json のファイル名は <ドメイン名>-<ロケール>-<紐付ける JavaScript ファイルのハンドル名>.json とします。

エディターがブロックエディターかクラシックエディターかの判定方法の違い

Gutenberg

is_gutenberg_page()

WordPress 5.0

use_block_editor_for_post( $post )

ブロックエディター用 CSS 読み込みタイミングの違い

ちょっとこれはちゃんと検証したわけではないので勘違いかもしれないのですが、一応書いておきます。

「Snow Monkey でこれまでにおこなった Gutenberg 対応についてまとめてみた」で書いたように

add_action(
	'admin_enqueue_scripts',
	function() {
		if ( function_exists( 'is_gutenberg_page' ) && is_gutenberg_page() ) {
			$stylesheet = [ 'assets/css/gutenberg.min.css' ];
		} else {
			$stylesheet = [ 'assets/css/editor-style.min.css' ];
		}

		add_editor_style( $stylesheet );
	}
);

というようなコードで、そのエディターが Gutenberg の場合は gutenberg.min.css を、Gutenberg じゃない場合は editor-style.min.css を読み込むというような処理を書いていました。

んで、なんやかんやあって最終的に下記のようなコードになりました。

add_action(
	'after_setup_theme',
	function() {
		add_theme_support( 'editor-styles' );
		$stylesheet = [ 'assets/css/editor-style.min.css' ];
		add_editor_style( $stylesheet );
	}
);

admin_enqueue_scripts の段階で add_editor_style() してももう手遅れで、読み込まれなくなっちゃったんですよね。だからもっと早い段階でフックさせてみたら、その段階では投稿データが取れないので use_block_editor_for_post() によるエディタ判定がおこなえません…。

そういうことで、ブロックエディター用/クラシックエディター用と CSS を分けていたのを、同じファイルにまとめてしまって、上記の形に落ち着きました。

Snow Monkey アドベントカレンダーにご参加ください！

参加しても良いよーという方がいましたらぜひご参加くださいませ。ユーザーさんの声や、他業者さんからみた Snow Monkey などめっちゃ聞きたいので、よろしければぜひ！

Snow Monkey Advent Calendar 2018 – Adventar

有料 WordPress テーマ Snow Monkey のアドベントカレンダーです！Web サイト：https://snow-monkey.2inc.org昨年：https://adventar.org/calendars/2483

adventar.org