6.2 breaks Group blocks

I can no longer make Group blocks full and wide width (after updating to 6.2

Hi @audunmb are you missing the buttons shown in the screenshot below?

This may be a plugin or theme conflict. Please attempt to disable all plugins, and keep your site on one of the default (Twenty*) themes. If the problem goes away, enable them one by one to identify the source of your troubles. If you can install plugins, install and activate Health Check

It will add some additional features under the menu item under Tools > Site Health. On its troubleshooting tab, you can Enable Troubleshooting Mode. This will disable all plugins, switch to a standard WordPress theme (if available), allow you to turn your plugins on and off, and switch between themes, without affecting normal visitors to your site. This allows you to test for various compatibility issues.

Yes, I am missing those buttons. What’s weird is that only happens after the page is loaded. Some javascript loads after the initial load and causes this.

In browser console I get this:

Block validation: Block validation failed for core/group ( 
Object { name: "core/group", icon: {…}, keywords: (4) […], attributes: {…}, providesContext: {}, usesContext: [], supports: {…}, styles: [], variations: (3) […], save: save(), … }
 ).

Content generated by save function:

<div class="wp-block-group has-black-color has-text-color has-background"></div>

Content retrieved from post body:

<div class="wp-block-group has-black-color has-text-color has-background" style="background-color:#f5f5f5;padding-top:40px;padding-bottom:40px"></div>

Disabled all plugins with no apparent effect. Switching from my child theme to TwentyTwentyTwo parent fixes the issue though.

But there are no settings for group blocks in my child theme.

So that’s weird. Does using a child theme cause this?

Hi @audunmb so that is related to the child theme, did you add any custom code?

Also, may I ask how you created the child theme? If you didn’t use the Create Block Theme plugin I would suggest using it.

Yes, it was created with that plugin. The only custom code is two extra templates (landing page and events) added with the plugin, typography and colors in theme.json and a style.css with a few classes (which only should take effect if added to a block).

Do you get the error if you use a child theme generated by that plugin?

Hi @audunmb, the error message you posted is a block validation error, so it seems like the markup of a block, for some reason, is producing an error.

To help to debug it could be useful if you can share the block markup here. You can get it by pasting the markup you get after copying the block like this:

Please paste the full error message you are getting too.

Apart from that: have you tried to create a new group block? Are you getting the same error? Are you getting the error after exporting the theme or before and after too?

If you can share a screencast of the procedure you are following to create the block and theme it would be useful too.

@mmaattiiaass here’s the markup of a very simple newly created group block (all group blocks have the same issue)

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>text</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Console output of errrors and warnings (couldn’t copy with the formatting from the console, sorry)

Denne siden bruker den ikke-standardiserte egenskapen ?zoom?. Vurder ? bruke calc() i de aktuelle egenskapsverdiene, eller bruk ?transform? sammen med ?transform-origin: 0 0?. post.php
----
Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist. webrequest.js:195
    onBeforeRequest moz-extension://93c2a3e4-c009-45d2-8670-d56175402757/js/
webrequest.js:195
----
wp.compose.withState is deprecated since version 5.8. Please use wp.element.useState instead. 
deprecated.min.js:2:711
----
Block validation: Expected attributes  
Array [ (3) […] ]
?
0: Array(3) [ "class", "wp-block-group has-black-color has-text-color has-background", true ]
??
0: "class"
??
1: "wp-block-group has-black-color has-text-color has-background"
??
2: true
??
length: 3
??
<prototype>: Array []
???
at: function at()
???
concat: function concat()
???
constructor: function Array()
???
copyWithin: function copyWithin()
???
entries: function entries()
???
every: function every()
???
fill: function fill()
???
filter: function filter()
???
find: function find()
???
findIndex: function findIndex()
???
findLast: function findLast()
???
findLastIndex: function findLastIndex()
???
flat: function flat()
???
flatMap: function flatMap()
???
forEach: function forEach()
???
includes: function includes()
???
indexOf: function indexOf()
???
join: function join()
???
keys: function keys()
???
lastIndexOf: function lastIndexOf()
???
length: 0
???
map: function map()
???
pop: function pop()
???
push: function push()
???
reduce: function reduce()
???
reduceRight: function reduceRight()
???
reverse: function reverse()
???
shift: function shift()
???
slice: function slice()
???
some: function some()
???
sort: function sort()
???
splice: function splice()
???
toLocaleString: function toLocaleString()
???
toString: function toString()
???
unshift: function unshift()
???
values: function values()
???
Symbol(Symbol.iterator): function values()
???
Symbol(Symbol.unscopables): Object { at: true, copyWithin: true, entries: true, … }
???
<prototype>: Object { … }
?
length: 1
?
<prototype>: Array []
??
at: function at()
??
concat: function concat()
??
constructor: function Array()
??
copyWithin: function copyWithin()
??
entries: function entries()
??
every: function every()
??
fill: function fill()
??
filter: function filter()
??
find: function find()
??
findIndex: function findIndex()
??
findLast: function findLast()
??
findLastIndex: function findLastIndex()
??
flat: function flat()
??
flatMap: function flatMap()
??
forEach: function forEach()
??
includes: function includes()
??
indexOf: function indexOf()
??
join: function join()
??
keys: function keys()
??
lastIndexOf: function lastIndexOf()
??
length: 0
??
map: function map()
??
pop: function pop()
??
push: function push()
??
reduce: function reduce()
??
reduceRight: function reduceRight()
??
reverse: function reverse()
??
shift: function shift()
??
slice: function slice()
??
some: function some()
??
sort: function sort()
??
splice: function splice()
??
toLocaleString: function toLocaleString()
??
toString: function toString()
??
unshift: function unshift()
??
values: function values()
??
Symbol(Symbol.iterator): function values()
??
Symbol(Symbol.unscopables): Object { at: true, copyWithin: true, entries: true, … }
??
<prototype>: Object { … }
 , instead saw  
Array [ (3) […], (3) […] ]
?
0: Array(3) [ "class", "wp-block-group has-black-color has-text-color has-background", true ]
??
0: "class"
??
1: "wp-block-group has-black-color has-text-color has-background"
??
2: true
??
length: 3
??
<prototype>: Array []
?
1: Array(3) [ "style", "background-color:#f5f5f5;padding-top:40px;padding-bottom:40px", true ]
??
0: "style"
??
1: "background-color:#f5f5f5;padding-top:40px;padding-bottom:40px"
??
2: true
??
length: 3
??
<prototype>: Array []
?
length: 2
?
<prototype>: Array []
??
at: function at()
??
concat: function concat()
??
constructor: function Array()
??
copyWithin: function copyWithin()
??
entries: function entries()
??
every: function every()
??
fill: function fill()
??
filter: function filter()
??
find: function find()
??
findIndex: function findIndex()
??
findLast: function findLast()
??
findLastIndex: function findLastIndex()
??
flat: function flat()
??
flatMap: function flatMap()
??
forEach: function forEach()
??
includes: function includes()
??
indexOf: function indexOf()
??
join: function join()
??
keys: function keys()
??
lastIndexOf: function lastIndexOf()
??
length: 0
??
map: function map()
??
pop: function pop()
??
push: function push()
??
reduce: function reduce()
??
reduceRight: function reduceRight()
??
reverse: function reverse()
??
shift: function shift()
??
slice: function slice()
??
some: function some()
??
sort: function sort()
??
splice: function splice()
??
toLocaleString: function toLocaleString()
??
toString: function toString()
??
unshift: function unshift()
??
values: function values()
??
Symbol(Symbol.iterator): function values()
??
Symbol(Symbol.unscopables): Object { at: true, copyWithin: true, entries: true, … }
??
<prototype>: Object { … }
 . 


blocks.min.js:10:22236
----
Block validation: Block validation failed for core/group ( 
Object { name: "core/group", icon: {…}, keywords: (4) […], attributes: {…}, providesContext: {}, usesContext: [], supports: {…}, styles: [], variations: (3) […], save: save(), … }
?
apiVersion: 2
?
attributes: Object { tagName: {…}, templateLock: {…}, lock: {…}, … }
??
align: Object { type: "string", enum: (6) […] }
??
anchor: Object { type: "string", source: "attribute", attribute: "id", … }
??
ariaLabel: Object { type: "string", source: "attribute", attribute: "aria-label", … }
??
backgroundColor: Object { type: "string" }
??
borderColor: Object { type: "string" }
??
className: Object { type: "string" }
??
fontFamily: Object { type: "string" }
??
fontSize: Object { type: "string" }
??
gradient: Object { type: "string" }
??
layout: Object { type: "object" }
??
lock: Object { type: "object" }
??
settings: Object { type: "object" }
??
style: Object { type: "object" }
??
tagName: Object { type: "string", default: "div" }
??
templateLock: Object { type: (2) […], enum: (4) […] }
??
textColor: Object { type: "string" }
??
twBottomShape: Object { type: "string", default: "" }
??
twDecoration: Object { type: "string", default: "" }
??
twStretchedLink: Object { type: "boolean", default: false }
??
twTopShape: Object { type: "string", default: "" }
??
<prototype>: Object { … }
?
category: "design"
?
deprecated: Array(5) [ {…}, {…}, {…}, … ]
?
description: "Samle blokker i en oppsettsbeholder."
?
edit: function Fc()
?
example: Object { attributes: {…}, innerBlocks: (6) […] }
?
getEditWrapperProps: function getEditWrapperProps()
?
icon: Object { src: {…} }
?
keywords: Array(4) [ "beholder", "innpakning", "rad", … ]
?
name: "core/group"
?
providesContext: Object {  }
?
save: function save()
?
styles: Array []
?
supports: Object { __experimentalOnEnter: true, __experimentalSettings: true, anchor: true, … }
?
title: "Gruppe"
?
transforms: Object { from: (1) […], to: (1) […] }
?
usesContext: Array []
?
variations: Array(3) [ {…}, {…}, {…} ]
?
<prototype>: Object { … }
 ).

Content generated by save function:

<div class="wp-block-group has-black-color has-text-color has-background"></div>

Content retrieved from post body:

<div class="wp-block-group has-black-color has-text-color has-background" style="background-color:#f5f5f5;padding-top:40px;padding-bottom:40px"></div> 

blocks.min.js:10:22236

I’ll try to recreate the block theme. It might be a weird bug somewhere that disappears with a new child theme, but this worked nicely until I upgraded to 6.2

I’ve now created a new child theme and copied all templates, template parts, theme.json and style.css from the old child theme. In the new theme I don’t get the error.

What I now noticed (in the original child theme) is that while I get this error with the Page template, my custom Landing page template and in regular posts, I don’t get this error when choosing the template Page (Large header).

So the error has to be in the templates somehow , and seems to be related to how all content is within a group block with constrained layout:

<!-- wp:group {"tagName":"main","layout":{"type":"constrained","contentSize":"800px","wideSize":"1100px"}} -->

<main class="wp-block-group"><!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"0px","top":"0"}},"typography":{"fontStyle":"normal","fontWeight":"900"}}} /-->

<!-- wp:post-content {"className":"","layout":{"type":"default"}} /--></main>
<!-- /wp:group -->

The constrained layout is not part of the core theme template, but seems to part of my page and posts templates. (I found this by using the core export theme function and looking at the templates).

Is there a way to fix this while keeping the other customisations in my child theme?

Found the “revert to standard template” button, so that fixes it. I’ll have to recreate the templates now.

So, the error is that the 6.2 update broke my custom generated templates. I have no idea why, this is still a bug, but I found a workaround.

It’s a bug that probably only affects very few users for now, but with more users this would be a serious issue.

I hope further updates doesn’t break even more stuff.

It looks like this might be related to the fact that layout settings on the Post Content block in templates is now passed down to pages and posts.

So if the Post Content block does not have “Inner blocks use content width” enabled, then blocks on pages/posts that use that template will not have the wide/full alignment settings.

This is intended but can be very confusing ??