ServerSideRender not rendering in block editor, but output is in "apiFetch"
I'm building a dynamic block. All seems to be working fine, except it isn't actually rendering the block in the editor. It is doing something, because if I inspect the page source in the editor, the content that should be being rendered is on the page, but it's inside of an apiFetch:
script id=wp-api-fetch-js-after
...
wp.apiFetch.use(...content:{raw: \\my html is here ,protected:false,block_version:1},
...
My edit code looks like this:
import ServerSideRender from '@wordpress/server-side-render';
import { useBlockProps } from '@wordpress/block-editor';
export default function Edit({ props }) {
const blockProps = useBlockProps();
return (
div {...blockProps}
ServerSideRender
block=cwr/testimonial-block
/
/div
);
}
Note, I'm not passing any attributes because there's nothing configurable. I also tried changing the import to
const { ServerSideRender } = wp.components;
but there was no difference.
Initially, the render function was outputting the desired HTML; however, that resulted in it getting directly inserted after the opening body
tag on the editor page, and generating an error. Based on a StackOverflow question, I've now changed that so the render function is returning a string. Both methods rendered fine on the front-end.
Current render function:
function cwr_testimonial_render_callback( $block_attributes ) {
$the_block = 'div class=testimonial-wrapperNo testimonials
. found. Please create some first./div';
// code to change the above default to the desired dynamic output
return $the_block;
}
And registration is set up thusly:
function create_block_cwr_testimonial_block_block_init() {
register_block_type( __DIR__ . '/build',
array(
'render_callback' = 'cwr_testimonial_render_callback',
)
);
}
add_action( 'init', 'create_block_cwr_testimonial_block_block_init' );
And my block.json:
{
$schema: https://schemas.wp.org/trunk/block.json,
apiVersion: 2,
name: cwr/testimonial-block,
version: 0.99.1,
title: Simple Testimonial Block,
category: widgets,
icon: flag,
description: A simple block for a testimonial slider,
attributes: {
message: {
type: string,
source: text,
selector: div
}
},
supports: {
html: false
},
textdomain: cwr-testimonial-block,
editorScript: file:./index.js,
editorStyle: file:./index.css,
style: file:./style-index.css
}
What am I missing to get it to actually render in the editor?
Topic block-editor Wordpress
Category Web