WordPress FSE live stream#3

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 third streaming session.

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

Part 1: php block pattern

• ❓ Wondered if it’s possible to create a dynamic php copyright inside my footer
• 📖 https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/
• 🧠 Template and template parts are usually written in HTML, while block patterns are usually written in php. (cf twenty twenty two)
• 🧠 Patterns can be declared with the register_block_pattern function or with meta comments
• 👨🏻‍💻 Created the patterns folder
• 👨🏻‍💻 Created a copyright.php file with a php dynamic date. Declared it using meta comments instead of a function.
• ❓ How do you load a block pattern from a template file ?
• 🧠 Like this : <!-- wp:pattern {"slug":"myblocktheme/footer-copyright"} /-->
• 👨🏻‍💻 Included the pattern.
• ✅ The footer is now dynamic

Part 2: Navigation block

• ❓ In the last session, we were thinking about the navigation block possibilities. Was it possible to create a dynamic menu?
  • 🧠 It turns out I accidentally used a wp:page-list block, which is dynamic. It pulls all the created pages. So that’s the dynamic option.
  • 🧠 The page-list block can be converted to a series of wp:navigation-link blocks, which is now what I’m using. It’s the manual option.

Part 3: Theme.json

• 👨🏻‍💻 There were no theme.json file in my theme, declared a minimum one with the version and the scheme.
• 📖 https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
• Colors
  • 👨🏻‍💻 Added a settings / color / palette section, with 4 colors in them.
  • ✅ They were available in global styles
  • 🧠 WordPress creates automatic CSS variables for certain elements declared in theme.json
  • 👨🏻‍💻 Added a styles / color / background section, referencing the var(--wp--preset--color--light)variable.
  • 👨🏻‍💻 Added a styles / color / text section, referencing the var(--wp--preset--color--dark)variable.
  • ✅ My website now has the right background color and the right text color
• Fonts
  • 🎥 https://wordpress.tv/2022/09/15/block-theme-builders-choosing-using-fonts/
  • 👨🏻‍💻 Added a typography / fontFamilies section.
  • 👨🏻‍💻 Declared the “itc-avant-garde-gothic-pro”, Arial, sans-serif font family
  • ✅ My website is now displayed with an Arial font.
  • ❓ How do you include a distant font ?
  • 👨🏻‍💻 Tried to declare a font face with a source url.
  • 🧠 If you are using theme.json and trying to reference an external source it will not work. Theme.json only recognizes local URLs. You would have to wp_enqueue the font elsewhere in order to use an external host.

Plan for next time

• 👨🏻‍💻 Work on the home page

Link to the stream video

• WordPress FSE live stream#3