Rendering a block from one page in another

• roryashfordbentley

• January 12, 2022 at 7:50 am

Hey all!

I’m really struggling to load a block from one post-type in another and any assistance would be massively appreciated!

Background

I have a post type called ‘testimonials’ and have created a testimonial block with 3 innerBlocks (title, content, citation) these innerblocks are using core/heading and core/paragraph blocks. The testimonial block is added as block template to posts within the testimonials post-type and this is working perfectly. Looks the same frontent and backend.

Now in the main pages post-type I have created another ACF gutenberg block called ‘testimonials’ which renders a slider and there is an ACF relationship field that users can select ‘testimonials’ from the testimonials post-type to display on the current page. This all works perfectly, however the blocks that get pulled in from the testimonials post type are rendered without any of the saved data from the InnerBlock fields and I’m completely stumped as to how to resolve this.

Code

acf_register_block_type([
    'name' => 'testimonial-slider',
    'title' => 'Testimonial slider',
    'description' => 'Select testimonials to display within this slider.',
    'category' => 'common',
    'icon' => 'admin-links',
    'mode' => 'preview',
    'supports' => [
        'align' => false,
        'mode' => true,
        'jsx' => true
    ],
    'enqueue_script' => get_stylesheet_directory_uri() . '/blocks/testimonial-slider/index.js',
    'render_callback' => function ($block, $content = '') {
        $selected_testimonials = get_field('select_testimonials');

        $slides = [];

        if ($selected_testimonials) {
            foreach ($selected_testimonials as $testimonial) {
                $content = get_the_content(false, false, $testimonial->ID);
                $testimonials = parse_blocks($content);

                foreach ($testimonials as $testimonial_block) {
                    if ($testimonial_block['blockName'] == 'acf/testimonial-slide') {
                        // Issue
                        $slides[] = render_block($testimonial_block);
                    }
                }
            }

            // Render the output
            Component::renderBlockComponent('testimonial-slider', [
                'slides' => $slides
            ]);
        }
    }
]);

In the above code example I expect render_block() to render static HTML markup based on the WordPress documentation that states the return = ‘String of rendered HTML’. This works perfectly on the frontend and the slider has the correct slides and renderes beautifully but in the gutenberg editor it loads in both slides with none of the content and instead it displays the placeholder values and the blocks are editable what I want is to just display the rendered block markup.

I’m hopeful that there is a differnt method I can use instead of render_block here I have already tried using ge_the_content which strangely renders the innerBlock content but not the main block.

One solution I have seen for WP specific blocks it to use the <ServerSideRender> component however I cant seem to get this working with ACF so I suspect it isnt supported.

Any suggestions or advice would be greatly appreciated, I’m considering switching from InnerBlocks to ACF fields here to make it work but it would be a great shame to lose the inline editing experience of InnerBlocks.