Update theme for WordPress 5.8 - widget block editor and theme.json

[bobbingwide]

WordPress 5.8 was released on 20th July 2021.
The WordPress Portsmouth Online Meetup on the 21st was "What's new in WordPress 5.8 and how to use it".

The theme needed to be updated to:

1. Allow use of the block widget editor
2. Demonstrate the use of theme.json

I made the changes on the fly. These need to be formally implemented.

Bugs to be investigated

During the preparation and the Live demo I encountered a number of problems which we didn't satisfactorily resolve.
These need to be investigated.
They may not be anything to do with the theme, but I'll use this issue to record them.
They can be reassigned when the true source of the problem has been identified.
The demo was recorded so we have evidence to share.

Bugs noted:

1. Prior to the demo - messages from Jetpack, including a Fatal out of memory error. Action taken: Deactivate Jetpack
2. Widget block editor - stopped showing any blocks

Jetpack messages

See the slide deck.

2. Widget block editor

Console messages

block-serialization-default-parser.min.js?ver=2fc6dec19af6d4c5e5fec8f6fdc1a10b:2
Uncaught (in promise) TypeError: Cannot read property 'length' of null
at a (block-serialization-default-parser.min.js?ver=2fc6dec19af6d4c5e5fec8f6fdc1a10b:2)
at p (block-serialization-default-parser.min.js?ver=2fc6dec19af6d4c5e5fec8f6fdc1a10b:2)
at f (block-serialization-default-parser.min.js?ver=2fc6dec19af6d4c5e5fec8f6fdc1a10b:2)
at Ar (blocks.min.js?ver=e2b6602c7ebbe8ce93832ce35d81be1c:2)
at T (edit-widgets.min.js?ver=4c0c32581bede8cfef25865f0e87b861:2)
at Object.q [as fulfill] (edit-widgets.min.js?ver=4c0c32581bede8cfef25865f0e87b861:2)
at q.next ()
at redux-routine.min.js?ver=7f20dbcdb5d5645c977063e356eb95cf:2
at redux-routine.min.js?ver=7f20dbcdb5d5645c977063e356eb95cf:2
at redux-routine.min.js?ver=7f20dbcdb5d5645c977063e356eb95cf:2

[bobbingwide]

I've reproduced the Widget block editor problem
and commented on WordPress/gutenberg#31890
which appears to be very similar.

I'll attempt to follow the recovery steps deleting one widget at a time until it gets better.
We only added a couple of widgets so it should be fairly easy.

Below is the response from https://s.b/wp-pompey/wp-json/wp/v2/sidebars?per_page=100&_locale=user

[{"id":"wp_inactive_widgets","name":"Inactive widgets","description":"","class":"","before_widget":"","after_widget":"","before_title":"","after_title":"","status":"inactive","widgets":["pages-2","calendar-2","links-2","text-2","rss-2","tag_cloud-2","nav_menu-2","search-2","recent-comments-2","categories-2","meta-2","recent-posts-3","recent-posts-4","archives-3","text-3","text-5","text-6","text-4"],"_links":{"collection":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars"}],"self":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars\/wp_inactive_widgets"}],"wp:widget":[{"embeddable":true,"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/widgets?sidebar=wp_inactive_widgets"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":"sidebar-1","name":"Blog Sidebar","description":"Add widgets here to appear in your sidebar on blog posts and archive pages.","class":"","before_widget":"<section id=\"%1$s\" class=\"widget %2$s\">","after_widget":"<\/section>","before_title":"<h2 class=\"widget-title\">","after_title":"<\/h2>","status":"active","widgets":["custom_html-7","custom_html-9","custom_html-10","recent-posts-2","archives-2","block-2","block-7"],"_links":{"collection":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars"}],"self":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars\/sidebar-1"}],"wp:widget":[{"embeddable":true,"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/widgets?sidebar=sidebar-1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":"sidebar-2","name":"Footer 1","description":"Add widgets here to appear in your footer.","class":"","before_widget":"<section id=\"%1$s\" class=\"widget %2$s\">","after_widget":"<\/section>","before_title":"<h2 class=\"widget-title\">","after_title":"<\/h2>","status":"active","widgets":["custom_html-4"],"_links":{"collection":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars"}],"self":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars\/sidebar-2"}],"wp:widget":[{"embeddable":true,"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/widgets?sidebar=sidebar-2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":"sidebar-3","name":"Footer 2","description":"Add widgets here to appear in your footer.","class":"","before_widget":"<section id=\"%1$s\" class=\"widget %2$s\">","after_widget":"<\/section>","before_title":"<h2 class=\"widget-title\">","after_title":"<\/h2>","status":"active","widgets":["custom_html-5"],"_links":{"collection":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars"}],"self":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars\/sidebar-3"}],"wp:widget":[{"embeddable":true,"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/widgets?sidebar=sidebar-3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":"sidebar-4","name":"Site info","description":"Add widgets here to appear in the site info sidebar.","class":"","before_widget":"<section id=\"%1$s\" class=\"widget %2$s\">","after_widget":"<\/section>","before_title":"<h2 class=\"widget-title\">","after_title":"<\/h2>","status":"active","widgets":["custom_html-8","block-4","block-5","block-3"],"_links":{"collection":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars"}],"self":[{"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/sidebars\/sidebar-4"}],"wp:widget":[{"embeddable":true,"href":"https:\/\/s.b\/wp-pompey\/wp-json\/wp\/v2\/widgets?sidebar=sidebar-4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}]

[bobbingwide]

Having installed and activated the Classic Widget editor the first widget I deleted was

It appeared that I had to delete it twice. Once the empty block was removed, the Block widget editor started working again.

[bobbingwide]

I was able to reproduce the problem by adding the Legacy widget and choosing Meta again.
The problem was random. Some times it worked. Another time it didn't.

[bobbingwide]

Re: Jetpack.
Having resolved the widget issue I tried reactivating Jetpack again. I also updated the SiteGround optimiser.
Now I'm getting a WSOD - the left hand admin menu is shown but nothing else

[bobbingwide]

The error log shows

[03-Aug-2021 13:29:24 UTC] PHP Fatal error:  Allowed memory size of 805306368 bytes exhausted (tried to allocate 45131174780 bytes) in /home/customer/www/wp-pompey.org.uk/public_html/wp-content/plugins/jetpack/modules/gravatar-hovercards.php on line 116

[bobbingwide]

Updating Jetpack to v10.0.0, released yesterday, appears to resolve the Fatal Error problem.

[bobbingwide]

There was also a problem with the site logo when it was used in the tatum page template. See the wp-pompey video for evidence.
This is similar to the other image stretching problems in bobbingwide/thisis#13 and bobbingwide/written#8

[bobbingwide]

v0.1.1 is now installed on wp-pompey.org.uk.
The site appears to work fine.
On the archive template, which is displayed for blog posts, eg https://www.wp-pompey.org.uk/category/wordup/wp-pompey/
we can see two new widgets which are actually blocks in the RH sidebar.

In the Site Info sidebar the WordPress Info block is repeated.
Jetpack is reactivated and the Share this: buttons are displayed below each page.