早くも第3回目のGutenberg Training。
今回はCSSで装飾する方法を学んでいきます。
Training 3
Editor / ViewのCSSをカスタムする
About
Training 2でカスタムブロックをビルドし、プラグインとして導入する方法を学びました。
今回はエディタとサイトでの表示をCSSで表示する方法を習得します。
Goal
- GutenbergでのCSSファイルの読み込ませ方を学ぶ
- エディタ側でカスタムブロックに独自のCSSを適用する方法を学ぶ
- サイト表示側でカスタムブロックに独自のCSSを適用する方法を学ぶ
Tasks
Training 2で作成したカスタムブロックプラグインに、CSSを２ファイル読み込ませてください。
エディタ側とサイト表示側でそれぞれ異なるスタイルを適用する方法・全く同じスタイルを適用する方法をそれぞれブログにまとめましょう。
Hint
Examplesの02がCSSを設定するサンプルコードです。参考にしましょう。
CSSを読み込ませる
WordPressのエディター画面のCSSを変えるときは、スタイルシートを読み込ませていました。
<?php add_editor_style( $stylesheet ); ?>
Gutenbergでは、wp_register_style でファイルを指定して、register_block_type で editor_style を指定します。
https://github.com/WordPress/gutenberg-examples/blob/master/02-stylesheets/index.php
こちらのコードを参考にしながら、前回作ったindex.phpを書き換えていきます。
wp_register_style(
'gutenberg-examples-01-editor',
plugins_url( 'editor.css', __FILE__ ),
array( 'wp-edit-blocks' ),
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
);
wp_register_style(
'gutenberg-examples-01',
plugins_url( 'style.css', __FILE__ ),
array( ),
filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
);
このふたつの関数を追加して、
register_block_type( 'gutenberg-examples/example-01-basic-esnext', array(
'script' => 'gutenberg-examples-01-esnext',
'editor_style' => 'gutenberg-examples-01-editor',
'editor_script' => 'gutenberg-examples-01',
) );
register_block_typeに追記しました。
忘れずにeditor.cssとstyle.cssのファイルを追加してnpm run buildしてみます。
前回のstyleが邪魔をする
前回block.jsでスタイルを直指定したので、流用している今回のファイルにも当然残っています。これを消し去り指定したクラスを適用させるために、block.jsから以下の記述を削除します。
const blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
blockStyleを使っているのは、edit() と save() の中のdivです。ここも
style={ blockStyle }
だけ削除してしまいましょう。
さて、これでどうなるでしょうか・・・
無事CSSがあたりました！では、エディター画面は・・・？
本来であればプレビュー画面と同じCSSが当たるはずなのに、なんのCSSもあたっていません・・・。なぜ！！？！？
ということで、トレーニングの元のblock.jsを確認してみました。
https://github.com/WordPress/gutenberg-examples/blob/master/02-stylesheets/block.js#L21
ハイライトをつけた行に注目です。props.className・・・きっとこれがエディター画面に必要な記述ですね。
今回チェックしているblock.jsはどうやらコンパイル後のファイルのよう。というわけで、このように書いてみました。
registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
title: __( 'Example: Basic (esnext)', 'gutenberg-examples' ),
icon: 'universal-access-alt',
category: 'layout',
edit( props ) {
return <div class={ props.className }>Basic example with JSX! (editor)</div>;
},
save() {
return <div>Basic example with JSX! (front)</div>;
},
} );
editに pros の引数を追加して、returnでclassNameを返す！
さて、これでどうだ・・・・？
読みは大当たり！無事にエディター画面にもCSSが追加されました。
saveの方には追加は必要なさそう（勝手に追加されてる）ですが、editには明示しないとだめなようですね。
忘れるポイントな気がするのでここで試せてよかった・・・！
今回から変わったところ
これやってるときにToro_Unitさんに gutenberg_get_jed_locale_data などのgutenberg_がついた関数がwp_に置き変わったりしてるみたいなことを聞きました。
私がやってるレベルだとそんな影響ないかなーと思ってましたが、がっつりindex.phpに記述が！
https://github.com/WordPress/gutenberg-examples/blob/master/01-basic-esnext/index.php#L47
前回は function_exists はなかったですが、今回から導入されています。
wp_get_jed_locale_data が実装されているGutenbergのバージョンだと、前回のままの gutenberg_add_inline_script では動かないので書き換えが必要になりますね！
ちなみに書き換えられたのはこんな感じ・・・
もしGutenbergをアップデートしてカスタムブロック動かないぞ！って人はこの辺をチェックしてみるとよさそうですね。
次回はいよいよテキストの入力する方法です。
こうやってスモールに勉強していくとよくわかる気がしますね！
これからも細々とお勉強がんばります。