Gutenberg 以降のテーマ作成に向けて、今学ぶべきこと

Slide for my presentation at WordCamp Osaka 2019, held on 6-7 December, 2019.
WordCamp Osaka 2019 (2019年12月6-7日) 登壇スライド。

https://2019.osaka.wordcamp.org/session/things-to-be-learn-for-theme-developers/

----

## 概要

HTMLのマークアップとCSSと多少の JavaScript。そこに WordPress をきっかけとして PHP のスキルを少し足して、「テーマ制作」を主戦場にされている方も多いはず。しかし、ここ1〜2年で Gulp やSassを使ったモダン Web デザインワークフローはもちろんのこと、ブロックエディターの実装で JavaScript や React も学ばなければいけない… 動きも速く、ついていけない…

何を学んでいけばよいのか、どうスキルアップしていけば良いのか、私自身が最近学びもがいていることを共有したいと思います

---

## 追記分

登壇中に口頭で述べて「後でスライドに追加しておきます」としておいた箇所を追記してあります。スライドの左上に「加筆しました」のラベルがあり、ページは：
70、72-74、80-81
です。

---

## スライド内のリンク

p11
https://www.php.net/releases/index.php

p17
https://github.com/justintadlock/mythic/blob/master/app/functions-setup.php

p25
https://philipwalton.com/articles/css-architecture/
https://uxmilk.jp/43386

p34
https://twitter.com/s56bouya/status/1202240830007676929

p80
https://developer.wordpress.org/block-editor/tutorials/block-tutorial/
https://github.com/WordPress/gutenberg

p81
https://speakerdeck.com/torounit/get-started-customize-for-block-editor

https://www.meetup.com/ja-JP/Kansai-WordPress-Meetup/events/266066277/
https://twitter.com/hashtag/WPmeetupOsaka

p 84
https://kunoichiwp.com/
https://tarosky.co.jp/
https://profiles.wordpress.org/toru/

https://torumiki.com
https://twitter.com/waviaei

Transcript

2. Gutenberg 以降のテーマ作成にむけて、 今学ぶべきこと WordCamp Osaka 2019 December 7, 2019 三⽊徹 (Toru Miki) waviaei toru
3. WordPress は14年くらい WordPress コア / 翻訳 等への貢献 WordCamp 実⾏委員⻑ / スタッフ / ボランティア 英語で Meetup アップやったり、本を書いたりも してました 三⽊ 徹 Toru Miki Web Developer
4. HTML/CSS をメインとした、マークアップのスキルからスタート。
 WordPress 等をきっかけに PHP や周辺のウェブ技術のスキルアップ。
 今に⾄る… 2019年 6⽉〜 2011年 2005年 ウェブを独学で学び始める。 Webmaster — インハウスで運⽤から開発まで。 Web Developer — 主に受託。開発のみ。 そういう⽅、いませんか？
5. 今⽇は どのような話をするのか？
6. PHP 7.x + Composer + クラス ＆ モダンJS + ReactJS
7. ところが… 今後の Gutenberg の進化も⾒据え、 「良いテーマ」作成を⽬指すのであれば それだけだとキツいかも と、思った
8. Gutenberg は次のフェーズに ⼊っている。 今のうちに「学び、実践しておい たほうが良さそう」な事、 考え直しました。
9. ※注記： これをやっとけば「Gutenberg 対応テーマが明⽇から 作れる！」というノウハウ集や、コードのティップス 的な話ではありません。 完璧にできますよ！とまだ⾔えないけれど、共有・実 践していくことでお互いのスキルをレベルアップしま せんか？皆で⽇本のテーマのレベル底上げをやりませ んか？という思いを踏まえての話です。
10. 学ぶべきこと その1 PHP
11. 2011年7⽉
 WordPress 3.2
 PHP 5.2.4 が必須に 2019年4⽉
 WordPress 5.2
 PHP 5.6.20 が必須に、
 7.3 が推奨に 2020年末?
 WordPress 5.x
 PHP 7.3 が必須…
 になるの？ 2007年8⽉
 PHP 5.2.4 リリース 現在：
 PHP 7.2 = Security Support
 PHP 7.3 = Active Support 2016年3⽉
 PHP 5.6.20 リリース
