Learning Gutenberg – post #1

As an old dev, I’m quite familiar with the “legacy” way of creating PHP WordPress templates, but not at all with the new Gutenberg way.

My goal is to understand WordPress Gutenberg themes creation in 2025 (starting from scratch), and to make sure I don’t forget things in a week, I will document my learning here.

During the last holiday season I’ve been using articles, YouTube videos and AI to get to understand this “new” (not so much, actually) way of developing themes for WordPress, and the best resource I could find so far seems to be fullsiteediting.com which also has a promising theme generator.

Anyway, the first thing I learned is that “starter” themes like underscores are not recommended. You could use them if you wanted to, but they’re legacy. So no underscores.

This brings me to the second thing i learned, the Create Block Theme plugin is what you should use to create a starter blank theme (or the theme generator I mentioned before, but let’s stick to the official plugin for the moment)

The third thing I learned is that the anatomy of a WordPress theme is now completely different from what I was used to:

The HTML files contain a mix of markup and comments (instead of plain PHP like before), and they will be then converted to PHP by the WordPress engine (and yes the inline CSS is ugly).

So, if you want to create new templates, you will either write them this way, or you will create them in the WordPress editor, save them, and find them in your theme files.

Another cool thing you can do with Gutenberg is to style the admin edit section to be similar to the actual result

Finally, I learnt how to create a pattern.

You go to the editor, and create a pattern you like, for example a header with a CTA. Then within the Gutenberg editor, you copy the blocks

Then in your code editor you will create a file in the patterns directory (like, patterns/my-cta.php) and paste the blocks you copied, while adding the meta information needed to find the pattern in the editor.
Note: If you add the "templateLock": "contentOnly" in the group definition in the pattern, the pattern cannot be modified)

This pattern will then be available in the builder, and it can be drag’n dropped in your post.