@wordpress/server-side-render 6.3.0 → 6.4.1-next.46f643fa0.0

package/src/server-side-render.js

@@ -1,56 +1,23 @@
-/**
- * External dependencies
- */
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
-import { useDebounce, usePrevious } from '@wordpress/compose';
 import {
 	RawHTML,
-	useCallback,
 	useEffect,
-	useLayoutEffect,
-	useRef,
 	useState,
+	useRef,
+	useMemo,
 } from '@wordpress/element';
 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';
+import { useSelect } from '@wordpress/data';
 
-const EMPTY_OBJECT = {};
-
-export function rendererPath( block, attributes = null, urlQueryArgs = {} ) {
-	return addQueryArgs( `/wp/v2/block-renderer/${ block }`, {
-		context: 'edit',
-		...( null !== attributes ? { attributes } : {} ),
-		...urlQueryArgs,
-	} );
-}
-
-export function removeBlockSupportAttributes( attributes ) {
-	const {
-		backgroundColor,
-		borderColor,
-		fontFamily,
-		fontSize,
-		gradient,
-		textColor,
-		className,
-		...restAttributes
-	} = attributes;
-
-	const { border, color, elements, spacing, typography, ...restStyles } =
-		attributes?.style || EMPTY_OBJECT;
+/**
+ * Internal dependencies
+ */
+import { useServerSideRender } from './hook';
 
-	return {
-		...restAttributes,
-		style: restStyles,
-	};
-}
+const EMPTY_OBJECT = {};
 
 function DefaultEmptyResponsePlaceholder( { className } ) {
 	return (
@@ -60,11 +27,11 @@ function DefaultEmptyResponsePlaceholder( { className } ) {
 	);
 }
 
-function DefaultErrorResponsePlaceholder( { response, className } ) {
+function DefaultErrorResponsePlaceholder( { message, className } ) {
 	const errorMessage = sprintf(
 		// translators: %s: error message describing the problem
 		__( 'Error loading block: %s' ),
-		response.errorMsg
+		message
 	);
 	return <Placeholder className={ className }>{ errorMessage }</Placeholder>;
 }
@@ -102,141 +69,111 @@ function DefaultLoadingResponsePlaceholder( { children } ) {
 	);
 }
 
-export default function ServerSideRender( props ) {
+export function ServerSideRender( props ) {
+	const prevContentRef = useRef( '' );
 	const {
 		className,
 		EmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,
 		ErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,
 		LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,
+		...restProps
 	} = props;
 
-	const isMountedRef = useRef( false );
-	const fetchRequestRef = useRef();
-	const [ response, setResponse ] = useState( null );
-	const prevProps = usePrevious( props );
-	const [ isLoading, setIsLoading ] = useState( false );
-	const latestPropsRef = useRef( props );
-
-	useLayoutEffect( () => {
-		latestPropsRef.current = props;
-	}, [ props ] );
-
-	const fetchData = useCallback( () => {
-		if ( ! isMountedRef.current ) {
-			return;
-		}
-
-		const {
-			attributes,
-			block,
-			skipBlockSupportAttributes = false,
-			httpMethod = 'GET',
-			urlQueryArgs,
-		} = latestPropsRef.current;
-
-		setIsLoading( true );
-
-		let sanitizedAttributes =
-			attributes &&
-			__experimentalSanitizeBlockAttributes( block, attributes );
-
-		if ( skipBlockSupportAttributes ) {
-			sanitizedAttributes =
-				removeBlockSupportAttributes( sanitizedAttributes );
-		}
-
-		// 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
-			: sanitizedAttributes ?? null;
-		const path = rendererPath( block, urlAttributes, urlQueryArgs );
-		const data = isPostRequest
-			? { attributes: sanitizedAttributes ?? null }
-			: 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.
-		const fetchRequest = ( fetchRequestRef.current = apiFetch( {
-			path,
-			data,
-			method: isPostRequest ? 'POST' : 'GET',
-		} )
-			.then( ( fetchResponse ) => {
-				if (
-					isMountedRef.current &&
-					fetchRequest === fetchRequestRef.current &&
-					fetchResponse
-				) {
-					setResponse( fetchResponse.rendered );
-				}
-			} )
-			.catch( ( error ) => {
-				if (
-					isMountedRef.current &&
-					fetchRequest === fetchRequestRef.current
-				) {
-					setResponse( {
-						error: true,
-						errorMsg: error.message,
-					} );
-				}
-			} )
-			.finally( () => {
-				if (
-					isMountedRef.current &&
-					fetchRequest === fetchRequestRef.current
-				) {
-					setIsLoading( false );
-				}
-			} ) );
-
-		return fetchRequest;
-	}, [] );
-
-	const debouncedFetchData = useDebounce( fetchData, 500 );
-
-	// When the component unmounts, set isMountedRef to false. This will
-	// let the async fetch callbacks know when to stop.
-	useEffect( () => {
-		isMountedRef.current = true;
-		return () => {
-			isMountedRef.current = false;
-		};
-	}, [] );
+	const { content, status, error } = useServerSideRender( restProps );
 
+	// Store the previous successful HTML response to show while loading.
 	useEffect( () => {
-		// Don't debounce the first fetch. This ensures that the first render
-		// shows data as soon as possible.
-		if ( prevProps === undefined ) {
-			fetchData();
-		} else if ( ! fastDeepEqual( prevProps, props ) ) {
-			debouncedFetchData();
+		if ( content ) {
+			prevContentRef.current = content;
 		}
-	} );
+	}, [ content ] );
 
-	const hasResponse = !! response;
-	const hasEmptyResponse = response === '';
-	const hasError = !! response?.error;
-
-	if ( isLoading ) {
+	if ( status === 'loading' ) {
 		return (
 			<LoadingResponsePlaceholder { ...props }>
-				{ hasResponse && ! hasError && (
-					<RawHTML className={ className }>{ response }</RawHTML>
+				{ !! prevContentRef.current && (
+					<RawHTML className={ className }>
+						{ prevContentRef.current }
+					</RawHTML>
 				) }
 			</LoadingResponsePlaceholder>
 		);
 	}
 
-	if ( hasEmptyResponse || ! hasResponse ) {
+	if ( status === 'success' && ! content ) {
 		return <EmptyResponsePlaceholder { ...props } />;
 	}
 
-	if ( hasError ) {
-		return <ErrorResponsePlaceholder response={ response } { ...props } />;
+	if ( status === 'error' ) {
+		return <ErrorResponsePlaceholder message={ error } { ...props } />;
 	}
 
-	return <RawHTML className={ className }>{ response }</RawHTML>;
+	return <RawHTML className={ className }>{ content }</RawHTML>;
+}
+
+/**
+ * A component that renders server-side content for blocks.
+ *
+ * Note: URL query will include the current post ID when applicable.
+ * This is useful for blocks that depend on the context of the current post for rendering.
+ *
+ * @example
+ * ```jsx
+ * import { ServerSideRender } from '@wordpress/server-side-render';
+ * // Legacy import for WordPress 6.8 and earlier
+ * // import { default as ServerSideRender } from '@wordpress/server-side-render';
+ *
+ * function Example() {
+ *   return (
+ *     <ServerSideRender
+ *       block="core/archives"
+ *       attributes={ { showPostCounts: true } }
+ *       urlQueryArgs={ { customArg: 'value' } }
+ *       className="custom-class"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}   props                                    Component props.
+ * @param {string}   props.block                              The identifier of the block to be serverside rendered.
+ * @param {Object}   props.attributes                         The block attributes to be sent to the server for rendering.
+ * @param {string}   [props.className]                        Additional classes to apply to the wrapper element.
+ * @param {string}   [props.httpMethod='GET']                 The HTTP method to use ('GET' or 'POST'). Default is 'GET'
+ * @param {Object}   [props.urlQueryArgs]                     Additional query arguments to append to the request URL.
+ * @param {boolean}  [props.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.
+ * @param {Function} [props.EmptyResponsePlaceholder]         Component rendered when the API response is empty.
+ * @param {Function} [props.ErrorResponsePlaceholder]         Component rendered when the API response is an error.
+ * @param {Function} [props.LoadingResponsePlaceholder]       Component rendered while the API request is loading.
+ *
+ * @return {JSX.Element} The rendered server-side content.
+ */
+export function ServerSideRenderWithPostId( {
+	urlQueryArgs = EMPTY_OBJECT,
+	...props
+} ) {
+	const currentPostId = useSelect( ( select ) => {
+		// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.
+		// It is used by blocks that can be loaded into a *non-post* block editor.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const postId = select( 'core/editor' )?.getCurrentPostId();
+
+		// For templates and template parts we use a custom ID format.
+		// Since they aren't real posts, we don't want to use their ID
+		// for server-side rendering. Since they use a string based ID,
+		// we can assume real post IDs are numbers.
+		return postId && typeof postId === 'number' ? postId : null;
+	}, [] );
+
+	const newUrlQueryArgs = useMemo( () => {
+		if ( ! currentPostId ) {
+			return urlQueryArgs;
+		}
+		return {
+			post_id: currentPostId,
+			...urlQueryArgs,
+		};
+	}, [ currentPostId, urlQueryArgs ] );
+
+	return <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;
 }

package/src/test/index.js

@@ -1,10 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	rendererPath,
-	removeBlockSupportAttributes,
-} from '../server-side-render';
+import { rendererPath, removeBlockSupportAttributes } from '../hook';
 
 describe( 'rendererPath', () => {
 	test( 'should return an base path for empty input', () => {
@@ -107,6 +104,7 @@ describe( 'rendererPath', () => {
 							},
 						},
 					},
+					shadow: 'var:preset|shadow|crisp',
 					spacing: {
 						margin: {
 							top: '10px',