diff --git a/packages/components/src/server-side-render/README.md b/packages/components/src/server-side-render/README.md index 55b0be7630dab..df9d75dec8fa4 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 ( - + + + ); } else if ( response.error ) { // translators: %s: error message describing the problem const errorMessage = sprintf( __( 'Error loading block: %s' ), response.errorMsg ); return ( - { errorMessage } + + { errorMessage } + ); } else if ( ! response.length ) { return ( - { __( 'No results found.' ) } + + { __( 'No results found.' ) } + ); } return ( - { response } + + { response } + ); } }