@wordpress/server-side-render 6.24.0 → 6.24.1

package/CHANGELOG.md

@@ -2,7 +2,13 @@
 
 ## Unreleased
 
-## 6.24.0 (2026-06-04)
+## 6.24.1 (2026-06-16)
+
+## 6.24.0 (2026-06-10)
+
+### Code Quality
+
+-   Add missing `@types/react` dependency. [#78882](https://github.com/WordPress/gutenberg/pull/78882).
 
 ## 6.23.0 (2026-05-27)
 

package/README.md

@@ -63,20 +63,12 @@ function Example() {
 
 _Parameters_
 
--   _props_ `Object`: Component props.
--   _props.block_ `string`: The identifier of the block to be serverside rendered.
--   _props.attributes_ `Object`: The block attributes to be sent to the server for rendering.
--   _props.className_ `[string]`: Additional classes to apply to the wrapper element.
--   _props.httpMethod_ `[string]`: The HTTP method to use ('GET' or 'POST'). Default is 'GET'
--   _props.urlQueryArgs_ `[Object]`: Additional query arguments to append to the request URL.
--   _props.skipBlockSupportAttributes_ `[boolean]`: Whether to remove block support attributes before sending.
--   _props.EmptyResponsePlaceholder_ `[Function]`: Component rendered when the API response is empty.
--   _props.ErrorResponsePlaceholder_ `[Function]`: Component rendered when the API response is an error.
--   _props.LoadingResponsePlaceholder_ `[Function]`: Component rendered while the API request is loading.
+-   _props_ `ServerSideRenderWithPostIdProps`: Component props.
+-   _props.urlQueryArgs_ `ServerSideRenderWithPostIdProps[ 'urlQueryArgs' ]`: Additional query arguments to append to the request URL.
 
 _Returns_
 
--   `React.JSX.Element`: The rendered server-side content.
+-   The rendered server-side content.
 
 ### useServerSideRender
 
@@ -112,12 +104,7 @@ function MyServerSideRender( { attributes, block } ) {
 
 _Parameters_
 
--   _args_ `Object`: The hook configuration object.
--   _args.attributes_ `Object`: The block attributes to be sent to the server for rendering.
--   _args.block_ `string`: The identifier of the block to be serverside rendered. Example: 'core/archives'.
--   _args.skipBlockSupportAttributes_ `[boolean]`: Whether to remove block support attributes before sending.
--   _args.httpMethod_ `[string]`: The HTTP method to use ('GET' or 'POST'). Default is 'GET'.
--   _args.urlQueryArgs_ `[Object]`: Additional query arguments to append to the request URL.
+-   _args_ `UseServerSideRenderArgs`: The hook configuration object.
 
 _Returns_
 

package/build/hook.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -26,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/server-side-render/src/hook.js
+// packages/server-side-render/src/hook.ts
 var hook_exports = {};
 __export(hook_exports, {
   removeBlockSupportAttributes: () => removeBlockSupportAttributes,
@@ -72,7 +73,9 @@ function removeBlockSupportAttributes(attributes) {
   };
 }
 function useServerSideRender(args) {
-  const [response, setResponse] = (0, import_element.useState)({ status: "idle" });
+  const [response, setResponse] = (0, import_element.useState)({
+    status: "idle"
+  });
   const shouldDebounceRef = (0, import_element.useRef)(false);
   const {
     attributes,
@@ -82,7 +85,7 @@ function useServerSideRender(args) {
     urlQueryArgs
   } = args;
   let sanitizedAttributes = attributes && (0, import_blocks.__experimentalSanitizeBlockAttributes)(block, attributes);
-  if (skipBlockSupportAttributes) {
+  if (skipBlockSupportAttributes && sanitizedAttributes) {
     sanitizedAttributes = removeBlockSupportAttributes(sanitizedAttributes);
   }
   const isPostRequest = "POST" === httpMethod;
@@ -109,12 +112,12 @@ function useServerSideRender(args) {
               content: res ? res.rendered : ""
             });
           }).catch((error) => {
-            if (error.name === "AbortError") {
+            if (error instanceof Error && error.name === "AbortError") {
               return;
             }
             setResponse({
               status: "error",
-              error: error.message
+              error: error instanceof Error ? error.message : String(error)
             });
           }).finally(() => {
             shouldDebounceRef.current = true;

package/build/hook.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/hook.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { debounce } from '@wordpress/compose';\nimport { useEffect, useState, useRef } from '@wordpress/element';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nexport function rendererPath( block, attributes = null, urlQueryArgs = {} ) {\n\treturn addQueryArgs( `/wp/v2/block-renderer/${ block }`, {\n\t\tcontext: 'edit',\n\t\t...( null !== attributes ? { attributes } : {} ),\n\t\t...urlQueryArgs,\n\t} );\n}\n\nexport function removeBlockSupportAttributes( attributes ) {\n\tconst {\n\t\tbackgroundColor,\n\t\tborderColor,\n\t\tfontFamily,\n\t\tfontSize,\n\t\tgradient,\n\t\ttextColor,\n\t\tclassName,\n\t\t...restAttributes\n\t} = attributes;\n\n\tconst {\n\t\tborder,\n\t\tcolor,\n\t\telements,\n\t\tshadow,\n\t\tspacing,\n\t\ttypography,\n\t\t...restStyles\n\t} = attributes?.style || {};\n\n\treturn {\n\t\t...restAttributes,\n\t\tstyle: restStyles,\n\t};\n}\n\n/**\n * @typedef {Object} ServerSideRenderResponse\n * @property {string} status    - The current request status: 'idle', 'loading', 'success', or 'error'.\n * @property {string} [content] - The rendered block content (available when status is 'success').\n * @property {string} [error]   - The error message (available when status is 'error').\n */\n\n/**\n * A hook for server-side rendering a preview of dynamic blocks to display in the editor.\n *\n * Handles fetching server-rendered previews for blocks, managing loading states,\n * and automatically debouncing requests to prevent excessive API calls. It supports both\n * GET and POST requests, with POST requests used for larger attribute payloads.\n *\n * @example\n * Basic usage:\n *\n * ```jsx\n * import { RawHTML } from '@wordpress/element';\n * import { useServerSideRender } from '@wordpress/server-side-render';\n *\n * function MyServerSideRender( { attributes, block } ) {\n *   const { content, status, error } = useServerSideRender( {\n *     attributes,\n *     block,\n *   } );\n *\n *   if ( status === 'loading' ) {\n *     return <div>Loading...</div>;\n *   }\n *\n *   if ( status === 'error' ) {\n *     return <div>Error: { error }</div>;\n *   }\n *\n *   return <RawHTML>{ content }</RawHTML>;\n * }\n * ```\n *\n * @param {Object}  args                                    The hook configuration object.\n * @param {Object}  args.attributes                         The block attributes to be sent to the server for rendering.\n * @param {string}  args.block                              The identifier of the block to be serverside rendered. Example: 'core/archives'.\n * @param {boolean} [args.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.\n * @param {string}  [args.httpMethod='GET']                 The HTTP method to use ('GET' or 'POST'). Default is 'GET'.\n * @param {Object}  [args.urlQueryArgs]                     Additional query arguments to append to the request URL.\n *\n * @return {ServerSideRenderResponse} The server-side render response object.\n */\nexport function useServerSideRender( args ) {\n\tconst [ response, setResponse ] = useState( { status: 'idle' } );\n\tconst shouldDebounceRef = useRef( false );\n\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tskipBlockSupportAttributes = false,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t} = args;\n\n\tlet sanitizedAttributes =\n\t\tattributes &&\n\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\tif ( skipBlockSupportAttributes ) {\n\t\tsanitizedAttributes =\n\t\t\tremoveBlockSupportAttributes( sanitizedAttributes );\n\t}\n\n\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\tconst isPostRequest = 'POST' === httpMethod;\n\tconst urlAttributes = isPostRequest ? null : sanitizedAttributes;\n\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\tconst body = isPostRequest\n\t\t? JSON.stringify( { attributes: sanitizedAttributes ?? null } )\n\t\t: undefined;\n\n\tuseEffect( () => {\n\t\tconst controller = new AbortController();\n\t\tconst debouncedFetch = debounce(\n\t\t\tfunction () {\n\t\t\t\t{\n\t\t\t\t\tsetResponse( { status: 'loading' } );\n\n\t\t\t\t\tapiFetch( {\n\t\t\t\t\t\tpath,\n\t\t\t\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t\t\t\t\tbody,\n\t\t\t\t\t\theaders: isPostRequest\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {},\n\t\t\t\t\t\tsignal: controller.signal,\n\t\t\t\t\t} )\n\t\t\t\t\t\t.then( ( res ) => {\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'success',\n\t\t\t\t\t\t\t\tcontent: res ? res.rendered : '',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.catch( ( error ) => {\n\t\t\t\t\t\t\t// The request was aborted, do not update the response.\n\t\t\t\t\t\t\tif ( error.name === 'AbortError' ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'error',\n\t\t\t\t\t\t\t\terror: error.message,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.finally( () => {\n\t\t\t\t\t\t\t// Debounce requests after first fetch.\n\t\t\t\t\t\t\tshouldDebounceRef.current = true;\n\t\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t},\n\t\t\tshouldDebounceRef.current ? 500 : 0\n\t\t);\n\n\t\tdebouncedFetch();\n\n\t\treturn () => {\n\t\t\tcontroller.abort();\n\t\t\tdebouncedFetch.cancel();\n\t\t};\n\t}, [ path, isPostRequest, body ] );\n\n\treturn response;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyB;AACzB,qBAA4C;AAC5C,uBAAqB;AACrB,iBAA6B;AAC7B,oBAAsD;AAE/C,SAAS,aAAc,OAAO,aAAa,MAAM,eAAe,CAAC,GAAI;AAC3E,aAAO,yBAAc,yBAA0B,KAAM,IAAI;AAAA,IACxD,SAAS;AAAA,IACT,GAAK,SAAS,aAAa,EAAE,WAAW,IAAI,CAAC;AAAA,IAC7C,GAAG;AAAA,EACJ,CAAE;AACH;AAEO,SAAS,6BAA8B,YAAa;AAC1D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI,YAAY,SAAS,CAAC;AAE1B,SAAO;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,EACR;AACD;AAkDO,SAAS,oBAAqB,MAAO;AAC3C,QAAM,CAAE,UAAU,WAAY,QAAI,yBAAU,EAAE,QAAQ,OAAO,CAAE;AAC/D,QAAM,wBAAoB,uBAAQ,KAAM;AAExC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,6BAA6B;AAAA,IAC7B,aAAa;AAAA,IACb;AAAA,EACD,IAAI;AAEJ,MAAI,sBACH,kBACA,qDAAuC,OAAO,UAAW;AAE1D,MAAK,4BAA6B;AACjC,0BACC,6BAA8B,mBAAoB;AAAA,EACpD;AAIA,QAAM,gBAAgB,WAAW;AACjC,QAAM,gBAAgB,gBAAgB,OAAO;AAC7C,QAAM,OAAO,aAAc,OAAO,eAAe,YAAa;AAC9D,QAAM,OAAO,gBACV,KAAK,UAAW,EAAE,YAAY,uBAAuB,KAAK,CAAE,IAC5D;AAEH,gCAAW,MAAM;AAChB,UAAM,aAAa,IAAI,gBAAgB;AACvC,UAAM,qBAAiB;AAAA,MACtB,WAAY;AACX;AACC,sBAAa,EAAE,QAAQ,UAAU,CAAE;AAEnC,+BAAAA,SAAU;AAAA,YACT;AAAA,YACA,QAAQ,gBAAgB,SAAS;AAAA,YACjC;AAAA,YACA,SAAS,gBACN;AAAA,cACA,gBAAgB;AAAA,YAChB,IACA,CAAC;AAAA,YACJ,QAAQ,WAAW;AAAA,UACpB,CAAE,EACA,KAAM,CAAE,QAAS;AACjB,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,MAAM,IAAI,WAAW;AAAA,YAC/B,CAAE;AAAA,UACH,CAAE,EACD,MAAO,CAAE,UAAW;AAEpB,gBAAK,MAAM,SAAS,cAAe;AAClC;AAAA,YACD;AAEA,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,OAAO,MAAM;AAAA,YACd,CAAE;AAAA,UACH,CAAE,EACD,QAAS,MAAM;AAEf,8BAAkB,UAAU;AAAA,UAC7B,CAAE;AAAA,QACJ;AAAA,MACD;AAAA,MACA,kBAAkB,UAAU,MAAM;AAAA,IACnC;AAEA,mBAAe;AAEf,WAAO,MAAM;AACZ,iBAAW,MAAM;AACjB,qBAAe,OAAO;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,MAAM,eAAe,IAAK,CAAE;AAEjC,SAAO;AACR;",
+  "sources": ["../src/hook.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { debounce } from '@wordpress/compose';\nimport { useEffect, useState, useRef } from '@wordpress/element';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\n\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nexport function rendererPath(\n\tblock: string,\n\tattributes: Record< string, unknown > | null = null,\n\turlQueryArgs: Record< string, unknown > = {}\n): string {\n\treturn addQueryArgs( `/wp/v2/block-renderer/${ block }`, {\n\t\tcontext: 'edit',\n\t\t...( null !== attributes ? { attributes } : {} ),\n\t\t...urlQueryArgs,\n\t} );\n}\n\nexport function removeBlockSupportAttributes(\n\tattributes: Record< string, unknown > & {\n\t\tstyle?: Record< string, unknown >;\n\t}\n): Record< string, unknown > {\n\tconst {\n\t\tbackgroundColor,\n\t\tborderColor,\n\t\tfontFamily,\n\t\tfontSize,\n\t\tgradient,\n\t\ttextColor,\n\t\tclassName,\n\t\t...restAttributes\n\t} = attributes;\n\n\tconst {\n\t\tborder,\n\t\tcolor,\n\t\telements,\n\t\tshadow,\n\t\tspacing,\n\t\ttypography,\n\t\t...restStyles\n\t} = attributes?.style || {};\n\n\treturn {\n\t\t...restAttributes,\n\t\tstyle: restStyles,\n\t};\n}\n\n/**\n * Server-side render response object.\n */\nexport interface ServerSideRenderResponse {\n\t/** The current request status: 'idle', 'loading', 'success', or 'error'. */\n\tstatus: 'idle' | 'loading' | 'success' | 'error';\n\t/** The rendered block content (available when status is 'success'). */\n\tcontent?: string;\n\t/** The error message (available when status is 'error'). */\n\terror?: string;\n}\n\n/**\n * Configuration object for the useServerSideRender hook.\n */\nexport interface UseServerSideRenderArgs {\n\t/** The block attributes to be sent to the server for rendering. */\n\tattributes: Record< string, unknown >;\n\t/** The identifier of the block to be serverside rendered. Example: 'core/archives'. */\n\tblock: string;\n\t/** Whether to remove block support attributes before sending. */\n\tskipBlockSupportAttributes?: boolean;\n\t/** The HTTP method to use ('GET' or 'POST'). Default is 'GET'. */\n\thttpMethod?: 'GET' | 'POST';\n\t/** Additional query arguments to append to the request URL. */\n\turlQueryArgs?: Record< string, unknown >;\n}\n\n/**\n * A hook for server-side rendering a preview of dynamic blocks to display in the editor.\n *\n * Handles fetching server-rendered previews for blocks, managing loading states,\n * and automatically debouncing requests to prevent excessive API calls. It supports both\n * GET and POST requests, with POST requests used for larger attribute payloads.\n *\n * @example\n * Basic usage:\n *\n * ```jsx\n * import { RawHTML } from '@wordpress/element';\n * import { useServerSideRender } from '@wordpress/server-side-render';\n *\n * function MyServerSideRender( { attributes, block } ) {\n *   const { content, status, error } = useServerSideRender( {\n *     attributes,\n *     block,\n *   } );\n *\n *   if ( status === 'loading' ) {\n *     return <div>Loading...</div>;\n *   }\n *\n *   if ( status === 'error' ) {\n *     return <div>Error: { error }</div>;\n *   }\n *\n *   return <RawHTML>{ content }</RawHTML>;\n * }\n * ```\n *\n * @param args The hook configuration object.\n *\n * @return The server-side render response object.\n */\nexport function useServerSideRender(\n\targs: UseServerSideRenderArgs\n): ServerSideRenderResponse {\n\tconst [ response, setResponse ] = useState< ServerSideRenderResponse >( {\n\t\tstatus: 'idle',\n\t} );\n\tconst shouldDebounceRef = useRef< boolean >( false );\n\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tskipBlockSupportAttributes = false,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t} = args;\n\n\tlet sanitizedAttributes: Record< string, unknown > | null =\n\t\tattributes &&\n\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\tif ( skipBlockSupportAttributes && sanitizedAttributes ) {\n\t\tsanitizedAttributes =\n\t\t\tremoveBlockSupportAttributes( sanitizedAttributes );\n\t}\n\n\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\tconst isPostRequest = 'POST' === httpMethod;\n\tconst urlAttributes = isPostRequest ? null : sanitizedAttributes;\n\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\tconst body = isPostRequest\n\t\t? JSON.stringify( { attributes: sanitizedAttributes ?? null } )\n\t\t: undefined;\n\n\tuseEffect( () => {\n\t\tconst controller = new AbortController();\n\t\tconst debouncedFetch = debounce(\n\t\t\tfunction () {\n\t\t\t\t{\n\t\t\t\t\tsetResponse( { status: 'loading' } );\n\n\t\t\t\t\tapiFetch< { rendered: string } >( {\n\t\t\t\t\t\tpath,\n\t\t\t\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t\t\t\t\tbody,\n\t\t\t\t\t\theaders: isPostRequest\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {},\n\t\t\t\t\t\tsignal: controller.signal,\n\t\t\t\t\t} )\n\t\t\t\t\t\t.then( ( res ) => {\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'success',\n\t\t\t\t\t\t\t\tcontent: res ? res.rendered : '',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.catch( ( error: unknown ) => {\n\t\t\t\t\t\t\t// The request was aborted, do not update the response.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\terror instanceof Error &&\n\t\t\t\t\t\t\t\terror.name === 'AbortError'\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'error',\n\t\t\t\t\t\t\t\terror:\n\t\t\t\t\t\t\t\t\terror instanceof Error\n\t\t\t\t\t\t\t\t\t\t? error.message\n\t\t\t\t\t\t\t\t\t\t: String( error ),\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.finally( () => {\n\t\t\t\t\t\t\t// Debounce requests after first fetch.\n\t\t\t\t\t\t\tshouldDebounceRef.current = true;\n\t\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t},\n\t\t\tshouldDebounceRef.current ? 500 : 0\n\t\t);\n\n\t\tdebouncedFetch();\n\n\t\treturn () => {\n\t\t\tcontroller.abort();\n\t\t\tdebouncedFetch.cancel();\n\t\t};\n\t}, [ path, isPostRequest, body ] );\n\n\treturn response;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyB;AACzB,qBAA4C;AAC5C,uBAAqB;AACrB,iBAA6B;AAE7B,oBAAsD;AAE/C,SAAS,aACf,OACA,aAA+C,MAC/C,eAA0C,CAAC,GAClC;AACT,aAAO,yBAAc,yBAA0B,KAAM,IAAI;AAAA,IACxD,SAAS;AAAA,IACT,GAAK,SAAS,aAAa,EAAE,WAAW,IAAI,CAAC;AAAA,IAC7C,GAAG;AAAA,EACJ,CAAE;AACH;AAEO,SAAS,6BACf,YAG4B;AAC5B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI,YAAY,SAAS,CAAC;AAE1B,SAAO;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,EACR;AACD;AAkEO,SAAS,oBACf,MAC2B;AAC3B,QAAM,CAAE,UAAU,WAAY,QAAI,yBAAsC;AAAA,IACvE,QAAQ;AAAA,EACT,CAAE;AACF,QAAM,wBAAoB,uBAAmB,KAAM;AAEnD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,6BAA6B;AAAA,IAC7B,aAAa;AAAA,IACb;AAAA,EACD,IAAI;AAEJ,MAAI,sBACH,kBACA,qDAAuC,OAAO,UAAW;AAE1D,MAAK,8BAA8B,qBAAsB;AACxD,0BACC,6BAA8B,mBAAoB;AAAA,EACpD;AAIA,QAAM,gBAAgB,WAAW;AACjC,QAAM,gBAAgB,gBAAgB,OAAO;AAC7C,QAAM,OAAO,aAAc,OAAO,eAAe,YAAa;AAC9D,QAAM,OAAO,gBACV,KAAK,UAAW,EAAE,YAAY,uBAAuB,KAAK,CAAE,IAC5D;AAEH,gCAAW,MAAM;AAChB,UAAM,aAAa,IAAI,gBAAgB;AACvC,UAAM,qBAAiB;AAAA,MACtB,WAAY;AACX;AACC,sBAAa,EAAE,QAAQ,UAAU,CAAE;AAEnC,+BAAAA,SAAkC;AAAA,YACjC;AAAA,YACA,QAAQ,gBAAgB,SAAS;AAAA,YACjC;AAAA,YACA,SAAS,gBACN;AAAA,cACA,gBAAgB;AAAA,YAChB,IACA,CAAC;AAAA,YACJ,QAAQ,WAAW;AAAA,UACpB,CAAE,EACA,KAAM,CAAE,QAAS;AACjB,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,MAAM,IAAI,WAAW;AAAA,YAC/B,CAAE;AAAA,UACH,CAAE,EACD,MAAO,CAAE,UAAoB;AAE7B,gBACC,iBAAiB,SACjB,MAAM,SAAS,cACd;AACD;AAAA,YACD;AAEA,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,OACC,iBAAiB,QACd,MAAM,UACN,OAAQ,KAAM;AAAA,YACnB,CAAE;AAAA,UACH,CAAE,EACD,QAAS,MAAM;AAEf,8BAAkB,UAAU;AAAA,UAC7B,CAAE;AAAA,QACJ;AAAA,MACD;AAAA,MACA,kBAAkB,UAAU,MAAM;AAAA,IACnC;AAEA,mBAAe;AAEf,WAAO,MAAM;AACZ,iBAAW,MAAM;AACjB,qBAAe,OAAO;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,MAAM,eAAe,IAAK,CAAE;AAEjC,SAAO;AACR;",
   "names": ["apiFetch"]
 }

package/build/index.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -16,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/server-side-render/src/index.js
+// packages/server-side-render/src/index.ts
 var index_exports = {};
 __export(index_exports, {
   ServerSideRender: () => import_server_side_render.ServerSideRenderWithPostId,

package/build/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/index.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { ServerSideRenderWithPostId } from './server-side-render';\nimport { useServerSideRender } from './hook';\n\n/**\n * A compatibility layer for the `ServerSideRender` component when used with `wp` global namespace.\n *\n * @deprecated Use `ServerSideRender` non-default export instead.\n *\n * @example\n * ```js\n * import ServerSideRender from '@wordpress/server-side-render';\n * ```\n */\nconst ServerSideRenderCompat = ServerSideRenderWithPostId;\nServerSideRenderCompat.ServerSideRender = ServerSideRenderWithPostId;\nServerSideRenderCompat.useServerSideRender = useServerSideRender;\n\nexport { ServerSideRenderWithPostId as ServerSideRender };\nexport { useServerSideRender };\nexport default ServerSideRenderCompat;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gCAA2C;AAC3C,kBAAoC;AAYpC,IAAM,yBAAyB;AAC/B,uBAAuB,mBAAmB;AAC1C,uBAAuB,sBAAsB;AAI7C,IAAO,gBAAQ;",
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { ServerSideRenderWithPostId } from './server-side-render';\nimport { useServerSideRender } from './hook';\n\n/**\n * A compatibility layer for the `ServerSideRender` component when used with `wp` global namespace.\n *\n * @deprecated Use `ServerSideRender` non-default export instead.\n *\n * @example\n * ```js\n * import ServerSideRender from '@wordpress/server-side-render';\n * ```\n */\nconst ServerSideRenderCompat =\n\tServerSideRenderWithPostId as typeof ServerSideRenderWithPostId & {\n\t\tServerSideRender: typeof ServerSideRenderWithPostId;\n\t\tuseServerSideRender: typeof useServerSideRender;\n\t};\n\nServerSideRenderCompat.ServerSideRender = ServerSideRenderWithPostId;\nServerSideRenderCompat.useServerSideRender = useServerSideRender;\n\nexport { ServerSideRenderWithPostId as ServerSideRender };\nexport { useServerSideRender };\nexport default ServerSideRenderCompat;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gCAA2C;AAC3C,kBAAoC;AAYpC,IAAM,yBACL;AAKD,uBAAuB,mBAAmB;AAC1C,uBAAuB,sBAAsB;AAI7C,IAAO,gBAAQ;",
   "names": []
 }

package/build/server-side-render.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -16,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/server-side-render/src/server-side-render.js
+// packages/server-side-render/src/server-side-render.tsx
 var server_side_render_exports = {};
 __export(server_side_render_exports, {
   ServerSideRender: () => ServerSideRender,
@@ -33,15 +34,20 @@ var EMPTY_OBJECT = {};
 function DefaultEmptyResponsePlaceholder({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Placeholder, { className, children: (0, import_i18n.__)("Block rendered as empty.") });
 }
-function DefaultErrorResponsePlaceholder({ message, className }) {
+function DefaultErrorResponsePlaceholder({
+  message,
+  className
+}) {
   const errorMessage = (0, import_i18n.sprintf)(
     // translators: %s: error message describing the problem
     (0, import_i18n.__)("Error loading block: %s"),
-    message
+    message || (0, import_i18n.__)("Unknown error")
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Placeholder, { className, children: errorMessage });
 }
-function DefaultLoadingResponsePlaceholder({ children }) {
+function DefaultLoadingResponsePlaceholder({
+  children
+}) {
   const [showLoader, setShowLoader] = (0, import_element.useState)(false);
   (0, import_element.useEffect)(() => {
     const timeout = setTimeout(() => {
@@ -82,7 +88,11 @@ function ServerSideRender(props) {
     }
   }, [content]);
   if (status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingResponsePlaceholder, { ...props, children: !!prevContentRef.current && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_element.RawHTML, { className, children: prevContentRef.current }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingResponsePlaceholder, { ...props, children: !!prevContentRef.current && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_element.RawHTML, {
+      className,
+      // eslint-disable-next-line react-hooks/refs
+      children: prevContentRef.current
+    }) });
   }
   if (status === "success" && !content) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyResponsePlaceholder, { ...props });
@@ -90,14 +100,15 @@ function ServerSideRender(props) {
   if (status === "error") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorResponsePlaceholder, { message: error, ...props });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_element.RawHTML, { className, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_element.RawHTML, { className, children: content || "" });
 }
 function ServerSideRenderWithPostId({
   urlQueryArgs = EMPTY_OBJECT,
   ...props
 }) {
   const currentPostId = (0, import_data.useSelect)((select) => {
-    const postId = select("core/editor")?.getCurrentPostId();
+    const editorStore = select("core/editor");
+    const postId = editorStore?.getCurrentPostId?.();
     return postId && typeof postId === "number" ? postId : null;
   }, []);
   const newUrlQueryArgs = (0, import_element.useMemo)(() => {

package/build/server-side-render.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/server-side-render.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tRawHTML,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useServerSideRender } from './hook';\n\nconst EMPTY_OBJECT = {};\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { message, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tmessage\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children } ) {\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Schedule showing the Spinner after 1 second.\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function ServerSideRender( props ) {\n\tconst prevContentRef = useRef( '' );\n\tconst {\n\t\tclassName,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t\t...restProps\n\t} = props;\n\n\tconst { content, status, error } = useServerSideRender( restProps );\n\n\t// Store the previous successful HTML response to show while loading.\n\tuseEffect( () => {\n\t\tif ( content ) {\n\t\t\tprevContentRef.current = content;\n\t\t}\n\t}, [ content ] );\n\n\tif ( status === 'loading' ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props }>\n\t\t\t\t{ !! prevContentRef.current && (\n\t\t\t\t\t<RawHTML className={ className }>\n\t\t\t\t\t\t{ prevContentRef.current }\n\t\t\t\t\t</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( status === 'success' && ! content ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( status === 'error' ) {\n\t\treturn <ErrorResponsePlaceholder message={ error } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ content }</RawHTML>;\n}\n\n/**\n * A component that renders server-side content for blocks.\n *\n * Note: URL query will include the current post ID when applicable.\n * This is useful for blocks that depend on the context of the current post for rendering.\n *\n * @example\n * ```jsx\n * import { ServerSideRender } from '@wordpress/server-side-render';\n * // Legacy import for WordPress 6.8 and earlier\n * // import { default as ServerSideRender } from '@wordpress/server-side-render';\n *\n * function Example() {\n *   return (\n *     <ServerSideRender\n *       block=\"core/archives\"\n *       attributes={ { showPostCounts: true } }\n *       urlQueryArgs={ { customArg: 'value' } }\n *       className=\"custom-class\"\n *     />\n *   );\n * }\n * ```\n *\n * @param {Object}   props                                    Component props.\n * @param {string}   props.block                              The identifier of the block to be serverside rendered.\n * @param {Object}   props.attributes                         The block attributes to be sent to the server for rendering.\n * @param {string}   [props.className]                        Additional classes to apply to the wrapper element.\n * @param {string}   [props.httpMethod='GET']                 The HTTP method to use ('GET' or 'POST'). Default is 'GET'\n * @param {Object}   [props.urlQueryArgs]                     Additional query arguments to append to the request URL.\n * @param {boolean}  [props.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.\n * @param {Function} [props.EmptyResponsePlaceholder]         Component rendered when the API response is empty.\n * @param {Function} [props.ErrorResponsePlaceholder]         Component rendered when the API response is an error.\n * @param {Function} [props.LoadingResponsePlaceholder]       Component rendered while the API request is loading.\n *\n * @return {React.JSX.Element} The rendered server-side content.\n */\nexport function ServerSideRenderWithPostId( {\n\turlQueryArgs = EMPTY_OBJECT,\n\t...props\n} ) {\n\tconst currentPostId = useSelect( ( select ) => {\n\t\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\tconst postId = select( 'core/editor' )?.getCurrentPostId();\n\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\treturn postId && typeof postId === 'number' ? postId : null;\n\t}, [] );\n\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAMO;AACP,kBAA4B;AAC5B,wBAAqC;AACrC,kBAA0B;AAK1B,kBAAoC;AAMlC;AAJF,IAAM,eAAe,CAAC;AAEtB,SAAS,gCAAiC,EAAE,UAAU,GAAI;AACzD,SACC,4CAAC,iCAAY,WACV,8BAAI,0BAA2B,GAClC;AAEF;AAEA,SAAS,gCAAiC,EAAE,SAAS,UAAU,GAAI;AAClE,QAAM,mBAAe;AAAA;AAAA,QAEpB,gBAAI,yBAA0B;AAAA,IAC9B;AAAA,EACD;AACA,SAAO,4CAAC,iCAAY,WAA0B,wBAAc;AAC7D;AAEA,SAAS,kCAAmC,EAAE,SAAS,GAAI;AAC1D,QAAM,CAAE,YAAY,aAAc,QAAI,yBAAU,KAAM;AAEtD,gCAAW,MAAM;AAEhB,UAAM,UAAU,WAAY,MAAM;AACjC,oBAAe,IAAK;AAAA,IACrB,GAAG,GAAK;AACR,WAAO,MAAM,aAAc,OAAQ;AAAA,EACpC,GAAG,CAAC,CAAE;AAEN,SACC,6CAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC;AAAA,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAW;AAAA,UACX,YAAY;AAAA,QACb;AAAA,QAEA,sDAAC,6BAAQ;AAAA;AAAA,IACV;AAAA,IAED,4CAAC,SAAI,OAAQ,EAAE,SAAS,aAAa,QAAQ,EAAE,GAC5C,UACH;AAAA,KACD;AAEF;AAEO,SAAS,iBAAkB,OAAQ;AACzC,QAAM,qBAAiB,uBAAQ,EAAG;AAClC,QAAM;AAAA,IACL;AAAA,IACA,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,6BAA6B;AAAA,IAC7B,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM,EAAE,SAAS,QAAQ,MAAM,QAAI,iCAAqB,SAAU;AAGlE,gCAAW,MAAM;AAChB,QAAK,SAAU;AACd,qBAAe,UAAU;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAQ,CAAE;AAEf,MAAK,WAAW,WAAY;AAC3B,WACC,4CAAC,8BAA6B,GAAG,OAC9B,WAAC,CAAE,eAAe,WACnB,4CAAC,0BAAQ,WACN,yBAAe,SAClB,GAEF;AAAA,EAEF;AAEA,MAAK,WAAW,aAAa,CAAE,SAAU;AACxC,WAAO,4CAAC,4BAA2B,GAAG,OAAQ;AAAA,EAC/C;AAEA,MAAK,WAAW,SAAU;AACzB,WAAO,4CAAC,4BAAyB,SAAU,OAAU,GAAG,OAAQ;AAAA,EACjE;AAEA,SAAO,4CAAC,0BAAQ,WAA0B,mBAAS;AACpD;AAuCO,SAAS,2BAA4B;AAAA,EAC3C,eAAe;AAAA,EACf,GAAG;AACJ,GAAI;AACH,QAAM,oBAAgB,uBAAW,CAAE,WAAY;AAI9C,UAAM,SAAS,OAAQ,aAAc,GAAG,iBAAiB;AAMzD,WAAO,UAAU,OAAO,WAAW,WAAW,SAAS;AAAA,EACxD,GAAG,CAAC,CAAE;AAEN,QAAM,sBAAkB,wBAAS,MAAM;AACtC,QAAK,CAAE,eAAgB;AACtB,aAAO;AAAA,IACR;AACA,WAAO;AAAA,MACN,SAAS;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,eAAe,YAAa,CAAE;AAEnC,SAAO,4CAAC,oBAAiB,cAAe,iBAAoB,GAAG,OAAQ;AACxE;",
+  "sources": ["../src/server-side-render.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tRawHTML,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useServerSideRender } from './hook';\nimport type {\n\tPlaceholderProps,\n\tErrorPlaceholderProps,\n\tLoadingPlaceholderProps,\n\tServerSideRenderProps,\n\tServerSideRenderWithPostIdProps,\n} from './types';\n\nconst EMPTY_OBJECT = {};\n\nfunction DefaultEmptyResponsePlaceholder( { className }: PlaceholderProps ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( {\n\tmessage,\n\tclassName,\n}: ErrorPlaceholderProps ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tmessage || __( 'Unknown error' )\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( {\n\tchildren,\n}: LoadingPlaceholderProps ) {\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Schedule showing the Spinner after 1 second.\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function ServerSideRender( props: ServerSideRenderProps ) {\n\tconst prevContentRef = useRef( '' );\n\tconst {\n\t\tclassName,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t\t...restProps\n\t} = props;\n\n\tconst { content, status, error } = useServerSideRender( restProps );\n\n\t// Store the previous successful HTML response to show while loading.\n\tuseEffect( () => {\n\t\tif ( content ) {\n\t\t\tprevContentRef.current = content;\n\t\t}\n\t}, [ content ] );\n\n\tif ( status === 'loading' ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props }>\n\t\t\t\t{ /* eslint-disable-next-line react-hooks/refs */ }\n\t\t\t\t{ !! prevContentRef.current && (\n\t\t\t\t\t<RawHTML className={ className }>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// eslint-disable-next-line react-hooks/refs\n\t\t\t\t\t\t\tprevContentRef.current\n\t\t\t\t\t\t}\n\t\t\t\t\t</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( status === 'success' && ! content ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( status === 'error' ) {\n\t\treturn <ErrorResponsePlaceholder message={ error } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ content || '' }</RawHTML>;\n}\n\n/**\n * A component that renders server-side content for blocks.\n *\n * Note: URL query will include the current post ID when applicable.\n * This is useful for blocks that depend on the context of the current post for rendering.\n *\n * @example\n * ```jsx\n * import { ServerSideRender } from '@wordpress/server-side-render';\n * // Legacy import for WordPress 6.8 and earlier\n * // import { default as ServerSideRender } from '@wordpress/server-side-render';\n *\n * function Example() {\n *   return (\n *     <ServerSideRender\n *       block=\"core/archives\"\n *       attributes={ { showPostCounts: true } }\n *       urlQueryArgs={ { customArg: 'value' } }\n *       className=\"custom-class\"\n *     />\n *   );\n * }\n * ```\n *\n * @param props              Component props.\n * @param props.urlQueryArgs Additional query arguments to append to the request URL.\n * @return The rendered server-side content.\n */\nexport function ServerSideRenderWithPostId( {\n\turlQueryArgs = EMPTY_OBJECT,\n\t...props\n}: ServerSideRenderWithPostIdProps ) {\n\tconst currentPostId = useSelect( ( select ) => {\n\t\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\tconst editorStore = select( 'core/editor' );\n\t\t// @ts-expect-error - editorStore is not typed in @wordpress/data\n\t\tconst postId = editorStore?.getCurrentPostId?.();\n\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\treturn postId && typeof postId === 'number' ? postId : null;\n\t}, [] );\n\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAMO;AACP,kBAA4B;AAC5B,wBAAqC;AACrC,kBAA0B;AAK1B,kBAAoC;AAalC;AAJF,IAAM,eAAe,CAAC;AAEtB,SAAS,gCAAiC,EAAE,UAAU,GAAsB;AAC3E,SACC,4CAAC,iCAAY,WACV,8BAAI,0BAA2B,GAClC;AAEF;AAEA,SAAS,gCAAiC;AAAA,EACzC;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,mBAAe;AAAA;AAAA,QAEpB,gBAAI,yBAA0B;AAAA,IAC9B,eAAW,gBAAI,eAAgB;AAAA,EAChC;AACA,SAAO,4CAAC,iCAAY,WAA0B,wBAAc;AAC7D;AAEA,SAAS,kCAAmC;AAAA,EAC3C;AACD,GAA6B;AAC5B,QAAM,CAAE,YAAY,aAAc,QAAI,yBAAU,KAAM;AAEtD,gCAAW,MAAM;AAEhB,UAAM,UAAU,WAAY,MAAM;AACjC,oBAAe,IAAK;AAAA,IACrB,GAAG,GAAK;AACR,WAAO,MAAM,aAAc,OAAQ;AAAA,EACpC,GAAG,CAAC,CAAE;AAEN,SACC,6CAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC;AAAA,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAW;AAAA,UACX,YAAY;AAAA,QACb;AAAA,QAEA,sDAAC,6BAAQ;AAAA;AAAA,IACV;AAAA,IAED,4CAAC,SAAI,OAAQ,EAAE,SAAS,aAAa,QAAQ,EAAE,GAC5C,UACH;AAAA,KACD;AAEF;AAEO,SAAS,iBAAkB,OAA+B;AAChE,QAAM,qBAAiB,uBAAQ,EAAG;AAClC,QAAM;AAAA,IACL;AAAA,IACA,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,6BAA6B;AAAA,IAC7B,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM,EAAE,SAAS,QAAQ,MAAM,QAAI,iCAAqB,SAAU;AAGlE,gCAAW,MAAM;AAChB,QAAK,SAAU;AACd,qBAAe,UAAU;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAQ,CAAE;AAEf,MAAK,WAAW,WAAY;AAC3B,WACC,4CAAC,8BAA6B,GAAG,OAE9B,WAAC,CAAE,eAAe,WACnB,4CAAC;AAAA,MAAQ;AAAA;AAAA,MAGP,yBAAe;AAAA,KAEjB,GAEF;AAAA,EAEF;AAEA,MAAK,WAAW,aAAa,CAAE,SAAU;AACxC,WAAO,4CAAC,4BAA2B,GAAG,OAAQ;AAAA,EAC/C;AAEA,MAAK,WAAW,SAAU;AACzB,WAAO,4CAAC,4BAAyB,SAAU,OAAU,GAAG,OAAQ;AAAA,EACjE;AAEA,SAAO,4CAAC,0BAAQ,WAA0B,qBAAW,IAAI;AAC1D;AA8BO,SAAS,2BAA4B;AAAA,EAC3C,eAAe;AAAA,EACf,GAAG;AACJ,GAAqC;AACpC,QAAM,oBAAgB,uBAAW,CAAE,WAAY;AAI9C,UAAM,cAAc,OAAQ,aAAc;AAE1C,UAAM,SAAS,aAAa,mBAAmB;AAM/C,WAAO,UAAU,OAAO,WAAW,WAAW,SAAS;AAAA,EACxD,GAAG,CAAC,CAAE;AAEN,QAAM,sBAAkB,wBAAS,MAAM;AACtC,QAAK,CAAE,eAAgB;AACtB,aAAO;AAAA,IACR;AACA,WAAO;AAAA,MACN,SAAS;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,eAAe,YAAa,CAAE;AAEnC,SAAO,4CAAC,oBAAiB,cAAe,iBAAoB,GAAG,OAAQ;AACxE;",
   "names": []
 }

package/build/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/server-side-render/src/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/build/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/types.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type React from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { UseServerSideRenderArgs } from './hook';\n\nexport interface PlaceholderProps {\n\t/** Additional classes to apply to the wrapper element. */\n\tclassName?: string;\n}\n\nexport interface ErrorPlaceholderProps extends PlaceholderProps {\n\t/** Error message describing the problem. */\n\tmessage?: string;\n}\n\nexport interface LoadingPlaceholderProps {\n\tchildren?: React.ReactNode;\n}\n\nexport interface ServerSideRenderProps extends UseServerSideRenderArgs {\n\t/** Additional classes to apply to the wrapper element. */\n\tclassName?: string;\n\t/** Component rendered when the API response is empty. */\n\tEmptyResponsePlaceholder?: React.ComponentType< PlaceholderProps >;\n\t/** Component rendered when the API response is an error. */\n\tErrorResponsePlaceholder?: React.ComponentType< ErrorPlaceholderProps >;\n\t/** Component rendered while the API request is loading. */\n\tLoadingResponsePlaceholder?: React.ComponentType< LoadingPlaceholderProps >;\n}\n\nexport interface ServerSideRenderWithPostIdProps\n\textends Omit< ServerSideRenderProps, 'urlQueryArgs' > {\n\t/** Additional query arguments to append to the request URL. */\n\turlQueryArgs?: Record< string, unknown >;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build-module/hook.mjs

@@ -1,4 +1,4 @@
-// packages/server-side-render/src/hook.js
+// packages/server-side-render/src/hook.ts
 import { debounce } from "@wordpress/compose";
 import { useEffect, useState, useRef } from "@wordpress/element";
 import apiFetch from "@wordpress/api-fetch";
@@ -37,7 +37,9 @@ function removeBlockSupportAttributes(attributes) {
   };
 }
 function useServerSideRender(args) {
-  const [response, setResponse] = useState({ status: "idle" });
+  const [response, setResponse] = useState({
+    status: "idle"
+  });
   const shouldDebounceRef = useRef(false);
   const {
     attributes,
@@ -47,7 +49,7 @@ function useServerSideRender(args) {
     urlQueryArgs
   } = args;
   let sanitizedAttributes = attributes && __experimentalSanitizeBlockAttributes(block, attributes);
-  if (skipBlockSupportAttributes) {
+  if (skipBlockSupportAttributes && sanitizedAttributes) {
     sanitizedAttributes = removeBlockSupportAttributes(sanitizedAttributes);
   }
   const isPostRequest = "POST" === httpMethod;
@@ -74,12 +76,12 @@ function useServerSideRender(args) {
               content: res ? res.rendered : ""
             });
           }).catch((error) => {
-            if (error.name === "AbortError") {
+            if (error instanceof Error && error.name === "AbortError") {
               return;
             }
             setResponse({
               status: "error",
-              error: error.message
+              error: error instanceof Error ? error.message : String(error)
             });
           }).finally(() => {
             shouldDebounceRef.current = true;

package/build-module/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/hook.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { debounce } from '@wordpress/compose';\nimport { useEffect, useState, useRef } from '@wordpress/element';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nexport function rendererPath( block, attributes = null, urlQueryArgs = {} ) {\n\treturn addQueryArgs( `/wp/v2/block-renderer/${ block }`, {\n\t\tcontext: 'edit',\n\t\t...( null !== attributes ? { attributes } : {} ),\n\t\t...urlQueryArgs,\n\t} );\n}\n\nexport function removeBlockSupportAttributes( attributes ) {\n\tconst {\n\t\tbackgroundColor,\n\t\tborderColor,\n\t\tfontFamily,\n\t\tfontSize,\n\t\tgradient,\n\t\ttextColor,\n\t\tclassName,\n\t\t...restAttributes\n\t} = attributes;\n\n\tconst {\n\t\tborder,\n\t\tcolor,\n\t\telements,\n\t\tshadow,\n\t\tspacing,\n\t\ttypography,\n\t\t...restStyles\n\t} = attributes?.style || {};\n\n\treturn {\n\t\t...restAttributes,\n\t\tstyle: restStyles,\n\t};\n}\n\n/**\n * @typedef {Object} ServerSideRenderResponse\n * @property {string} status    - The current request status: 'idle', 'loading', 'success', or 'error'.\n * @property {string} [content] - The rendered block content (available when status is 'success').\n * @property {string} [error]   - The error message (available when status is 'error').\n */\n\n/**\n * A hook for server-side rendering a preview of dynamic blocks to display in the editor.\n *\n * Handles fetching server-rendered previews for blocks, managing loading states,\n * and automatically debouncing requests to prevent excessive API calls. It supports both\n * GET and POST requests, with POST requests used for larger attribute payloads.\n *\n * @example\n * Basic usage:\n *\n * ```jsx\n * import { RawHTML } from '@wordpress/element';\n * import { useServerSideRender } from '@wordpress/server-side-render';\n *\n * function MyServerSideRender( { attributes, block } ) {\n *   const { content, status, error } = useServerSideRender( {\n *     attributes,\n *     block,\n *   } );\n *\n *   if ( status === 'loading' ) {\n *     return <div>Loading...</div>;\n *   }\n *\n *   if ( status === 'error' ) {\n *     return <div>Error: { error }</div>;\n *   }\n *\n *   return <RawHTML>{ content }</RawHTML>;\n * }\n * ```\n *\n * @param {Object}  args                                    The hook configuration object.\n * @param {Object}  args.attributes                         The block attributes to be sent to the server for rendering.\n * @param {string}  args.block                              The identifier of the block to be serverside rendered. Example: 'core/archives'.\n * @param {boolean} [args.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.\n * @param {string}  [args.httpMethod='GET']                 The HTTP method to use ('GET' or 'POST'). Default is 'GET'.\n * @param {Object}  [args.urlQueryArgs]                     Additional query arguments to append to the request URL.\n *\n * @return {ServerSideRenderResponse} The server-side render response object.\n */\nexport function useServerSideRender( args ) {\n\tconst [ response, setResponse ] = useState( { status: 'idle' } );\n\tconst shouldDebounceRef = useRef( false );\n\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tskipBlockSupportAttributes = false,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t} = args;\n\n\tlet sanitizedAttributes =\n\t\tattributes &&\n\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\tif ( skipBlockSupportAttributes ) {\n\t\tsanitizedAttributes =\n\t\t\tremoveBlockSupportAttributes( sanitizedAttributes );\n\t}\n\n\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\tconst isPostRequest = 'POST' === httpMethod;\n\tconst urlAttributes = isPostRequest ? null : sanitizedAttributes;\n\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\tconst body = isPostRequest\n\t\t? JSON.stringify( { attributes: sanitizedAttributes ?? null } )\n\t\t: undefined;\n\n\tuseEffect( () => {\n\t\tconst controller = new AbortController();\n\t\tconst debouncedFetch = debounce(\n\t\t\tfunction () {\n\t\t\t\t{\n\t\t\t\t\tsetResponse( { status: 'loading' } );\n\n\t\t\t\t\tapiFetch( {\n\t\t\t\t\t\tpath,\n\t\t\t\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t\t\t\t\tbody,\n\t\t\t\t\t\theaders: isPostRequest\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {},\n\t\t\t\t\t\tsignal: controller.signal,\n\t\t\t\t\t} )\n\t\t\t\t\t\t.then( ( res ) => {\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'success',\n\t\t\t\t\t\t\t\tcontent: res ? res.rendered : '',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.catch( ( error ) => {\n\t\t\t\t\t\t\t// The request was aborted, do not update the response.\n\t\t\t\t\t\t\tif ( error.name === 'AbortError' ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'error',\n\t\t\t\t\t\t\t\terror: error.message,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.finally( () => {\n\t\t\t\t\t\t\t// Debounce requests after first fetch.\n\t\t\t\t\t\t\tshouldDebounceRef.current = true;\n\t\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t},\n\t\t\tshouldDebounceRef.current ? 500 : 0\n\t\t);\n\n\t\tdebouncedFetch();\n\n\t\treturn () => {\n\t\t\tcontroller.abort();\n\t\t\tdebouncedFetch.cancel();\n\t\t};\n\t}, [ path, isPostRequest, body ] );\n\n\treturn response;\n}\n"],
-  "mappings": ";AAGA,SAAS,gBAAgB;AACzB,SAAS,WAAW,UAAU,cAAc;AAC5C,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAC7B,SAAS,6CAA6C;AAE/C,SAAS,aAAc,OAAO,aAAa,MAAM,eAAe,CAAC,GAAI;AAC3E,SAAO,aAAc,yBAA0B,KAAM,IAAI;AAAA,IACxD,SAAS;AAAA,IACT,GAAK,SAAS,aAAa,EAAE,WAAW,IAAI,CAAC;AAAA,IAC7C,GAAG;AAAA,EACJ,CAAE;AACH;AAEO,SAAS,6BAA8B,YAAa;AAC1D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI,YAAY,SAAS,CAAC;AAE1B,SAAO;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,EACR;AACD;AAkDO,SAAS,oBAAqB,MAAO;AAC3C,QAAM,CAAE,UAAU,WAAY,IAAI,SAAU,EAAE,QAAQ,OAAO,CAAE;AAC/D,QAAM,oBAAoB,OAAQ,KAAM;AAExC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,6BAA6B;AAAA,IAC7B,aAAa;AAAA,IACb;AAAA,EACD,IAAI;AAEJ,MAAI,sBACH,cACA,sCAAuC,OAAO,UAAW;AAE1D,MAAK,4BAA6B;AACjC,0BACC,6BAA8B,mBAAoB;AAAA,EACpD;AAIA,QAAM,gBAAgB,WAAW;AACjC,QAAM,gBAAgB,gBAAgB,OAAO;AAC7C,QAAM,OAAO,aAAc,OAAO,eAAe,YAAa;AAC9D,QAAM,OAAO,gBACV,KAAK,UAAW,EAAE,YAAY,uBAAuB,KAAK,CAAE,IAC5D;AAEH,YAAW,MAAM;AAChB,UAAM,aAAa,IAAI,gBAAgB;AACvC,UAAM,iBAAiB;AAAA,MACtB,WAAY;AACX;AACC,sBAAa,EAAE,QAAQ,UAAU,CAAE;AAEnC,mBAAU;AAAA,YACT;AAAA,YACA,QAAQ,gBAAgB,SAAS;AAAA,YACjC;AAAA,YACA,SAAS,gBACN;AAAA,cACA,gBAAgB;AAAA,YAChB,IACA,CAAC;AAAA,YACJ,QAAQ,WAAW;AAAA,UACpB,CAAE,EACA,KAAM,CAAE,QAAS;AACjB,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,MAAM,IAAI,WAAW;AAAA,YAC/B,CAAE;AAAA,UACH,CAAE,EACD,MAAO,CAAE,UAAW;AAEpB,gBAAK,MAAM,SAAS,cAAe;AAClC;AAAA,YACD;AAEA,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,OAAO,MAAM;AAAA,YACd,CAAE;AAAA,UACH,CAAE,EACD,QAAS,MAAM;AAEf,8BAAkB,UAAU;AAAA,UAC7B,CAAE;AAAA,QACJ;AAAA,MACD;AAAA,MACA,kBAAkB,UAAU,MAAM;AAAA,IACnC;AAEA,mBAAe;AAEf,WAAO,MAAM;AACZ,iBAAW,MAAM;AACjB,qBAAe,OAAO;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,MAAM,eAAe,IAAK,CAAE;AAEjC,SAAO;AACR;",
+  "sources": ["../src/hook.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { debounce } from '@wordpress/compose';\nimport { useEffect, useState, useRef } from '@wordpress/element';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\n\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nexport function rendererPath(\n\tblock: string,\n\tattributes: Record< string, unknown > | null = null,\n\turlQueryArgs: Record< string, unknown > = {}\n): string {\n\treturn addQueryArgs( `/wp/v2/block-renderer/${ block }`, {\n\t\tcontext: 'edit',\n\t\t...( null !== attributes ? { attributes } : {} ),\n\t\t...urlQueryArgs,\n\t} );\n}\n\nexport function removeBlockSupportAttributes(\n\tattributes: Record< string, unknown > & {\n\t\tstyle?: Record< string, unknown >;\n\t}\n): Record< string, unknown > {\n\tconst {\n\t\tbackgroundColor,\n\t\tborderColor,\n\t\tfontFamily,\n\t\tfontSize,\n\t\tgradient,\n\t\ttextColor,\n\t\tclassName,\n\t\t...restAttributes\n\t} = attributes;\n\n\tconst {\n\t\tborder,\n\t\tcolor,\n\t\telements,\n\t\tshadow,\n\t\tspacing,\n\t\ttypography,\n\t\t...restStyles\n\t} = attributes?.style || {};\n\n\treturn {\n\t\t...restAttributes,\n\t\tstyle: restStyles,\n\t};\n}\n\n/**\n * Server-side render response object.\n */\nexport interface ServerSideRenderResponse {\n\t/** The current request status: 'idle', 'loading', 'success', or 'error'. */\n\tstatus: 'idle' | 'loading' | 'success' | 'error';\n\t/** The rendered block content (available when status is 'success'). */\n\tcontent?: string;\n\t/** The error message (available when status is 'error'). */\n\terror?: string;\n}\n\n/**\n * Configuration object for the useServerSideRender hook.\n */\nexport interface UseServerSideRenderArgs {\n\t/** The block attributes to be sent to the server for rendering. */\n\tattributes: Record< string, unknown >;\n\t/** The identifier of the block to be serverside rendered. Example: 'core/archives'. */\n\tblock: string;\n\t/** Whether to remove block support attributes before sending. */\n\tskipBlockSupportAttributes?: boolean;\n\t/** The HTTP method to use ('GET' or 'POST'). Default is 'GET'. */\n\thttpMethod?: 'GET' | 'POST';\n\t/** Additional query arguments to append to the request URL. */\n\turlQueryArgs?: Record< string, unknown >;\n}\n\n/**\n * A hook for server-side rendering a preview of dynamic blocks to display in the editor.\n *\n * Handles fetching server-rendered previews for blocks, managing loading states,\n * and automatically debouncing requests to prevent excessive API calls. It supports both\n * GET and POST requests, with POST requests used for larger attribute payloads.\n *\n * @example\n * Basic usage:\n *\n * ```jsx\n * import { RawHTML } from '@wordpress/element';\n * import { useServerSideRender } from '@wordpress/server-side-render';\n *\n * function MyServerSideRender( { attributes, block } ) {\n *   const { content, status, error } = useServerSideRender( {\n *     attributes,\n *     block,\n *   } );\n *\n *   if ( status === 'loading' ) {\n *     return <div>Loading...</div>;\n *   }\n *\n *   if ( status === 'error' ) {\n *     return <div>Error: { error }</div>;\n *   }\n *\n *   return <RawHTML>{ content }</RawHTML>;\n * }\n * ```\n *\n * @param args The hook configuration object.\n *\n * @return The server-side render response object.\n */\nexport function useServerSideRender(\n\targs: UseServerSideRenderArgs\n): ServerSideRenderResponse {\n\tconst [ response, setResponse ] = useState< ServerSideRenderResponse >( {\n\t\tstatus: 'idle',\n\t} );\n\tconst shouldDebounceRef = useRef< boolean >( false );\n\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tskipBlockSupportAttributes = false,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t} = args;\n\n\tlet sanitizedAttributes: Record< string, unknown > | null =\n\t\tattributes &&\n\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\tif ( skipBlockSupportAttributes && sanitizedAttributes ) {\n\t\tsanitizedAttributes =\n\t\t\tremoveBlockSupportAttributes( sanitizedAttributes );\n\t}\n\n\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\tconst isPostRequest = 'POST' === httpMethod;\n\tconst urlAttributes = isPostRequest ? null : sanitizedAttributes;\n\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\tconst body = isPostRequest\n\t\t? JSON.stringify( { attributes: sanitizedAttributes ?? null } )\n\t\t: undefined;\n\n\tuseEffect( () => {\n\t\tconst controller = new AbortController();\n\t\tconst debouncedFetch = debounce(\n\t\t\tfunction () {\n\t\t\t\t{\n\t\t\t\t\tsetResponse( { status: 'loading' } );\n\n\t\t\t\t\tapiFetch< { rendered: string } >( {\n\t\t\t\t\t\tpath,\n\t\t\t\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t\t\t\t\tbody,\n\t\t\t\t\t\theaders: isPostRequest\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {},\n\t\t\t\t\t\tsignal: controller.signal,\n\t\t\t\t\t} )\n\t\t\t\t\t\t.then( ( res ) => {\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'success',\n\t\t\t\t\t\t\t\tcontent: res ? res.rendered : '',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.catch( ( error: unknown ) => {\n\t\t\t\t\t\t\t// The request was aborted, do not update the response.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\terror instanceof Error &&\n\t\t\t\t\t\t\t\terror.name === 'AbortError'\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\t\t\tstatus: 'error',\n\t\t\t\t\t\t\t\terror:\n\t\t\t\t\t\t\t\t\terror instanceof Error\n\t\t\t\t\t\t\t\t\t\t? error.message\n\t\t\t\t\t\t\t\t\t\t: String( error ),\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} )\n\t\t\t\t\t\t.finally( () => {\n\t\t\t\t\t\t\t// Debounce requests after first fetch.\n\t\t\t\t\t\t\tshouldDebounceRef.current = true;\n\t\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t},\n\t\t\tshouldDebounceRef.current ? 500 : 0\n\t\t);\n\n\t\tdebouncedFetch();\n\n\t\treturn () => {\n\t\t\tcontroller.abort();\n\t\t\tdebouncedFetch.cancel();\n\t\t};\n\t}, [ path, isPostRequest, body ] );\n\n\treturn response;\n}\n"],
+  "mappings": ";AAGA,SAAS,gBAAgB;AACzB,SAAS,WAAW,UAAU,cAAc;AAC5C,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAE7B,SAAS,6CAA6C;AAE/C,SAAS,aACf,OACA,aAA+C,MAC/C,eAA0C,CAAC,GAClC;AACT,SAAO,aAAc,yBAA0B,KAAM,IAAI;AAAA,IACxD,SAAS;AAAA,IACT,GAAK,SAAS,aAAa,EAAE,WAAW,IAAI,CAAC;AAAA,IAC7C,GAAG;AAAA,EACJ,CAAE;AACH;AAEO,SAAS,6BACf,YAG4B;AAC5B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI,YAAY,SAAS,CAAC;AAE1B,SAAO;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,EACR;AACD;AAkEO,SAAS,oBACf,MAC2B;AAC3B,QAAM,CAAE,UAAU,WAAY,IAAI,SAAsC;AAAA,IACvE,QAAQ;AAAA,EACT,CAAE;AACF,QAAM,oBAAoB,OAAmB,KAAM;AAEnD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,6BAA6B;AAAA,IAC7B,aAAa;AAAA,IACb;AAAA,EACD,IAAI;AAEJ,MAAI,sBACH,cACA,sCAAuC,OAAO,UAAW;AAE1D,MAAK,8BAA8B,qBAAsB;AACxD,0BACC,6BAA8B,mBAAoB;AAAA,EACpD;AAIA,QAAM,gBAAgB,WAAW;AACjC,QAAM,gBAAgB,gBAAgB,OAAO;AAC7C,QAAM,OAAO,aAAc,OAAO,eAAe,YAAa;AAC9D,QAAM,OAAO,gBACV,KAAK,UAAW,EAAE,YAAY,uBAAuB,KAAK,CAAE,IAC5D;AAEH,YAAW,MAAM;AAChB,UAAM,aAAa,IAAI,gBAAgB;AACvC,UAAM,iBAAiB;AAAA,MACtB,WAAY;AACX;AACC,sBAAa,EAAE,QAAQ,UAAU,CAAE;AAEnC,mBAAkC;AAAA,YACjC;AAAA,YACA,QAAQ,gBAAgB,SAAS;AAAA,YACjC;AAAA,YACA,SAAS,gBACN;AAAA,cACA,gBAAgB;AAAA,YAChB,IACA,CAAC;AAAA,YACJ,QAAQ,WAAW;AAAA,UACpB,CAAE,EACA,KAAM,CAAE,QAAS;AACjB,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,MAAM,IAAI,WAAW;AAAA,YAC/B,CAAE;AAAA,UACH,CAAE,EACD,MAAO,CAAE,UAAoB;AAE7B,gBACC,iBAAiB,SACjB,MAAM,SAAS,cACd;AACD;AAAA,YACD;AAEA,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,OACC,iBAAiB,QACd,MAAM,UACN,OAAQ,KAAM;AAAA,YACnB,CAAE;AAAA,UACH,CAAE,EACD,QAAS,MAAM;AAEf,8BAAkB,UAAU;AAAA,UAC7B,CAAE;AAAA,QACJ;AAAA,MACD;AAAA,MACA,kBAAkB,UAAU,MAAM;AAAA,IACnC;AAEA,mBAAe;AAEf,WAAO,MAAM;AACZ,iBAAW,MAAM;AACjB,qBAAe,OAAO;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,MAAM,eAAe,IAAK,CAAE;AAEjC,SAAO;AACR;",
   "names": []
 }

package/build-module/index.mjs

@@ -1,4 +1,4 @@
-// packages/server-side-render/src/index.js
+// packages/server-side-render/src/index.ts
 import { ServerSideRenderWithPostId } from "./server-side-render.mjs";
 import { useServerSideRender } from "./hook.mjs";
 var ServerSideRenderCompat = ServerSideRenderWithPostId;

package/build-module/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/index.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { ServerSideRenderWithPostId } from './server-side-render';\nimport { useServerSideRender } from './hook';\n\n/**\n * A compatibility layer for the `ServerSideRender` component when used with `wp` global namespace.\n *\n * @deprecated Use `ServerSideRender` non-default export instead.\n *\n * @example\n * ```js\n * import ServerSideRender from '@wordpress/server-side-render';\n * ```\n */\nconst ServerSideRenderCompat = ServerSideRenderWithPostId;\nServerSideRenderCompat.ServerSideRender = ServerSideRenderWithPostId;\nServerSideRenderCompat.useServerSideRender = useServerSideRender;\n\nexport { ServerSideRenderWithPostId as ServerSideRender };\nexport { useServerSideRender };\nexport default ServerSideRenderCompat;\n"],
-  "mappings": ";AAGA,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAYpC,IAAM,yBAAyB;AAC/B,uBAAuB,mBAAmB;AAC1C,uBAAuB,sBAAsB;AAI7C,IAAO,gBAAQ;",
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { ServerSideRenderWithPostId } from './server-side-render';\nimport { useServerSideRender } from './hook';\n\n/**\n * A compatibility layer for the `ServerSideRender` component when used with `wp` global namespace.\n *\n * @deprecated Use `ServerSideRender` non-default export instead.\n *\n * @example\n * ```js\n * import ServerSideRender from '@wordpress/server-side-render';\n * ```\n */\nconst ServerSideRenderCompat =\n\tServerSideRenderWithPostId as typeof ServerSideRenderWithPostId & {\n\t\tServerSideRender: typeof ServerSideRenderWithPostId;\n\t\tuseServerSideRender: typeof useServerSideRender;\n\t};\n\nServerSideRenderCompat.ServerSideRender = ServerSideRenderWithPostId;\nServerSideRenderCompat.useServerSideRender = useServerSideRender;\n\nexport { ServerSideRenderWithPostId as ServerSideRender };\nexport { useServerSideRender };\nexport default ServerSideRenderCompat;\n"],
+  "mappings": ";AAGA,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAYpC,IAAM,yBACL;AAKD,uBAAuB,mBAAmB;AAC1C,uBAAuB,sBAAsB;AAI7C,IAAO,gBAAQ;",
   "names": []
 }

package/build-module/server-side-render.mjs

@@ -1,10 +1,10 @@
-// packages/server-side-render/src/server-side-render.js
+// packages/server-side-render/src/server-side-render.tsx
 import {
   RawHTML,
   useEffect,
   useState,
-  useRef,
-  useMemo
+  useMemo,
+  useRef
 } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
 import { Placeholder, Spinner } from "@wordpress/components";
@@ -15,15 +15,20 @@ var EMPTY_OBJECT = {};
 function DefaultEmptyResponsePlaceholder({ className }) {
   return /* @__PURE__ */ jsx(Placeholder, { className, children: __("Block rendered as empty.") });
 }
-function DefaultErrorResponsePlaceholder({ message, className }) {
+function DefaultErrorResponsePlaceholder({
+  message,
+  className
+}) {
   const errorMessage = sprintf(
     // translators: %s: error message describing the problem
     __("Error loading block: %s"),
-    message
+    message || __("Unknown error")
   );
   return /* @__PURE__ */ jsx(Placeholder, { className, children: errorMessage });
 }
-function DefaultLoadingResponsePlaceholder({ children }) {
+function DefaultLoadingResponsePlaceholder({
+  children
+}) {
   const [showLoader, setShowLoader] = useState(false);
   useEffect(() => {
     const timeout = setTimeout(() => {
@@ -64,7 +69,11 @@ function ServerSideRender(props) {
     }
   }, [content]);
   if (status === "loading") {
-    return /* @__PURE__ */ jsx(LoadingResponsePlaceholder, { ...props, children: !!prevContentRef.current && /* @__PURE__ */ jsx(RawHTML, { className, children: prevContentRef.current }) });
+    return /* @__PURE__ */ jsx(LoadingResponsePlaceholder, { ...props, children: !!prevContentRef.current && /* @__PURE__ */ jsx(RawHTML, {
+      className,
+      // eslint-disable-next-line react-hooks/refs
+      children: prevContentRef.current
+    }) });
   }
   if (status === "success" && !content) {
     return /* @__PURE__ */ jsx(EmptyResponsePlaceholder, { ...props });
@@ -72,14 +81,15 @@ function ServerSideRender(props) {
   if (status === "error") {
     return /* @__PURE__ */ jsx(ErrorResponsePlaceholder, { message: error, ...props });
   }
-  return /* @__PURE__ */ jsx(RawHTML, { className, children: content });
+  return /* @__PURE__ */ jsx(RawHTML, { className, children: content || "" });
 }
 function ServerSideRenderWithPostId({
   urlQueryArgs = EMPTY_OBJECT,
   ...props
 }) {
   const currentPostId = useSelect((select) => {
-    const postId = select("core/editor")?.getCurrentPostId();
+    const editorStore = select("core/editor");
+    const postId = editorStore?.getCurrentPostId?.();
     return postId && typeof postId === "number" ? postId : null;
   }, []);
   const newUrlQueryArgs = useMemo(() => {

package/build-module/server-side-render.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/server-side-render.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tRawHTML,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useServerSideRender } from './hook';\n\nconst EMPTY_OBJECT = {};\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { message, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tmessage\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children } ) {\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Schedule showing the Spinner after 1 second.\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function ServerSideRender( props ) {\n\tconst prevContentRef = useRef( '' );\n\tconst {\n\t\tclassName,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t\t...restProps\n\t} = props;\n\n\tconst { content, status, error } = useServerSideRender( restProps );\n\n\t// Store the previous successful HTML response to show while loading.\n\tuseEffect( () => {\n\t\tif ( content ) {\n\t\t\tprevContentRef.current = content;\n\t\t}\n\t}, [ content ] );\n\n\tif ( status === 'loading' ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props }>\n\t\t\t\t{ !! prevContentRef.current && (\n\t\t\t\t\t<RawHTML className={ className }>\n\t\t\t\t\t\t{ prevContentRef.current }\n\t\t\t\t\t</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( status === 'success' && ! content ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( status === 'error' ) {\n\t\treturn <ErrorResponsePlaceholder message={ error } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ content }</RawHTML>;\n}\n\n/**\n * A component that renders server-side content for blocks.\n *\n * Note: URL query will include the current post ID when applicable.\n * This is useful for blocks that depend on the context of the current post for rendering.\n *\n * @example\n * ```jsx\n * import { ServerSideRender } from '@wordpress/server-side-render';\n * // Legacy import for WordPress 6.8 and earlier\n * // import { default as ServerSideRender } from '@wordpress/server-side-render';\n *\n * function Example() {\n *   return (\n *     <ServerSideRender\n *       block=\"core/archives\"\n *       attributes={ { showPostCounts: true } }\n *       urlQueryArgs={ { customArg: 'value' } }\n *       className=\"custom-class\"\n *     />\n *   );\n * }\n * ```\n *\n * @param {Object}   props                                    Component props.\n * @param {string}   props.block                              The identifier of the block to be serverside rendered.\n * @param {Object}   props.attributes                         The block attributes to be sent to the server for rendering.\n * @param {string}   [props.className]                        Additional classes to apply to the wrapper element.\n * @param {string}   [props.httpMethod='GET']                 The HTTP method to use ('GET' or 'POST'). Default is 'GET'\n * @param {Object}   [props.urlQueryArgs]                     Additional query arguments to append to the request URL.\n * @param {boolean}  [props.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.\n * @param {Function} [props.EmptyResponsePlaceholder]         Component rendered when the API response is empty.\n * @param {Function} [props.ErrorResponsePlaceholder]         Component rendered when the API response is an error.\n * @param {Function} [props.LoadingResponsePlaceholder]       Component rendered while the API request is loading.\n *\n * @return {React.JSX.Element} The rendered server-side content.\n */\nexport function ServerSideRenderWithPostId( {\n\turlQueryArgs = EMPTY_OBJECT,\n\t...props\n} ) {\n\tconst currentPostId = useSelect( ( select ) => {\n\t\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\tconst postId = select( 'core/editor' )?.getCurrentPostId();\n\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\treturn postId && typeof postId === 'number' ? postId : null;\n\t}, [] );\n\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,IAAI,eAAe;AAC5B,SAAS,aAAa,eAAe;AACrC,SAAS,iBAAiB;AAK1B,SAAS,2BAA2B;AAMlC,cA2BA,YA3BA;AAJF,IAAM,eAAe,CAAC;AAEtB,SAAS,gCAAiC,EAAE,UAAU,GAAI;AACzD,SACC,oBAAC,eAAY,WACV,aAAI,0BAA2B,GAClC;AAEF;AAEA,SAAS,gCAAiC,EAAE,SAAS,UAAU,GAAI;AAClE,QAAM,eAAe;AAAA;AAAA,IAEpB,GAAI,yBAA0B;AAAA,IAC9B;AAAA,EACD;AACA,SAAO,oBAAC,eAAY,WAA0B,wBAAc;AAC7D;AAEA,SAAS,kCAAmC,EAAE,SAAS,GAAI;AAC1D,QAAM,CAAE,YAAY,aAAc,IAAI,SAAU,KAAM;AAEtD,YAAW,MAAM;AAEhB,UAAM,UAAU,WAAY,MAAM;AACjC,oBAAe,IAAK;AAAA,IACrB,GAAG,GAAK;AACR,WAAO,MAAM,aAAc,OAAQ;AAAA,EACpC,GAAG,CAAC,CAAE;AAEN,SACC,qBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC;AAAA,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAW;AAAA,UACX,YAAY;AAAA,QACb;AAAA,QAEA,8BAAC,WAAQ;AAAA;AAAA,IACV;AAAA,IAED,oBAAC,SAAI,OAAQ,EAAE,SAAS,aAAa,QAAQ,EAAE,GAC5C,UACH;AAAA,KACD;AAEF;AAEO,SAAS,iBAAkB,OAAQ;AACzC,QAAM,iBAAiB,OAAQ,EAAG;AAClC,QAAM;AAAA,IACL;AAAA,IACA,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,6BAA6B;AAAA,IAC7B,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM,EAAE,SAAS,QAAQ,MAAM,IAAI,oBAAqB,SAAU;AAGlE,YAAW,MAAM;AAChB,QAAK,SAAU;AACd,qBAAe,UAAU;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAQ,CAAE;AAEf,MAAK,WAAW,WAAY;AAC3B,WACC,oBAAC,8BAA6B,GAAG,OAC9B,WAAC,CAAE,eAAe,WACnB,oBAAC,WAAQ,WACN,yBAAe,SAClB,GAEF;AAAA,EAEF;AAEA,MAAK,WAAW,aAAa,CAAE,SAAU;AACxC,WAAO,oBAAC,4BAA2B,GAAG,OAAQ;AAAA,EAC/C;AAEA,MAAK,WAAW,SAAU;AACzB,WAAO,oBAAC,4BAAyB,SAAU,OAAU,GAAG,OAAQ;AAAA,EACjE;AAEA,SAAO,oBAAC,WAAQ,WAA0B,mBAAS;AACpD;AAuCO,SAAS,2BAA4B;AAAA,EAC3C,eAAe;AAAA,EACf,GAAG;AACJ,GAAI;AACH,QAAM,gBAAgB,UAAW,CAAE,WAAY;AAI9C,UAAM,SAAS,OAAQ,aAAc,GAAG,iBAAiB;AAMzD,WAAO,UAAU,OAAO,WAAW,WAAW,SAAS;AAAA,EACxD,GAAG,CAAC,CAAE;AAEN,QAAM,kBAAkB,QAAS,MAAM;AACtC,QAAK,CAAE,eAAgB;AACtB,aAAO;AAAA,IACR;AACA,WAAO;AAAA,MACN,SAAS;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,eAAe,YAAa,CAAE;AAEnC,SAAO,oBAAC,oBAAiB,cAAe,iBAAoB,GAAG,OAAQ;AACxE;",
+  "sources": ["../src/server-side-render.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tRawHTML,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useServerSideRender } from './hook';\nimport type {\n\tPlaceholderProps,\n\tErrorPlaceholderProps,\n\tLoadingPlaceholderProps,\n\tServerSideRenderProps,\n\tServerSideRenderWithPostIdProps,\n} from './types';\n\nconst EMPTY_OBJECT = {};\n\nfunction DefaultEmptyResponsePlaceholder( { className }: PlaceholderProps ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( {\n\tmessage,\n\tclassName,\n}: ErrorPlaceholderProps ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tmessage || __( 'Unknown error' )\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( {\n\tchildren,\n}: LoadingPlaceholderProps ) {\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Schedule showing the Spinner after 1 second.\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [] );\n\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function ServerSideRender( props: ServerSideRenderProps ) {\n\tconst prevContentRef = useRef( '' );\n\tconst {\n\t\tclassName,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t\t...restProps\n\t} = props;\n\n\tconst { content, status, error } = useServerSideRender( restProps );\n\n\t// Store the previous successful HTML response to show while loading.\n\tuseEffect( () => {\n\t\tif ( content ) {\n\t\t\tprevContentRef.current = content;\n\t\t}\n\t}, [ content ] );\n\n\tif ( status === 'loading' ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props }>\n\t\t\t\t{ /* eslint-disable-next-line react-hooks/refs */ }\n\t\t\t\t{ !! prevContentRef.current && (\n\t\t\t\t\t<RawHTML className={ className }>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// eslint-disable-next-line react-hooks/refs\n\t\t\t\t\t\t\tprevContentRef.current\n\t\t\t\t\t\t}\n\t\t\t\t\t</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( status === 'success' && ! content ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( status === 'error' ) {\n\t\treturn <ErrorResponsePlaceholder message={ error } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ content || '' }</RawHTML>;\n}\n\n/**\n * A component that renders server-side content for blocks.\n *\n * Note: URL query will include the current post ID when applicable.\n * This is useful for blocks that depend on the context of the current post for rendering.\n *\n * @example\n * ```jsx\n * import { ServerSideRender } from '@wordpress/server-side-render';\n * // Legacy import for WordPress 6.8 and earlier\n * // import { default as ServerSideRender } from '@wordpress/server-side-render';\n *\n * function Example() {\n *   return (\n *     <ServerSideRender\n *       block=\"core/archives\"\n *       attributes={ { showPostCounts: true } }\n *       urlQueryArgs={ { customArg: 'value' } }\n *       className=\"custom-class\"\n *     />\n *   );\n * }\n * ```\n *\n * @param props              Component props.\n * @param props.urlQueryArgs Additional query arguments to append to the request URL.\n * @return The rendered server-side content.\n */\nexport function ServerSideRenderWithPostId( {\n\turlQueryArgs = EMPTY_OBJECT,\n\t...props\n}: ServerSideRenderWithPostIdProps ) {\n\tconst currentPostId = useSelect( ( select ) => {\n\t\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\t\tconst editorStore = select( 'core/editor' );\n\t\t// @ts-expect-error - editorStore is not typed in @wordpress/data\n\t\tconst postId = editorStore?.getCurrentPostId?.();\n\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\treturn postId && typeof postId === 'number' ? postId : null;\n\t}, [] );\n\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,IAAI,eAAe;AAC5B,SAAS,aAAa,eAAe;AACrC,SAAS,iBAAiB;AAK1B,SAAS,2BAA2B;AAalC,cAgCA,YAhCA;AAJF,IAAM,eAAe,CAAC;AAEtB,SAAS,gCAAiC,EAAE,UAAU,GAAsB;AAC3E,SACC,oBAAC,eAAY,WACV,aAAI,0BAA2B,GAClC;AAEF;AAEA,SAAS,gCAAiC;AAAA,EACzC;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,eAAe;AAAA;AAAA,IAEpB,GAAI,yBAA0B;AAAA,IAC9B,WAAW,GAAI,eAAgB;AAAA,EAChC;AACA,SAAO,oBAAC,eAAY,WAA0B,wBAAc;AAC7D;AAEA,SAAS,kCAAmC;AAAA,EAC3C;AACD,GAA6B;AAC5B,QAAM,CAAE,YAAY,aAAc,IAAI,SAAU,KAAM;AAEtD,YAAW,MAAM;AAEhB,UAAM,UAAU,WAAY,MAAM;AACjC,oBAAe,IAAK;AAAA,IACrB,GAAG,GAAK;AACR,WAAO,MAAM,aAAc,OAAQ;AAAA,EACpC,GAAG,CAAC,CAAE;AAEN,SACC,qBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC;AAAA,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAW;AAAA,UACX,YAAY;AAAA,QACb;AAAA,QAEA,8BAAC,WAAQ;AAAA;AAAA,IACV;AAAA,IAED,oBAAC,SAAI,OAAQ,EAAE,SAAS,aAAa,QAAQ,EAAE,GAC5C,UACH;AAAA,KACD;AAEF;AAEO,SAAS,iBAAkB,OAA+B;AAChE,QAAM,iBAAiB,OAAQ,EAAG;AAClC,QAAM;AAAA,IACL;AAAA,IACA,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,6BAA6B;AAAA,IAC7B,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM,EAAE,SAAS,QAAQ,MAAM,IAAI,oBAAqB,SAAU;AAGlE,YAAW,MAAM;AAChB,QAAK,SAAU;AACd,qBAAe,UAAU;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAQ,CAAE;AAEf,MAAK,WAAW,WAAY;AAC3B,WACC,oBAAC,8BAA6B,GAAG,OAE9B,WAAC,CAAE,eAAe,WACnB,oBAAC;AAAA,MAAQ;AAAA;AAAA,MAGP,yBAAe;AAAA,KAEjB,GAEF;AAAA,EAEF;AAEA,MAAK,WAAW,aAAa,CAAE,SAAU;AACxC,WAAO,oBAAC,4BAA2B,GAAG,OAAQ;AAAA,EAC/C;AAEA,MAAK,WAAW,SAAU;AACzB,WAAO,oBAAC,4BAAyB,SAAU,OAAU,GAAG,OAAQ;AAAA,EACjE;AAEA,SAAO,oBAAC,WAAQ,WAA0B,qBAAW,IAAI;AAC1D;AA8BO,SAAS,2BAA4B;AAAA,EAC3C,eAAe;AAAA,EACf,GAAG;AACJ,GAAqC;AACpC,QAAM,gBAAgB,UAAW,CAAE,WAAY;AAI9C,UAAM,cAAc,OAAQ,aAAc;AAE1C,UAAM,SAAS,aAAa,mBAAmB;AAM/C,WAAO,UAAU,OAAO,WAAW,WAAW,SAAS;AAAA,EACxD,GAAG,CAAC,CAAE;AAEN,QAAM,kBAAkB,QAAS,MAAM;AACtC,QAAK,CAAE,eAAgB;AACtB,aAAO;AAAA,IACR;AACA,WAAO;AAAA,MACN,SAAS;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,eAAe,YAAa,CAAE;AAEnC,SAAO,oBAAC,oBAAiB,cAAe,iBAAoB,GAAG,OAAQ;AACxE;",
   "names": []
 }

package/build-module/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-types/hook.d.ts

@@ -0,0 +1,68 @@
+export declare function rendererPath(block: string, attributes?: Record<string, unknown> | null, urlQueryArgs?: Record<string, unknown>): string;
+export declare function removeBlockSupportAttributes(attributes: Record<string, unknown> & {
+    style?: Record<string, unknown>;
+}): Record<string, unknown>;
+/**
+ * Server-side render response object.
+ */
+export interface ServerSideRenderResponse {
+    /** The current request status: 'idle', 'loading', 'success', or 'error'. */
+    status: 'idle' | 'loading' | 'success' | 'error';
+    /** The rendered block content (available when status is 'success'). */
+    content?: string;
+    /** The error message (available when status is 'error'). */
+    error?: string;
+}
+/**
+ * Configuration object for the useServerSideRender hook.
+ */
+export interface UseServerSideRenderArgs {
+    /** The block attributes to be sent to the server for rendering. */
+    attributes: Record<string, unknown>;
+    /** The identifier of the block to be serverside rendered. Example: 'core/archives'. */
+    block: string;
+    /** Whether to remove block support attributes before sending. */
+    skipBlockSupportAttributes?: boolean;
+    /** The HTTP method to use ('GET' or 'POST'). Default is 'GET'. */
+    httpMethod?: 'GET' | 'POST';
+    /** Additional query arguments to append to the request URL. */
+    urlQueryArgs?: Record<string, unknown>;
+}
+/**
+ * A hook for server-side rendering a preview of dynamic blocks to display in the editor.
+ *
+ * Handles fetching server-rendered previews for blocks, managing loading states,
+ * and automatically debouncing requests to prevent excessive API calls. It supports both
+ * GET and POST requests, with POST requests used for larger attribute payloads.
+ *
+ * @example
+ * Basic usage:
+ *
+ * ```jsx
+ * import { RawHTML } from '@wordpress/element';
+ * import { useServerSideRender } from '@wordpress/server-side-render';
+ *
+ * function MyServerSideRender( { attributes, block } ) {
+ *   const { content, status, error } = useServerSideRender( {
+ *     attributes,
+ *     block,
+ *   } );
+ *
+ *   if ( status === 'loading' ) {
+ *     return <div>Loading...</div>;
+ *   }
+ *
+ *   if ( status === 'error' ) {
+ *     return <div>Error: { error }</div>;
+ *   }
+ *
+ *   return <RawHTML>{ content }</RawHTML>;
+ * }
+ * ```
+ *
+ * @param args The hook configuration object.
+ *
+ * @return The server-side render response object.
+ */
+export declare function useServerSideRender(args: UseServerSideRenderArgs): ServerSideRenderResponse;
+//# sourceMappingURL=hook.d.ts.map

package/build-types/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../src/hook.ts"],"names":[],"mappings":"AAUA,wBAAgB,YAAY,CAC3B,KAAK,EAAE,MAAM,EACb,UAAU,GAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,GAAG,IAAW,EACnD,YAAY,GAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAO,GAC1C,MAAM,CAMR;AAED,wBAAgB,4BAA4B,CAC3C,UAAU,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;CAClC,GACC,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CA0B3B;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACxC,4EAA4E;IAC5E,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACjD,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACvC,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;IACtC,uFAAuF;IACvF,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,kEAAkE;IAClE,UAAU,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC5B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;CACzC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,mBAAmB,CAClC,IAAI,EAAE,uBAAuB,GAC3B,wBAAwB,CA2F1B"}

package/build-types/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import { ServerSideRenderWithPostId } from './server-side-render';
+import { useServerSideRender } from './hook';
+/**
+ * A compatibility layer for the `ServerSideRender` component when used with `wp` global namespace.
+ *
+ * @deprecated Use `ServerSideRender` non-default export instead.
+ *
+ * @example
+ * ```js
+ * import ServerSideRender from '@wordpress/server-side-render';
+ * ```
+ */
+declare const ServerSideRenderCompat: typeof ServerSideRenderWithPostId & {
+    ServerSideRender: typeof ServerSideRenderWithPostId;
+    useServerSideRender: typeof useServerSideRender;
+};
+export { ServerSideRenderWithPostId as ServerSideRender };
+export { useServerSideRender };
+export default ServerSideRenderCompat;
+//# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAE7C;;;;;;;;;GASG;AACH,QAAA,MAAM,sBAAsB,EACG,OAAO,0BAA0B,GAAG;IACjE,gBAAgB,EAAE,OAAO,0BAA0B,CAAC;IACpD,mBAAmB,EAAE,OAAO,mBAAmB,CAAC;CAChD,CAAC;AAKH,OAAO,EAAE,0BAA0B,IAAI,gBAAgB,EAAE,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,CAAC;eAChB,sBAAsB"}

package/build-types/server-side-render.d.ts

@@ -0,0 +1,32 @@
+import type { ServerSideRenderProps, ServerSideRenderWithPostIdProps } from './types';
+export declare function ServerSideRender(props: ServerSideRenderProps): import("react").JSX.Element;
+/**
+ * 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 props              Component props.
+ * @param props.urlQueryArgs Additional query arguments to append to the request URL.
+ * @return The rendered server-side content.
+ */
+export declare function ServerSideRenderWithPostId({ urlQueryArgs, ...props }: ServerSideRenderWithPostIdProps): import("react").JSX.Element;
+//# sourceMappingURL=server-side-render.d.ts.map

package/build-types/server-side-render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-side-render.d.ts","sourceRoot":"","sources":["../src/server-side-render.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAIX,qBAAqB,EACrB,+BAA+B,EAC/B,MAAM,SAAS,CAAC;AA2DjB,wBAAgB,gBAAgB,CAAE,KAAK,EAAE,qBAAqB,+BA4C7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,0BAA0B,CAAE,EAC3C,YAA2B,EAC3B,GAAG,KAAK,EACR,EAAE,+BAA+B,+BA2BjC"}

package/build-types/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import type React from 'react';
+/**
+ * Internal dependencies
+ */
+import type { UseServerSideRenderArgs } from './hook';
+export interface PlaceholderProps {
+    /** Additional classes to apply to the wrapper element. */
+    className?: string;
+}
+export interface ErrorPlaceholderProps extends PlaceholderProps {
+    /** Error message describing the problem. */
+    message?: string;
+}
+export interface LoadingPlaceholderProps {
+    children?: React.ReactNode;
+}
+export interface ServerSideRenderProps extends UseServerSideRenderArgs {
+    /** Additional classes to apply to the wrapper element. */
+    className?: string;
+    /** Component rendered when the API response is empty. */
+    EmptyResponsePlaceholder?: React.ComponentType<PlaceholderProps>;
+    /** Component rendered when the API response is an error. */
+    ErrorResponsePlaceholder?: React.ComponentType<ErrorPlaceholderProps>;
+    /** Component rendered while the API request is loading. */
+    LoadingResponsePlaceholder?: React.ComponentType<LoadingPlaceholderProps>;
+}
+export interface ServerSideRenderWithPostIdProps extends Omit<ServerSideRenderProps, 'urlQueryArgs'> {
+    /** Additional query arguments to append to the request URL. */
+    urlQueryArgs?: Record<string, unknown>;
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,QAAQ,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAChC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC9D,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAsB,SAAQ,uBAAuB;IACrE,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,wBAAwB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,gBAAgB,CAAE,CAAC;IACnE,4DAA4D;IAC5D,wBAAwB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,qBAAqB,CAAE,CAAC;IACxE,2DAA2D;IAC3D,0BAA0B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,uBAAuB,CAAE,CAAC;CAC5E;AAED,MAAM,WAAW,+BAChB,SAAQ,IAAI,CAAE,qBAAqB,EAAE,cAAc,CAAE;IACrD,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;CACzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "6.24.0",
+	"version": "6.24.1",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,24 +34,26 @@
 	"module": "build-module/index.mjs",
 	"exports": {
 		".": {
+			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.mjs",
 			"require": "./build/index.cjs"
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"wpScriptDefaultExport": true,
+	"types": "build-types/index.d.ts",
 	"dependencies": {
-		"@wordpress/api-fetch": "^7.48.0",
-		"@wordpress/blocks": "^15.21.0",
-		"@wordpress/components": "^35.0.0",
-		"@wordpress/compose": "^8.1.0",
-		"@wordpress/data": "^10.48.0",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/i18n": "^6.21.0",
-		"@wordpress/url": "^4.48.0"
+		"@types/react": "^18.3.27",
+		"@wordpress/api-fetch": "^7.48.1",
+		"@wordpress/blocks": "^15.21.1",
+		"@wordpress/components": "^35.0.1",
+		"@wordpress/compose": "^8.1.1",
+		"@wordpress/data": "^10.48.1",
+		"@wordpress/deprecated": "^4.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/i18n": "^6.21.1",
+		"@wordpress/url": "^4.48.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -60,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/{hook.js → hook.ts}

@@ -5,9 +5,14 @@ import { debounce } from '@wordpress/compose';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
+
 import { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';
 
-export function rendererPath( block, attributes = null, urlQueryArgs = {} ) {
+export function rendererPath(
+	block: string,
+	attributes: Record< string, unknown > | null = null,
+	urlQueryArgs: Record< string, unknown > = {}
+): string {
 	return addQueryArgs( `/wp/v2/block-renderer/${ block }`, {
 		context: 'edit',
 		...( null !== attributes ? { attributes } : {} ),
@@ -15,7 +20,11 @@ export function rendererPath( block, attributes = null, urlQueryArgs = {} ) {
 	} );
 }
 
-export function removeBlockSupportAttributes( attributes ) {
+export function removeBlockSupportAttributes(
+	attributes: Record< string, unknown > & {
+		style?: Record< string, unknown >;
+	}
+): Record< string, unknown > {
 	const {
 		backgroundColor,
 		borderColor,
@@ -44,11 +53,32 @@ export function removeBlockSupportAttributes( attributes ) {
 }
 
 /**
- * @typedef {Object} ServerSideRenderResponse
- * @property {string} status    - The current request status: 'idle', 'loading', 'success', or 'error'.
- * @property {string} [content] - The rendered block content (available when status is 'success').
- * @property {string} [error]   - The error message (available when status is 'error').
+ * Server-side render response object.
+ */
+export interface ServerSideRenderResponse {
+	/** The current request status: 'idle', 'loading', 'success', or 'error'. */
+	status: 'idle' | 'loading' | 'success' | 'error';
+	/** The rendered block content (available when status is 'success'). */
+	content?: string;
+	/** The error message (available when status is 'error'). */
+	error?: string;
+}
+
+/**
+ * Configuration object for the useServerSideRender hook.
  */
+export interface UseServerSideRenderArgs {
+	/** The block attributes to be sent to the server for rendering. */
+	attributes: Record< string, unknown >;
+	/** The identifier of the block to be serverside rendered. Example: 'core/archives'. */
+	block: string;
+	/** Whether to remove block support attributes before sending. */
+	skipBlockSupportAttributes?: boolean;
+	/** The HTTP method to use ('GET' or 'POST'). Default is 'GET'. */
+	httpMethod?: 'GET' | 'POST';
+	/** Additional query arguments to append to the request URL. */
+	urlQueryArgs?: Record< string, unknown >;
+}
 
 /**
  * A hook for server-side rendering a preview of dynamic blocks to display in the editor.
@@ -82,18 +112,17 @@ export function removeBlockSupportAttributes( attributes ) {
  * }
  * ```
  *
- * @param {Object}  args                                    The hook configuration object.
- * @param {Object}  args.attributes                         The block attributes to be sent to the server for rendering.
- * @param {string}  args.block                              The identifier of the block to be serverside rendered. Example: 'core/archives'.
- * @param {boolean} [args.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.
- * @param {string}  [args.httpMethod='GET']                 The HTTP method to use ('GET' or 'POST'). Default is 'GET'.
- * @param {Object}  [args.urlQueryArgs]                     Additional query arguments to append to the request URL.
+ * @param args The hook configuration object.
  *
- * @return {ServerSideRenderResponse} The server-side render response object.
+ * @return The server-side render response object.
  */
-export function useServerSideRender( args ) {
-	const [ response, setResponse ] = useState( { status: 'idle' } );
-	const shouldDebounceRef = useRef( false );
+export function useServerSideRender(
+	args: UseServerSideRenderArgs
+): ServerSideRenderResponse {
+	const [ response, setResponse ] = useState< ServerSideRenderResponse >( {
+		status: 'idle',
+	} );
+	const shouldDebounceRef = useRef< boolean >( false );
 
 	const {
 		attributes,
@@ -103,11 +132,11 @@ export function useServerSideRender( args ) {
 		urlQueryArgs,
 	} = args;
 
-	let sanitizedAttributes =
+	let sanitizedAttributes: Record< string, unknown > | null =
 		attributes &&
 		__experimentalSanitizeBlockAttributes( block, attributes );
 
-	if ( skipBlockSupportAttributes ) {
+	if ( skipBlockSupportAttributes && sanitizedAttributes ) {
 		sanitizedAttributes =
 			removeBlockSupportAttributes( sanitizedAttributes );
 	}
@@ -128,7 +157,7 @@ export function useServerSideRender( args ) {
 				{
 					setResponse( { status: 'loading' } );
 
-					apiFetch( {
+					apiFetch< { rendered: string } >( {
 						path,
 						method: isPostRequest ? 'POST' : 'GET',
 						body,
@@ -145,15 +174,21 @@ export function useServerSideRender( args ) {
 								content: res ? res.rendered : '',
 							} );
 						} )
-						.catch( ( error ) => {
+						.catch( ( error: unknown ) => {
 							// The request was aborted, do not update the response.
-							if ( error.name === 'AbortError' ) {
+							if (
+								error instanceof Error &&
+								error.name === 'AbortError'
+							) {
 								return;
 							}
 
 							setResponse( {
 								status: 'error',
-								error: error.message,
+								error:
+									error instanceof Error
+										? error.message
+										: String( error ),
 							} );
 						} )
 						.finally( () => {

package/src/{index.js → index.ts}

@@ -14,7 +14,12 @@ import { useServerSideRender } from './hook';
  * import ServerSideRender from '@wordpress/server-side-render';
  * ```
  */
-const ServerSideRenderCompat = ServerSideRenderWithPostId;
+const ServerSideRenderCompat =
+	ServerSideRenderWithPostId as typeof ServerSideRenderWithPostId & {
+		ServerSideRender: typeof ServerSideRenderWithPostId;
+		useServerSideRender: typeof useServerSideRender;
+	};
+
 ServerSideRenderCompat.ServerSideRender = ServerSideRenderWithPostId;
 ServerSideRenderCompat.useServerSideRender = useServerSideRender;
 

package/src/{server-side-render.js → server-side-render.tsx}

@@ -5,8 +5,8 @@ import {
 	RawHTML,
 	useEffect,
 	useState,
-	useRef,
 	useMemo,
+	useRef,
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, Spinner } from '@wordpress/components';
@@ -16,10 +16,17 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { useServerSideRender } from './hook';
+import type {
+	PlaceholderProps,
+	ErrorPlaceholderProps,
+	LoadingPlaceholderProps,
+	ServerSideRenderProps,
+	ServerSideRenderWithPostIdProps,
+} from './types';
 
 const EMPTY_OBJECT = {};
 
-function DefaultEmptyResponsePlaceholder( { className } ) {
+function DefaultEmptyResponsePlaceholder( { className }: PlaceholderProps ) {
 	return (
 		<Placeholder className={ className }>
 			{ __( 'Block rendered as empty.' ) }
@@ -27,16 +34,21 @@ function DefaultEmptyResponsePlaceholder( { className } ) {
 	);
 }
 
-function DefaultErrorResponsePlaceholder( { message, className } ) {
+function DefaultErrorResponsePlaceholder( {
+	message,
+	className,
+}: ErrorPlaceholderProps ) {
 	const errorMessage = sprintf(
 		// translators: %s: error message describing the problem
 		__( 'Error loading block: %s' ),
-		message
+		message || __( 'Unknown error' )
 	);
 	return <Placeholder className={ className }>{ errorMessage }</Placeholder>;
 }
 
-function DefaultLoadingResponsePlaceholder( { children } ) {
+function DefaultLoadingResponsePlaceholder( {
+	children,
+}: LoadingPlaceholderProps ) {
 	const [ showLoader, setShowLoader ] = useState( false );
 
 	useEffect( () => {
@@ -69,7 +81,7 @@ function DefaultLoadingResponsePlaceholder( { children } ) {
 	);
 }
 
-export function ServerSideRender( props ) {
+export function ServerSideRender( props: ServerSideRenderProps ) {
 	const prevContentRef = useRef( '' );
 	const {
 		className,
@@ -91,9 +103,13 @@ export function ServerSideRender( props ) {
 	if ( status === 'loading' ) {
 		return (
 			<LoadingResponsePlaceholder { ...props }>
+				{ /* eslint-disable-next-line react-hooks/refs */ }
 				{ !! prevContentRef.current && (
 					<RawHTML className={ className }>
-						{ prevContentRef.current }
+						{
+							// eslint-disable-next-line react-hooks/refs
+							prevContentRef.current
+						}
 					</RawHTML>
 				) }
 			</LoadingResponsePlaceholder>
@@ -108,7 +124,7 @@ export function ServerSideRender( props ) {
 		return <ErrorResponsePlaceholder message={ error } { ...props } />;
 	}
 
-	return <RawHTML className={ className }>{ content }</RawHTML>;
+	return <RawHTML className={ className }>{ content || '' }</RawHTML>;
 }
 
 /**
@@ -135,28 +151,21 @@ export function ServerSideRender( props ) {
  * }
  * ```
  *
- * @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 {React.JSX.Element} The rendered server-side content.
+ * @param props              Component props.
+ * @param props.urlQueryArgs Additional query arguments to append to the request URL.
+ * @return The rendered server-side content.
  */
 export function ServerSideRenderWithPostId( {
 	urlQueryArgs = EMPTY_OBJECT,
 	...props
-} ) {
+}: ServerSideRenderWithPostIdProps ) {
 	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();
+		const editorStore = select( 'core/editor' );
+		// @ts-expect-error - editorStore is not typed in @wordpress/data
+		const postId = editorStore?.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

package/src/types.ts

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import type React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { UseServerSideRenderArgs } from './hook';
+
+export interface PlaceholderProps {
+	/** Additional classes to apply to the wrapper element. */
+	className?: string;
+}
+
+export interface ErrorPlaceholderProps extends PlaceholderProps {
+	/** Error message describing the problem. */
+	message?: string;
+}
+
+export interface LoadingPlaceholderProps {
+	children?: React.ReactNode;
+}
+
+export interface ServerSideRenderProps extends UseServerSideRenderArgs {
+	/** Additional classes to apply to the wrapper element. */
+	className?: string;
+	/** Component rendered when the API response is empty. */
+	EmptyResponsePlaceholder?: React.ComponentType< PlaceholderProps >;
+	/** Component rendered when the API response is an error. */
+	ErrorResponsePlaceholder?: React.ComponentType< ErrorPlaceholderProps >;
+	/** Component rendered while the API request is loading. */
+	LoadingResponsePlaceholder?: React.ComponentType< LoadingPlaceholderProps >;
+}
+
+export interface ServerSideRenderWithPostIdProps
+	extends Omit< ServerSideRenderProps, 'urlQueryArgs' > {
+	/** Additional query arguments to append to the request URL. */
+	urlQueryArgs?: Record< string, unknown >;
+}