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

1. View Slide

2. Gutenberg 以降のテーマ作成にむけて、
   今学ぶべきこと
   WordCamp Osaka 2019
   December 7, 2019
   三⽊徹 (Toru Miki)
   waviaei toru
   

   View Slide

3. WordPress は14年くらい
   WordPress コア / 翻訳 等への貢献
   WordCamp 実⾏委員⻑ / スタッフ / ボランティア
   英語で Meetup アップやったり、本を書いたりも
   してました
   三⽊ 徹 Toru Miki
   Web Developer
   

   View Slide

4. HTML/CSS をメインとした、マークアップのスキルからスタート。

   WordPress 等をきっかけに PHP や周辺のウェブ技術のスキルアップ。

   今に⾄る…
   2019年 6⽉〜
   2011年
   2005年 ウェブを独学で学び始める。
   Webmaster — インハウスで運⽤から開発まで。
   Web Developer — 主に受託。開発のみ。
   そういう⽅、いませんか？
   

   View Slide

5. 今⽇は
   どのような話をするのか？
   

   View Slide

6. PHP 7.x + Composer + クラス
   ＆
   モダンJS + ReactJS
   
   

   View Slide

7. ところが…
   今後の Gutenberg の進化も⾒据え、
   「良いテーマ」作成を⽬指すのであれば
   それだけだとキツいかも
   と、思った
   

   View Slide

8. Gutenberg は次のフェーズに
   ⼊っている。
   今のうちに「学び、実践しておい
   たほうが良さそう」な事、
   考え直しました。
   

   View Slide

9. ※注記：
   これをやっとけば「Gutenberg 対応テーマが明⽇から
   作れる！」というノウハウ集や、コードのティップス
   的な話ではありません。
   完璧にできますよ！とまだ⾔えないけれど、共有・実
   践していくことでお互いのスキルをレベルアップしま
   せんか？皆で⽇本のテーマのレベル底上げをやりませ
   んか？という思いを踏まえての話です。
   

   View Slide

10. 学ぶべきこと
    その1
    PHP
    

    View Slide

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 リリース
    

    View Slide

12. クラスや 7.x 対応のコードより
    も、5.3 ~ 7.x の関数や書き⽅を
    多く⽬にするぞ
    

    View Slide

13. 無名関数
    anonymous function
    PHP 5.3 ~
    

    View Slide

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');
    
    

    View Slide

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() できない…
    フックをしているコードで使われているのをよく⾒かける。

    しかし、これには落とし⽳が…
    

    View Slide

16. テーマ（特にフック）で無名関数を使う時は基本的
    に下記を守る。
    テーマ内で完結する独⾃処理でのみ使う
    コア、親テーマ、プラグインのアクションやフィル
    ターにフックする時は使わない（特にコア）
    だがしかし、こういう考え⽅もある…
    

    View Slide

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 );
    // 省略 ...
    } );
    

    View Slide

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~系の関数があるよね？

    オーバーライドしてほしくないフックはあえて無名関数に閉じ込めてしまう
    

    View Slide

19. ~ 5.6.20、~ 7.x のコードとの出会
    いはこれからもっと増えていく。
    WordPress の仕様・事情を加味
    した実装になっているか？
    

    View Slide

20. ⾃分で使わなくても、
    他の⼈が使っていく、
    ふれることも多くなる。

    例えば、デバッグとか…
    

    View Slide

21. WordPress が後⽅互換を⼤事に
    している限り、テーマ技術の⼟
    台はしばらくはPHPであり続け
    るのでは？
    

    View Slide

22. 配列 を array() ではなく [ ] で書く（PHP 5.4）
    オートロード / autoload（PSR-0、PSR-4）
    Composer を使わないやり⽅と使うやる⽅がある！
    名前空間 / namespace（PHP 5.0）
    Composer（2012年リリース）
    型宣⾔（PHP 5〜、7〜）
    まだまだ沢⼭ある
    

    View Slide

23. 学ぶべきこと
    その2
    CSS 設計
    

    View Slide

24. CSS設計？
    
    「良いCSS」を作ろう！
    そのためのルール
    

    View Slide

