From db5d7776214def696470f4ab42bea1e9b7b7e6b1 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Tue, 29 Jan 2019 19:27:27 +0000
Subject: [PATCH] Add: className prop support to server side render.

---
 .../src/server-side-render/README.md          | 30 +++++++++++++++++++
 .../src/server-side-render/index.js           | 26 +++++++++++++---
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/server-side-render/README.md b/packages/components/src/server-side-render/README.md
index 55b0be7630dab..200ac1cc4e951 100644
--- a/packages/components/src/server-side-render/README.md
+++ b/packages/components/src/server-side-render/README.md
@@ -8,6 +8,36 @@ 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.
 
+## Props
+
+### attributes
+
+An object containing the attributes of the block to be server-side rendered.
+E.g: `{ displayAsDropdown:true }`, `{ showHierarchy :true }`, etc...
+- Type: `Object`
+- Required: No
+
+### block
+
+The identifier of the block to be server-side rendered.
+Examples: "core/archives", "core/latest-comments", "core/rss", etc...
+- Type: `String`
+- Required: Yes
+
+### className
+
+A class added to the dom element that wraps the server side rendered block.
+Examples: "my-custom-server-side-rendered".
+- Type: `String`
+- Required: No
+
+### urlQueryArgs
+
+Query arguments to apply to the request URL.
+E.g: `{ post_id: 12 }`.
+- Type: `Object`
+- Required: No
+
 ## Usage
 
 Render core/archives preview.
diff --git a/packages/components/src/server-side-render/index.js b/packages/components/src/server-side-render/index.js
index ed11eac1c518b..71d649dfbf644 100644
--- a/packages/components/src/server-side-render/index.js
+++ b/packages/components/src/server-side-render/index.js
@@ -85,24 +85,42 @@ export class ServerSideRender extends Component {
 
 	render() {
 		const response = this.state.response;
+		const { className } = this.props;
 		if ( ! response ) {
 			return (
-				<Placeholder><Spinner /></Placeholder>
+				<Placeholder
+					className={ className }
+				>
+					<Spinner />
+				</Placeholder>
 			);
 		} else if ( response.error ) {
 			// translators: %s: error message describing the problem
 			const errorMessage = sprintf( __( 'Error loading block: %s' ), response.errorMsg );
 			return (
-				<Placeholder>{ errorMessage }</Placeholder>
+				<Placeholder
+					className={ className }
+				>
+					{ errorMessage }
+				</Placeholder>
 			);
 		} else if ( ! response.length ) {
 			return (
-				<Placeholder>{ __( 'No results found.' ) }</Placeholder>
+				<Placeholder
+					className={ className }
+				>
+					{ __( 'No results found.' ) }
+				</Placeholder>
 			);
 		}
 
 		return (
-			<RawHTML key="html">{ response }</RawHTML>
+			<RawHTML
+				key="html"
+				className={ className }
+			>
+				{ response }
+			</RawHTML>
 		);
 	}
 }