ServerSideRender

Tip

View source on GitHub →

A thin wrapper around Gutenberg's @wordpress/server-side-render that adds a consistent dotted-border preview container and disables pointer events so the render is non-interactive in the editor.

import { ServerSideRender } from '@eightshift/frontend-libs-tailwind/scripts';

<ServerSideRender
	block='my-theme/latest-posts'
	attributes={attributes}
/>;

Highlighted props

Prop	Type	Description
block	string	Required. Fully qualified block name (e.g. my-theme/latest-posts).
attributes	object	Block attributes passed to the PHP render callback.
className	string	Extra classes appended to the preview wrapper.

Any other prop is forwarded to the underlying @wordpress/server-side-render — see the WordPress reference for the full list (urlQueryArgs, httpMethod, EmptyResponsePlaceholder, ErrorResponsePlaceholder, LoadingResponsePlaceholder, …).

Custom loading / empty / error states

<ServerSideRender
	block='my-theme/latest-posts'
	attributes={attributes}
	LoadingResponsePlaceholder={() => <Spinner />}
	EmptyResponsePlaceholder={() => <p>{__('No posts yet.', 'my-theme')}</p>}
/>