- Contributors: bobbingwide, vsgloik
- Donate link: https://www.oik-plugins.com/oik/oik-donate/
- Tags: blocks, FSE, Gutenberg
- Requires at least: 5.5.1
- Tested up to: 6.4-RC3
- Version: 1.3.0
- License: GPLv2 or later
- License URI: http://www.gnu.org/licenses/gpl-2.0.html
Fizzie theme - a Full Site Editing theme using Gutenberg blocks.
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
-
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
-
Yoast SEO - for breadcrumbs logic
For the Output Input Debugging custom template
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Added: Add Input Output Debugging custom template,#65
- Changed: Improve support for align wide and align full,#44
- Changed: Add Header and Footer template variant examples,#60
- Changed: Add query-title to archive.html to aid the block's documentation,#60
- Changed: Replace [archive_description] by query-title and term-description,#60
- Changed: Add .gitignore to ignore custom.css and/or oik-custom.css,#57
- Changed: Override nav menu spacing and colour again for Gutenberg 10.3.0,#26
- Changed: Set default template part tagName based on template area,#55
- Tested: With Gutenberg 10.4.0
- Tested: With WordPress 5.7 and WordPress Multi Site
- Tested: With PHP 8.0
- Changed: Another attempt at supporting alignfull and alignwide - solution copied/cobbled from TT1-blocks,#44
- Fixed: Avoid problems attempting to valid the id attribute. Just unset it!,#52
- Fixed: Adjust the width of submit buttons from 100% to auto
- Tested: With Gutenberg 10.1.1
- Tested: With WordPress 5.7 and WordPress Multi Site
- Tested: With PHP 8.0
- Changed: Rename more query-pagination blocks to query-pagination-numbers,,#11
- Changed: Rename editor-style.css to style-editor.css and set block widths in the editor
- Changed: Change from overriding query-pagination to query-pagination-numbers,#18
- Changed: Add support for oik-themes - for FSE themes,#51
- Changed: Update experimental-theme.json to new structure - with Gutenberg 10.0.0,#3
- Changed: relocalize updated template parts,#46
- Changed: Style radio buttons with width:auto
- Changed: Update Copyright years in the footer
- Changed: Workaround to prevent recursion occurring in the editor,#49
- Changed: Move metadates template part back into the group, with className alignfull,#44
- Changed: Allow nested template parts with class alignfull to use 100% width,#44
- Changed: Remove workaround for post-excerpt,#25
- Changed: Improve styling of blog display ( home.html ),#4
- Tested: With Gutenberg 10.0.2
- Tested: With WordPress 5.7-beta3
- Tested: With PHP 8.0
- Added: Extracted and localized to UK English ( en_GB ) and the obfuscated bbboing language ( bb_BB ),#46
- Changed: Add more templates to test the template hierarchy logic: page-13, page-about and search,#38
- Changed: Enable cloning from wp.a2z to wp-a2z.org,#48
- Changed: Remove empty paragraph from page footer,#4
- Changed: Update 'naughty' message from index.php
- Changed: Update screenshot for v0.1.1
- Fixed: Add text domain to 'No posts found'
- Fixed: Update home.html to use header.html,#36
- Added: Create archive templates & a2z pagination parts for block & oik-plugins,#36
- Added: Debug information for each template,#41
- Changed: Add social links in the footer,#4
- Changed: Copy images from genesis-a2z; even if not actually used,#4
- Changed: Improve styling of footer.,#4
- Changed: Set min-height 60px for h2 on post-type-archive-block only.,#4
- Changed: The About menu item should link to the about page,#17
- Changed: Try to properly implement alignwide and alignfull styling capability,#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],#4
- Fixed: Correct reference to $this->bad_processed_content,#36
- 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
- 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
- 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]
- Changed: Improve CSS styling for nav menus,#26
- Changed: Define CSS styling for metadates template part,#23
- Changed: Improve CSS styling for certain block types,#4
- Added: Implement metadates template part,#23
- Changed: When Template Part Not Found is displayed show information for problem determination,#16
- Added: Add [post-edit] shortcode temporary solution,#24
- Changed: Update header menu links to match the header menu in blocks.wp-a2z.org,#17
- Changed: Start implementing menu improvements - by fiddling url and className attributes,[#22
- Added: Improve solution to fix some Gutenberg issues by replacing render_callback functions with our own.,#18
- Fixed: Correct badly formed template-part for footer-menu,#19
- Changed: Update templates and parts for better matching of functionality in genesis-a2z,#4
- Added: Add posts.html template part - not yet used
- Changed: Fix up CSS messed up by experimental-theme.json changes.,#3
- Added: Implement main query pagination for the core/query-pagination block,#18
- Experiment: Attempt to define typography for core/post-title in experimental-theme.json
- Changed: Improve styling for h1-h6, separator, preformatted and verse. Add some more colour presets and font sizes
- Tested: With WordPress 5.6-beta3 and WordPress Multi Site
- Tested: With Gutenberg 9.2.2, 9.3.0 and development
- Tested: With PHP 7.4
- Added: single-oik-plugins template,#14
- Changed: archive template,#14
- Changed: Extracted header and footer menus into separate template parts [#17
- Changed: Create [archive_description] shortcode for the category-description template part,#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
- Changed: Improve styling of drop down menu and page footer column background,#4
- Added: Implement the 404.html template,#12
- Changed: remove wp:query to allow use of the main query in archive based templates,#11
- Added: Implement category.html template,#9
- Changed: Style the 'home' template - for blog posts,#4
- Changed: Style page-footer content to be same width as page and post,#1
- Changed: Support header and footer menus. #1 (comment)
- Fixed: update wp:template-part to remove postId attr; set theme attr to fizzie
- Added: Update the theme's files extracted from the exported zip file. See #1 (comment)
- Added: Start styling as genesis-a2z,#4
- Added: Enable oik shortcodes in template parts,#5
- Changed: Copy some stuff from the Stanley theme as per fullsitediting.com,#4
- Changed: Play with editor-style.css for dropcap and header
- Changed: Start to support experimental-link-color, reload latest style.css when SCRIPT_DEBUG true, try Twenty Seventeen's frontpage_template hook
- Changed: Added then delete template part posts in index.html - never ending loop problem
- Added: Put some logic in index.php for when Gutenberg is not active
- Added: Add editor-style.css to style the blocks in the editor to the same as the front end,#4
- Added: Create the basic theme following instructions from https://developer.wordpress.org/block-editor/tutorials/block-based-themes/#creating-the-theme
- Added: Copy/cobble index.html, front-page.html templates. Copy header.html template part. Create empty footer.html template part.
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.
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 #25 and/or the includes folder.
See my articles on herbmiller.me:
During the development, in 2021, I referred to the following articles, sites and repositories.
- https://developer.wordpress.org/block-editor/developers/themes/theme-json/
- https://developer.wordpress.org/block-editor/tutorials/block-based-themes/
- https://wpengine.com/blog/full-site-editing-future-of-building-with-wordpress/
- https://wpengine.com/blog/full-site-editing-what-you-need-to-get-started/
- https://github.com/wordpress/gutenberg
- https://github.com/WordPress/theme-experiments
- https://make.wordpress.org/design/handbook/focuses/full-site-editing/
- https://make.wordpress.org/design/handbook/focuses/global-styles/
- https://wptavern.com/q-first-fse-wordpress-theme-now-live
- https://wptavern.com/wordpress-5-6-release-team-pulls-the-plug-on-block-based-widgets
- https://wptavern.com/navigation-screen-sidelined-for-wordpress-5-6-full-site-editing-edges-closer-to-public-beta
- https://wptavern.com/gutenberg-9-3-provides-indicator-of-where-full-site-editing-is-going-a-future-without-widgets-and-customizer-screens
- https://make.wordpress.org/themes/2020/10/23/developing-the-full-site-editing-version-of-twenty-twenty-one/
- https://fullsiteediting.com/
- https://wordpress.org/plugins/block-unit-test/
- https://developer.wordpress.org/block-editor/contributors/develop/
- https://developer.wordpress.org/block-editor/contributors/develop/git-workflow/
- https://wpdevelopment.courses/articles/full-site-editing-theme-learnings/
Some other FSE themes:
- WordPress Theme Experiments
- Twenty Twenty-One Blocks
- Stanley
- Seedlet Blocks
- SB - Second Byte
- Wizzie
- ThisIs...
- Written
- See also WP-a2z FSE themes
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.
- https://developer.wordpress.org/block-editor/tutorials/block-based-themes/
- https://fullsiteediting.com/
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.
(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.