@dsturm : Could you create a PR for this in the forked acorn
repository, that Sage 10 FSE
uses?
Edit: I just noticed that there is already a forked acorn
with some FSE adjustments:
https://github.com/zirkeldesign/acorn-fse
Maybe that one should be required in Sage 10 FSE
theme instead, until the adjustments were also merged into upstream roots/acorn
?
dsturm
November 14, 2023, 7:43am
22
Hej @strarsis ,
the mentioned repo (GitHub - zirkeldesign/acorn-fse: A Roots Acorn package, to provide FSE compatibility for Sage 10. ) is a separate acorn
package, which will be installed parallel to the origin roots/acorn
.
In this package, I tried to have a solution which support an unpatched acorn
and uses Providers to remove the original template filters and sets the modified ones to support FSE and hybrid rendering.
Since it is WIP, it currently lacks some documentation and further testing.
Any tips on this? I replaced the filterTemplateHierarchy() -function content with your suggestion, but the blade -templates still are not working. If I dump the array using your code, I get the following:
dsturm
November 14, 2023, 9:52am
24
Hej @talentreeweb ,
so, what is your current frontend output?
I didn’t mentioned, that I also had to modify the patched filterTemplateInclude
method and added a check, if an existing file is NOT a blade file:
public function filterTemplateInclude($file)
{
if (@file_exists($file)
&& ! str_contains($file, '.blade.php')
) {
return $file;
}
...
Secondly, the filterTemplateHierarchy()
method will prefer FSE template files over blade. So, if that does not fit you, you might change the array_merge()
.
dsturm
November 14, 2023, 11:18am
26
Custom templates didn’t work yet. But I think I found the solution:
public function filterTemplateHierarchy($files): array
{
$hierarchy = $this->sageFinder->locate($files);
// Extract all entries, which point to an official FSE path (e.g. templates/...)
$fse_paths = array_filter($hierarchy,
static fn ($file) => str_starts_with($file, 'templates/') || str_contains($file, 'templates/'));
$hierarchy = array_diff($hierarchy, $fse_paths);
// Extract all entries, which point to a custom blade template (e.g. template-foo.blade.php)
$custom_template = get_page_template_slug();
$custom_template_paths = [];
if ($custom_template) {
$custom_template_paths = array_filter($hierarchy,
static fn ($file) => str_contains($file, $custom_template)
);
$hierarchy = array_diff($hierarchy, $custom_template_paths);
}
// Rebuild hierarchy with original $files and FSE paths on top.
return array_merge($custom_template_paths, $files, $fse_paths, $hierarchy);
}
Could you test this? It worked for me with standard, custom FSE and custom blade templates.
Hi, Tested and it works! Thank you!
@dsturm : Related PR: Template hierarchy filter: Preserve existing paths by strarsis · Pull Request #141 · roots/acorn · GitHub
But that PR does not handle hybrid (Blade-PHP templates instead of FSE block templates) correctly.
It would be great if your acorn
fork could be merged into upstream.
dsturm
November 15, 2023, 10:43am
29
@strarsis I’d like to contribute / PR this. But I need to do some more modifications and tests, since I ran into some issues while using this with a standard sage
install.
1 Like
dsturm
November 16, 2023, 10:53am
30
I have now opened a PR to merge the changes into roots/acorn
:
roots:main
← dsturm:fse
opened 10:24AM - 16 Nov 23 UTC
While we already have a pull request (PR) for full-site editing (FSE) support by… @strarsis (#141), this PR further enhances these modifications and now supports hybrid templates (Blade-PHP and FSE block templates, currently with priority given to the latter).
### Requirements theme
To enable FSE support, the theme (`sage`) **requires** some modifications:
1. Since we use `wp_is_block_theme()` to check for FSE themes when altering the theme hierarchy, `templates/index.html` needs to exist.
2. Currently `sage` [removes theme support for FSE](https://github.com/roots/sage/blob/be5281cdd178cb1faba9d8bba8185d6f6c1c4caf/app/setup.php#L52) - we need to remove / comment out this line.
3. Because the generated CSS for blocks will be created in `wp_head()` action hook, the [current position](https://github.com/roots/sage/blob/be5281cdd178cb1faba9d8bba8185d6f6c1c4caf/index.php#L14) of the `view(...)->render()` method is too late and would result in empty styles for rendered blocks. Therefor, we need to [call it prior to `wp_head()`, store it in a temporary variable and echo it later](https://github.com/dsturm/sage/blob/5912c37dad81dcc2770b6f809f6b5ffa79ab4ac1/index.php#L6).
### Test this PR
Optionally create a new Bedrock project
```bash
composer create-project roots/bedrock
```
Use / require acorn fork and setup (minimal) prepared sage theme
```bash
# Require PR / fork
composer config repositories.acorn-fse vcs https://github.com/dsturm/acorn
composer require roots/acorn:dev-fse
# Clone new (sage) theme
cd web/app/themes
git clone -b fse https://github.com/dsturm/sage sage-fse
cd sage-fse
# Build
composer i -o && yarn && yarn build
# Activate theme
wp theme activate sage-fse
```
### Ideas
To use block patterns like `header` or `footer` in blade templates / views, I wrote [two directives](https://github.com/dsturm/sage/blob/5912c37dad81dcc2770b6f809f6b5ffa79ab4ac1/app/Providers/ThemeServiceProvider.php#L34) which are currently located in my [prepared `sage` fork](https://github.com/dsturm/sage), but should be located in `roots/acorn`:
[**@blocktemplate('template-part')**](https://github.com/dsturm/sage/blob/5912c37dad81dcc2770b6f809f6b5ffa79ab4ac1/app/Providers/ThemeServiceProvider.php#L39)
This will render the specified block part (i.e. `header`) and fallback, if FSE is not enabled.
```blade
<header class="banner wp-block-template-part site-header">
@blocktemplate('header')
<a class="brand" href="{{ home_url('/') }}">
{!! $siteName !!}
</a>
@if (has_nav_menu('primary_navigation'))
<nav class="nav-primary" aria-label="{{ wp_get_nav_menu_name('primary_navigation') }}">
{!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav', 'echo' => false]) !!}
</nav>
@endif
@endblocktemplate
</header>
```
[**@parseblocks**](https://github.com/dsturm/sage/blob/5912c37dad81dcc2770b6f809f6b5ffa79ab4ac1/app/Providers/ThemeServiceProvider.php#L36)
If FSE is supported, this will render all blocks.
```blade
@parseblocks
@endparseblocks
```
### Questions
1. Which template type should be given priority: FSE or Blade?
2. Do we need configuration for FSE options (in `config/view.php`) - like enabling/disabling FSE or setting template hierarchy priority?
3. Should we include the directives into `roots/acorn`?
5. How should we handle the FSE requirements. Should we have a `fse:init` command for acorn which will publish stubs and ensure we do not have `remove_theme_support('block-templates')`?
### Useful resources
- https://discourse.roots.io/t/full-site-editing-fse-frontend-doesnt-load-template/21574/27
- https://fullsiteediting.com/lessons/how-to-use-php-templates-in-block-themes/#h-making-sure-that-wordpress-loads-the-block-css
2 Likes