Closed bobbingwide closed 1 year 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 | ? |
There was no Colour editing dialog!
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
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}} /-->
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
So I'll have to attempt to re-enable editing of wp_template and wp_template_part, using oik-types.
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
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.
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.
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
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()
);
core/query-loop
blocks to core/post-template
$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
In this example we use the Query block to display some posts with both their content and excerpts, side by side.
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 1I 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');
}
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.
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?
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 );
}
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.
Add some CSS to force the margin-top to 0 for the header tag.
.wp-site-blocks header {
margin-top: 0;
}
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.
global-styles-inline-css
overrides the value in style.css
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
#eeeeee
to #f5f5f5
to match the background colour in style.cssThe latest version is now on blocks.wp-a2z.org. It appears to be a lot better than it was.
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
Time to support Gutenberg 12.4.0 and WordPress 5.9-RC3!
delivered in v1.0.0
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.