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

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

Edd44584a6d94211d9b7b33b57e4a875?s=47 Toru
December 22, 2019

テーマはこうなる? 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/

Edd44584a6d94211d9b7b33b57e4a875?s=128

Toru

December 22, 2019
Tweet

Transcript

  1. テーマはこうなる? テーマはこうなる? Block-Based Theme を作ってみ Block-Based Theme を作ってみ た た

    三木徹(Toru Miki) 三木徹(Toru Miki)
  2. 三木徹 三木徹 Web Developer WordPress は14年くらい WordPress コア / 翻訳への貢献

    WordCamp実行委員長 / スタッフ / ボランティア 英語で Meetup をやったり、本を書いたりもしてました
  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/
  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
  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 作 分 … 作 分 …
  6. 実演デモ 実演デモ

  7. ひとまず作ってみた結果 ひとまず作ってみた結果 まだ、ベータの前のアルファ…と言えるのかどうかぐらいの段 階。言葉通り「Experiments(実験)」。 ただ、目指そうとしている方向性を体感できるくらいには動く。 テーマ内のファイル ⇄ 外観の Templates と

    Template Parts 、各 ブロック、テンプレート階層、など…の関連性が非常に可視化し づらい。 動的な PHP テンプレートからHTMLへの変更は「退化」ではない か?というコメントが多数ありました。
  8. ありがとうございました ありがとうございました 三木徹(Toru Miki) 三木徹(Toru Miki) Twitter: @waviaei https://profiles.wordpress.org/toru https://github.com/waviaei