fizzie
![screenshot](https://github.com/bobbingwide/fizzie/raw/main/screenshot.png)
Fizzie theme - a Full Site Editing theme using Gutenberg blocks.
Description
A Full Site Editing (FSE) with Gutenberg blocks.
The theme is required to replace the Genesis-a2z theme that is used in blocks.wp-a2z.org
and core.wp-a2z.org.
It's also the parent theme of Wizzie, used in woocommerce.wp-a2z.org.
Requirements:
- Implement Full Site Editing.
- Same look and feel as the Genesis-a2z theme.
- Support documentation / demonstration of each of the new blocks in Gutenberg.
- Find out what bits are missing from and/or not working on Gutenberg.
- Implement on blocks.wp-a2z.org, core.wp-a2z.org and woocommerce.wp-a2z.org
Contents:
- 19 templates
- 34 template parts
The templates
are:
-
404 - Not found page
-
archive - generic template used for archives: author, taxonomy, date, tag
-
archive-block - to display archives for Blocks
-
archive-oik-plugins - to display archive for Plugins
-
archive-oik-themes - to display archive for Themes
-
category - used to display the Category archive
-
front-page - used for Page Shown On Front
-
home - used for Blog Posts index page or Posts Shown on Front (when front-page not implemented)
-
index - used when no other template is found
-
output-input - custom template for debugging output vs input
-
page-13.html - template for page ID 13
-
page-about - template for page with slug about
-
page-i18n-test.html - template for Internationalization test
-
search - Display search results
-
single - used for a single post / attachment / CPT
-
single-full - custom full width template for post,page,block and block_example
-
single-oik-plugins - used for a single oik-plugin
-
single-oik-themes - used for a single oik-theme
-
singular - used when single or page does not exist
-
See the template visualization: https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png
The parts
are:
- a2z-pagination - Letter pagination for blog posts
- a2z-pagination-block - Letter pagination for blocks
- a2z-pagination-oik-plugins - Letter pagination for plugins
- a2z-pagination-oik-themes - Letter pagination for themes
- archive-query - Main query for archive pages
- breadcrumbs - Breadcrumb trail - using sb-breadcrumbs-block-based-widgets
- category-description - Displays the category description
- category-query - To list posts in a chosen category term
- comments - Comments template part
- contents-shortcode - Contents shortcode etc for the output-input custom template
- download - To download plugins - uses [oikp_download] shortcode
- download-theme - To download themes - uses [oikth_download] shortcode
- footer - Final full width footer
- footer-menu - Displays the footer menu - after the final full width footer
- footer-variant-example - Example of a footer template part
- header - Displays the header: site logo, site title and tagline, header menu.
- header-menu - Displays the header menu
- header-variant-example - Example of a header template part
- home-part - A template part used in debugging. Classic block
- home-query - Displays the posts on the blog page
- i18n-rich-text.html
- i18n-test - Internationalization, extraction and localization test file
- information - Displays post meta data using the oik-block/fields block
- issue-27 - test case file for issue-27
- issue-30 - test-case file for issue-30
- metadates - Displays Date published, last updated and [Edit] link
- no-posts-found - Displays No posts found on 404 page
- page-content - Primary content part for a page
- page-footer - Full width footer with 3 columns - representing widgets
- post-content - Primary content part for a post
- post-content-full - Full width post content
- posts - An attempt to display the posts using query blocks - incomplete- not used
- search - Using the Search block
- social-links - Social link icons
Templates not yet implemented:
Some of these templates will be needed for other subdomains of wp-a2z.org.
- archive-CPT - archive templates for other custom post types - 5 to do
- image - template for the image mime type
- page - used for a single page -but see page-13, page-about and page-i18n-test
- single-CPT - single templates for other custom post types - 10 to do
- tag - for a particular tag
- taxonomy - for a particular taxonomy
- taxonomy-oik_letters - taxonomy specifically for oik_letters
Installation
-
Either install Gutenberg 10.7.1 or higher or install and build the latest Gutenberg source.
-
Activate Gutenberg.
-
Install and activate the Fizzie theme, as you would install any other theme. Full Site Editing will be enabled automatically.
-
For some of the templates and template parts to work properly you will need to install and activate the pre-requisite plugins.
-
Pre-requisite plugins: see also Notes
-
oik
-
oik-fields
-
oik-a2z
-
sb-breadcrumbs-block
-
sb-post-edit-block
-
Yoast SEO - for breadcrumbs logic
For the Output Input Debugging custom template
Change Log
1.3.0
- Changed: Remove theme:fizzie attribute. #87
- Changed: Support PHP 8.1 and PHP 8.2 #86
- Changed: Update language files
- Fixed: Avoid Fatal Uncaught TypeError in Appearance > Site Editor #85
- Fixed: Ensure [bw_fields] shortcode is expanded within query loops for both shortcode and paragraph blocks #28
- Fixed: Re-enable localization of template parts #46
- Fixed: Revert workaround for recursion. Gutenberg was fixed in Mar 2021 #49
- Tested: With WordPress 6.4-RC3 and WordPress Multisite
- Tested: With Gutenberg 16.9.0
- Tested: With PHP 8.0, PHP 8.1 and PHP 8.2
1.2.0
- Fixed: Remove margin-block-start for .bw_blog #80
- Changed: Remove logic moved to gcptedit. #75
- Changed: No longer need to register_nav_menu() #84
- Changed: Update Copyright years #84
- Changed: Further restrict footer styling #84
- Changed: Display post content full width for single oik-themes #83
- Fixed: Fix Fatal error due to invalid attributes #82
- Added: Add pattern for an About us page #78
- Added: Add .json files for patterns to be used as page templates #78
- Tested: With WordPress 6.2-beta5 and WordPress Multi Site
- Tested: With Gutenberg 15.3.1
1.1.0
- Changed: set background for foster-child table rows
- Fixed: Remove theme attribute from template-part blocks #79
- Fixed: Avoid undefined id #81
- Tested: With WordPress 6.0 and WordPress Multi Site
- Tested: With Gutenberg 13.4.0
1.0.0
- Changes for the following issues: #11 #12 #13 #15 #24 #25 #26 #72 #74 #76 #77 #78
For details see the Git commit history.
- Tested: With WordPress 5.9-RC3and WordPress Multi Site
- Tested: With Gutenberg 12.4.0
- Tested: With PHP 8.0
0.7.0
- Changed: Add styling for metadates. #23 #71
- Changed: Add bottom margin for post template list. #70
- Changed: Don't override core/query-loop anymore. #33 #70
- Fixed: Correct bw_trace2() args for when oik-bwtrace is not activated
- Changed: Change metadates className to is-style-flexed #71
- Changed: Rename query-loop to post-template. #70
- Changed: Don't set default font-family. Use different CSS property for nav menus #69
- Fixed: Correct styles: typography.fontFamily and elements.link.color.text #3
- Changed: Enable WooCommerce background colour for navigation menus #69
- Changed: Start enabling Fizzie as a parent theme #69
- Changed: Enqueue category.css from the template (parent) theme #69
- Tested: With WordPress 5.8 and WordPress Multi Site
- Tested: With Gutenberg 11.1.0
- Tested: With PHP 8.0
0.6.1
- Changed: Replace [guts] shortcode with oik-bbw/wp using g attribute
- Changed: Update screenshot for Gutenberg 10.7.1 WordPress 5.7.2
- Changed: Rework home-query to use the Query block. Issue #11
- Changed: Set post title as link
0.6.0
- Changed: Adjust header menu for Gutenberg 10.7.1. Issue #26
- Changed: Remove redundant styling for the 3 column archive
- Changed: Update screenshot for 10.4.0
- Changed: No longer override certain blocks. This disables language versions.
- Changed: Refresh from DB version
- Changed: Use query block with inherit true and update pagination block. Issue #11
- Changed: Simplify add_theme_support logic. Remove unneeded stuff.
- Changed: Switch to using theme.json issue #3
- Tested: With Gutenberg 10.7.1 and WordPress Multi Site
- Tested: With WordPress 5.7.2 and WordPress Multi Site
- Tested: With PHP 8.0
0.5.0
0.4.0
0.3.1
0.3.0
- Changed: Change from overriding query-pagination to query-pagination-numbers,https://github.com/bobbingwide/fizzie/issues/18
- Changed: Add support for oik-themes - for FSE themes,https://github.com/bobbingwide/fizzie/issues/51
- Changed: Update experimental-theme.json to new structure - with Gutenberg 10.0.0,https://github.com/bobbingwide/fizzie/issues/3
- Changed: relocalize updated template parts,https://github.com/bobbingwide/fizzie/issues/46
- Changed: Style radio buttons with width:auto
- Changed: Update Copyright years in the footer
- Changed: Workaround to prevent recursion occurring in the editor,https://github.com/bobbingwide/fizzie/issues/49
- Changed: Move metadates template part back into the group, with className alignfull,https://github.com/bobbingwide/fizzie/issues/44
- Changed: Allow nested template parts with class alignfull to use 100% width,https://github.com/bobbingwide/fizzie/issues/44
- Changed: Remove workaround for post-excerpt,https://github.com/bobbingwide/fizzie/issues/25
- Changed: Improve styling of blog display ( home.html ),https://github.com/bobbingwide/fizzie/issues/4
- Tested: With Gutenberg 10.0.2
- Tested: With WordPress 5.7-beta3
- Tested: With PHP 8.0
0.2.0
0.1.1
- Added: Create archive templates & a2z pagination parts for block & oik-plugins,https://github.com/bobbingwide/fizzie/issues/36
- Added: Debug information for each template,https://github.com/bobbingwide/fizzie/issues/41
- Changed: Add social links in the footer,https://github.com/bobbingwide/fizzie/issues/4
- Changed: Copy images from genesis-a2z; even if not actually used,https://github.com/bobbingwide/fizzie/issues/4
- Changed: Improve styling of footer.,https://github.com/bobbingwide/fizzie/issues/4
- Changed: Set min-height 60px for h2 on post-type-archive-block only.,https://github.com/bobbingwide/fizzie/issues/4
- Changed: The About menu item should link to the about page,https://github.com/bobbingwide/fizzie/issues/17
- Changed: Try to properly implement alignwide and alignfull styling capability,https://github.com/bobbingwide/fizzie/issues/44
- Fixed: Add a shim to enable Navigation menus to display in the Front end on WordPress 5.6-RC1,https://github.com/bobbingwide/issues/42
- Fixed: Correct [sites] shortcode to [bw_blogs],https://github.com/bobbingwide/fizzie/issues/4
- Fixed: Correct reference to $this->bad_processed_content,https://github.com/bobbingwide/fizzie/issues/36
0.1.0
- Changed: Add styles used for the test of core/post-content recursion detection, Issue #33
- Changed: Continue refactoring recursion detection and error reporting, Issue #33
- Changed: Set preset font sizes in pixels. Set default fonts for core/post-title and core/post-date, Issue #4
- Changed: Update the footer menu to match blocks.wp-a2z.org, Issue #4
0.0.9
- Changed: Refactored block-override-functions as Fizzie_Block_Recursion_Control, Issue #33
- Changed: Revert to using block content postId to check for recursion in core/post-content, issue #27
- Changed: Refactor overrides for core blocks into separate files, issue #25
- Tested: With WordPress 5.6-beta4
0.0.8
- Added: Disable the logic that attempts to insert the global post ID into the $fizzie_processed_content array. Issue #31
- Added: Attempt to allow recursive reusable block problems to be fixed using the editor. Issue #31
- Changed: Start refactoring of overrides. Issue #25
- Added: Improve solution to detect recursive post-content blocks. Issue #27
- Added: Improve solution to detects recursive template-parts. Issue #30
- Added: core/post-hierarchical terms - cater for unknown taxonomies. Issue #29
- Added: Attempt to avoid infinite recursion in the core/post-content block. Issue #27
- Changed: Restructure home.html to use a simplified home-query.html that uses metadates.html, and metadates.html to use [bw_field]
0.0.7
0.0.6
0.0.5
0.0.4
- Changed: Create [archive_description] shortcode for the category-description template part,https://github.com/bobbingwide/fizzie/issues/13
- Tested: With WordPress 5.6-beta2
- Tested: With Gutenberg 9.2.2 and development - with a local fix for #25377
- Tested: With PHP 7.4
0.0.3
0.0.2
0.0.1
0.0.0
Notes
The theme is designed for use on wp-a2z.org.
It implements template parts which depend on external components. For example
- a2z pagination requires oik-a2z plugin
- breadcrumbs requires sb-breadcrumbs-block
The CSS is minimal; just enough to make it look OK on my laptop and external monitor.
Responsibility for responsive styling is left to Gutenberg / WordPress core functionality.
Block overrides
Fizzie contained a number of overrides to Gutenberg server rendered blocks which didn't behave the way I expected.
Many of these are no longer necessary and have been disabled.
Improvement areas included:
- core/query-loop - uses main query when used outside of core/query
- core/query-pagination - uses the main query when used outside of core/query
- core/block - handle recursion
- core/post-hierarchical-terms - cater for invalid taxonomy
- core/navigation-link - set current-menu-item class for current request
- core/navigation - tbc
- core/template-part - handle recursion
- core/post-content - handle recursion
- core/post-excerpt - append missing
</div>
For more information see https://github.com/bobbingwide/fizzie/issues/25 and/or the includes folder.
References
See my articles on herbmiller.me:
During the development, in 2021, I referred to the following articles, sites and repositories.
Some other FSE themes:
Brief development history
Even though FSE was not going to make it into WordPress 5.6 or 5.7, I had to implement the theme in order to document the 24 or so new blocks
that were already in Gutenberg and that will eventually appear in WordPress core.
It started as a completely empty theme and then I played with it while following some tutorials.
The tutorials didn't really cover the Site Editor (beta) user interface. So I was on my own from there on.
It’s been quite a learning experience.
Rather than using the Site Editor ( beta ) user interface,
I've found it easier to edit the Templates and Template parts directly.
I've been using the block editor in Code editor mode, then copying and pasting the individual templates and template parts to the .html files that the theme needs to deliver.
In some cases these had to be edited to remove the "postId" attributes.
In the target site(s) some of the template parts need importing into the Site Editor to be customised for the target site.
These are the ones that include the navigational blocks.
- Note: You can set the Site icon without having to edit a template or template part. Just create a new post, add the Site icon block and select the image file.
Copyright
(C) Copyright Herb Miller, Bobbing Wide 2020, 2021, 2022, 2023
- This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.