gocodebox/lifterlms

// WordPress dependencies.
import { registerBlockType } from '@wordpress/blocks';
import { Disabled, Spinner } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import ServerSideRender from '@wordpress/server-side-render';
import { useMemo } from '@wordpress/element';

// Internal dependencies.
import blockJson from './block.json';
import Icon from './icon.jsx';

const Edit = ( { attributes } ) => {
    const blockProps = useBlockProps();

    const memoizedServerSideRender = useMemo( () => {
        return <ServerSideRender
            block={ blockJson.name }
            attributes={ attributes }
            LoadingResponsePlaceholder={ () =>
                <Spinner />
            }
            ErrorResponsePlaceholder={ () =>
                <p className={ 'llms-block-error' }>{ __( 'Error loading content. Please check block settings are valid. This block will not be displayed.', 'lifterlms' ) }</p>
            }
            EmptyResponsePlaceholder={ () =>
                <p className={ 'llms-block-empty' }>{ __( 'Registration form preview not available. This block will not be displayed.', 'lifterlms' ) }</p>
            }
        />;
    }, [ attributes ] );

    return <>
        <div
            { ...blockProps }
        >
            <Disabled>
                { memoizedServerSideRender }
            </Disabled>
        </div>
    </>;
};

registerBlockType( blockJson, {
    icon: Icon,
    edit: Edit,
} );