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

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.