Block preview not working with site editor

[mikemanger]

Bug summary

The block preview doesn't work when editing a template part in the site editor. I can still click in and edit the block fine. The error doesn't happen when using a pattern.

Versions

• WordPress version: 6.5.3
• Genesis Custom Blocks version: 1.7.0 pro

[eatse21]

This is due to Gutenberg's ServerSideRender which adds a post_id url query parameter when trying to render.

https://github.com/WordPress/gutenberg/blob/c0e3ad898f67792d48c5e3b45f14b7a2c189722b/packages/server-side-render/src/index.js#L36-L46

Since in site editor it's not running in a post, instead of a valid post_id, it sends the template part name instead, like theme//template-part-name, and so the request fails.

A quick fix for making Genesis Custom Blocks work is to add a dummy post_id in the Components props, like :

<ServerSideRender
  block={ `genesis-custom-blocks/${ block.name }` }
  attributes={ blockProps.attributes }
  className="genesis-custom-blocks-editor__ssr"
  httpMethod="POST"
  urlQueryArgs={ { post_id: 0,
                   inner_blocks: innerBlocks ? encodeURIComponent( serialize( innerBlocks ) ) : '',
                 } }
/>

Here :

genesis-custom-blocks/js/src/block-editor/components/edit.js

Lines 123 to 132 in 936b6c7

	<ServerSideRender
	block={ `genesis-custom-blocks/${ block.name }` }
	attributes={ blockProps.attributes }
	className="genesis-custom-blocks-editor__ssr"
	httpMethod="POST"
	urlQueryArgs={ { inner_blocks: innerBlocks
	? encodeURIComponent( serialize( innerBlocks ) )
	: '',
	} }
	/>

To try in the built version of block-editor.js (published on wordpress.org), find urlQueryArgs:{inner_blocks in the file, and change it like urlQueryArgs:{post_id:0,inner_blocks

This souldn't have too much impact if you're not fetching post data in your custom blocks I think… But it's a nice workaround instead of the error banner.

Of course, a proper solution is to be made.

[via-lars]

Hello,

I like to cast my vote for an "official" update (to at least Genesis Custom Blocks Pro) to solve this issue.