Update Fizzie to cater for changes in Gutenberg 12.1.0 / 12.2.0 / 12.3.0 / 12.4.0

bobbingwide commented 2 years ago

Somewhere between Gutenberg 10.9.0 and Gutenberg 12.1.0 changes have occurred which means that Fizzie no longer has the same look and feel as it did back in June/July/August. It's a never ending battle to keep up with the changes. Some of which appear to be for the better.

Just recently, having installed Gutenberg 12.1.0 and discovering that block-templates and block-template-parts are now expected to be in other folders I noticed that my paragraph blocks with bright orange backgrounds no longer allow the colour to be changed. In fact, I can't change any of the colours for this block. Why not? What else is now wrong?

Additionally, there are formatting issues which are likely to be CSS related.

bobbingwide commented 2 years ago

I noticed that my paragraph blocks with bright orange backgrounds no longer allow the colour to be changed. In fact, I can't change any of the colours for this block. Why not? What else is now wrong?

To attempt to find out what changes in each release I'll revert to 10.9.0 and work through the visible differences.

WordPress	Gutenberg	Front-end	Paragraph colour?
5.9-beta4	12.2.0	Looks funny	Works
5.8.2	12.1.0	Looks funny	Broken
5.9-beta4	12.1.0	Looks funny	Broken
5.9-beta4	12.0.2	OK	Works
5.9-beta4	12.0.1	OK	Works
5.9-beta4	12.0.0	OK	Works
5.9-beta4	11.9.1	OK	Works
5.9-beta4	11.9.0	OK	Works
5.9-beta4	11.8.0	Fatal
5.9-beta4	...	Fatal
5.9-beta4	11.0.0	Fatal
5.9-beta4	10.9.1	Fatal
5.8.2	10.9.1	OK	?

Looks funny

Everything is Full width
Margins appear to have disappeared
Letter pagination links have the background colour
Background colour missing elsewhere

Works - Colour editing with GB 12.2.0

Broken - with GB 12.1.0

There was no Colour editing dialog!

Works - Color editing with GB 11.9.0 - 12.0.2

Fatal - error with 5.9-beta4 and GB up to 11.8.0

Fatal error: Cannot declare interface WP_Theme_JSON_Schema, because the name is already in use in C:\apache\htdocs\wordpress\wp-content\plugins\gutenberg\lib\interface-wp-theme-json-schema.php on line 13

bobbingwide commented 2 years ago

In 12.0.2 the containers that shouldn't be full width used to have the following CSS generated for them