12. クラスや 7.x 対応のコードより も、5.3 ~ 7.x の関数や書き⽅を 多く⽬にするぞ
13. 無名関数 anonymous function PHP 5.3 ~
14. add_filter( 'enter_title_here', function( $title ) { $title = $title . '!!!'; return $title; } ); function my_theme_custom_enter_title_here( $title ) { $title = $title . '!!!'; return $title; } add_filter( 'enter_title_here', 'my_theme_custom_enter_title_here');
15. function my_theme_custom_enter_title_here( $title ) { $title = $title . '!!!'; return $title; } add_filter( 'enter_title_here', 'my_theme_custom_enter_title_here'); // このフィルターを、例えば⼦テーマで remove できる. remove_filter( 'enter_title_here', 'my_theme_custom_enter_title_here', 11 ); 無名関数を使うと $functions_to_remove が
 指定できないので remove_filter() できない… フックをしているコードで使われているのをよく⾒かける。
 しかし、これには落とし⽳が…
16. テーマ（特にフック）で無名関数を使う時は基本的 に下記を守る。 テーマ内で完結する独⾃処理でのみ使う コア、親テーマ、プラグインのアクションやフィル ターにフックする時は使わない（特にコア） だがしかし、こういう考え⽅もある…
17. // Mythic starter theme から抜粋 // https://github.com/justintadlock/mythic/blob/master/app/functions- setup.php add_action( 'after_setup_theme', function() { add_theme_support( 'align-wide' ); // 省略 ... } ); add_action( 'init', function() { register_nav_menus( [ 'primary' -> 'Primary', // 省略 ... ] ); } ); add_action( 'init', function() { set_post_thumnail_size( 178, 100, true ); add_image_size( 'mythic-medium', 750, 422, true ); // 省略 ... } );
18. // add_theme_support()、register_nav_menu()、…等は、 // 個別に remove したりオーバーライドできるようになっている。 // // 例えば⼦テーマから add_action( 'after_setup_theme', function() { remove_theme_support( 'align-wide' ); unregister_nav_menu( 'primary' ); set_post_thumnail_size( 356, 200, true); remove_image_size( 'mythic-medium' ); }, 11 ); // 親テーマよりも⼤きい値を指定する remove~系の関数があるよね？
 オーバーライドしてほしくないフックはあえて無名関数に閉じ込めてしまう
19. ~ 5.6.20、~ 7.x のコードとの出会 いはこれからもっと増えていく。 WordPress の仕様・事情を加味 した実装になっているか？
20. ⾃分で使わなくても、 他の⼈が使っていく、 ふれることも多くなる。
 例えば、デバッグとか…
21. WordPress が後⽅互換を⼤事に している限り、テーマ技術の⼟ 台はしばらくはPHPであり続け るのでは？
22. 配列 を array() ではなく [ ] で書く（PHP 5.4） オートロード / autoload（PSR-0、PSR-4） Composer を使わないやり⽅と使うやる⽅がある！ 名前空間 / namespace（PHP 5.0） Composer（2012年リリース） 型宣⾔（PHP 5〜、7〜） まだまだ沢⼭ある
23. 学ぶべきこと その2 CSS 設計
24. CSS設計？ 「良いCSS」を作ろう！ そのためのルール
25. 「良いCSS」のゴール 予測しやすい（Predictable） 再利⽤しやすい（Reusable） 保守しやすい（Maintainable） 拡張しやすい（Scalable） https://philipwalton.com/articles/css-architecture/
 https://uxmilk.jp/43386
26. ちなみに SMACSS, OOCSS, MCSS, SuitCSS, FLOCSS, ITCSS BEM これらは設計「⼿法」
27. WordPress では 決められたCSS設計の⼿法や デザインシステム等がない …んですが
28. <article id="post-81" class="post-81 post type-post status-publish format- standard hentry category-uncategorized"> <time class="entry-date published" datetime="2019-11-21T10:35:11+09:00"> <figure class="wp-block-gallery columns-1 is-cropped"> コア（ブロックエディター含む）が出⼒するクラスはOOCSSっぽいのが結構
 ある。とはいえ、テーマではBEMもよく使われている印象。 ⼀応 BEM とかやったり、コンポーネント指向で書 いたりはしてるんですが、フリーダムですね。 — toro_unit
