WordPress FSE live stream#2

↳ Template, template parts, and navigation.
Posted in Gutenberg, the 07/10/2022.

Introduction

I plan to rebuild my current theme into a full-site editing one and do so while live coding and live streaming.

Here’s the recap of the second streaming session.

Legend: 👨🏻‍💻 code, ✅ check, 📖 read, 🎥 watch, 🧠 learn.

Part 1: Header navigation

  • 👨🏻‍💻 Created my pages: home, portfolio, blog, course, and about.
  • Wanted to create the header menu
  • Went back to my dashboard, then the editor, to edit the header template part.
  • 📖 https://wordpress.org/support/article/navigation-block/
  • 👨🏻‍💻 Used the navigation block to create my main navigation
  • 🧠 Learned how to create a menu
  • 👨🏻‍💻 Tried a few navigation options
  • 🧠 Learned what justification and orientation do to the menu
  • Checked the generated output
  • ❓ Wonder if it’s possible to modify the output like we can with classic themes via Walkers or filters.
  • ❓Wonder if it’s possible to create menus automatically instead of manually.
  • 📖 https://make.wordpress.org/core/2022/01/07/the-new-navigation-block/
  • 👨🏻‍💻 Tried to reduce my menu container
  • ❓Wonder how to manage containers. Tried manually, but there must be a better way. In theme.json maybe?

Part 2: Template parts

  • 👨🏻‍💻 Tried to insert a header block, but it doubled the header tag so I revert it back.
  • Compared the classic theme architecture with the block theme one.
  • 📖 https://developer.wordpress.org/themes/block-themes/block-theme-setup/
  • 🧠 It’s possible to build template parts with the editor, then save them as template part files inside your theme.
  • 🧠 If you don’t save the template part inside your theme, the template part is marked as a user template part, not a theme one. It only exists on your given admin instance. If a theme is then copied to another instance, the part won’t exist.
  • 🧠 It’s possible to export your entire theme with the export tool (kebab menu / tools / export)
  • 🧠 If you have a template part file, open it up in the editor, then modify it with the editor, the changes are saved in the database, not in the template part file. If you want to save this modification, you need to report it back to the template part file manually.

Plan for next time

  • 👨🏻‍💻 Create the footer template part
  • 👨🏻‍💻 Experiment with theme.json
    • Color management
    • Font management
    • Container management