Fix server rendered widget not previewing (#29197)

WordPress · Feb 24, 2021 · b2c7d27 · b2c7d27
1 parent 537bfed
commit b2c7d27
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js
@@ -30,7 +30,10 @@ import {
 	getBlockTypes,
 	getGroupingBlockName,
 } from './registration';
-import { normalizeBlockType, sanitizeBlockAttributes } from './utils';
+import {
+	normalizeBlockType,
+	__experimentalSanitizeBlockAttributes,
+} from './utils';
 
 /**
  * Returns a block object given its type and attributes.
@@ -42,7 +45,10 @@ import { normalizeBlockType, sanitizeBlockAttributes } from './utils';
  * @return {Object} Block object.
  */
 export function createBlock( name, attributes = {}, innerBlocks = [] ) {
-	const sanitizedAttributes = sanitizeBlockAttributes( name, attributes );
+	const sanitizedAttributes = __experimentalSanitizeBlockAttributes(
+		name,
+		attributes
+	);
 
 	const clientId = uuid();
 
@@ -104,10 +110,13 @@ export function __experimentalCloneSanitizedBlock(
 ) {
 	const clientId = uuid();
 
-	const sanitizedAttributes = sanitizeBlockAttributes( block.name, {
-		...block.attributes,
-		...mergeAttributes,
-	} );
+	const sanitizedAttributes = __experimentalSanitizeBlockAttributes(
+		block.name,
+		{
+			...block.attributes,
+			...mergeAttributes,
+		}
+	);
 
 	return {
 		...block,

diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
@@ -140,6 +140,7 @@ export {
 	isValidIcon,
 	getBlockLabel as __experimentalGetBlockLabel,
 	getAccessibleBlockLabel as __experimentalGetAccessibleBlockLabel,
+	__experimentalSanitizeBlockAttributes,
 } from './utils';
 
 // Templates are, in a general sense, a basic collection of block nodes with any

diff --git a/packages/blocks/src/api/test/utils.js b/packages/blocks/src/api/test/utils.js
@@ -17,7 +17,7 @@ import {
 	isUnmodifiedDefaultBlock,
 	getAccessibleBlockLabel,
 	getBlockLabel,
-	sanitizeBlockAttributes,
+	__experimentalSanitizeBlockAttributes,
 } from '../utils';
 
 describe( 'block helpers', () => {
@@ -231,10 +231,13 @@ describe( 'sanitizeBlockAttributes', () => {
 			title: 'Test block',
 		} );
 
-		const attributes = sanitizeBlockAttributes( 'core/test-block', {
-			defined: 'defined-attribute',
-			notDefined: 'not-defined-attribute',
-		} );
+		const attributes = __experimentalSanitizeBlockAttributes(
+			'core/test-block',
+			{
+				defined: 'defined-attribute',
+				notDefined: 'not-defined-attribute',
+			}
+		);
 
 		expect( attributes ).toEqual( {
 			defined: 'defined-attribute',
@@ -243,7 +246,10 @@ describe( 'sanitizeBlockAttributes', () => {
 
 	it( 'throws error if the block is not registered', () => {
 		expect( () => {
-			sanitizeBlockAttributes( 'core/not-registered-test-block', {} );
+			__experimentalSanitizeBlockAttributes(
+				'core/not-registered-test-block',
+				{}
+			);
 		} ).toThrowErrorMatchingInlineSnapshot(
 			`"Block type 'core/not-registered-test-block' is not registered."`
 		);
@@ -263,7 +269,10 @@ describe( 'sanitizeBlockAttributes', () => {
 			title: 'Test block',
 		} );
 
-		const attributes = sanitizeBlockAttributes( 'core/test-block', {} );
+		const attributes = __experimentalSanitizeBlockAttributes(
+			'core/test-block',
+			{}
+		);
 
 		expect( attributes ).toEqual( {
 			hasDefaultValue: 'default-value',
@@ -287,9 +296,12 @@ describe( 'sanitizeBlockAttributes', () => {
 			title: 'Test block',
 		} );
 
-		const attributes = sanitizeBlockAttributes( 'core/test-block', {
-			nodeContent: [ 'test-1', 'test-2' ],
-		} );
+		const attributes = __experimentalSanitizeBlockAttributes(
+			'core/test-block',
+			{
+				nodeContent: [ 'test-1', 'test-2' ],
+			}
+		);
 
 		expect( attributes ).toEqual( {
 			nodeContent: [ 'test-1', 'test-2' ],

diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
@@ -241,7 +241,7 @@ export function getAccessibleBlockLabel(
  * @param {Object} attributes The block's attributes.
  * @return {Object} The sanitized attributes.
  */
-export function sanitizeBlockAttributes( name, attributes ) {
+export function __experimentalSanitizeBlockAttributes( name, attributes ) {
 	// Get the type definition associated with a registered block.
 	const blockType = getBlockType( name );
 

diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
@@ -25,6 +25,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.12.5",
 		"@wordpress/api-fetch": "file:../api-fetch",
+		"@wordpress/blocks": "file:../blocks",
 		"@wordpress/components": "file:../components",
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",

diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js
@@ -11,6 +11,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { Placeholder, Spinner } from '@wordpress/components';
+import { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';
 
 export function rendererPath( block, attributes = null, urlQueryArgs = {} ) {
 	return addQueryArgs( `/wp/v2/block-renderer/${ block }`, {
@@ -60,12 +61,16 @@ export class ServerSideRender extends Component {
 			urlQueryArgs = {},
 		} = props;
 
+		const sanitizedAttributes =
+			attributes &&
+			__experimentalSanitizeBlockAttributes( block, attributes );
+
 		// If httpMethod is 'POST', send the attributes in the request body instead of the URL.
 		// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.
 		const isPostRequest = 'POST' === httpMethod;
-		const urlAttributes = isPostRequest ? null : attributes;
+		const urlAttributes = isPostRequest ? null : sanitizedAttributes;
 		const path = rendererPath( block, urlAttributes, urlQueryArgs );
-		const data = isPostRequest ? { attributes } : null;
+		const data = isPostRequest ? { attributes: sanitizedAttributes } : null;
 
 		// Store the latest fetch request so that when we process it, we can
 		// check if it is the current request, to avoid race conditions on slow networks.