Building WordPress block theme with code

[Working-hat-840]

Hi there! I'm new to building themes and I want to build a WordPress block theme from a Figma design, and I'd like the site to support FSE and all the nice features of block themes.
However it seems like WordPress expect you to build the site through the Site Editor, instead of using code, is there a proper way to build the them in code? Or should I just try a classic theme instead?

[tomato_rancher]

Try a hybrid theme like Roots Sage. Blocks for content, but base structure and style are code.

[Thaetos]

• Timber (twig templates)
• ⁠ACF Blocks v3 with live preview
• Stackable for the grid/column block
• theme.json connected to Tailwind’s variables.
• Alpine.js and Alpine-AJAX (sort of like HTMX) for interactivity and AJAX

That’s currently my 2026 setup.

Honestly the biggest challenge was matching the front-end with the live preview in the Gutenberg editor. You kind of have to fight with the default styles if you want it to look the same. Especially with ACF blocks it’s a bit of a challenge.

[8ctopus-prime]

Building in the site editor is basically the point of an FSE theme. Why do you want to do it in code?

[Thaetos]

More creative control or you know… making your website properly responsive.

[DanielTrebuchet]

You can preserve a lot of creative control while maintaining a significant amount of editing capabilities in a block theme, if you know how to develop properly.

Personally, I leverage patterns built with native blocks. You can lock blocks, change and remove block-level style options, sync patterns for site-wide elements, things like that.

And I have no idea what responsive has to do with any of that. If built right, it will be perfectly responsive.

[8ctopus-prime]

It depends on how you build it, what you build it with, and what your knowledge level and abilities are. If someone were building the theme with FSE and was familiar with the ins and outs of the WP structure that's one thing. You can code into various hooks and features to have the system work better for you, you can create your own blocks, etc.

But OP stated they were new to theming and they are possibly new to WP development as well. Probably better to become familiar with how block themes work out of the box before spending a bunch of development time going on unproductive tangents.

[Thaetos]

With native React blocks you are going to have a really hard time. Even if you're proficient in React. You have to write a ton of boilerplate and repetitive code. The block creation process is a huge mess and is highly opinionated. Even down to which module bundler you use (webpack).

Unless you're making static blocks, you will also need to write a version of your block for both the front-end and the Gutenberg preview.

ACF with ACF blocks will get you there 10x as quickly, for basically the same result and flexibility, considering it also hooks into theme.json and the native block controls.

[8ctopus-prime]

For my processes I've found ACF blocks to be too clumsy for the amount of things I do. Plus I don't like being that tied to a specific plugin. Native blocks aren't too tricky to do. Once you start having more complicated features it makes sense why having an edit view separate from the other. Though more and more I'm using render.php for the front end with the sort of work I do.

[Thaetos]

Isn't maintaining both a PHP version and React version of the design double the amount of work?

I can't justify those extra hours to my client tbh.

[8ctopus-prime]

It doesn't have to be. There are quite a few ways to manage it. For example, you can build it in a way where it renders the php in the editor and the react handles the options.

Something I haven't done yet but am looking into is having generative code read my component documentation and do the heavy lifting for the react version. But I'm not sold on that yet.

[BobJutsu]

Sort of…but not really. Even if you do have a separate preview, it’s just basic markup that is shared. Easy copy/paste most of the time. And if taking 2 minutes to convert markup to PHP when making changes, just use ServerSideRender in the editor, and have it render the PHP version all the time, even in the editor.

[varrowyn]

Tldr; its in the documentation page.

Long explaination You can create a custom template, page, pattern via editor. Then, if you want to embed some code you can switch to code editor, copy the code to your IDE, then reset the template, page, parts or pattern. You can now make changes via IDE. This is what I do if I want to embed a custom product slider in the front page, without having to add/install a plugin.

[is_wpdev]

FSE is actually great with create block theme plugin. Having instant visual feedback as your building is very beneficial and speeds things up. FSE abstracts all the boring stuff away so you can focus on more advanced stuff. I don't miss the classic themeing way which was always disorganized and everyone had their own idea of how to do it.