Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Gutenberg 以降のテーマ作成にむけて、
今学ぶべきこと
WordCamp Osaka 2019
December 7, 2019
三⽊徹 (Toru Miki)
waviaei toru
Slide 3
Slide 3 text
WordPress は14年くらい
WordPress コア / 翻訳 等への貢献
WordCamp 実⾏委員⻑ / スタッフ / ボランティア
英語で Meetup アップやったり、本を書いたりも
してました
三⽊ 徹 Toru Miki
Web Developer
Slide 4
Slide 4 text
HTML/CSS をメインとした、マークアップのスキルからスタート。
WordPress 等をきっかけに PHP や周辺のウェブ技術のスキルアップ。
今に⾄る…
2019年 6⽉〜
2011年
2005年 ウェブを独学で学び始める。
Webmaster — インハウスで運⽤から開発まで。
Web Developer — 主に受託。開発のみ。
そういう⽅、いませんか？
Slide 5
Slide 5 text
今⽇は
どのような話をするのか？
Slide 6
Slide 6 text
PHP 7.x + Composer + クラス
＆
モダンJS + ReactJS
Slide 7
Slide 7 text
ところが…
今後の Gutenberg の進化も⾒据え、
「良いテーマ」作成を⽬指すのであれば
それだけだとキツいかも
と、思った
Slide 8
Slide 8 text
Gutenberg は次のフェーズに
⼊っている。
今のうちに「学び、実践しておい
たほうが良さそう」な事、
考え直しました。
Slide 9
Slide 9 text
※注記：
これをやっとけば「Gutenberg 対応テーマが明⽇から
作れる！」というノウハウ集や、コードのティップス
的な話ではありません。
完璧にできますよ！とまだ⾔えないけれど、共有・実
践していくことでお互いのスキルをレベルアップしま
せんか？皆で⽇本のテーマのレベル底上げをやりませ
んか？という思いを踏まえての話です。
Slide 10
Slide 10 text
学ぶべきこと
その1
PHP
Slide 11
Slide 11 text
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 リリース
Slide 12
Slide 12 text
クラスや 7.x 対応のコードより
も、5.3 ~ 7.x の関数や書き⽅を
多く⽬にするぞ
Slide 13
Slide 13 text
無名関数
anonymous function
PHP 5.3 ~
Slide 14
Slide 14 text
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');
Slide 15
Slide 15 text
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() できない…
フックをしているコードで使われているのをよく⾒かける。
しかし、これには落とし⽳が…
Slide 16
Slide 16 text
テーマ（特にフック）で無名関数を使う時は基本的
に下記を守る。
テーマ内で完結する独⾃処理でのみ使う
コア、親テーマ、プラグインのアクションやフィル
ターにフックする時は使わない（特にコア）
だがしかし、こういう考え⽅もある…
Slide 17
Slide 17 text
// 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 );
// 省略 ...
} );
Slide 18
Slide 18 text
// 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~系の関数があるよね？
オーバーライドしてほしくないフックはあえて無名関数に閉じ込めてしまう
Slide 19
Slide 19 text
~ 5.6.20、~ 7.x のコードとの出会
いはこれからもっと増えていく。
WordPress の仕様・事情を加味
した実装になっているか？
Slide 20
Slide 20 text
⾃分で使わなくても、
他の⼈が使っていく、
ふれることも多くなる。
例えば、デバッグとか…
Slide 21
Slide 21 text
WordPress が後⽅互換を⼤事に
している限り、テーマ技術の⼟
台はしばらくはPHPであり続け
るのでは？
Slide 22
Slide 22 text
配列 を array() ではなく [ ] で書く（PHP 5.4）
オートロード / autoload（PSR-0、PSR-4）
Composer を使わないやり⽅と使うやる⽅がある！
名前空間 / namespace（PHP 5.0）
Composer（2012年リリース）
型宣⾔（PHP 5〜、7〜）
まだまだ沢⼭ある
Slide 23
Slide 23 text
学ぶべきこと
その2
CSS 設計
Slide 24
Slide 24 text
CSS設計？
「良いCSS」を作ろう！
そのためのルール
Slide 25
Slide 25 text
「良いCSS」のゴール
予測しやすい（Predictable）
再利⽤しやすい（Reusable）
保守しやすい（Maintainable）
拡張しやすい（Scalable）
https://philipwalton.com/articles/css-architecture/
https://uxmilk.jp/43386
Slide 26
Slide 26 text
ちなみに
SMACSS, OOCSS, MCSS, SuitCSS,
FLOCSS, ITCSS
BEM
これらは設計「⼿法」
Slide 27
Slide 27 text
WordPress では
決められたCSS設計の⼿法や
デザインシステム等がない
…んですが
Slide 28
Slide 28 text
Slide 29
Slide 29 text
例えば、ul li の装飾
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
ul li {
padding-left: 20px;
&:before{
content: "";
width: 10px;
height: 2px;
background-color: $success;
top: 0.5em;
}
}
// List style - horizontal
.is-style-horizontal{
li{
...
}
}
Slide 32
Slide 32 text
ブロックエディター フロントエンド
Slide 33
Slide 33 text
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;
}
}
}
Slide 34
Slide 34 text
https://twitter.com/s56bouya/status/1202240830007676929
Slide 35
Slide 35 text
作成したテーマ Twenty Twenty
しかし、5.3 から改良されたカラムブロックで…
Slide 36
Slide 36 text
// 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にのみ、オーバーライドするスタイルを記述…
Slide 37
Slide 37 text
フロントエンド⽤と
ブロックエディター⽤の
CSS を分ける
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
΄΅ಉ͡Ͱ͋Δ͜ͱΛظ͞Ε͍ͯΔʁ
Slide 40
Slide 40 text
@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
Slide 41
Slide 41 text
CSS フレームワークを使うと
さらに複雑になる
Slide 42
Slide 42 text
コンパイルされた`.min.css`だと余計なCSSも沢⼭⼊っている
$ npm install bootstrap
ソースをインストールして、
各モジュールを選別しつつコンパイルした⽅が（たぶん）幸せ
ただし、フロント⽤とエディター⽤それぞれのCSSに
うまい具合選択しつつ import の指定を書く必要がある
Slide 43
Slide 43 text
ワイヤー / カンプ / デザイン
上に無くても、実装が必要なス
タイルが多数ある
Slide 44
Slide 44 text
「幅広」「全幅」 「左寄せ」「中央」「右寄せ」
「⽂字⾊」「背景⾊」 「⽂字サイズ」
Slide 45
Slide 45 text
コアが挿⼊する
ブロック⽤スタイルも
併せて使うのかどうか
Slide 46
Slide 46 text
使う
コアのブロックに変更がある場合に（少し）楽かも。
スタイルの上書きが必要。
ファイルサイズが結構⼤きい（41KB）
使わない
コアのブロックの変更をフォローして対応する必要あり。
スタイルの上書きをしなくてよい。
他のスタイルと合わせてから minify できる。
Slide 47
Slide 47 text
.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
Slide 48
Slide 48 text
等など、…
Slide 49
Slide 49 text
フロントエンドと
ブロックエディター両⽅に
いい感じに使える「良いCSS]
を作るのは⼀筋縄ではいかない
（特に、再利⽤と拡張）
Slide 50
Slide 50 text
これまで以上に⼿間が掛かる、
デグレーションが起きる、
⼯数が掛かる
CSS 設計から練り直さないと
Slide 51
Slide 51 text
学ぶべきこと
その3
ブロックエディター
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
何のための
部品を
どこに
どの
タイミングで
どのような
⼿段で表⽰
させるか
▶ ▶ ▶
ReactJS 書くしかない！
（少なくとも今は）
デザイン
UX、UI、a11y
Slide 57
Slide 57 text
例えば、ボタンブロック
Slide 58
Slide 58 text
5.2 5.3
Slide 59
Slide 59 text
ディスカッション
どこに・どういう形式で、下記の
設定項⽬を追加実装しますか？
1. ホバーエフェクトの選択
2. デフォルトのホバーエフェクト
の設定
Slide 60
Slide 60 text
Modern JavaScript、ReactJS、
UX、UI、
CSS 設計、CSS 3、
CSS Preprocessor、PHP、
a11y (WCAG2.0 AA)
Slide 61
Slide 61 text
何を、どこに、どのタイミング
で、どのように実装するのか。
UX を向上しつつ、バグをなく
し、再利⽤性も⾼める。
そしてオリジナリティも出す。
Slide 62
Slide 62 text
React JS だけではない。
めっちゃ⼤変。
⼯数も掛かる。
Slide 63
Slide 63 text
何から、どのように
学べば良いのか？
Slide 64
Slide 64 text
今、学ぶべきこと？
Slide 65
Slide 65 text
1. PHP スキルのレベルアップ
2. CSS 設計の考え⽅
3. ブロックエディターそのもの
Slide 66
Slide 66 text
全て、平⾏して
Slide 67
Slide 67 text
1. PHP スキルのレベルアップ
2. CSS 設計の考え⽅
3. Gutenberg
今すぐスタートできる！
Slide 68
Slide 68 text
1. PHP スキルのレベルアップ
2. CSS 設計の考え⽅
3. ブロックエディター
まずは狭い範囲でスタート
※最初から⼤きくしない！
既に実践している⼈は、ブロック周りか
ら少しづつ設計の⾒直し・試しを
Slide 69
Slide 69 text
1. PHP スキルのレベルアップ
2. CSS 設計の考え⽅
3. ブロックエディター
ブロックスタイルは今すぐできる！
それ以外は、むずい…
Slide 70
Slide 70 text
むずい！
でも学びたい…
どこから⼿をつけ始めるか？
加
筆
し
ま
し
た
Slide 71
Slide 71 text
通常幅のグループブロックの中に、全幅の画像ブロックが⼊るとどうなる？
⼊れると…？
試してみよう！その1
Slide 72
Slide 72 text
全幅のカラムブロックの中にカラムが3つ、それぞれに段落ブロック。
左端と右端の段落も横⼀杯まで広がるべきか？
それともマージンがあるべきか？
フロントエンド
例えば…
Twenty Twenty は padding がある
（⾚⽮印）
試してみよう！その2
ブロックエディター
全幅の画像ブロック（⽐較⽤）
加
筆
し
ま
し
た
Slide 73
Slide 73 text
フロントエンド
しかし、Twenty Nineteen だと、段落の両端に padding がない…
試してみよう！その2
ブロックエディター
加
筆
し
ま
し
た
Slide 74
Slide 74 text
どちらもデフォルトテーマ…
ブロックエディターとしては、どちらがデフォ
ルト？どちらが正しい？
何がコアの、何がテーマ独⾃のスタイル指定？
padding と margin どっち？
加
筆
し
ま
し
た
Slide 75
Slide 75 text
どのように動作し、表⽰される
のがデフォルトなのか？
デフォルトテーマが
「正しい」のか？
Slide 76
Slide 76 text
作る側の⼈は、
使う頻度が少なくなりがち
まずは、ブロックエディターを
使い倒そう
Slide 77
Slide 77 text
⾃分でカスタムブロックを作る・作らな
いに関係なく、
各ブロックの機能と、
何がデフォルトの状態なのか、把握して
おく。
でないと、バグかどうかも分からない！
Slide 78
Slide 78 text
意識してやること1：
コードのアウトプット
Slide 79
Slide 79 text
意識してやること2：
上のレベルに⾃分を置く
（and/or 範囲を狭める）
Slide 80
Slide 80 text
カスタムブロックの作り⽅を学びたい場合は
Gutenberg プロジェクトの公式ドキュメントにあるチュートリアル
https://developer.wordpress.org/block-editor/tutorials/block-tutorial/
こちらも参考にしつつ… Gutenberg プロジェクトの GitHub リポジトリ
https://github.com/WordPress/gutenberg
※注意：Gutenberg のドキュメントは、プラグインに対応しているので、コ
アにはまだマージされていない項⽬も含まれている。
加
筆
し
ま
し
た
Slide 81
Slide 81 text
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
Slide 82
Slide 82 text
意識してやること3：
「外」
Slide 83
Slide 83 text
⽇々進化するウェブ技術
×
ブロックエディター
×
Gutenberg プロジェクト
Slide 84
Slide 84 text
ありがとうございました。
学び、作り、アウトプットしていきましょう。
三⽊徹 (Toru Miki)
waviaei toru https://profiles.wordpress.org/toru/
https://torumiki.com