✨ Add support for (hybrid) FSE

dsturm commented 1 year ago

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:

Since we use wp_is_block_theme() to check for FSE themes when altering the theme hierarchy, templates/index.html needs to exist.
Currently sage removes theme support for FSE - we need to remove / comment out this line.
Because the generated CSS for blocks will be created in wp_head() action hook, the current position 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.

Test this PR

Optionally create a new Bedrock project

composer create-project roots/bedrock

Use / require acorn fork and setup (minimal) prepared sage theme

# 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 which are currently located in my prepared sage fork, but should be located in roots/acorn:

@blocktemplate('template-part')

This will render the specified block part (i.e. header) and fallback, if FSE is not enabled.

<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

If FSE is supported, this will render all blocks.

@parseblocks
<!-- wp:site-title {"textAlign":"center"} /-->
<!-- wp:site-tagline {"textAlign":"center"} /-->
@endparseblocks

Questions

Which template type should be given priority: FSE or Blade?
Do we need configuration for FSE options (in config/view.php) - like enabling/disabling FSE or setting template hierarchy priority?
Should we include the directives into roots/acorn?
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

Log1x commented 8 months ago

@dsturm hey sorry for the delay. i'd like to look into this soon but just want to make sure it is ok if I make changes to your branch? not sure if you're using this in prod and don't want to break anything on you.

Log1x commented 8 months ago

I've merged #141 and began to familiarize myself with this a bit.

In my testing, I am able to use templates and parts from twentytwentyfour without any issue if I remove the related blade (e.g. remove resources/views/404.blade.php and add templates/404.html).

I'm trying to understand if your additional code added to filterTemplateHierarchy is still necessary. From what I gather, it may have been more of a requirement prior to Sage#3167.

Outside of that, @QWp6t and I discussed use_fse() and Blade directives and would prefer to leave them out of Acorn for the time being. They should make a quick & easy package if someone decides to do so (or maybe Sage Directives?)

dsturm commented 8 months ago

Hey @Log1x, thanks for asking. I'll check if the latest changes in acorn and sage have made this PR irrelevant.

dsturm commented 8 months ago

@Log1x Now, as far as I can see, this PR isn't needed anymore with the latest changes in acorn and sage applied, so I'll close this and take a look, whether an acorn package should be created for the FSE helper functions and directives.

Thanks again for your tireless work!

roots / acorn