#13 WP ZoomUP 「WordPressの新エディターGutenbergをもっと知ろう」 - connpass　にてお話したスライドです。

1. Gutenberg Handbook
をみんなで読んでみよう
presented by mimi
2019-03-26

2. About me
mimi
@miminari
web好きなしゅふです。
WordPress歴は10年余。
イラスト描いたりもします。

3. Gutenberg Handbook とは
公式が書いているGutenbergの教科書
https://wordpress.org/gutenberg/
handbook/
これをGoogle翻訳に突っ込んで読めば
大体わかります。
以上

4. Gutenberg Handbook とは
…なのですが、
かなりボリュームがあって
私もほとんど読めてません。
折角なので今日はちょっとだけ
一緒に読んでみたいと思います。

5. Theming for Gutenberg
一番取っ掛かりやすそうな
Gutenbergのためのテーマ作り
というセクションを読んでみたい
と思います。
ハンドブックが開ける方は
https://wordpress.org/gutenberg/handbook/
designers-developers/developers/themes/
を一緒に御覧くださいね。
既読・ガチ勢はフォローお願いします。

6. Theming for Gutenberg
ココのセクションは
“Theme Support” の1ページだけ！
この1ページを読めば、
今使ってるテーマをどうやって
Gutenberg対応したら良いか
が丸わかりです！

7. Theme Support の５つのコンセプト
1. エディタのカラーパレット
2. エディタのテキストサイズパレット
3. フロントエンドとエディタのスタイル
4. 埋め込み要素のレスポンシブ化
5. ダークモード
TT
対応するべき
やったほうがいい
ケースバイケース
mimiのオススメ度別

8. Editor Color Palette
Gutenbergではデフォルトの色の
セット（カラーパレット）が提供
されています。
テーマ毎に、
このカラーパレットへ
独自の色を登録できます。

9. Editor Color Palette
公式テーマは対応済みです。
例えば最新のTwenty Nineteen
ではテーマに合わせた右のような
5色が出るようになっています。
色数は好きな数に設定できます。
たぶん、カバー画像のフィルター
色とかボタンの色とかでの使用頻
度高い気がします。

10. カラーパレットの設定方法
add_theme_support
の ’editor-color-palette’
を使います。
functions.php に右のソースを参考
に書き足（コピぺ）して、指定したい
色のname, slug, colorを設定して
いけば OK!
function mytheme_setup_theme_supported_features() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'strong magenta', 'themeLangDomain' ),
'slug' => 'strong-magenta',
'color' => '#a156b4',
),
array(
'name' => __( 'light grayish magenta', 'themeLangDomain' ),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',
),
array(
'name' => __( 'very light gray', 'themeLangDomain' ),
'slug' => 'very-light-gray',
'color' => '#eee',
),
array(
'name' => __( 'very dark gray', 'themeLangDomain' ),
'slug' => 'very-dark-gray',
'color' => '#444',
),
) );
}
add_action( 'after_setup_theme',
'mytheme_setup_theme_supported_features' );
Handbookのソースのそのままです。
一色分
ちょっとだけPHP

11. カラーパレットの設定方法（実例）
試しに Twenty Nineteen
の子テーマを作って、
色を上書きしてみましょう。
3つの色を設定してみました。
function setup_color_pallette_for_19child() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => 'メインカラー',
'slug' => 'primary',
'color' => '#CE2121',
),
array(
'name' => 'サブカラー',
'slug' => 'secondary',
'color' => '#988768',
),
array(
'name' => '背景用',
'slug' => 'background',
'color' => '#000',
)
) );
}
add_action( 'after_setup_theme', 'setup_color_pallette_for_19child' ,11);
priorityを11にするのが唯一の肝。

12. カラーパレットの設定方法（実例）
こんな感じに好きな色に変更
できます！かんたん！

13. 公開ページ側の設定を忘れずに
ただし、
別途CSSの設定をしないと、
公開したページには
色が反映されません
のでご注意を！
/*
.has-(設定したスラッグ名)-colorと
.has-(設定したスラッグ名)-background-color
の色を設定する必要があります。
*/
.entry .entry-content .has-primary-background-color {
background-color: #CE2121;
}
.entry .entry-content .has-primary-color {
color: #CE2121;
}

14. 公開ページ側の設定を忘れずに
style.cssに追記することで
公開ページのスタイルにも
反映されます。

15. Editor Text Size Palette
Gutenbergではテキストサイズもいくつ
か選択できるようになっています。
これもテーマごとに
変更できます。
TT

16. テキストサイズパレットの設定方法
add_theme_support
の ’editor-font-sizes’
を使います。
functions.php に右のソースを参考
に書き足（コピぺ）して、指定したい
色のname, size, slugを設定してい
けば OK!
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'Small', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'Normal', 'themeLangDomain' ),
'size' => 16,
'slug' => 'normal'
),
array(
'name' => __( 'Large', 'themeLangDomain' ),
'size' => 36,
'slug' => 'large'
),
array(
'name' => __( 'Huge', 'themeLangDomain' ),
'size' => 50,
'slug' => 'huge'
)
) );
TT

17. 実例で見てみよう
文字のサイズだけでなく
表示名も数も変更できます。
TT

18. テキストサイズもstyle.cssの設定が必要です
style.cssの設定をしないと、
公開したページには
フォントサイズが反映されません
のでご注意を！
/*
.has-(設定したスラッグ名)-font-size
のサイズを設定する必要があります。
*/
.entry .entry-content .has-large-font-size {
font-size: 36px;
}
TT

19. テキストサイズの数値指定をオフにする
テキストサイズの数値指定も
オフにできます。
add_theme_support( 'disable-custom-font-sizes' );
TT

20. Frontend & Editor Styles
エディター側のスタイルを
フロント側（公開されたページ側）に
合わせることが出来ます。
ほぼプレビュー状態で編集できるのは
使い勝手が良くなるのでなるべく対応
したほうが良いです。
まずは実際にCSSを書かなくても良い
ので設定だけでもやっておくのをオス
スメします。

21. エディタースタイルの設定方法
テーマに合わせた
エディタースタイルを設定するには
同様に、functions.phpに
add_theme_support。
そして、add_editor_styleで
CSSファイルを指定すればエディター
画面に読み込まれます。
// Add support for editor styles.
add_theme_support( 'editor-styles' );
// Enqueue editor styles.
add_editor_style( 'style-editor.css' );

22. 実例で見てみよう
フロント側と書体や文字サイズを
合わせてみました。

23. That’s all for today!
残りの２つについては
自分で読み解いてみてください！
今回の適当サンプルソースは
Twenty Nineteenの子テーマの形で
GitHubにアップしていますので
良かったらご参照ください。
https://github.com/miminari/19childja