diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md index c83787d1c7b171..d43d42bd7a5e6e 100644 --- a/packages/server-side-render/CHANGELOG.md +++ b/packages/server-side-render/CHANGELOG.md @@ -1,3 +1,8 @@ +## Master + +### Feature +- Add `EmptyResponsePlaceholder`, `ErrorResponsePlaceholder` and `LoadingResponsePlaceholder` render props for parent components to swap out alternate placeholders for the various states (see https://github.com/WordPress/gutenberg/pull/16512). + ## 1.0.0 (2019-06-12) ### Initial Release diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md index a975cd36f19d10..49bb3a7c94bb16 100644 --- a/packages/server-side-render/README.md +++ b/packages/server-side-render/README.md @@ -55,6 +55,25 @@ E.g: `{ post_id: 12 }`. - Type: `Object` - Required: No +### EmptyResponsePlaceholder + +This is a [render prop](https://reactjs.org/docs/render-props.html). When the api response is empty, the value of this prop is rendered. The render prop will receive the value of the api response as well as all props passed into `ServerSideRenderer`. +- Type: `WPElement` +- Required: No + +### ErrorResponsePlaceholder + +This is a [render prop](https://reactjs.org/docs/render-props.html). When the api response is an error, the value of this prop is rendered. The render prop will receive the value of the api response as well as all props passed into `ServerSideRenderer`. +- Type: `WPElement` +- Required: No + +### LoadingResponsePlaceholder + +This is a [render prop](https://reactjs.org/docs/render-props.html). While the request is being processed (loading state), the value of this prop is rendered. The render prop will receive the value of the api response as well as all props passed into `ServerSideRenderer`. +- Type: `WPElement` +- Required: No + + ## Usage Render core/archives preview. diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js index a0c6a915efae55..dbb85f6d9b5218 100644 --- a/packages/server-side-render/src/server-side-render.js +++ b/packages/server-side-render/src/server-side-render.js @@ -83,32 +83,19 @@ export class ServerSideRender extends Component { render() { const response = this.state.response; - const { className } = this.props; + const { className, EmptyResponsePlaceholder, ErrorResponsePlaceholder, LoadingResponsePlaceholder } = this.props; + if ( response === '' ) { return ( - - { __( 'Block rendered as empty.' ) } - + ); } else 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 } - + ); } @@ -123,4 +110,34 @@ export class ServerSideRender extends Component { } } +ServerSideRender.defaultProps = { + EmptyResponsePlaceholder: ( { className } ) => ( + + { __( 'Block rendered as empty.' ) + className } + + ), + ErrorResponsePlaceholder: ( { response, className } ) => { + // translators: %s: error message describing the problem + const errorMessage = sprintf( __( 'Error loading block: %s' ), response.errorMsg ); + return ( + + { errorMessage } + + ); + }, + LoadingResponsePlaceholder: ( { className } ) => { + return ( + + + + ); + }, +}; + export default ServerSideRender;