2

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?

3

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.

2

This just means they moved the component. Replace this part:

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

with

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

Unless they've changed anything else about the component, the location you're importing it from should be the only update needed.

Be careful with the first letter of 'serverSideRender', lower case!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.