Extract ServerSideRender component to an independent package

docs/manifest-devhub.json

@@ -845,12 +845,6 @@
 		"markdown_source": "../packages/components/src/select-control/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "ServerSideRender",
-		"slug": "server-side-render",
-		"markdown_source": "../packages/components/src/server-side-render/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "SlotFill",
 		"slug": "slot-fill",
@@ -1289,6 +1283,12 @@
 		"markdown_source": "../packages/scripts/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/server-side-render",
+		"slug": "packages-server-side-render",
+		"markdown_source": "../packages/server-side-render/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/shortcode",
 		"slug": "packages-shortcode",

lib/client-assets.php

@@ -289,6 +289,21 @@ function gutenberg_register_scripts_and_styles() {
 		)
 	);
 
+	// Add back compatibility for calls to wp.components.ServerSideRender.
+	wp_add_inline_script(
+		'wp-server-side-render',
+		implode(
+			"\n",
+			array(
+				'( function() {',
+				'	if ( wp && wp.components && wp.serverSideRender && ! wp.components.ServerSideRender ) {',
+				'		wp.components.ServerSideRender = wp.serverSideRender;',
+				'	};',
+				'} )();',
+			)
+		)
+	);
+
 	// Editor Styles.
 	// This empty stylesheet is defined to ensure backward compatibility.
 	gutenberg_override_style( 'wp-blocks', false );

package.json

@@ -50,6 +50,7 @@
 		"@wordpress/priority-queue": "file:packages/priority-queue",
 		"@wordpress/redux-routine": "file:packages/redux-routine",
 		"@wordpress/rich-text": "file:packages/rich-text",
+		"@wordpress/server-side-render": "file:packages/server-side-render",
 		"@wordpress/shortcode": "file:packages/shortcode",
 		"@wordpress/token-list": "file:packages/token-list",
 		"@wordpress/url": "file:packages/url",

packages/block-library/package.json

@@ -36,6 +36,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/keycodes": "file:../keycodes",
+		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.2.5",
 		"fast-average-color": "4.3.0",

