Add support for Full Site Editing (FSE) themes

[bobbingwide]

Full Site Editing ( FSE ) is planned for some time in 2021 - now 25th January 2022.

Since October 2020 I've been developing my own FSE theme ( Fizzie ). This was primarily to document the blocks that are available to FSE themes. There were 23 of them in Gutenberg 9.2.0.

Now I want to be to document the templates and template parts implemented in Full Site Editing themes. There may be many different component templates and template parts implemented in a theme.

I don't want to have to create a CPT entry for each component but I'd like to be able to list them and to display the HTML source and other relevant information.

Themes that I was aware of:

Theme	Templates	Template parts	Experimental-theme.json ?
Armando	6	9	Yes
Block-Based Bosco	3	4	Yes
Fizzie	15	26	Yes
Q	3	2	Yes
TT1 blocks	5	2	Yes
twentytwenty-blocks	1	2	Yes
twentynineteen-blocks	2	2	No

For a more up to date list see:

• https://blocks.wp-a2z.org/2021/12/19/fse-theme-summary/
• https://wordpress.org/themes/tags/full-site-editing/

Requirements

• To catalogue known FSE themes
• To summarise the theme's capabilities
• To be able to see the implementation of each FSE theme: templates and template parts
• Download links

Proposed solution

• [x] Update oik-themes to be able to display the templates and template parts

• [x] Dynamic solution working off the file system.

• [x] Update [oikth_download] to support downloading of FSE themes from wordpress.org or GitHub

• [x] Summary table of themes and their implementation - the table above.

• [ ] Analysis of the number of blocks that are styled and/or have variations

• [ ] Ability to detect& report custom blocks and/or block overrides

• [x] Summary of block patterns

Notes:

The experimental-theme.json file already has some support for identifying the area in which a template part may be used.

[bobbingwide]

Update [oikth_download] to support downloading of FSE themes from wordpress.org or GitHub

The logic needs to be improved to support downloading of an oik theme, where the version is available from oik-plugins. Meanwhile, for ThisIs... I have added a File block that achieves the same thing.

[bobbingwide]

It appears there are new folders for block theme templates and template parts. See https://github.com/WordPress/gutenberg/pull/36647 and the function get_block_theme_folders()

Was	Now
block-templates	templates
block-template-parts	parts

Need to:

1. Cater for this when finding templates and template parts
2. Review existing themes. Do they need changing?

[bobbingwide]

Summary of block patterns

The Twenty Twenty-Two theme includes 66 patterns implemented in inc/patterns as PHP files Each file returns an array consisting of:

Field	Content
title	Translatable title of the pattern
categories	array of categories for the pattern
blockTypes	array of block types - not sure why
content	HTML for the pattern with translatable strings wrapped in esc_html__()

The current internationalization / localization solution for Gutenberg implements patterns in PHP in order to enable extraction of the translatable strings. No one's yet looked at my internationalization proposal.

[bobbingwide]

The current internationalization / localization solution for Gutenberg implements patterns in PHP in order to enable extraction of the translatable strings.

These 66 patterns are loaded on init. This seems an unnecessary overhead if they're not being used on the front end. So how much is this overhead in terms of server execution time?

[bobbingwide]

Complete the table later.

There are now 31 WordPress FSE themes. These have been catalogued in blocks.wp-a2z.org/oik-themes along with Twenty Twenty Two, which is still a GitHub repo.

[bobbingwide]

Summary table of themes and their implementation - the table above.

See https://blocks.wp-a2z.org/2021/12/19/fse-theme-summary/

[bobbingwide]

Summary of block patterns

This is the next task to work on.

[bobbingwide]

Summary of block patterns

• Approx 50% of themes offer patterns
• For most of these themes the patterns are stored in a patterns subdirectory.
• There isn't a standard yet; some themes use block-patterns.
• Some themes store them under an inc folder
• Others deliver them from one of more subdirectory, depending on pattern category
• A few load them directly from a single PHP file

As with templates and template parts the files can easily be listed and displayed in an accordion under a Patterns tab. The PHP files can be displayed in the same way that the templates HTML files are displayed - plain source escaped using esc_html().

Theme	Patterns folder/file
Aino	inc/patterns/free
Alara	inc/patterns
Bricksy	inc/patterns
Clove	inc/block-patterns.php
Cormorant	inc/block-patterns/cta
Emulsion	block-patterns
Geologist	inc/patterns
Hansen	inc/block-patterns.php
Octane	block-patterns/full-page
Ona	inc/patterns
Quadrat	inc/patterns, sass/block-patterns
Tove	inc/block-patterns/* 7 subfolders
Twentytwentytwo	inc/patterns
Videomaler	inc/patterns
Wecodeart	it's complicated!
Wowmall	lib/gutenberg/block-patterns 6 subfolders

[bobbingwide]

It would be nice to be able to store and display post meta data containing the count of template, template parts and patterns

Field	Contains
_oikth_templates	Number of templates
_oikth_template_parts	Number of tempate parts
_oikth_patterns	Number of patterns

The values would be displayed in the tabs. They would either be updated automatically whenever a theme is updated or would be implemented as virtual fields

[bobbingwide]

The Accordion display used in the Templates, Template parts and Patterns tabs should be improved to use <detail> and <summary> tags. See https://github.com/bobbingwide/oik/issues/211

This will require changes in includes/class-oik-themes-content.php and, for cached patterns, the equivalent logic in oik-patterns.