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

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/

Toru

December 22, 2019
Tweet

More Decks by Toru

Other Decks in Technology

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