Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Add support for (hybrid) FSE #314

Closed
wants to merge 39 commits into from
Closed

✨ Add support for (hybrid) FSE #314

wants to merge 39 commits into from

Conversation

dsturm
Copy link
Contributor

@dsturm dsturm commented Nov 16, 2023

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 - 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 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

  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?
  4. 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

@dsturm dsturm changed the title ✨ Add support for FSE ✨ Add support for (hybrid) FSE Nov 16, 2023
@Log1x
Copy link
Member

Log1x commented Mar 18, 2024

@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
Copy link
Member

Log1x commented Mar 18, 2024

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
Copy link
Contributor Author

dsturm commented Mar 19, 2024

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

@dsturm
Copy link
Contributor Author

dsturm commented Mar 19, 2024

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants