Open Log1x opened 5 months ago
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.
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 aniframe
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?
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.
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?
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
The
bud.config.js
needs to generate the propertheme.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.
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
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.
π
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:It currently adds:
acorn fse:init
command to handle enablingblock-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 setsimportant
to the.editor-styles-wrapper
class as well as extends your defaulttailwind.config.js
config as apreset
:and then in
editor.css
:and then just have
editor.css
enqueue the way it does out of the box in Sage withenqueue_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.