25. 「良いCSS」のゴール
    予測しやすい（Predictable）
    再利⽤しやすい（Reusable）
    保守しやすい（Maintainable）
    拡張しやすい（Scalable）
    https://philipwalton.com/articles/css-architecture/

    https://uxmilk.jp/43386
    

    View Slide

26. ちなみに
    SMACSS, OOCSS, MCSS, SuitCSS,
    FLOCSS, ITCSS
    BEM
    これらは設計「⼿法」
    

    View Slide

27. WordPress では
    決められたCSS設計の⼿法や
    デザインシステム等がない
    …んですが
    

    View Slide

28. 
    
    
    コア（ブロックエディター含む）が出⼒するクラスはOOCSSっぽいのが結構

    ある。とはいえ、テーマではBEMもよく使われている印象。
    ⼀応 BEM とかやったり、コンポーネント指向で書
    いたりはしてるんですが、フリーダムですね。
    — toro_unit
    

    View Slide

29. 例えば、ul li の装飾
    

    View Slide

30. View Slide

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{
    ...
    }
    }
    

    View Slide

32. ブロックエディター フロントエンド
    

    View Slide

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;
    }
    }
    }
    

    View Slide

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

    View Slide

35. 作成したテーマ Twenty Twenty
    しかし、5.3 から改良されたカラムブロックで…
    

    View Slide

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にのみ、オーバーライドするスタイルを記述…
    

    View Slide

37. フロントエンド⽤と
    ブロックエディター⽤の
    CSS を分ける
    

    View Slide

38. View Slide

39. ΄΅ಉ͡Ͱ͋Δ͜ͱΛظ଴͞Ε͍ͯΔʁ
    

    View Slide

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
    

    View Slide

41. CSS フレームワークを使うと
    さらに複雑になる
    

    View Slide

42. 
    コンパイルされた`.min.css`だと余計なCSSも沢⼭⼊っている
    $ npm install bootstrap
    ソースをインストールして、

    各モジュールを選別しつつコンパイルした⽅が（たぶん）幸せ
    ただし、フロント⽤とエディター⽤それぞれのCSSに

    うまい具合選択しつつ import の指定を書く必要がある
    

    View Slide

43. ワイヤー / カンプ / デザイン
    上に無くても、実装が必要なス
    タイルが多数ある
    

    View Slide

44. 「幅広」「全幅」 「左寄せ」「中央」「右寄せ」
    「⽂字⾊」「背景⾊」 「⽂字サイズ」
    

    View Slide

45. コアが挿⼊する
    ブロック⽤スタイルも
    併せて使うのかどうか
    

    View Slide

46. 使う
    コアのブロックに変更がある場合に（少し）楽かも。
    スタイルの上書きが必要。
    ファイルサイズが結構⼤きい（41KB）
    使わない
    コアのブロックの変更をフォローして対応する必要あり。
    スタイルの上書きをしなくてよい。
    他のスタイルと合わせてから minify できる。
    

    View Slide

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
    

    View Slide

48. 等など、…
    

    View Slide

49. フロントエンドと
    ブロックエディター両⽅に
    いい感じに使える「良いCSS]
    を作るのは⼀筋縄ではいかない
    （特に、再利⽤と拡張）
    

    View Slide

50. これまで以上に⼿間が掛かる、
    デグレーションが起きる、
    ⼯数が掛かる
    CSS 設計から練り直さないと
    

    View Slide

51. 学ぶべきこと
    その3
    ブロックエディター
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. 何のための

    部品を
    どこに
    どの

    タイミングで
    どのような

    ⼿段で表⽰

    させるか
    ▶ ▶ ▶
    ReactJS 書くしかない！

    （少なくとも今は）
    デザイン

    UX、UI、a11y
    

    View Slide

57. 例えば、ボタンブロック
    

    View Slide

58. 5.2 5.3
    

    View Slide

59. ディスカッション
    どこに・どういう形式で、下記の
    設定項⽬を追加実装しますか？
    1. ホバーエフェクトの選択
    2. デフォルトのホバーエフェクト
    の設定
    

    View Slide

60. Modern JavaScript、ReactJS、
    UX、UI、
    CSS 設計、CSS 3、
    CSS Preprocessor、PHP、
    a11y (WCAG2.0 AA)
    

    View Slide

61. 何を、どこに、どのタイミング
    で、どのように実装するのか。

    UX を向上しつつ、バグをなく
    し、再利⽤性も⾼める。
    そしてオリジナリティも出す。
    

    View Slide

