Add new prop to ServerSideRender component

WordPress 6.2 introduces a new skipBlockSupportAttributes prop to exclude attributes and styles related to blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. supports in the ServerSideRender component. This makes it easier to properly add support to blocks with the ServerSideRender components.

ServerSideRender is a component used for server-side rendering a preview of dynamic blocks to display in the editor. By passing the attributes prop to this component, it is processed on the server side and the block receives the rendered result.

ServerSideRender component 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 APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. endpoints, so that JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. can be used for rendering client-side in the edit function. This gives the best user experience, instead of relying on using the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher 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.

import ServerSideRender from '@wordpress/server-side-render';
const MyServerSideRender = () => (
	<ServerSideRender
		block="core/archives"
		attributes={ attributes }
	/>
);

If you add block supports to the block that contains this component, the problem is that the styles from the block support will be applied to both the block wrapper element and the rendered HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. by ServerSideRender component. For example, if you opt for padding and margin as block support, and those styles are applied to the block, you will have double spaces.

<div
	...
	class="block-editor-block-list__block wp-block wp-block-archives"
	style="padding: 10px; margin: 10px;"
>
	<div inert="true" class="components-disabled">
  		<div>
  			<ul
				style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;"
				class="wp-block-archives-list wp-block-archives"
			>
				<li><a href="http://example.com">Hello World</a></li>
			</ul>
		</div>
	</div>
</div>

By opting in to the new skipBlockSupportAttributes prop introduced in WordPress 6.2, all attributes related to block support will be removed before rendering on the server side, and you will be able to get proper rendering results.

import ServerSideRender from '@wordpress/server-side-render';
const MyServerSideRender = () => (
	<ServerSideRender
 		skipBlockSupportAttributes
		block="core/archives"
		attributes={ attributes }
	/>
);

However, if block styles are already defined in the global style or in theme.json, those styles will take precedence and individual block’s overrides may not be applied. In such cases, explicitly handling the block support to be passed to the ServerSideRender component will produce the intended result.

import ServerSideRender from '@wordpress/server-side-render';

const serverSideAttributes = {
	...attributes,
	style: {
		...attributes?.style,
		// Ignore styles related to margin and padding.
		spacing: undefined,
	},
};

const MyServerSideRender = () => (
	<ServerSideRender
		// All block support attributes except margins and padding are passed.
 		attributes={ serverSideAttributes }
		block="core/archives"
		attributes={ attributes }
	/>
);

wp.components.ServerSideRender

The ServerSideRender component has moved to its own package/script in WordPress 5.3 and accessing it using wp.components.ServerSideRender has been deprecated since. Starting WordPress 6.2, you should be able to access it directly using wp.serverSideRender. (#46106)

Props to @andrewserong, @bph, @aaronrobertshaw @youknowriad for reviewing.

#6-2, #dev-notes, #dev-notes-6-2