WordPress FSE live stream#1

Introduction

As I explained in my previous post about a new WordPress era, I’ve decided to train myself in WordPress Full Site Editing.

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

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

Part 1: Presentation

• Introduction
  • Presented myself. Jeremy, 35, WordPress professional developer for the last 12 years.
  • Highly skilled with classic WordPress, wanting to learn FSE.
  • https://twitter.com/jdmweb/status/1567616374398124032
  • https://jdmweb.com/a-new-wordpress-era/
• Presented the project’s aim
  • To rebuild jdmweb.com as an FSE project (with a block theme, and heavy use of blocks, block patterns, and template parts)
  • Learn those new concepts
  • Share my findings and learnings
  • Learn to stream

Part 2: jdmweb.com tour

• Tour of the site: https://jdmweb.com/
• Presented the main pages (home, portfolio, blog, course, about)
• Commented the use of the different blocks

Part 3: New project creation

• Presented bedrock:
  • 📖 https://roots.io/bedrock/
  • 📖 https://docs.roots.io/bedrock/master/installation/
• Presented WonderWp
  • 📖 http://wonderwp.net
  • 📖 https://github.com/wonderwp
• Followed the installation procedure
  • 👨🏻‍💻 http://wonderwp.net/Installation/Installing_WordPress_Bedrock_and_WonderWp_from_scratch.html
• 👨🏻‍💻 Created a new local environment on my local mamp server, called jdmweb2022
• ✅ Checked the local WordPress worked.

Part 4: Creating a block theme

• My main interrogation:
  • ❓How do you create a block theme vs a classic one?
• Read some documentation parts:
  • 📖 https://developer.wordpress.org/block-editor/getting-started/full-site-editing
• Watched a quick learn.wordpress.org video material:
  • 🎥 Introduction to block theme development for beginners by Sarah Snow.
• Key takeaways
  • 🧠 To create a block theme you need those files :
    • index.php
    • style.css (with meta information like classic themes)
    • templates/index.html
  • 🧠 templates/index.html is the file that activates the full site editor. It can be blank

Part 5: Creating a block theme generator for WonderWp

• WonderWp has plugin generators that help you scaffold plugins rapidly.
• Documentation:
  • 📖 http://wonderwp.net/Creating_a_plugin/Generator.html
• You can generate either a classic plugin or a custom post type one.
• I wanted to do the same for themes
• Presented my work on the classic theme generator for WonderWp:
  • 👨🏻‍💻 https://github.com/wonderwp/Generator/pull/5
• 👨🏻‍💻 Live coded a block theme generator
• ✅ Tested the generated theme in my local jdmweb2022 environment, and it worked
• 👨🏻‍💻 Pushed the block theme generator: https://github.com/wonderwp/Generator/pull/6

Part 6: Experimenting with template parts

• On my new local.jdmweb2022.com, opened the full site editor
• Went to template parts
• 👨🏻‍💻 Created a header template part
  • Added the site logo block
  • Added the navigation block
• 👨🏻‍💻 Checked in my local files to see if it was saved there: no.
• 👨🏻‍💻 Figured out it was saved in my database (the post table, with a post_type = template_part)

Plan for next time

• ❓ Is it possible to create template parts upfront?
• ❓ Best way to build a template with template parts?
• 👨🏻‍💻 Create the site pages
• 👨🏻‍💻 Experiment with the navigation block
• 👨🏻‍💻 Experiment with theme.json
  • Color management
  • Font management
• 👨🏻‍💻 Keep on working on the block theme generator