|
|
@@ -0,0 +1,102 @@
|
|
|
+---
|
|
|
+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>
|
|
|
+---
|
|
|
+
|
|
|
+#### 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/
|
|
|
+
|
|
|
+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/
|
|
|
+
|
