Server Side Registration not working

[jasonbahl]

Hey, I've got things working well for Client Side registration, but I'm not able to see blocks registered server side.

Using your example:

register_block_type( 'example-namespace/example-block', array(
        'title' => 'Example Block',
	'attributes' => array(
		'image' => array(
			'type' => 'object',
			'field' => array(
				'type' => 'image',
				'buttonText' => 'Upload',
				'imagePlaceholder' => true,
				'removeButtonText' => 'Remove',
			),
		),
		'color' => array(
			'type' => 'string',
			'field' => array(
				'type' => 'color'
			)
		)
	),
	'render_callback' => 'example_callback',
) );

I don't have an example block in my list of blocks.

I know Gutenberg support for Server Side registry is pretty weak. . .not sure if this is still a limitation of Gutenberg, an issue with this plugin, or just something I'm doing wrong?

[mohdsayed]

Middleware does not do server side registration however by

✔️ Gutenberg Fields Middleware also works for PHP block registration:

we meant that the field would also work when you do server side registration. I think the sentence looks confusing, I will update that in readme. The minimum that needs to be done in JS is to register the block like this

wp.blocks.registerBlockType( 'gb-m-example/simple-block-server-side', {} );

I added an example of it in examples/ folder. https://github.com/rtCamp/gutenberg-fields-middleware/tree/develop/examples/server-side-registration

[jasonbahl]

Thanks for the quick reply. I’ll check this out and report back.

Thanks!

[jasonbahl]

@sayedtaqui this still doesn't work.

Using the example, I still don't have the "Example Block Server Side" showing in the inserter.

I do see it getting localized to the window. _wpBlocks but it looks like Gutenberg isn't taking that and using it in the UI 🤔

[mohdsayed]

@jasonbahl This is strange, have you tried with just gutenberg and middleware plugins activated?

[mohdsayed]

@jasonbahl I also tried with Yoast SEO and Atomic Blocks plugin activated, didn't see any conflict. Don't know what could have caused conflict in your setup.

[jasonbahl]

@sayedtaqui aha!

Figured it out!

So, I had a block edit: function registered on the client, and it was just returning a component. . .I needed to also return props.middleware.inspectorControls to the return statement.

edit: () => { 
   return <SomeComponent />
}

changed to:

edit: (props) => {
  return [
     props.middleware.inspectorControls,
     <SomeComponent />
  ];
}