wispyco
February 20, 2024, 6:09pm
1
I am not to familiar with blocks in Gutenberg yet, but I have been able to edit the default ones in scripts/editor
I am wondering if there is a Radicle type way or other recommended way to create patterns from blocks.
As radicle is based on/compatible with Sage, this Sage 10 FSE example could be helpful:
wispyco
February 26, 2024, 7:13pm
3
Does this work with Radicle theme configuration. I am not sure it meets the requirements in this repo you linked
# Requirements
A patched roots/acorn package is used by the theme as theme runtime dependency (in theme composer.json) which loader preserves the block template paths.
remove_theme_support('block-templates') must be absent, as FSE will not work otherwise (important).
templates/ directory, index.html and theme.json (see the FSE-specific theme files below).
Correct, the patched acorn package is important, then remove_theme_support('block-templates') must be absent and the templates/index.html and theme.json must be present in the theme.
wispyco
February 29, 2024, 6:53pm
5
Do I need to add this entire block to the composer.json?
"repositories": [
{
"url": "https://github.com/strarsis/acorn",
"type": "vcs"
}
],
"require": {
"php": "^8.0",
"roots/acorn": "dev-patch-1"
},
Yes, or alternatively use this other PR that also fixes the issue but has some improvements:
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
Or the one from the Sage 10 FSE sample as you posted above:https://github.com/strarsis/sage10-fse/blob/e7bc7db0bd8b4b8876aca7b521d8c4b970c9b876/composer.json#L41-L50