.wp-container-61d4cfec472ea > * {
        max-width: 1140px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

This CSS was generated for the search template part.

<!-- wp:template-part {"slug":"search","theme":"fizzie","layout":{"inherit":true}} /-->

bobbingwide commented 2 years ago

I appear to be making progress but I still don't understand how it works. Using the site editor for index.html I've chosen each template part that's too wide, selected the outermost Group and toggled Layout to Inherit default layout.

For example the search template part became.

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search this website","width":50,"widthUnit":"%","buttonText":"Search","buttonUseIcon":true} /--></div>
<!-- /wp:group -->

By default, from 12.1.0, the template and template part CPTs are no longer editable from the Appearance menu. I don't know what HTML has been generated. And I don't yet trust the export facility. So I'll have to attempt to re-enable editing of wp_template and wp_template_part, using oik-types.

I'm also getting a number of Warnings in the Site Editor.

Warning: Block core/query-loop has been renamed to Post Template. core/query-loop will be supported until WordPress version 5.9. in C:\apache\htdocs\wp55\wp-content\plugins\gutenberg\lib\compat\wordpress-5.8\index.php on line 123

Warning: Undefined property: WP_Block_Template::$area in C:\apache\htdocs\wp55\wp-content\plugins\gutenberg\lib\compat\wordpress-5.9\class-gutenberg-rest-templates-controller.php on line 485

bobbingwide commented 2 years ago

So I'll have to attempt to re-enable editing of wp_template and wp_template_part, using oik-types.

I did this but the editor doesn't allow View source any more.
I activated the Classic editor but this doesn't work as the URL not a standard URL to invoke the editor. eg https://s.b/wp55/fizzie/wp-admin/post.php?post=70&action=edit&classic-editor__forget&classic-editor

but a request to themes.php

eg for a template https://s.b/wp55/fizzie/wp-admin/themes.php?page=gutenberg-edit-site &postId=fizzie%2F%2Fsingle &postType=wp_template &classic-editor__forget &classic-editor

and for a template part

https://s.b/wp55/fizzie/wp-admin/themes.php?page=gutenberg-edit-site &postId=fizzie%2F%2Fheader-menu &postType=wp_template_part &classic-editor__forget &classic-editor

Problem resolution?

When looking at the changes to Navigation blocks I found myself in a strange situation where the only editor available for the wp_navigation CPT was the Classic Editor. So I decided to deactivate the Classic Editor and it was then that I discovered it was Network Activated. Upon deactivating the plugin at the Network level I discovered I was able to use the Classic editor to edit the templates and template parts.

I couldn't edit any of the wp_navigation posts either with / without the Classic editor activated.

bobbingwide commented 2 years ago

Another thing that happens with the site editor is that my menus get wiped out. For example the original footer-menu template part:

<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"center"} -->
<!-- wp:navigation-link {"label":"Home","url":"https://s.b/wp56/"} /-->
<!-- wp:navigation-link {"label":"Blog","url":"https://s.b/wp56/blog/"} /-->
<!-- wp:navigation-link {"label":"Sitemap","url":"https://s.b/wp56/sitemap/"} /-->
<!-- wp:navigation-link {"label":"Sites","url":"https://s.b/wp56/sites/"} /-->
<!-- /wp:navigation -->

became

<!-- wp:navigation {"overlayMenu":"never",
"layout":{"type":"flex","setCascadingProperties":"true","justifyContent":"center","orientation":"horizontal"}} /-->

See #74 for more on this problem.

bobbingwide commented 2 years ago

I'm also getting a number of Warnings in the Site Editor.

Warning: Block core/query-loop has been renamed to Post Template. core/query-loop will be supported until WordPress version 5.9. in C:\apache\htdocs\wp55\wp-content\plugins\gutenberg\lib\compat\wordpress-5.8\index.php on line 123

Explanation

These messages occur during admin_enqueue_scripts. The stack trace below shows the post that contains the query-loop block but it's not immediately obvious why the post that contains this content is being processed to find its excerpt, nor which post it is. It's all to do with some logic I can't fully explain inside gutenberg_initialize_editor() involving $preload_data, which is then enqueued inline for use by wp.apiFetch.

$preload_data = array_reduce(
        $preload_paths,
        'rest_preload_api_request',
        array()
    );

Workaround

Change the core/query-loop blocks to core/post-template
It's not easy to find the post ID from the Warning messages or backtrace... so just do this across the board.
The information is findable in the $preload_data structure returned from array_reduce().

C:\apache\htdocs\wordpress\wp-content\plugins\oik-bwtrace\includes\bwtrace-actions.php(285:2) bw_trace_error_handler(2) 334 2 2022-01-06T08:36:42+00:00 1.900843 0.000660 cf=admin_enqueue_scripts,the_content 39989 115 72 12582912/14680064 256M F=621 err Array

[0] => (integer) 512
[1] => (string) "User Warning: Block core/query-loop has been renamed to Post Template. core/query-loop will be supported until WordPress version 5.9."
[2] => (string) "C:\apache\htdocs\wp55\wp-content\plugins\gutenberg\lib\compat\wordpress-5.8\index.php"
[3] => (integer) 123

