Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Toru
December 07, 2019

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

Toru

December 07, 2019
Tweet

More Decks by Toru

Other Decks in Technology

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