---
title: Hybrid Block Theme
slug: hybrid-block
description: Today I Learned
<!--- 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: true
draft: true
---

Today I finalized 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. 

#### Static

The 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 made to them.

```sh
┌── .configs
├── css/
│   ├── fonts/icons/
│   ├── library.css
│   ├── css.scss
│   ├── site.css
│   └── site.css.map
├── docs/
│   └── .pdf
├── js/
│   ├── library.js
│   ├── library.js.map
│   ├── scripts.js
│   ├── site.js
│   └── site.js.map
├── img/
├── index.html
├── gulpfile.js
├── package.json
├── robots.txt
└── sitemap.xml

```


#### Hybrid

The hybrid site has

```sh
┌── .configs
├── css/
│   ├── fonts/
├── docs/
├── js/
├── img/
├── index.html
├── gulpfile.js
├── package.json
├── robots.txt
├── sitemap.xml
└── style.css

```


#### Block with 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/