62. React JS だけではない。
    めっちゃ⼤変。
    ⼯数も掛かる。
    

    View Slide

63. 何から、どのように
    学べば良いのか？
    

    View Slide

64. 今、学ぶべきこと？
    

    View Slide

65. 1. PHP スキルのレベルアップ
    2. CSS 設計の考え⽅
    3. ブロックエディターそのもの
    

    View Slide

66. 全て、平⾏して
    

    View Slide

67. 1. PHP スキルのレベルアップ
    2. CSS 設計の考え⽅
    3. Gutenberg
    今すぐスタートできる！
    

    View Slide

68. 1. PHP スキルのレベルアップ
    2. CSS 設計の考え⽅
    3. ブロックエディター
    まずは狭い範囲でスタート
    ※最初から⼤きくしない！
    既に実践している⼈は、ブロック周りか
    ら少しづつ設計の⾒直し・試しを
    

    View Slide

69. 1. PHP スキルのレベルアップ
    2. CSS 設計の考え⽅
    3. ブロックエディター
    ブロックスタイルは今すぐできる！
    それ以外は、むずい…
    

    View Slide

70. むずい！
    でも学びたい…
    どこから⼿をつけ始めるか？
    加
    筆
    し
    ま
    し
    た
    

    View Slide

71. 通常幅のグループブロックの中に、全幅の画像ブロックが⼊るとどうなる？
    ⼊れると…？
    試してみよう！その1
    

    View Slide

72. 全幅のカラムブロックの中にカラムが3つ、それぞれに段落ブロック。

    左端と右端の段落も横⼀杯まで広がるべきか？

    それともマージンがあるべきか？
    フロントエンド
    例えば…

    Twenty Twenty は padding がある

    （⾚⽮印）
    試してみよう！その2
    ブロックエディター
    全幅の画像ブロック（⽐較⽤）
    加
    筆
    し
    ま
    し
    た
    

    View Slide

73. フロントエンド
    しかし、Twenty Nineteen だと、段落の両端に padding がない…
    試してみよう！その2
    ブロックエディター
    加
    筆
    し
    ま
    し
    た
    

    View Slide

74. どちらもデフォルトテーマ…
    ブロックエディターとしては、どちらがデフォ
    ルト？どちらが正しい？
    何がコアの、何がテーマ独⾃のスタイル指定？
    padding と margin どっち？
    加
    筆
    し
    ま
    し
    た
    

    View Slide

75. どのように動作し、表⽰される
    のがデフォルトなのか？
    デフォルトテーマが
    「正しい」のか？
    

    View Slide

76. 作る側の⼈は、

    使う頻度が少なくなりがち
    
    まずは、ブロックエディターを
    使い倒そう
    

    View Slide

77. ⾃分でカスタムブロックを作る・作らな
    いに関係なく、

    各ブロックの機能と、
    何がデフォルトの状態なのか、把握して
    おく。
    でないと、バグかどうかも分からない！
    

    View Slide

78. 意識してやること1：
    コードのアウトプット
    

    View Slide

79. 意識してやること2：
    上のレベルに⾃分を置く
    （and/or 範囲を狭める）
    

    View Slide

80. カスタムブロックの作り⽅を学びたい場合は
    Gutenberg プロジェクトの公式ドキュメントにあるチュートリアル

    https://developer.wordpress.org/block-editor/tutorials/block-tutorial/
    こちらも参考にしつつ… Gutenberg プロジェクトの GitHub リポジトリ

    https://github.com/WordPress/gutenberg
    ※注意：Gutenberg のドキュメントは、プラグインに対応しているので、コ
    アにはまだマージされていない項⽬も含まれている。
    加
    筆
    し
    ま
    し
    た
    

    View Slide

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
    

    View Slide

82. 意識してやること3：
    「外」
    

    View Slide

83. ⽇々進化するウェブ技術
    ×
    ブロックエディター
    ×
    Gutenberg プロジェクト
    

    View Slide

84. ありがとうございました。
    学び、作り、アウトプットしていきましょう。
    三⽊徹 (Toru Miki)
    waviaei toru https://profiles.wordpress.org/toru/

    https://torumiki.com
    

    View Slide