💡 Initial Feedback

[Log1x]

👋

I just made Acorn FSE Helper public and I'm looking for anyone interested in FSE to check it out and give feedback on a fresh Sage 10 install before we tag a release.

The README has instructions but you will have to use dev-main for the moment:

# Make sure Acorn is updated to v4.1.1
$ composer require roots/acorn

# Install Acorn FSE Helper
$ composer require roots/acorn-fse-helper:dev-main

It currently adds:

• An acorn fse:init command to handle enabling block-template theme support and publishing some initial stubs based on @strarsis's sage10-fse fork.
• @blocks and @blockpart Blade directives based on the directives proposed by @dsturm in acorn#314.

It is otherwise pretty simple – the only thing I think missing from strarsis's fork is asset handling.

One thing I'm curious about (cc: @strarsis) is what the advantages are using add_editor_style and the like? I feel like if you're using Tailwind, you can take advantage of it's @config directive like so (even for non-FSE):

Create a second Tailwind config called tailwind.editor.js that sets important to the .editor-styles-wrapper class as well as extends your default tailwind.config.js config as a preset:

module.exports = {
  important: '.editor-styles-wrapper',
  presets: [require('./tailwind.config')],
}

and then in editor.css:

@config '../../tailwind.editor.js';

@import 'app.css';

and then just have editor.css enqueue the way it does out of the box in Sage with enqueue_block_editor_assets.

Is anyone aware of any immediate downside to this method outside of it being specific to Tailwind?

I do not personally use FSE and am just trying to help – so please let me know if I overlooked anything or if anyone has any input/ideas.

[strarsis]

what the advantages are using add_editor_style

The reason why add_editor_style is better (IMHO) is that the style-isolation mechanism can (and will) change. In Gutenberg in site editor, a new mechanism is already used with an iframe element, without using CSS post-processing (prefixing the selectors with .editor-styles-wrapper). Using a dedicated method makes the whole style isolation transparent.

[Log1x]

The reason why add_editor_style is better (IMHO) is that the style-isolation mechanism can (and will) change. In Gutenberg in site editor, a new mechanism is already used with an iframe element

Ahh, that's fair.

So the main thing is handling app.css here and then below that is related to bud-wp-editor-query which if we want I can make an opt-in / confirmation.

Otherwise, I want to automate all of this in acorn fse:init ideally – am I missing anything else?

[strarsis]

The block templates, parts and patterns are already included, add_editor_styles, bud-wp-editor-query are then also handled. So for now everything FSE-related is covered I think.

[Log1x]

The block templates, parts and patterns are already included, add_editor_styles, bud-wp-editor-query are then also handled. So for now everything FSE-related is covered I think.

Nice, ok. I think step 1 then is to get a new method added to bundle() like bundle('app')->editorStyles() to make adding the editor styles more efficient.

Once that is done, I will automate the process of adding it to setup.php when running acorn fse:init and look into automating installation/boilerplate for bud-wp-editor-query as an opt-in as well.

Outside of that, do the templates/stubs look ok?

[strarsis]

The bud.config.js needs to generate the proper theme.json for registering template parts and custom templates (for the proper caption/translation): https://github.com/strarsis/sage10-fse/blob/master/bud.config.js#L79-L105

[Log1x]

The bud.config.js needs to generate the proper theme.json for registering template parts and custom templates (for the proper caption/translation): https://github.com/strarsis/sage10-fse/blob/master/bud.config.js#L79-L105

Hmm, that seems a little blah to have to manually configure/maintain...but I'm not seeing a way to register them otherwise with PHP. I imagine it's possible though, I'd have to look into where it's getting parsed in theme.json in WP core unless you have any ideas.

[Log1x]

bundle()->editorStyles() has been merged into Acorn and #3 adds support for automatically adding it to setup.php (or Radicle's service provider) when running acorn fse:init if it doesn't already exist.

With any luck, everything should be pretty automated/seamless at the moment after running acorn fse:init and compiling Bud on a fresh vanilla Sage 10 install.

# Make sure Acorn is updated to v4.2.0
$ composer require roots/acorn

# Install Acorn FSE Helper
$ composer require roots/acorn-fse-helper

[stevencamilleri-g2m]

Has anyone had success with this on a Roots Radicle setup? I'm trying to make parts, patterns and templates available globally for all themes by defining them within the root directory.

However the WP_Theme class only fetches and loads the parts, patterns and templates included within the active theme directory, it ignores the one in the root directory which are set up with this helper. I managed to do this with symbolic links redirecting the folders within the active theme to the root directory but I would like to take a different approach to override the core functionality with Acorn instead to rely less on symlinks.

The setup I'm trying to achieve is the following:

/ (Root Directory)
├── templates/                 # Templates directory
│   ├── single.html
│   ├── archive.html
│   ├── header.html
│   ├── footer.html
│   └── ...                   
├── parts/                     # Block parts
│   ├── header.html
│   ├── footer.html
│   └── ...
├── patterns/                  # Block patterns
│   ├── call-to-action.html
│   ├── hero.html
│   └── ...
└── public/
    └── content/
        └── themes/
            └── my-theme/
                ├── index.php 
                ├── style.css
                └── theme.json # Theme configuration

Keeping in mind that currently WP detects whether the active theme supports FSE with is_block_theme(), which looks for an index.html file within the relative theme directory’s template folder with get_file_path(). So without that templates folder within the active theme directory FSE will not be enabled.