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.
- 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:
- Presented WonderWp
- Followed the installation procedure
- 👨🏻💻 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:
- 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
- 🧠 To create a block theme you need those files :
Part 5: Creating a block theme generator for WonderWp
- WonderWp has plugin generators that help you scaffold plugins rapidly.
- Documentation:
- 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:
- 👨🏻💻 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
If you found this article interesting, I encourage you to follow my work via the form below. I mainly write about production teams' optimization, processes, management, and the tooling around those subjects. I’m even preparing an online course to concentrate all of this for you in a unique place. I hope it can help you get the very best out of your development team.
Follow my work
Follow me to get notified of new posts, resources, and online courses I create.