roots/acorn-fse-helper

Bootstrap FSE support in Acorn-based WordPress themes.

Maintainers

Package info

github.com/roots/acorn-fse-helper

Type:package

pkg:composer/roots/acorn-fse-helper

Fund package maintenance!

roots

Statistics

Installs: 27 712

Dependents: 0

Suggesters: 0

Stars: 16

Open Issues: 3

Security

Advisories: 0

Aikido package health analysis

v1.0.3 2025-09-26 10:07 UTC

Requires

  • php: >=8.1

Requires (Dev)

MIT 129640bc40f1bfbaef34ef2e623c922b39a55a0e

This package is auto-updated.

Last update: 2026-03-21 17:31:14 UTC

README

Latest Stable Version Packagist Downloads Build Status Follow Roots Sponsor Roots

Acorn FSE Helper provides an easy way to initialize and work with block templates in themes powered by Acorn.

Support us

Roots is an independent open source org, supported only by developers like you. Your sponsorship funds WP Packages and the entire Roots ecosystem, and keeps them independent. Support us by purchasing Radicle or sponsoring us on GitHub — sponsors get access to our private Discord.

Requirements

Installation

Install via Composer:

$ composer require roots/acorn-fse-helper

Getting Started

Once installed, begin by initializing full-site editing in your theme using Acorn's CLI:

$ wp acorn fse:init

Initializing ensures your current activated theme supports block-templates as well as provides you with the option to publish initial stubs to get started with.

Usage

Once initialized, any block templates located in templates/ will be given priority over existing Blade views.

Blade Directives

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.

@blocks

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 -->
@endblocks

@blockpart

The @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'])

Vite Asset Integration

Acorn FSE Helper can automatically inject Vite assets (CSS and JavaScript) into the <head> of your FSE theme.

To enable this feature:

  1. Publish the configuration file:

    $ wp acorn vendor:publish --tag=fse-config

  2. Enable Vite asset injection in config/fse.php:

    'vite_enabled' => true,

By default, it includes:

  • resources/css/app.css
  • resources/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',
    ];
});

Community

Keep track of development and community news.