Full Site Editing (FSE) support (frontend)

[strarsis]

• I've read the guidelines for Contributing to Roots Projects
• This request isn't a duplicate of an existing issue
• I've read the docs and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse community

Description

Full Site Editing (FSE) with Sage 10 theme loads a blade template in frontend, no Website editor blocks are shown.

Steps to reproduce

1. Ensure a Sage 10 theme is present and enabled.
2. Enable Full Site Editing (FSE) support in the Sage 10 theme.
3. Add some modifications to the Website editor.
4. Add/edit a page (front page).
5. Open the front page on frontend.
   Note that the site blocks from the Website editor are not loaded, instead the default blade-based template.

Expected behavior:
Frontend shows the blocks from website editor.

Actual behavior:
Frontend doesn't show the blocks from website editor, but the default blade template instead.

Reproduces how often:
Always.

Versions

1.16.1: 2021-07-30

Additional information

Latest Gutenberg plugin 11.7.1.

The previous code for adding compatibility for Full Site Editing (FSE) doesn't work (anymore):

// Sage 10 + Gutengberg Full Site Editing (FSE) template compatibility
// @see https://discourse.roots.io/t/sage-10-block-based-theme-support/17294/2?u=strarsis
add_filter('template_include', function ($template_file) {
    global $_wp_current_template_hierarchy;
    $_wp_current_template_hierarchy = array_map('basename', $_wp_current_template_hierarchy);
    return $template_file;
}, 19);

[strarsis]

Workaround

The following workaround fixes the issue - it re-adds the original template paths so Gutenberg Full Site Editor/FSE can use the template-part files, otherwise the Blade template files are used as fallback (as they should be):

// Full Site Editing/FSE fix for Sage 10 acorn template hierarchy filters
// @see https://discourse.roots.io/t/full-site-editing-fse-frontend-doesnt-load-template/21574/5?u=strarsis

// @see vendor/roots/acorn/src/Roots/Sage/SageServiceProvider.php: bindCompatFilters
$acorn_sage_template_filters = [
    'index_template_hierarchy',
    '404_template_hierarchy',
    'archive_template_hierarchy',
    'author_template_hierarchy',
    'category_template_hierarchy',
    'tag_template_hierarchy',
    'taxonomy_template_hierarchy',
    'date_template_hierarchy',
    'home_template_hierarchy',
    'frontpage_template_hierarchy',
    'page_template_hierarchy',
    'paged_template_hierarchy',
    'search_template_hierarchy',
    'single_template_hierarchy',
    'singular_template_hierarchy',
    'attachment_template_hierarchy',
];
foreach ($acorn_sage_template_filters as $template_filter) {
    add_filter($template_filter, __NAMESPACE__ . '\\acorn_sage_fse_fix_template_path_before', 10);
    add_filter($template_filter, __NAMESPACE__ . '\\acorn_sage_fse_fix_template_path_after', 20);
}
function acorn_sage_fse_fix_template_path_before($files)
{
    global $acorn_sage_template_files_before;
    $acorn_sage_template_files_before = $files;
    return $files;
}
function acorn_sage_fse_fix_template_path_after($files)
{
    global $acorn_sage_template_files_before;
    return $acorn_sage_template_files_before + $files;
}

Fix of underlying issue

The fix to the underlying issue seems to be quite simple:
https://github.com/roots/acorn/blob/2.0.0-alpha.0/src/Roots/Acorn/Sage/Concerns/FiltersTemplates.php#L15-L18

    public function filterTemplateHierarchy($files)
    {
        return $files + [$this->sageFinder->locate($files)];
    }

Would this introduce new unintended side-effects?

Related discussion:
https://discourse.roots.io/t/full-site-editing-fse-frontend-doesnt-load-template/21574/5?u=strarsis

[retlehs]

@strarsis could you please submit a PR to acorn to make that change and we could discuss further over there?

[strarsis]

@retlehs: PR (acorn repository): #141

[strarsis]

Demo Sage 10 theme with Full Site Editing (FSE) / Block Templates and Partials, see this post: #141 (comment)

[strarsis]

Somewhere I read about the idea to use Blade-PHP as Full Site Editing Block (FSE) Block Templates and
Block Partials (but can't find it right now).
That means that Blade-PHP templates are used, compiled and then used for Block Templates and Block Partials.
From the current state of WordPress core and Gutenberg Plugin template handling, it appears that this may be possible.

[QWp6t]

Thanks for taking the lead on this feature strarsis. We finally tested and got your PR merged.