• Fizzie – an experimental Full Site Editing theme

    Fizzie screenshot

    Phase 2 of the development of the Gutenberg block editor introduces Full Site Editing ( FSE ). In order to document the 23 new blocks, I felt I had to embrace Full Site Editing and develop my own experimental theme, which I chose to call Fizzie. The requirements of Fizzie are:

    1. Implement Full Site Editing.
    2. Same look and feel as the Genesis-a2z theme.
    3. Support documentation / demonstration of each of the new blocks in Gutenberg.
    4. Find out what bits are missing from and/or not working on Gutenberg.
    5. Implement on blocks.wp-a2z.org, when stable.
    What is Full Site Editing?

    A tour of the Fizzie theme

    The audio and video extracts are taken from a Zoom call I had with Andrew Leonard ( WordPress Portsmouth Meetup member and Ferns specialist ) where I tried to explain how I approached the development of my experimental Full Site Editing theme. It was the second conversation we’d had about FSE. I’d previously introduced him to it through Carolina Nymark’s tutorials in fullsiteediting.com and using the experimental theme Twenty Twenty-One Blocks.

    In this video I discuss the requirements of the Fizzie theme and demonstrate the solution to date. Video recorded on 22nd November 2020.

    Requirements and solution to date

    What is a template?

    FSE themes are implemented using templates and template parts. These are written as .html files, as opposed to .php files.

    In this video I explain how WordPress chooses template files then demonstrate some of the templates and template parts I’ve developed for Fizzie.

    WordPress template hierarchy. FSE front-page.html and some template parts
    front-page.html<div class="WP_DEBUG">front-page.html</div>
    <!-- wp:template-part {"slug":"header","theme":"fizzie"} /-->
    <!-- wp:template-part {"slug":"page-content","theme":"fizzie"} /-->
    <!-- wp:template-part {"slug":"search","theme":"fizzie"} /-->
    <!-- wp:template-part {"slug":"page-footer","theme":"fizzie"} /-->
    <!-- wp:template-part {"slug":"footer","theme":"fizzie"} /-->
    <!-- wp:template-part {"slug":"footer-menu","theme":"fizzie", "className": "footer-menu" } /-->

    In the next video we look at the blog page implemented as home.html which uses a query-loop to display the posts and also query-pagination to allow the visitor to see all the posts. I also use the Site Editor (beta) to set the Site logo, which appears both in the header and the footer.

    home-query.html template part used in home.html to display blog posts.  <!-- wp:query-loop -->
                <!-- wp:group -->
                <div class="wp-block-group"><div class="wp-block-group__inner-container">
                    <!-- wp:post-title { "isLink": true } /-->
                    <!-- wp:post-featured-image {"isLink":true} /-->
                    <!-- wp:post-excerpt {"moreText":"more"} /-->
                    <!-- wp:post-hierarchical-terms {"term":"category"} /-->
                    </div></div>
                <!-- /wp:group -->
        <!-- wp:template-part { "slug": "metadates", "theme":"fizzie" } /-->
        <!-- wp:spacer {"height":39} -->
                <div style="height:39px" aria-hidden="true" class="wp-block-spacer"></div>
                <!-- /wp:spacer -->
                <!-- /wp:query-loop -->
    <!-- wp:query-pagination /-->

    WordPress FSE theme development processes

    How do you get started?

    WordPress doesn’t provide a “Create a new theme” button. You have to start from scratch or copy an existing FSE theme and change it.

    A brand new Full Site Editing theme won’t break your content, but until you’ve implemented a few templates, you won’t be able to see or do much with it on the front end.

    HM

    If you want to start from scratch, as I did, then follow the official WordPress block based themes tutorial to create a FSE theme. See and read about how I fared at bobbingwide/fizzie#1.

    If you want to start with an existing FSE theme, you might wish to choose one of the following.

    Theme development should be done in a development environment. If you want to change the name of the theme you’ve downloaded you’ll have to edit each of the templates and template parts to update the value of the "theme" attribute to your new theme name. You’ll also want to update style.css, and change the function prefix used in functions.php.

    Note: FSE doesn’t yet support child themes.

    You don’t have to start with an empty site, nor do you need to deactivate your plugins.

    How do you construct templates?

    There are three methods which you can mix and match to your preference.

    1. Edit the .html files in a text editor or IDE.
    2. Edit templates and template parts in the Appearance menu.
    3. Use the Site Editor (beta).

    How do I construct templates?

    At present, I mostly use PHPStorm, on Windows, to create the templates, and, to try out different blocks, a combination of the standard block editor and the text editor to create my template parts. Then I copy the source code from the Code editor into PHPStorm, test it, attempt to fix any problems, and finally commit the changes.

    I use this method because it enables me to test the theme in multiple development environments – with different versions of WordPress, Gutenberg and other plugins.

    Note: Gutenberg has built in logic to synchronise any updated .html files with auto-drafts it keeps in the database. It’s a bit of an overhead, but it does only perform synchronisation for files you’ve changed. And it only updates templates or template parts if they’re still in auto-draft status.

    Why don’t I use the Site Editor (beta)?

    Gutenberg – Site Editor (beta)

    Primarily because I want to easily test the theme in other local environments. Secondly, for version control. And also for these reasons…

    • The Site Editor (beta) is still experimental.
    • There’s no ability to view the HTML.
    • Some things don’t work as well as they should:
      • It always loads up the Front Page template first.
      • Sometimes I can’t get to other Templates.
      • It can’t handle the classic block.
      • Some of the new blocks don’t survive round trips.
      • It isn’t easy to use the editor to style the content.
    • Even for an experienced block creator it’s very easy to get things wrong, especially when you’re dealing with live content.

    Note: The Site Editor also provides access to the Global Styles panel. This is intended for customisation of the theme’s look and feel. As I am not a designer or themer, choosing fonts and colours is not my priority. Also I don’t think the styles can be exported yet. Therefore, at present, it’s of secondary interest to me. I have to edit style.css and/or experimental-theme.json.

    What if things go wrong?

    If something can go wrong it will

    Murphy’s Law

    If you look at my issue list you’ll see I’ve had a fair number of problems, right from the start; and it’s not just because I’m a Windows user.

    I’m a fairly tenacious problem solver, so I’ve developed quite a few local workarounds & fixes.

    In a couple of my development environments I was using Fizzie as my primary theme. When I found a problem I used Twenty Twenty-One Blocks to reproduce it. Then I created test cases which I used to document the issue, and to develop and/or test any Pull Requests to fix it.

    After 7 weeks of development in the brand new local development site I was ready to switch the theme used on blocks.wp.a2z from Genesis-a2z to Fizzie ( v0.1.0 ).

    Shortly afterwards, I updated to Gutenberg 9.4.0 and WordPress 5.6-RC1 and battled with both for a couple of days. I’ve raised issues and reverted to Gutenberg 9.3.0 in the development version of my live site.

    Current status

    Version 0.1.1 of the Fizzie theme is available at bobbingwide/fizzie.

    It has dependencies on a number of plugins which are activated on the target site. Certain template parts may not work when the plugins are not present or deactivated.

    The theme contains multiple overrides to Gutenberg blocks which didn’t work as I expected. Most of these have issues and PR’s raised against them in Gutenberg. I’m still waiting for the PRs to be reviewed.

    I was fairly close to delivering Fizzie to my live site, but now I’m going to wait until some of my PRs have been merged or different solutions to the same problems have been implemented.

    I’ve made quite a bit of progress developing Fizzie. It pretty much looks and feels like the theme it replaces. I’m now in the position to document the new blocks and their tool bar icons.

    Spot the differences

    Here are some of the differences, which are visible on the single template, between my local development and the live site.

    Spot the differences – and some excuses for them.
    Section Genesis-A2Z Fizzie
    Header Sticky Not sticky
    Header menu Reduces to hamburger for small devices Doesn’t
    Header menu Highlights current menu / ancestor Partially implemented
    Breadcrumbs Part of Genesis framework Uses sb-breadcrumbs-block and Yoast SEO
    Post content Includes Jetpack sharing buttons Doesn’t – Jetpack not activated
    Dates Uses shortcodes Reimplemented as shortcodes
    Edit link Uses shortcode Reimplemented as a shortcode
    Search Implemented on post type specific widget areas Implemented as a template part
    Sites list Implemented using [bw_blogs] shortcode Oops, wrong shortcode!
    Some of the differences

    Top tips

    If you don’t know where you’re going, you’ll end up someplace else.

    Yogi Berra, former New York Yankees catcher

    1. Have a plan for what you want to achieve.
    2. Use multiple development environments; including WordPress Multi Site.
    3. Use version control sensibly.
    4. You don’t have to start with an empty site.
    5. Nor do you have to deactivate all your plugins.
    6. Expect things to not work as expected.
    7. Find alternative methods.
    8. Investigate and document each problem thoroughly.
    9. Follow Gutenberg’s issue and PR logs.
    10. Raise issues and PR’s as required.


    Published:

    Last updated:

    November 25, 2020

Categories

Tide times from tidetimes.co.uk

Tide Times & Heights for Langstone Harbour on
Sunday, 05 December 2021
Low Tide:04:44 ( 0.70m )
High Tide:11:51 ( 5.10m )
Low Tide:17:08 ( 0.60m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on
5th December 2021
04:44 Low Tide ( 0.47m )
11:47 High Tide ( 5.12m )
17:11 Low Tide ( 0.33m )