bw_lazy_backtrace C:\apache\htdocs\wordpress\wp-content\plugins\oik-bwtrace\libs\bwtrace.php:108 0
bw_backtrace C:\apache\htdocs\wordpress\wp-content\plugins\oik-bwtrace\includes\bwtrace-actions.php:292 0
bw_trace_error_handler(512,Block core/query-loop has been renamed to Post Template. core/query-loop will be supported until WordPress version 5.9.,C:\apache\htdocs\wp55\wp-content\plugins\gutenberg\lib\compat\wordpress-5.8\index.php,123) C:\apache\htdocs\wordpress\wp-content\plugins\oik-bwtrace\includes\bwtrace-actions.php:0 4
trigger_error(Block core/query-loop has been renamed to Post Template. core/query-loop will be supported until WordPress version 5.9.,512) C:\apache\htdocs\wp55\wp-content\plugins\gutenberg\lib\compat\wordpress-5.8\index.php:123 2
gutenberg_render_legacy_query_loop_block(array,,object) C:\apache\htdocs\wp55\wp-content\plugins\gutenberg\lib\compat.php:132 3
{closure}(array,,object) C:\apache\htdocs\wp55\wp-includes\class-wp-block.php:255 3
render C:\apache\htdocs\wp55\wp-includes\class-wp-block.php:241 0
render C:\apache\htdocs\wp55\wp-includes\blocks.php:883 0
render_block(array) C:\apache\htdocs\wp55\wp-includes\blocks.php:921 1
do_blocks(
In this example we use the Query block to display some posts with both their content and excerpts, side by side.

) C:\apache\htdocs\wp55\wp-includes\class-wp-hook.php:307 1 10. apply_filters(

In this example we use the Query block to display some posts with both their content and excerpts, side by side.

,array) C:\apache\htdocs\wp55\wp-includes\plugin.php:189 2 11. apply_filters(the_content,

In this example we use the Query block to display some posts with both their content and excerpts, side by side.

) C:\apache\htdocs\wp55\wp-includes\rest-api\endpoints\class-wp-rest-posts-controller.php:1811 2 12. prepare_item_for_response(object,object) C:\apache\htdocs\wp55\wp-includes\rest-api\endpoints\class-wp-rest-posts-controller.php:377 2 13. get_items(object) C:\apache\htdocs\wp55\wp-includes\rest-api\class-wp-rest-server.php:1141 1 14. respond_to_request(object,/wp/v2/posts,array,unsupported) C:\apache\htdocs\wp55\wp-includes\rest-api\class-wp-rest-server.php:988 4 15. dispatch(object) C:\apache\htdocs\wp55\wp-includes\rest-api.php:511 1 16. rest_do_request(object) C:\apache\htdocs\wp55\wp-includes\rest-api.php:2860 1 17. rest_preload_api_request(array,/wp/v2/posts?context=edit) C:\apache\htdocs\wp55\wp-includes\rest-api.php:0 2 18. array_reduce(array,rest_preload_api_request,array) C:\apache\htdocs\wp55\wp-content\plugins\gutenberg\lib\editor-settings.php:76 3 19. gutenberg_initialize_editor(edit_site_editor,edit-site,array) C:\apache\htdocs\wp55\wp-content\plugins\gutenberg\lib\full-site-editing\edit-site-page.php:164 3 20. gutenberg_edit_site_init(appearance_page_gutenberg-edit-site) C:\apache\htdocs\wp55\wp-includes\class-wp-hook.php:307 1 21. apply_filters(unsupported,array) C:\apache\htdocs\wp55\wp-includes\class-wp-hook.php:331 2 22. do_action(array) C:\apache\htdocs\wp55\wp-includes\plugin.php:474 1 23. do_action(admin_enqueue_scripts,appearance_page_gutenberg-edit-site) C:\apache\htdocs\wp55\wp-admin\admin-header.php:118 2 24. require_once(C:\apache\htdocs\wp55\wp-admin\admin-header.php) C:\apache\htdocs\wp55\wp-admin\admin.php:239 1 25. require_once(C:\apache\htdocs\wp55\wp-admin\admin.php) C:\apache\htdocs\wp55\wp-admin\themes.php:10 1

