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

Edd44584a6d94211d9b7b33b57e4a875?s=47 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

Edd44584a6d94211d9b7b33b57e4a875?s=128

Toru

December 07, 2019
Tweet

Transcript

  1. 1.
  2. 3.

    WordPress は14年くらい WordPress コア / 翻訳 等への貢献 WordCamp 実⾏委員⻑ /

    スタッフ / ボランティア 英語で Meetup アップやったり、本を書いたりも してました 三⽊ 徹 Toru Miki Web Developer
  3. 4.

    HTML/CSS をメインとした、マークアップのスキルからスタート。
 WordPress 等をきっかけに PHP や周辺のウェブ技術のスキルアップ。
 今に⾄る… 2019年 6⽉〜 2011年

    2005年 ウェブを独学で学び始める。 Webmaster — インハウスで運⽤から開発まで。 Web Developer — 主に受託。開発のみ。 そういう⽅、いませんか?
  4. 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 リリース
  5. 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');
  6. 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() できない… フックをしているコードで使われているのをよく⾒かける。
 しかし、これには落とし⽳が…
  7. 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 ); // 省略 ... } );
  8. 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~系の関数があるよね?
 オーバーライドしてほしくないフックはあえて無名関数に閉じ込めてしまう
  9. 22.

    配列 を array() ではなく [ ] で書く(PHP 5.4) オートロード /

    autoload(PSR-0、PSR-4) Composer を使わないやり⽅と使うやる⽅がある! 名前空間 / namespace(PHP 5.0) Composer(2012年リリース) 型宣⾔(PHP 5〜、7〜) まだまだ沢⼭ある
  10. 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
  11. 30.
  12. 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{ ... } }
  13. 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; } } }
  14. 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にのみ、オーバーライドするスタイルを記述…
  15. 38.
  16. 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
  17. 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 の指定を書く必要がある
  18. 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
  19. 52.
  20. 53.
  21. 54.
  22. 55.
  23. 56.

    何のための
 部品を どこに どの
 タイミングで どのような
 ⼿段で表⽰
 させるか ▶ ▶

    ▶ ReactJS 書くしかない!
 (少なくとも今は) デザイン
 UX、UI、a11y
  24. 58.
  25. 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