Gutenberg ServerSideRender is deprecated, how to work with new wp.serverSideRender component?

by

While working with ServerSideRender wordpress gutenberg component, I am seeing the following notice.

wp.components.ServerSideRender is deprecated. Please use wp.serverSideRender instead.

Here is my test code:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;

const { InspectorControls } = wp.blockEditor;

const {
    PanelBody, SelectControl, ServerSideRender, TextControl, ToggleControl,
} = wp.components;

registerBlockType( 'test-me/test-to-block', {
    title: __( 'Test Me' ),
    icon: 'shield',
    category: 'common',
    keywords: [
        __( 'Test Me' ),
        __( 'Test' ),
        __( 'msbd' ),
    ],

    attributes: {
        adAlignment: {
            type: 'string',
            default: 'center-align',
        },
        isWrapper: {
            type: 'boolean',
            default: true,
        },
    },

    edit: ( props ) => {
        const { setAttributes, attributes } = props;
        const { adAlignment, isWrapper } = attributes;

        return (
            <Fragment>
                <div className={ `test-me ${ className }` }>
                    <ServerSideRender
                        block="test-me/test-to-block"
                        attributes={ attributes }
                    />
                </div>
            </Fragment>
        );
    },

    save: ( props ) => {
        const { attributes, className="" } = props;

        return (
            <div className={ `test-me ${ className }` }>
                <ServerSideRender
                    block="test-me/test-to-block"
                    attributes={ attributes }
                />
            </div>
        );
    },
} );

How to modify this script to work with new wp.serverSideRender component?

2 Answers
2

The component is still functional, the issue is due to how it was pulled out into its own package. It is no longer uppercase and in order to use it in JSX, you will need to alias it:

const { serverSideRender: ServerSideRender } = wp;

See this issue for more details.

Leave a Comment