packages/block-library/src/archives/edit.js

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
-import { ServerSideRender } from '@wordpress/editor';
+import ServerSideRender from '@wordpress/server-side-render';
 
 export default function ArchivesEdit( { attributes, setAttributes } ) {
 	const { showPostCounts, displayAsDropdown } = attributes;

packages/block-library/src/latest-comments/edit.js

@@ -8,7 +8,7 @@ import {
 	RangeControl,
 	ToggleControl,
 } from '@wordpress/components';
-import { ServerSideRender } from '@wordpress/editor';
+import ServerSideRender from '@wordpress/server-side-render';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

packages/block-library/src/legacy-widget/edit/index.js

@@ -22,7 +22,7 @@ import {
 	BlockIcon,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { ServerSideRender } from '@wordpress/editor';
+import ServerSideRender from '@wordpress/server-side-render';
 
 /**
  * Internal dependencies

packages/components/CHANGELOG.md

@@ -8,6 +8,10 @@
 
 - Fixed display of reset button when using RangeControl `allowReset` prop.
 
+### Breaking Change
+
+- `ServerSideRender` is no longer part of components. It was extracted to an independent package `@wordpress/server-side-render`.
+
 ## 7.3.0 (2019-04-16)
 
 ### New Features

packages/components/package.json

@@ -23,7 +23,6 @@
 	"dependencies": {
 		"@babel/runtime": "^7.4.4",
 		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",

packages/components/src/index.js

@@ -51,7 +51,6 @@ export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as SelectControl } from './select-control';
 export { default as Spinner } from './spinner';
-export { default as ServerSideRender } from './server-side-render';
 export { default as TabPanel } from './tab-panel';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';

packages/editor/CHANGELOG.md

@@ -3,6 +3,9 @@
 ### Deprecations
 - The `getAutosave`, `getAutosaveAttribute`, and `hasAutosave` selectors are deprecated. Please use the `getAutosave` selector in the `@wordpress/core-data` package.
 - The `resetAutosave` action is deprecated. An equivalent action `receiveAutosaves` has been added to the `@wordpress/core-data` package.
+- `ServerSideRender` component was deprecated. The component is now available in `@wordpress/server-side-render`.
+
+
 
 ### Internal
 

packages/editor/src/components/deprecated.js

@@ -117,3 +117,4 @@ export {
 	withColors,
 	withFontSizes,
 };
+export { default as ServerSideRender } from '@wordpress/server-side-render';

packages/editor/src/components/index.js

@@ -1,6 +1,5 @@
 // Block Creation Components
 export * from './autocompleters';
-export { default as ServerSideRender } from './server-side-render';
 
 // Post Related Components
 export { default as AutosaveMonitor } from './autosave-monitor';

packages/server-side-render/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/server-side-render/CHANGELOG.md

@@ -0,0 +1,5 @@
+## Unreleased
+
+### Enhancements
+
+- Extracted the package from `@wordpress/components` and `@wordpress/editor`;

packages/components/src/server-side-render/README.md → packages/server-side-render/README.md

@@ -8,6 +8,19 @@ ServerSideRender should be regarded as a fallback or legacy mechanism, it is not
 
 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.
 
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/server-side-render --save
+```
+
+## Usage
+
+The props accepted by the component are described bellow.
+
+
 ## Props
 
 ### attributes
@@ -43,7 +56,7 @@ E.g: `{ post_id: 12 }`.
 Render core/archives preview.
 
 ```jsx
-import { ServerSideRender } from '@wordpress/components';
+import { ServerSideRender } from '@wordpress/server-side-render';
 
 const MyServerSideRender = () => (
 	<ServerSideRender

packages/server-side-render/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "@wordpress/server-side-render",
+	"version": "1.0.0-alpha.1",
+	"description": "ServerSideRender is a component used for server-side rendering a preview of dynamic blocks to display in the editor.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"server side",
+		"render"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/server-side-render/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/server-side-render"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"dependencies": {
+		"@babel/runtime": "^7.4.4",
+		"@wordpress/components": "file:../components",
+		"@wordpress/data": "file:../data",
+		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/url": "file:../url",
+		"lodash": "^4.17.11"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/server-side-render/src/index.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import ServerSideRender from './server-side-render';
+
+/**
+ * Constants
+ */
+const EMPTY_OBJECT = {};
+
+export default withSelect(
+	( select ) => {
+		const coreEditorSelect = select( 'core/editor' );
+		if ( coreEditorSelect ) {
+			const currentPostId = coreEditorSelect.getCurrentPostId();
+			if ( currentPostId ) {
+				return {
+					currentPostId,
+				};
+			}
+		}
+		return EMPTY_OBJECT;
+	}
+)(
+	( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {
+		urlQueryArgs = useMemo( () => {
+			if ( ! currentPostId ) {
+				return urlQueryArgs;
+			}
+			return {
+				post_id: currentPostId,
+				...urlQueryArgs,
+			};
+		}, [ currentPostId, urlQueryArgs ] );
+
+		return (
+			<ServerSideRender urlQueryArgs={ urlQueryArgs } { ...props } />
+		);
+	}
+);

packages/components/src/server-side-render/index.js → packages/server-side-render/src/server-side-render.js

@@ -13,12 +13,10 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import Placeholder from '../placeholder';
-import Spinner from '../spinner';
+import {
+	Placeholder,
+	Spinner,
+} from '@wordpress/components';
 
 export function rendererPath( block, attributes = null, urlQueryArgs = {} ) {
 	return addQueryArgs( `/wp/v2/block-renderer/${ block }`, {

packages/components/src/server-side-render/test/index.js → packages/server-side-render/src/test/index.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { rendererPath } from '../index';
+import { rendererPath } from '../server-side-render';
 
 describe( 'rendererPath', function() {
 	test( 'should return an base path for empty input', function() {

webpack.config.js

@@ -80,6 +80,7 @@ module.exports = {
 			'dom-ready',
 			'redux-routine',
 			'token-list',
+			'server-side-render',
 			'shortcode',
 		].map( camelCaseDash ) ),
 		new CopyWebpackPlugin(