Gutenberg + Sage project Structure

Can you advise or share your experience on how best to organize Sage + Gutenberg native. Sage is very clever in separating logic from views, but what about when I use npx @wordpress/create-block ? This creates a separate block containing the template and src files. It turns out that I need to manually separate these files into different folders, or is there something more advanced? Thanks.

This Sage 10 Full Site Editing (FSE) example repository may be helpful, also check out the README (which is different!):

I should also add block-patterns, which proved very useful in my first full FSE-using theme project.
Also the handling of font sizes, font families, colors - and variables in general using the theme.json and content width (alignwide/alignfull techniques and overrides) are useful. When I got more time I should add that to the readme, too.

This approach is hybrid FSE (though I used block templates for basically everything, except for some plugins that still use classic pages), even WooCommerce can be used in FSE, albeit with some compromises (legacy blocks).

I found this Full Site Editing guide very useful: https://fullsiteediting.com/

1 Like

Thank you for this wonderful example of a clean theme and for the link to the FSE guide. But I still can’t figure out how best to organize a project with Sage + Custom blocks and It looks like the use FSE doesn’t change much. I will try to explain with an example.
For example, I want to create my own custom gutenberg block, something like a to-do list with react. I create a folder where I will store all my custom theme blocks then I use wordpress/create-block this will create me a start block with everything I need including a view.
My question is that - I can probably use this approach and it will work, but in this case it turns out that for blocks I store views together with block files (component approach), and for everything else I separate logic and views. Which seems a little awkward to me.

This may seem like a bit of a far-fetched question, but it seems to me that it loses a lot of the benefit of using Sage.

Personally, I don’t think that blocks should live within your WordPress theme. I build them out as either plugins or mu-plugins.

You should be able to change themes without worrying about blocks no longer being registered. You should be able to share blocks between projects by creating them as standalone plugins (or grouped within a single plugin).

That being said, I also don’t use the Create Block scaffolding tool. We’ve been making some updates to Clover (available to our GitHub Sponsors) where you can see how we recommend building out functionality like this separate from your theme.

2 Likes