テーマはこうなる？ Block-Based Theme を作ってみた / Future of the Themes? -- Had a go at making block-based theme

Slides for my 5 min. LT talk at Tokyo WordPress Meetup -- LT & EoY Party
(22 December 2019)

Tokyo WordPress Meetup 12月勉強会 LT 大会 ＆ 忘年会
2019年12月22日

---

スライド内のリンク一覧 / Links from the slide

p3:
https://make.wordpress.org/core/2019/10/30/whats-new-in-gutenberg-30-october/
https://make.wordpress.org/core/2019/11/02/join-the-gutenberg-customization-conversations/

p4:
https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/themes/block-based-themes.md

--

このスライドは「Slides & Presentations」プラグインを使い、ブロックエディターで作りました。
https://wordpress.org/plugins/slide/
参考： https://ja.wordpress.org/2019/12/20/state-of-the-word-the-story-of-the-slides/

5ページ目のコードハイライターには Highlighting Code Block プラグインを使っています。
https://wordpress.org/plugins/highlighting-code-block/

This slide was made using the block editor, with the "Slides & Presentations" plugin (https://wordpress.org/plugins/slide/)
Read also: https://wordpress.org/news/2019/12/state-of-the-word-the-story-of-the-slides/

For the code highlighter on p5, Highlighting Code Block plugin was used:
https://wordpress.org/plugins/highlighting-code-block/

Transcript

1. テーマはこうなる?
   テーマはこうなる?
   Block-Based Theme を作ってみ
   Block-Based Theme を作ってみ
   た
   た
   三木徹（Toru Miki）
   三木徹（Toru Miki）
   

   View Slide

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

   View Slide

3. Full Site Editing への道
   Full Site Editing への道
   Gutenberg 6.8（2019年10月30日）あたりから実験的な機能（
   Experiment）として少しづつ追加されてきている
   Join the Gutenberg Customization Conversations
   https://make.wordpress.org/core/2019/10/30/whats-new-in-
   gutenberg-30-october/
   https://make.wordpress.org/core/2019/11/02/join-the-
   gutenberg-customization-conversations/
   

   View Slide

4. 12月6日：実験的な機能なので今後大いに変更があり、とされながらも、
   12月6日：実験的な機能なので今後大いに変更があり、とされながらも、
   Block-based Theme の現状仕様が Gutenberg のドキュメントにコミットされた
   Block-based Theme の現状仕様が Gutenberg のドキュメントにコミットされた
   https://github.com/WordPress/gutenberg/blob/master/docs/designers-
   developers/developers/themes/block-based-themes.md
   

   View Slide

5. ドキュメント
   ドキュメント
   実際にやったこと
   実際にやったこと
   theme
   theme
   |__ style.css
   |__ style.css
   |__ functions.php
   |__ functions.php
   |__ block-templates
   |__ block-templates
   |__ index.html
   |__ index.html
   |__ single.html
   |__ single.html
   |__ archive.html
   |__ archive.html
   |__ ...
   |__ ...
   |__ block-template-parts
   |__ block-template-parts
   |__ header.html
   |__ header.html
   |__ footer.html
   |__ footer.html
   |__ sidebar.html
   |__ sidebar.html
   |__ ...
   |__ ...
   block-based-theme-test
   block-based-theme-test
   |__ style.css
   |__ style.css
   |__ functions.php
   |__ functions.php
   |__ index.php
   |__ index.php 現状 認識
   現状 認識
   |__ block-templates
   |__ block-templates
   |__ index.html
   |__ index.html
   |__ block-template-parts
   |__ block-template-parts
   |__ header.html
   |__ header.html 作 分 …
   作 分 …
   |__ footer.html
   |__ footer.html 作 分 …
   作 分 …
   

   View Slide

6. 実演デモ
   実演デモ
   

   View Slide

7. ひとまず作ってみた結果
   ひとまず作ってみた結果
   まだ、ベータの前のアルファ…と言えるのかどうかぐらいの段
   階。言葉通り「Experiments（実験）」。
   ただ、目指そうとしている方向性を体感できるくらいには動く。
   テーマ内のファイル ⇄ 外観の Templates と Template Parts 、各
   ブロック、テンプレート階層、など…の関連性が非常に可視化し
   づらい。
   動的な PHP テンプレートからHTMLへの変更は「退化」ではない
   か？というコメントが多数ありました。
   

   View Slide

8. ありがとうございました
   ありがとうございました
   三木徹（Toru Miki）
   三木徹（Toru Miki）
   Twitter: @waviaei
   https://profiles.wordpress.org/toru
   https://github.com/waviaei
   

   View Slide