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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

  4. 今⽇は
    どのような話をするのか?

    View full-size slide

  5. PHP 7.x + Composer + クラス

    モダンJS + ReactJS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

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

    View full-size slide

  12. 無名関数
    anonymous function
    PHP 5.3 ~

    View full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

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

    View full-size slide

  16. // 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 full-size slide

  17. // 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 full-size slide

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

    View full-size slide

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

    例えば、デバッグとか…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. CSS設計?

    「良いCSS」を作ろう!
    そのためのルール

    View full-size slide

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

    https://uxmilk.jp/43386

    View full-size slide

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

    View full-size slide

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

    View full-size slide




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

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

    View full-size slide

  28. 例えば、ul li の装飾

    View full-size slide

  29. 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 full-size slide

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

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  34. // 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  37. @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 full-size slide

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

    View full-size slide


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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. .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 full-size slide

  45. 等など、…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 何のための

    部品を
    どこに
    どの

    タイミングで
    どのような

    ⼿段で表⽰

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

    (少なくとも今は)
    デザイン

    UX、UI、a11y

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  55. 何から、どのように
    学べば良いのか?

    View full-size slide

  56. 今、学ぶべきこと?

    View full-size slide

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

    View full-size slide

  58. 全て、平⾏して

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. むずい!
    でも学びたい…
    どこから⼿をつけ始めるか?






    View full-size slide

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

    View full-size slide

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

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

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

    Twenty Twenty は padding がある

    (⾚⽮印)
    試してみよう!その2
    ブロックエディター
    全幅の画像ブロック(⽐較⽤)






    View full-size slide

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






    View full-size slide

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






    View full-size slide

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

    View full-size slide

  68. 作る側の⼈は、

    使う頻度が少なくなりがち

    まずは、ブロックエディターを
    使い倒そう

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  71. 意識してやること2:
    上のレベルに⾃分を置く
    (and/or 範囲を狭める)

    View full-size slide

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

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

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






    View full-size slide

  73. 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 full-size slide

  74. 意識してやること3:
    「外」

    View full-size slide

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

    View full-size slide

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

    https://torumiki.com

    View full-size slide