Switch branches/tags
@wordpress/wordcount@2.0.3 @wordpress/wordcount@2.0.2 @wordpress/wordcount@2.0.1 @wordpress/wordcount@2.0.0 @wordpress/wordcount@1.1.3 @wordpress/wordcount@1.1.2 @wordpress/wordcount@1.1.1 @wordpress/wordcount@1.1.0 @wordpress/viewport@2.0.11 @wordpress/viewport@2.0.10 @wordpress/viewport@2.0.9 @wordpress/viewport@2.0.8 @wordpress/viewport@2.0.7 @wordpress/viewport@2.0.6 @wordpress/viewport@2.0.5 @wordpress/viewport@2.0.4 @wordpress/viewport@2.0.3 @wordpress/viewport@2.0.2 @wordpress/viewport@2.0.1 @wordpress/viewport@2.0.0 @wordpress/viewport@1.0.4 @wordpress/viewport@1.0.3 @wordpress/viewport@1.0.2 @wordpress/viewport@1.0.1 @wordpress/viewport@1.0.0 @wordpress/url@2.3.0 @wordpress/url@2.2.0 @wordpress/url@2.1.0 @wordpress/url@2.0.2 @wordpress/url@2.0.1 @wordpress/url@2.0.0 @wordpress/url@1.2.3 @wordpress/url@1.2.2 @wordpress/url@1.2.1 @wordpress/url@1.2.0 @wordpress/token-list@1.0.2 @wordpress/token-list@1.0.1 @wordpress/token-list@1.0.0 @wordpress/shortcode@2.0.2 @wordpress/shortcode@2.0.1 @wordpress/shortcode@2.0.0 @wordpress/shortcode@1.0.3 @wordpress/shortcode@1.0.2 @wordpress/shortcode@1.0.1 @wordpress/shortcode@1.0.0 @wordpress/shortcode@1.0.0-alpha.3 @wordpress/shortcode@1.0.0-alpha.2 @wordpress/scripts@2.4.3 @wordpress/scripts@2.4.2 @wordpress/scripts@2.4.1 @wordpress/scripts@2.4.0 @wordpress/scripts@2.3.1 @wordpress/scripts@2.3.0 @wordpress/scripts@2.2.1 @wordpress/scripts@2.2.0 @wordpress/scripts@2.1.0 @wordpress/scripts@2.0.3 @wordpress/scripts@2.0.2 @wordpress/scripts@2.0.1 @wordpress/scripts@2.0.0 @wordpress/rich-text@3.0.0 @wordpress/rich-text@2.0.4 @wordpress/rich-text@2.0.3 @wordpress/rich-text@2.0.2 @wordpress/rich-text@2.0.1 @wordpress/rich-text@2.0.0 @wordpress/rich-text@1.0.2 @wordpress/rich-text@1.0.1 @wordpress/rich-text@1.0.0 @wordpress/rich-text@1.0.0-beta.2 @wordpress/rich-text@1.0.0-beta.1 @wordpress/redux-routine@3.0.3 @wordpress/redux-routine@3.0.2 @wordpress/redux-routine@3.0.1 @wordpress/redux-routine@3.0.0 @wordpress/redux-routine@2.0.0 @wordpress/redux-routine@1.0.0 @wordpress/postcss-themes@1.0.4 @wordpress/postcss-themes@1.0.3 @wordpress/postcss-themes@1.0.2 @wordpress/postcss-themes@1.0.1 @wordpress/postcss-themes@1.0.0 @wordpress/postcss-themes@1.0.0-alpha.3 @wordpress/postcss-themes@1.0.0-alpha.2 @wordpress/postcss-themes@1.0.0-alpha.1 @wordpress/postcss-themes@1.0.0-alpha.0 @wordpress/plugins@2.0.9 @wordpress/plugins@2.0.8 @wordpress/plugins@2.0.7 @wordpress/plugins@2.0.6 @wordpress/plugins@2.0.5 @wordpress/plugins@2.0.4 @wordpress/plugins@2.0.3 @wordpress/plugins@2.0.2 @wordpress/plugins@2.0.1 @wordpress/plugins@2.0.0 @wordpress/plugins@1.0.4 @wordpress/plugins@1.0.3 @wordpress/plugins@1.0.2 @wordpress/plugins@1.0.1
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
test
README.md
index.js

README.md

ServerSideRender

ServerSideRender is a component used for server-side rendering a preview of dynamic blocks to display in the editor. Server-side rendering in a block's edit function should be limited to blocks that are heavily dependent on existing PHP rendering logic that is heavily intertwined with data, particularly when there are no endpoints available.

ServerSideRender may also be used when a legacy block is provided as a backwards compatibility measure, rather than needing to re-write the deprecated code that the block may depend on.

ServerSideRender should be regarded as a fallback or legacy mechanism, it is not appropriate for developing new features against.

New blocks should be built in conjunction with any necessary REST API endpoints, so that JavaScript can be used for rendering client-side in the edit function. This gives the best user experience, instead of relying on using the PHP render_callback. The logic necessary for rendering should be included in the endpoint, so that both the client-side JavaScript and server-side PHP logic should require a minimal amount of differences.

Usage

Render core/archives preview.

import { ServerSideRender } from '@wordpress/components';

const MyServerSideRender = () => (
	<ServerSideRender
		block="core/archives"
		attributes={ {
			showPostCounts: true,
			displayAsDropdown: false, 
		} }
	/>
);

Output

Output uses the block's render_callback function, set when defining the block.

API Endpoint

The API endpoint for getting the output for ServerSideRender is /wp/v2/block-renderer/:block. It accepts any params, which are used as attributes for the block's render_callback method.