Sage and Full Site Editing compatibility

sage
,
1

Hey guys.

Does exist some manual that explains how to turn Sage into FSE?
I’m aware about the github.com/strarsis/sage10-fse project, but it shows several known-issues, which make me wonder if Sage is FSE compatible at all.

I walked through dozens of threads, speaking here about this subject

Sage documentation regarding Gutenberg, speaks mainly about Gutenberg, and it’s unclear (especially for a Sage newbie like me),on how to use the information presented there, and what can be done regarding FSE.

To sum it up:

  1. Are there a manual/tutorial/video that someone is aware about, regarding Sage & FSE?
  2. Besides, is SAGE compatible with FSE?

Thank you!!!

1 Like
2

Hi @neoswf,

This is a bit of a contentious subject. But FWIW, we’re using the @strarsis sage10-fse repo in two projects that are due to go into production soon. It’s good, and the issues listed on the repo readme are more FAQ / troubleshooting rather than dealbreakers.

FSE (with or without Sage) has a steeper learning curve than traditional themes in my experience.

To answer your questions:

  1. No guide / manual / tutorial that I am aware of.
  2. Yes, Sage can be compatible with FSE, and strarsis/sage10-fse works well.

But, are you sure you need Sage? If you want to make a pure FSE theme, then that can be achieved without Blade / Illuminate components. I’d definitely recommend using Bud and bud-preset-wordpress, but you could quite easily create a non-PHP FSE theme, and it would work well.

We’ve chosen to go down the hybrid Sage / FSE route for two reasons:

  • We want to be able to use ACF and log1x/acf-composer to create blocks and patterns.
  • We’re running Woocommerce, which IMO isn’t fully there yet with FSE and Gutenberg, so we need the hybrid approach of blade / template overrides.

Sage 10 + FSE is not perfect though - there are still a few ‘gaps’ in our FSE developer experience that I would love to address at some point:

  • Responsive breakpoints, and integration with Tailwind (how does it even … what)
  • Scanning Tailwind classes from block settings and customised layouts (you often end up with a big safelist)
  • Persisting templates and patterns to disk (watch out when you drop the DB :fire:)
  • Hot reloading when a template / pattern is edited, integrating with the above

Those aren’t simple things to implement as far as I can see.

This is all my own opinion, and I realise I’ve gone a little off topic here too, hopefully there’s some value in this for you.

4 Likes
3

Hey Tom, and thank you for your really detailed answer. Appreciating :pray:

It’s good, and the issues listed on the repo readme are more FAQ / troubleshooting rather than dealbreakers.

Good to know.

FSE (with or without Sage) has a steeper learning curve than traditional themes in my experience.

Already made one theme, but it was a simple blog, and I really loved the experience.
I’m a frontend developer (knows only basic php) , and SEO man. My mission now is to replace the existing theme that the site is using.

But , are you sure you need Sage? If you want to make a pure FSE theme, then that can be achieved without Blade / Illuminate components… but you could quite easily create a non-PHP FSE theme,

I was thinking on using Sage, since it coming out-of-the-box with lots of features. I could live fine with a simple theme (I must admit, what you’ve said is appealing to me), but I still learning about Sage’s advantages (together with Bedrock), since a non-PHP FSE theme, seems like a wrong approach.

Let me explain a little about my project’s demands.
Site as it is right now, suffers from a terrible performances issues, all which are related to the current theme, which was done by unexperienced team.

I have done all I could think of, refactored parts and install wp-rocket, and even though, the sites loads super fast from server’s cache, Core Web Vitals notes are extremely low. There is no way to avoid rewriting it all.

I have 15 landing pages in the site. Most content isn’t dynamic. Its actually a very static website, with a catalog which gets rebuild every night using a cron job (that calls an api). It uses only 2 templates.

but you could quite easily create a non-PHP FSE theme

Why did you say that? i’ll appreciate if you’ll be able to explain your point a little.

// Another thing I love about Sage, is its Tailwind integration. I guess it can be done by using tailpress

Thank you!

4

Sorry - I wish I could rewrite my post. It was written poorly.

Really what I’m trying to say is:

  • Sage and Sage10-FSE are very powerful, and I rate them.
  • If the lack of guides / documentation for Sage10-FSE are a dealbreaker, then it is possible to use Tailwind and the theme.json integration that Sage features, simply by using Bud on its own. npx create-bud-app will set you up with a WordPress / Tailwind frontend setup very quickly, and you can then build your theme however you like, but still have the Roots frontend developer experience.

:+1: I agree.

1 Like
5

Hi! How are you using acf-composer to create Patterns?

6

Nevermind @talss89 I Just discovered (way behind on the times here) the log1x/poet package to register block patterns, for anyone else wondering

1 Like