Acorn FSE Helper provides an easy way to initialize and work with block templates in themes powered by Acorn.
We're dedicated to pushing modern WordPress development forward through our open source projects, and we need your support to keep building. You can support our work by purchasing Radicle, our recommended WordPress stack, or by sponsoring us on GitHub. Every contribution directly helps us create better tools for the WordPress ecosystem.
Install via Composer:
$ composer require roots/acorn-fse-helperOnce installed, begin by initializing full-site editing in your theme using Acorn's CLI:
$ wp acorn fse:initInitializing ensures your current activated theme supports block-templates as well as provides you with the option to publish initial stubs to get started with.
Once initialized, any block templates located in templates/ will be given priority over existing Blade views.
To assist with hybrid theme development, Acorn FSE Helper includes a few useful Blade directives out of the box for working with blocks inside of views.
The @blocks directive allows you to render raw block markup inside of a view using do_blocks():
@blocks
<!-- wp:paragraph {"align":"center"} -->
<p>Lorem ipsum...</p>
<!-- /wp:paragraph -->
@endblocksThe @blockpart directive provides a convenient way to render block template parts inside of your views using block_template_part():
@blockpart('header')To render multiple template parts at once, you may pass an array in the order you wish them to be rendered in:
@blockpart(['header', 'footer'])Acorn FSE Helper can automatically inject Vite assets (CSS and JavaScript) into the <head> of your FSE theme.
To enable this feature:
-
Publish the configuration file:
$ wp acorn vendor:publish --tag=fse-config
-
Enable Vite asset injection in
config/fse.php:'vite_enabled' => true,
By default, it includes:
resources/css/app.cssresources/js/app.js
You can customize the entry points using the acorn/fse/vite_entrypoints filter:
add_filter('acorn/fse/vite_entrypoints', function ($entryPoints) {
return [
'resources/css/app.css',
'resources/css/editor.css',
'resources/js/app.js',
'resources/js/custom.js',
];
});Keep track of development and community news.
- Join us on Discord by sponsoring us on GitHub
- Join us on Roots Discourse
- Follow @rootswp on Twitter
- Follow the Roots Blog
- Subscribe to the Roots Newsletter