audunmb

You could change it in the templates or use custom CSS, either in theme.json or if you have enqueued a stylesheet.

How can I do that? Using page templates would be the best option for my use case, but I can’t find any documentation on how to add CSS to templates. Even your rather informative website fullsiteediting.com doesn’t have anything on that.

Simple adding some rules in a style.css would of course work, but that would be a workaround.

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.

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?

@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

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?

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?

But it looks like colors set by Block Editor Colors disappear if I disable the plugin? That will be a huge issue on my site when I update to a block theme. Is there a way to fix that?

I noticed that the classes are kept, but the CSS is gone. Is there a simple way to export the CSS file from the plugin, so that I don’t have to manually recreate the classes and colors?

Just add that I also have this issue. Disabling the plugin lets me have the theme.json colors in my Twenty-Twenty-Two child theme.

But it looks like colors set by Block Editor Colors disappear if I disable the plugin? That will be a huge issue on my site when I update to a block theme. Is there a way to fix that?

My bad, it was a plugin (Getwid Block editor colors) that caused the override.

Ok, sorry. I was a bit quick when editing the comment above. Seems like both the xml code and comments cause issues.

Edit: OK, the comment was the issue. A way to remove or ignore them will be great.

• This reply was modified 1 year, 8 months ago by audunmb.

This would be breach the license that allows you to use WordPress (GPL), so no, you can’t do that.

@a77777t that’s a workaround, but it doesn’t mean that the shortcode works.

A simpler workaround is to add the following CSS

.events-grid .em-list {display:grid;  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}

and wrap you shortcode in a div with the events-grid class

<div class="events-grid">[events_list]</div>

Also, add a div tags to the formatting in the end and beginning of each event in the list (under settings formatting -> Events-> default list format), to make each event a separate item in the grid. (It might work without this, but it is to make sure that each event is treated as a separate grid item).

I haven’t test this with the new default CSS, but if you use your own custom CSS, this should work.

@thelmachido thanks for trying to help. Templates are stored as HTML-files. By adding stuff in brackets in that HTML-file you can add more customisations to the template. I’m asking how this works as it poorly documented.

There’s more info on this here.

• This reply was modified 1 year, 8 months ago by audunmb.

It doesn’t work for anyone.