2023-12-21-posts.md 4.5 KB
title: Block Theme Migration slug: block-theme-migration description: Today I learned a decent approach to doing a multi-step migration from a static site to classic WordPress theme to a hybrid theme to a full site editing block theme. <!--- authors:
- name: David Windham title: Something Else url: https://davidawindham.com image_url: https://davidawindham.com/wp-content/themes/daw/img/opengraph_image.jpg --> tags: [] keywords: [WordPress, Gutenberg] image: https://davidawindham.com/wp-content/themes/daw/img/opengraph_image.jpg hide_table_of_contents: false draft: true ---
Today I learned a decent approach to doing a multi-step migration from a static site to classic WordPress theme to a hybrid theme to a full site editing block theme.
The notes I made along the way turned into this post so I figured I'd share for anyone interested in doing something similar. The existing site was static because I like them. They're performant and easy to maintain. I've noticed that half of the sites I have running under a content management system rarely if ever have updates or changes made to them. In that regard, I think it's just about control.
Setup
| Static 👉🏼 | Hybrid 👉🏼 | Block ✨ |
|---|---|---|
| ```sh ┌── .config(s) ├── css/ │ ├── fonts/ │ ├── lib.css │ ├── site.css │ ├── css.map │ └── site.scss ├── docs/ │ └── .pdf ├── gulpfile.js ├── img/ ├── index.html ├── js/ │ ├── lib.js │ ├── lib.js.map │ ├── scripts.js │ ├── site.js │ └── js.map ├── package.json ├── robots.txt └── sitemap.xml ``` | ```sh ┌── .configs(s) ├── css/ │ ├── fonts/ ├── docs/ ├── gulpfile.js ├── inc/ ├── img/ ├── index.php ├── js/ │ ├── lib.js │ ├── lib.js.map │ ├── scripts.js │ ├── site.js │ └── js.map ├── package.json ├── page(s).php ├── robots.txt ├── sitemap.xml └── style.css ``` | ```sh ┌── .configs(s) ├── css/ │ ├── fonts/ ├── docs/ ├── js/ ├── img/ ├── index.html ├── gulpfile.js ├── package.json ├── parts/ │ ├── footer.html │ ├── header.html │ └── page.html ├── patterns/ ├── robots.txt ├── sitemap.xml └── style.css ``` |
Full Site Editing
Notes on block theme migrations[^1]another[^2]and another^3 and another^4
Aside
Because there are already thousand of mostly shite resources floating around, I had to mostly go directly to the source documention. And since I noticed that some of it wasn't completely up to date, I've been scanning the #core-dev chat and noticed this comment:
It has come to my attention that some work that should have happened in public was being done on private p2s and other mediums. I asked for this to to stop as soon as I was aware of it. More transparency and openness will follow.
I know that building in public is a pain, "any kid off the street can leave their opinion," but that's what we do. I also used to be that kid off the street.
~ Matt Mullenweg
Notes
- https://css-tricks.com/wordpress-global-styles-reference-tables/
- https://developer.wordpress.org/news/2023/12/a-walk-through-tutorial-on-using-create-block-theme-plugin/
- https://perko.dev/blog/post/2022-02-21-understanding-how-gutenberg-saves-data
- https://github.com/WordPress/gutenberg/issues/26544
- https://developer.wordpress.org/themes/templates/template-hierarchy/#page-hierarchy
References
- Figma - https://www.figma.com/file/AlYr03vh4dVimwYwQkTdf6/Twenty-Twenty-Four?type=design&node-id=119-543&mode=design
- Something else -
[^1]: Automattic - Introducing Twenty Twenty-Four - https://automattic.design/2023/11/22/introducing-twenty-twenty-four/ [^2]: Bill Erickson - https://www.billerickson.net/hybrid-wordpress-theme-starter/