No styles on frontend when used as reusable blocks

Hi @whiteartstudio

Can you copy the system status in Dashboard->Gutenverse->System Status?
Also, can you copy the reusable block’s content you created?

Thank you.

Can you copy the system status in Dashboard->Gutenverse->System Status?

I can’t. When I try to copy after clicking “Copy System Status” I get a javascript error in the console (in Google Chrome):

caught (in promise) TypeError: Cannot read properties of undefined (reading 'writeText')
at dashboard.js?ver=1.8.4:1:3787991
at l (load-scripts.php?c=1&load%5Bchunk_0%5D=hoverIntent,wp-polyfill-inert,regenerator-runtime,wp-polyfill,wp-hooks&ver=6.2:4:1755)
at o.value (load-scripts.php?c=1&load%5Bchunk_0%5D=hoverIntent,wp-polyfill-inert,regenerator-runtime,wp-polyfill,wp-hooks&ver=6.2:4:1568)
at Generator.next (load-scripts.php?c=1&load%5Bchunk_0%5D=hoverIntent,wp-polyfill-inert,regenerator-runtime,wp-polyfill,wp-hooks&ver=6.2:4:2182)
at n (dashboard.js?ver=1.8.4:1:1384757)
at s (dashboard.js?ver=1.8.4:1:1384968)
at dashboard.js?ver=1.8.4:1:1385027
at new Promise ()
at dashboard.js?ver=1.8.4:1:1384908
at dashboard.js?ver=1.8.4:1:3788159

Here is the screenshot: https://ibb.co/TrCM3nV

and here is reusable block’s content .json file

{
  "__file": "wp_block",
  "title": "gutenverse",
  "content": "<!-- wp:gutenverse/section {\"elementId\":\"guten-KRn16c\"} -->\n<div class=\"section-wrapper\" data-id=\"KRn16c\"><section class=\"wp-block-gutenverse-section guten-element guten-section guten-KRn16c layout-boxed align-stretch\"><div class=\"guten-background-overlay\"></div><div class=\"guten-shape-divider guten-shape-divider-top\"></div><div class=\"guten-shape-divider guten-shape-divider-bottom\"></div><div class=\"guten-container guten-column-gap-default\"><!-- wp:gutenverse/column {\"width\":{\"Desktop\":50},\"elementId\":\"guten-uFyEkp\"} -->\n<div class=\"wp-block-gutenverse-column guten-element guten-column guten-uFyEkp\"><div class=\"guten-background-overlay\"></div><div class=\"sticky-wrapper\" data-id=\"uFyEkp\"><div class=\"guten-column-wrapper\"><!-- wp:gutenverse/image {\"elementId\":\"guten-RlBM0X\",\"imgSrc\":{\"media\":{\"imageId\":7,\"sizes\":{\"thumbnail\":{\"height\":150,\"width\":150,\"url\":\"https://www.wordpress.loc/wp-content/uploads/2023/02/placeholder-150x150.jpg\",\"orientation\":\"landscape\"},\"medium\":{\"height\":150,\"width\":300,\"url\":\"https://www.wordpress.loc/wp-content/uploads/2023/02/placeholder-300x150.jpg\",\"orientation\":\"landscape\"},\"full\":{\"url\":\"https://www.wordpress.loc/wp-content/uploads/2023/02/placeholder.jpg\",\"height\":250,\"width\":500,\"orientation\":\"landscape\"}}},\"size\":\"full\"},\"altOriginal\":\"\",\"captionOriginal\":\"\",\"imgBorder\":{\"radius\":{\"Desktop\":{}}}} -->\n<div class=\"wp-block-gutenverse-image guten-element guten-image guten-RlBM0X\"><a class=\"guten-image-wrapper\"><img class=\"gutenverse-image-box-filled\" src=\"https://www.wordpress.loc/wp-content/uploads/2023/02/placeholder.jpg\" height=\"250\" width=\"500\"/></a></div>\n<!-- /wp:gutenverse/image --></div></div></div>\n<!-- /wp:gutenverse/column -->\n\n<!-- wp:gutenverse/column {\"width\":{\"Desktop\":50},\"elementId\":\"guten-1dWauK\"} -->\n<div class=\"wp-block-gutenverse-column guten-element guten-column guten-1dWauK\"><div class=\"guten-background-overlay\"></div><div class=\"sticky-wrapper\" data-id=\"1dWauK\"><div class=\"guten-column-wrapper\"><!-- wp:gutenverse/icon-box {\"elementId\":\"guten-ADR2NB\",\"background\":{\"type\":\"default\",\"color\":{\"r\":255,\"g\":236,\"b\":0,\"a\":1}}} -->\n<div class=\"guten-element guten-ADR2NB guten-icon-box icon-position-undefined\"><div class=\"guten-icon-box-wrapper hover-from-left\"><div class=\"icon-box icon-box-header\"><div class=\"icon style-color\"><i class=\"far fa-user\"></i></div></div><div class=\"icon-box icon-box-body\"><h2 class=\"title\">Icon Box</h2><p class=\"icon-box-description\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></div>\n<!-- /wp:gutenverse/icon-box --></div></div></div>\n<!-- /wp:gutenverse/column --></div></section></div>\n<!-- /wp:gutenverse/section -->"
}

Hi @whiteartstudio

The error you’re encountering when copying System Status is happening because your site uses HTTP. Once you move it to a live site with HTTPS, everything should work smoothly.

Regarding the reusable block issue, we want to inform you that we’ve identified the cause and will provide a fix in our next update. Thanks for bringing this to our attention, and please let us know if there’s anything else we can do to assist you.

No that;s all for now. Waiting for update. ETA?

We can’t give estimation time for the update at the moment. But if you can edit the code and don’t want to wait you can try to add this code to gutenverse/plugins/includes/class-style-generator.php

if ( 'core/block' === $block['blockName'] && isset( $block['attrs'] ) && isset( $block['attrs']['ref'] ) ) {
	$reusables = get_post( $block['attrs']['ref'] );

	if ( $reusables ) {
		$reusables = $this->parse_blocks( $reusables->post_content );
		$reusables = $this->flatten_blocks( $reusables );
		$this->loop_blocks( $reusables, $style );
	}
}

I tried to fix it myself but my PHP is not so good. but I was so close ??

I’ve used other blocks but I’d love to come back to gutenverse in my next project because there are a few features I like.

We are working to bring the update as soon as possible.
Thank you for your patience. ??

Alternatively, you can use the template part as a medium for reusing blocks, but might not have a similar effect as reusable blocks.