bobbingwide commented 2 years ago

I couldn't edit any of the wp_navigation posts either with / without the Classic editor activated.

I've found a workaround for this, which I've implemented in functions.php


add_action( 'post_edit_form_tag', 'fizzie_enable_wp_navigation_editor');
function fizzie_enable_wp_navigation_editor( $post ) {
    remove_action( 'edit_form_after_title', '_disable_content_editor_for_navigation_post_type' );
    remove_action( 'edit_form_after_title', 'gutenberg_disable_content_editor_for_navigation_post_type');
}

bobbingwide commented 2 years ago

Gutenberg 12.3.0 was released on 5 Jan 2022 and WordPress 5.9-RC1 was released on the 4th. Fizzie should now be tested with both versions.

bobbingwide commented 2 years ago

Having changed the template parts, each one is wrapped in a group with "layout":{"inherit":true}, the groups are now normal width. But I've lost the ability to set the outer background colour. We don't see any of the light grey background. Does each template part need another group to achieve this?

bobbingwide commented 2 years ago

What do we need to do to remove the block gap on certain blocks, such as the header?

.wp-site-blocks > * + * {
    margin-top: var( --wp--style--block-gap ); 
}

See https://wptavern.com/gutenberg-11-4-overhauls-galleries-adds-axial-padding-for-buttons-and-lays-groundwork-for-global-spacing

It appears that the PRs mentioned in this post have been implemented. The trouble with Fizzie is that the first block in each template is the debug block.

<!-- wp:html -->
<div class="WP_DEBUG">Fizzie front-page.html</div>
<!-- /wp:html -->

which means that the header is not the first block, therefore it gets the block gap.

Workaround

Add some CSS to force the margin-top to 0 for the header tag.

.wp-site-blocks header {
    margin-top: 0;
}

bobbingwide commented 2 years ago

Having re-enabled the grey outer background ( in https://github.com/bobbingwide/fizzie/commit/77ea8f3e092f62f82c75cd6f94e144a1a03700e0 ), setting the colour to very-light-gray I thought I was ready to release.

I pulled the latest version to blocks.wp-a2z.org.

But the background colours don't match.
In my local development environment the inlined global-styles-inline-css overrides the value in style.css
In the live environment it's the other way around.

I switched the local development environment to 5.8.2 and was able to reproduce the problem.

This suggests that in WordPress 5.9 there's a change to the priority in which global styles are enqueued. Something like that. I found this https://github.com/WordPress/gutenberg/issues/37589

Workaround

Change the very-light-gray colour from #eeeeee to #f5f5f5 to match the background colour in style.css
Consider adding some styling for the A to Z navigation since it looked quite nice with a slightly darker background.

bobbingwide commented 2 years ago

The latest version is now on blocks.wp-a2z.org. It appears to be a lot better than it was.

bobbingwide commented 2 years ago

Gutenberg 12.3.0 was released on 5 Jan 2022 and WordPress 5.9-RC1 was released on the 4th. Fizzie should now be tested with both versions.

Gutenberg 12.3.2 was released on 10th Jan WordPress 5.9-RC2 was released on 11th Jan

Fizzie is being tested in core.wp.a2z without Gutenberg and blocks.wp.a2z with Gutenberg

There are minor visual differences that can be seen when using Styles to set the default background colour. See the left/right margins around groups with a background colour of white. This screen capture from WordPress 5.9, no Gutenberg.

Note: The lighter bar to the left of the last WordPress Also note... I've not set the Site Logo. This should be to the left of the header text

bobbingwide commented 2 years ago

Time to support Gutenberg 12.4.0 and WordPress 5.9-RC3!

bobbingwide commented 1 year ago

delivered in v1.0.0

bobbingwide / fizzie