---
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.

<!--truncate-->

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

<table>
<tr>
<th>Static 👉🏼</th>
<th>Hybrid 👉🏼</th>
<th>Block ✨</th>
</tr>
<tr>
<td>

```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
```
</td>
<td>

```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

```

</td>
<td>

```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

```
</td>
</tr>
</table>

### 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.
<div style={{display: 'flex',  justifyContent:'end', alignItems:'center', marginBottom:'20px'}}> ~ Matt Mullenweg</div>

![](/img/block-theme_matt.png)
<div style={{display: 'flex',  justifyContent:'center', alignItems:'center', fontSize:'small', marginBottom:'20px'}}>Screenshot from Slack</div>


---
#### 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

1. Figma - https://www.figma.com/file/AlYr03vh4dVimwYwQkTdf6/Twenty-Twenty-Four?type=design&node-id=119-543&mode=design
2. 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/
[^3]: https://developer.wordpress.org/block-editor/explanations/architecture/styles/
[^4]: https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/