29. 例えば、ul li の装飾
31. ul li { padding-left: 20px; &:before{ content: ""; width: 10px; height: 2px; background-color: $success; top: 0.5em; } } // List style - horizontal .is-style-horizontal{ li{ ... } }
32. ブロックエディター フロントエンド
33. ul li:not(.blocks-gallery-item){ padding-left: 20px; &:before{ content: ""; width: 10px; height: 2px; background-color: $success; top: 0.5em; } } .loop-container ul { li { padding-left: 0; margin-top: 0; &:before { content: none; } } }
34. https://twitter.com/s56bouya/status/1202240830007676929
35. 作成したテーマ Twenty Twenty しかし、5.3 から改良されたカラムブロックで…
36. // Colum block fix ul.block-editor-inner-blocks__template-picker-options { margin: 4px 0; li { padding-left: 0; margin: 8px; } li:before { content: none; } } エディター⽤のCSSにのみ、オーバーライドするスタイルを記述…
37. フロントエンド⽤と ブロックエディター⽤の CSS を分ける
39. ΄΅ಉ͡Ͱ͋Δ͜ͱΛظ଴͞Ε͍ͯΔʁ
40. @import 'settings/settings'; @import 'tools/tools'; @import 'generic/generic'; @import 'elements/**'; @import 'components/components'; @import 'blocks/*'; @import 'vendor/vendor'; @import 'utilities/utilities'; @import 'settings/settings'; @import 'tools/tools'; .editor-styles-wrapper div[data-block], .editor-block-preview__content { @import 'generic/generic'; @import "generic/entry-content"; } .edit-post-visual-editor.editor-styles-wrapper div[data-block] { // フォントの指定 } .editor-styles-wrapper div[data-block], .editor-block-preview__content{ @import 'components/components'; @import 'blocks/*'; @import "elements/loop"; // エディターに適⽤したいフィックス // ... } screen.scss block-editor.scss
41. CSS フレームワークを使うと さらに複雑になる
42. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/ 4.4.1/css/bootstrap.min.css" integrity="..." crossorigin="anonymous"> コンパイルされた`.min.css`だと余計なCSSも沢⼭⼊っている $ npm install bootstrap ソースをインストールして、
 各モジュールを選別しつつコンパイルした⽅が（たぶん）幸せ ただし、フロント⽤とエディター⽤それぞれのCSSに
 うまい具合選択しつつ import の指定を書く必要がある
43. ワイヤー / カンプ / デザイン 上に無くても、実装が必要なス タイルが多数ある
44. 「幅広」「全幅」 「左寄せ」「中央」「右寄せ」 「⽂字⾊」「背景⾊」 「⽂字サイズ」
45. コアが挿⼊する ブロック⽤スタイルも 併せて使うのかどうか
46. 使う コアのブロックに変更がある場合に（少し）楽かも。 スタイルの上書きが必要。 ファイルサイズが結構⼤きい（41KB） 使わない コアのブロックの変更をフォローして対応する必要あり。 スタイルの上書きをしなくてよい。 他のスタイルと合わせてから minify できる。
47. .wp-block-column { // ... } @media (max-width: 599px) { .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 600px) { .wp-block-column { flex-basis: calc(50% - 16px); flex-grow: 0; } .wp-block-column:nth-child(even) { margin-left: 32px; } } @media (min-width: 782px) { .wp-block-column:not(:first-child) { margin-left: 32px; } } こういうのを上書きするのはつらい…
 どうしましょうかねぇー /wp-includes/dist/block-library/style.css
48. 等など、…
49. フロントエンドと ブロックエディター両⽅に いい感じに使える「良いCSS] を作るのは⼀筋縄ではいかない （特に、再利⽤と拡張）
50. これまで以上に⼿間が掛かる、 デグレーションが起きる、 ⼯数が掛かる CSS 設計から練り直さないと
51. 学ぶべきこと その3 ブロックエディター
56. 何のための
 部品を どこに どの
 タイミングで どのような
 ⼿段で表⽰
 させるか ▶ ▶ ▶ ReactJS 書くしかない！
 （少なくとも今は） デザイン
 UX、UI、a11y
57. 例えば、ボタンブロック
58. 5.2 5.3
59. ディスカッション どこに・どういう形式で、下記の 設定項⽬を追加実装しますか？ 1. ホバーエフェクトの選択 2. デフォルトのホバーエフェクト の設定
60. Modern JavaScript、ReactJS、 UX、UI、 CSS 設計、CSS 3、 CSS Preprocessor、PHP、 a11y (WCAG2.0 AA)
61. 何を、どこに、どのタイミング で、どのように実装するのか。
 UX を向上しつつ、バグをなく し、再利⽤性も⾼める。 そしてオリジナリティも出す。
62. React JS だけではない。 めっちゃ⼤変。 ⼯数も掛かる。
63. 何から、どのように 学べば良いのか？
64. 今、学ぶべきこと？
65. 1. PHP スキルのレベルアップ 2. CSS 設計の考え⽅ 3. ブロックエディターそのもの
66. 全て、平⾏して
67. 1. PHP スキルのレベルアップ 2. CSS 設計の考え⽅ 3. Gutenberg 今すぐスタートできる！
68. 1. PHP スキルのレベルアップ 2. CSS 設計の考え⽅ 3. ブロックエディター まずは狭い範囲でスタート ※最初から⼤きくしない！ 既に実践している⼈は、ブロック周りか ら少しづつ設計の⾒直し・試しを
69. 1. PHP スキルのレベルアップ 2. CSS 設計の考え⽅ 3. ブロックエディター ブロックスタイルは今すぐできる！ それ以外は、むずい…
70. むずい！ でも学びたい… どこから⼿をつけ始めるか？ 加 筆 し ま し た
71. 通常幅のグループブロックの中に、全幅の画像ブロックが⼊るとどうなる？ ⼊れると…？ 試してみよう！その1
72. 全幅のカラムブロックの中にカラムが3つ、それぞれに段落ブロック。
 左端と右端の段落も横⼀杯まで広がるべきか？
 それともマージンがあるべきか？ フロントエンド 例えば…
 Twenty Twenty は padding がある
 （⾚⽮印） 試してみよう！その2 ブロックエディター 全幅の画像ブロック（⽐較⽤） 加 筆 し ま し た
73. フロントエンド しかし、Twenty Nineteen だと、段落の両端に padding がない… 試してみよう！その2 ブロックエディター 加 筆 し ま し た
74. どちらもデフォルトテーマ… ブロックエディターとしては、どちらがデフォ ルト？どちらが正しい？ 何がコアの、何がテーマ独⾃のスタイル指定？ padding と margin どっち？ 加 筆 し ま し た
75. どのように動作し、表⽰される のがデフォルトなのか？ デフォルトテーマが 「正しい」のか？
76. 作る側の⼈は、
 使う頻度が少なくなりがち まずは、ブロックエディターを 使い倒そう
77. ⾃分でカスタムブロックを作る・作らな いに関係なく、
 各ブロックの機能と、 何がデフォルトの状態なのか、把握して おく。 でないと、バグかどうかも分からない！
78. 意識してやること1： コードのアウトプット
79. 意識してやること2： 上のレベルに⾃分を置く （and/or 範囲を狭める）
80. カスタムブロックの作り⽅を学びたい場合は Gutenberg プロジェクトの公式ドキュメントにあるチュートリアル
 https://developer.wordpress.org/block-editor/tutorials/block-tutorial/ こちらも参考にしつつ… Gutenberg プロジェクトの GitHub リポジトリ
 https://github.com/WordPress/gutenberg ※注意：Gutenberg のドキュメントは、プラグインに対応しているので、コ アにはまだマージされていない項⽬も含まれている。 加 筆 し ま し た
81. https://speakerdeck.com/torounit/get-started-customize-for-block-editor なので、「まず作ってみる」にはこちらがお勧め！ 加 筆 し ま し た @ Kansai WordPress Meetup Osaka #4 ブロックエディターの話をしよう（2019年11⽉16⽇開催）
 https://www.meetup.com/ja-JP/Kansai-WordPress-Meetup/events/266066277/
 https://twitter.com/hashtag/WPmeetupOsaka
82. 意識してやること3： 「外」
83. ⽇々進化するウェブ技術 × ブロックエディター × Gutenberg プロジェクト
84. ありがとうございました。 学び、作り、アウトプットしていきましょう。 三⽊徹 (Toru Miki) waviaei toru https://profiles.wordpress.org/toru/
 https://torumiki.com