06 Implement backend full site editing block based theme and editorial workflow

[victorkane]

Once we have an initial functioning back end with initial legacy migration completed (#5) , we need to set up an initial block-based full site editing (FSE) to allow for wysiwyg content editing.

Then we can proceed to implement initial front end Frontity app (awebfactory/frontity-awf#1, awebfactory/frontity-awf#4) and others, like an Eleventy SSG and Next.js hybrid SSG based sites, various mobile apps, etc.) which consume the back end.

So we'll initially choose an experimental FSE block based theme suitable for this project, and get it going quickly; and implement that initially at least in Frontity (awebfactory/frontity-awf#4) ourselves.

Later we may make our own block based fse theme for Gutenberg and re-implement in Frontity, Eleventy, Next, etc., once Gutenberg FSE is more stable and our experience with that environment grows.

[victorkane]

Select suitable experimental theme

Options

We could choose from among WordPress/theme-experiments.

One of these is wonderfully documented in the author's online fullediting course and repo carolinan / fullsiteediting: Armando. It also has many features. There is a review here: Armando WordPress Theme Provides Insight Into the Current State of Full Site Editing.

Carolina Nymark's site Full Site Editing is the best place to start for all of this. Especially the Full site editing for theme developers course.

Or Block based Bosco which has made its way to the WordPress Theme Directory. See review: Block-Based Bosco, Second Full-Site Editing Theme Lands in the WordPress Directory

See course by author of Block Based Bosco, Kjell Reigstad, Building Block-Based Themes. How To Create A Theme For Full-Site Editing In As Little As A Week. (... even if you’re not familiar with Gutenberg)

Also reviewed by WPTavern is the Hansen Theme: Build a Full WordPress Site via Block Patterns With the Hansen Theme.

Resources

• Developer Documentation. Creating a block-based theme
• Full-Site-Editing – the Ultimate Resource List
  • See key resources listed at Full-Site-Editing – the Ultimate Resource List's Making Themes for Full-Site Editing
• Themeshaper FSE tutorials
• Course by author of Block Based Bosco Building Block-Based Themes. How To Create A Theme For Full-Site Editing In As Little As A Week. (... even if you’re not familiar with Gutenberg)
• Kjell Reigstad's Video Introduction to Block-based Themes
• Fränk Klein's What I Learned Building a Full-Site Editing Theme (Last updated: 16/11/2020)
• Imran Sayed's Block Based Themes Development | Full Site Editing In WordPress | FSE | TT1 | Experimental (8 videos, last updated on Feb 28, 2021)

Decision: Create our own starter theme using the Gutenberg theme experiments command-line generator

• Install the Gutenberg plugin and activate it.
• Clone WordPress / theme-experiments into ./wp-content/themes
• Generate your own starter theme

  cd wp-content/themes/theme-experiments
  php new-empty-theme.php

• Activate it
• Follow available tutorials, demos and howto's listed above to basically find a workflow path and port in a first version of what is to be AWebFactory's existing theme.

[victorkane]

Steps to port initial version of AWebFactory theme

We'll do this the Gutenberg fun way: just get it done interactively, then export and enshrine in theme (resetting to theme settings and testing at each step to make sure we got everything).

Here's what we just did based on all of the above.

Initial steps to support custom fonts

• Go to majodev / google-webfonts-helper and click on Google Webfonts Helper hosted on Heroku
• Select Crete Round
  • select latin charsets
  • select desired styles
  • select Best Support
  • leave font folder prefix as default ../fonts/
  • download fonts
  • download css
• Add additional fonts in the same way if desired
• Add fonts to theme assets fonts folder
• Add css to theme assets css folder
• Add support for both front and editor in functions.php
• Initial edit to experimental-theme-json, block-templates and block-template-parts in order to use custom theme fonts.
• Commit [feat(backend fse block based theme): add initial support for custom fonts]

Set up global styles

• We'll respect the basic legacy layout, navigation and styling as a starting point (as per original design which was never completely followed, but can be now due to how easy Gutenberg makes things).
• Implement the designer's
• Let's set up some design pseudo-code to outline what templates and template parts we'll be implementing
• Implement templates and template parts
• Add any necessary styling to both editor and front

[victorkane]

Note: We are pivoting to block ready theme until WordPress full site editing is production ready, from this issue to 06 Implement backend advanced block ready theme and editorial workflow #7. Our backend CMS and content REST API is now to be based on the very advanced block ready (but not full site editing block based) Michelle theme.

• Work up till now saved on branch fse-pure
• Commit chore(awf-blocks pure fse theme): for #7 stop tracking and remove fse block based theme
• Commit feat(awf-block-ready) for #7 initial commit as block ready Michelle child theme
• Work continues on main branch as of this commit

In this way we will be able to more quickly set up our still headless WordPress site, and when the time is ripe accompany the vanguard of the WordPress community in migrating to full site editing in either WordPress 5.8 or WordPress 5.9. (and have a blog to do it with after having paralyzed it in 2015 due to apocalyptic industry "growing" pains)