WordPress FSE live stream#3

ā†³ Colors and fonts in theme.json
Posted in Gutenberg, the 14/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 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