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

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 6.4.0-next.0 (2025-07-31)
+
+### New Features
+
+-   Introduce a new `useServerSideRender` hook ([70543](https://github.com/WordPress/gutenberg/pull/70543)).
+
 ## 6.3.0 (2025-07-23)
 
 ## 6.2.0 (2025-06-25)

package/README.md

@@ -20,122 +20,110 @@ npm install @wordpress/server-side-render --save
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
-## Usage
+## API
 
-The props accepted by the component are described below.
+<!-- START TOKEN(Autogenerated API docs) -->
 
-## Props
+### default
 
-### attributes
+> **Deprecated** Use `ServerSideRender` non-default export instead.
 
-An object containing the attributes of the block to be server-side rendered.
-E.g: `{ displayAsDropdown: true }`, `{ showHierarchy: true }`, etc...
+A compatibility layer for the `ServerSideRender` component when used with `wp` global namespace.
 
--   Type: `Object`
--   Required: No
+_Usage_
 
-### block
-
-The identifier of the block to be server-side rendered.
-Examples: "core/archives", "core/latest-comments", "core/rss", etc...
-
--   Type: `String`
--   Required: Yes
-
-### className
-
-A class added to the DOM element that wraps the server side rendered block.
-Examples: "my-custom-server-side-rendered".
-
--   Type: `String`
--   Required: No
-
-### httpMethod
+```js
+import ServerSideRender from '@wordpress/server-side-render';
+```
 
-The HTTP request method to use is either `GET` or `POST`, with `GET` as the default. When using `POST`, attributes are sent in the request body rather than the URL, allowing for a larger attributes object.
+### ServerSideRender
 
--   Type: `String`
--   Required: No
--   Default: 'GET'
+A component that renders server-side content for blocks.
 
-### skipBlockSupportAttributes
+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.
 
-Remove attributes and style properties applied by the block supports. This prevents duplication of styles in the block wrapper and the `ServerSideRender` components. Even if certain features skip serialization to HTML markup by `__experimentalSkipSerialization`, all attributes and style properties are removed.
+_Usage_
 
--   Type: `Boolean`
--   Required: No
--   Default: false
+```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"
+		/>
+	);
+}
+```
 
-### urlQueryArgs
+_Parameters_
 
-Query arguments to apply to the request URL.
-E.g: `{ post_id: 12 }`.
+-   _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.
 
--   Type: `Object`
--   Required: No
+_Returns_
 
-### EmptyResponsePlaceholder
+-   `JSX.Element`: The rendered server-side content.
 
-The component is rendered when the API response is empty. The component will receive the value of the API response, and all props passed into `ServerSideRenderer`.
+### useServerSideRender
 
--   Type: `Component`
--   Required: No
+A hook for server-side rendering a preview of dynamic blocks to display in the editor.
 
-### ErrorResponsePlaceholder
+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.
 
-The component is rendered when the API response is an error. The component will receive the value of the API response, and all props passed into `ServerSideRenderer`.
+_Usage_
 
--   Type: `Component`
--   Required: No
+Basic usage:
 
-### LoadingResponsePlaceholder
+```jsx
+import { RawHTML } from '@wordpress/element';
+import { useServerSideRender } from '@wordpress/server-side-render';
 
-The component is rendered while the API request is being processed (loading state). The component will receive the value of the API response, and all props passed into `ServerSideRenderer`.
+function MyServerSideRender( { attributes, block } ) {
+	const { content, status, error } = useServerSideRender( {
+		attributes,
+		block,
+	} );
 
--   Type: `Component`
--   Required: No
+	if ( status === 'loading' ) {
+		return <div>Loading...</div>;
+	}
 
-#### Example usage
+	if ( status === 'error' ) {
+		return <div>Error: { error }</div>;
+	}
 
-```jsx
-const MyServerSideRender = () => (
-	<ServerSideRender LoadingResponsePlaceholder={ MyAmazingPlaceholder } />
-);
+	return <RawHTML>{ content }</RawHTML>;
+}
 ```
 
-## Usage
-
-Render core/archives preview.
+_Parameters_
 
-```jsx
-import ServerSideRender from '@wordpress/server-side-render';
+-   _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.
 
-const MyServerSideRender = () => (
-	<ServerSideRender
-		block="core/archives"
-		attributes={ {
-			showPostCounts: true,
-			displayAsDropdown: false,
-		} }
-	/>
-);
-```
+_Returns_
 
-If imported from the `wp` global, an alias is required to work in JSX.
+-   `ServerSideRenderResponse`: The server-side render response object.
 
-```jsx
-const { serverSideRender: ServerSideRender } = wp;
-
-const MyServerSideRender = () => (
-	<ServerSideRender
-		block="core/archives"
-		attributes={ {
-			showPostCounts: true,
-			displayAsDropdown: false,
-		} }
-	/>
-);
-```
+<!-- END TOKEN(Autogenerated API docs) -->
 
 ## Output
 

package/build/hook.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeBlockSupportAttributes = removeBlockSupportAttributes;
+exports.rendererPath = rendererPath;
+exports.useServerSideRender = useServerSideRender;
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _url = require("@wordpress/url");
+var _blocks = require("@wordpress/blocks");
+/**
+ * WordPress dependencies
+ */
+
+function rendererPath(block, attributes = null, urlQueryArgs = {}) {
+  return (0, _url.addQueryArgs)(`/wp/v2/block-renderer/${block}`, {
+    context: 'edit',
+    ...(null !== attributes ? {
+      attributes
+    } : {}),
+    ...urlQueryArgs
+  });
+}
+function removeBlockSupportAttributes(attributes) {
+  const {
+    backgroundColor,
+    borderColor,
+    fontFamily,
+    fontSize,
+    gradient,
+    textColor,
+    className,
+    ...restAttributes
+  } = attributes;
+  const {
+    border,
+    color,
+    elements,
+    shadow,
+    spacing,
+    typography,
+    ...restStyles
+  } = attributes?.style || {};
+  return {
+    ...restAttributes,
+    style: restStyles
+  };
+}
+
+/**
+ * @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').
+ */
+
+/**
+ * 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 {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.
+ *
+ * @return {ServerSideRenderResponse} The server-side render response object.
+ */
+function useServerSideRender(args) {
+  var _sanitizedAttributes;
+  const [response, setResponse] = (0, _element.useState)({
+    status: 'idle'
+  });
+  const shouldDebounceRef = (0, _element.useRef)(false);
+  const {
+    attributes,
+    block,
+    skipBlockSupportAttributes = false,
+    httpMethod = 'GET',
+    urlQueryArgs
+  } = args;
+  let sanitizedAttributes = attributes && (0, _blocks.__experimentalSanitizeBlockAttributes)(block, attributes);
+  if (skipBlockSupportAttributes) {
+    sanitizedAttributes = removeBlockSupportAttributes(sanitizedAttributes);
+  }
+
+  // If httpMethod is 'POST', send the attributes in the request body instead of the URL.
+  // This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.
+  const isPostRequest = 'POST' === httpMethod;
+  const urlAttributes = isPostRequest ? null : sanitizedAttributes;
+  const path = rendererPath(block, urlAttributes, urlQueryArgs);
+  const body = isPostRequest ? JSON.stringify({
+    attributes: (_sanitizedAttributes = sanitizedAttributes) !== null && _sanitizedAttributes !== void 0 ? _sanitizedAttributes : null
+  }) : undefined;
+  (0, _element.useEffect)(() => {
+    const controller = new AbortController();
+    const debouncedFetch = (0, _compose.debounce)(function () {
+      {
+        setResponse({
+          status: 'loading'
+        });
+        (0, _apiFetch.default)({
+          path,
+          method: isPostRequest ? 'POST' : 'GET',
+          body,
+          headers: isPostRequest ? {
+            'Content-Type': 'application/json'
+          } : {},
+          signal: controller.signal
+        }).then(res => {
+          setResponse({
+            status: 'success',
+            content: res ? res.rendered : ''
+          });
+        }).catch(error => {
+          // The request was aborted, do not update the response.
+          if (error.name === 'AbortError') {
+            return;
+          }
+          setResponse({
+            status: 'error',
+            error: error.message
+          });
+        }).finally(() => {
+          // Debounce requests after first fetch.
+          shouldDebounceRef.current = true;
+        });
+      }
+    }, shouldDebounceRef.current ? 500 : 0);
+    debouncedFetch();
+    return () => {
+      controller.abort();
+      debouncedFetch.cancel();
+    };
+  }, [path, isPostRequest, body]);
+  return response;
+}
+//# sourceMappingURL=hook.js.map

package/build/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_compose","require","_element","_apiFetch","_interopRequireDefault","_url","_blocks","rendererPath","block","attributes","urlQueryArgs","addQueryArgs","context","removeBlockSupportAttributes","backgroundColor","borderColor","fontFamily","fontSize","gradient","textColor","className","restAttributes","border","color","elements","shadow","spacing","typography","restStyles","style","useServerSideRender","args","_sanitizedAttributes","response","setResponse","useState","status","shouldDebounceRef","useRef","skipBlockSupportAttributes","httpMethod","sanitizedAttributes","__experimentalSanitizeBlockAttributes","isPostRequest","urlAttributes","path","body","JSON","stringify","undefined","useEffect","controller","AbortController","debouncedFetch","debounce","apiFetch","method","headers","signal","then","res","content","rendered","catch","error","name","message","finally","current","abort","cancel"],"sources":["@wordpress/server-side-render/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":"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","ignoreList":[]}

package/build/index.js

@@ -1,53 +1,39 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = ExportedServerSideRender;
-var _element = require("@wordpress/element");
-var _data = require("@wordpress/data");
-var _serverSideRender = _interopRequireDefault(require("./server-side-render"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
+Object.defineProperty(exports, "ServerSideRender", {
+  enumerable: true,
+  get: function () {
+    return _serverSideRender.ServerSideRenderWithPostId;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useServerSideRender", {
+  enumerable: true,
+  get: function () {
+    return _hook.useServerSideRender;
+  }
+});
+var _serverSideRender = require("./server-side-render");
+var _hook = require("./hook");
 /**
  * Internal dependencies
  */
 
 /**
- * Constants
- */const EMPTY_OBJECT = {};
-function ExportedServerSideRender({
-  urlQueryArgs = EMPTY_OBJECT,
-  ...props
-}) {
-  const currentPostId = (0, _data.useSelect)(select => {
-    // FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.
-    // It is used by blocks that can be loaded into a *non-post* block editor.
-    // eslint-disable-next-line @wordpress/data-no-store-string-literals
-    const postId = select('core/editor')?.getCurrentPostId();
-
-    // For templates and template parts we use a custom ID format.
-    // Since they aren't real posts, we don't want to use their ID
-    // for server-side rendering. Since they use a string based ID,
-    // we can assume real post IDs are numbers.
-    return postId && typeof postId === 'number' ? postId : null;
-  }, []);
-  const newUrlQueryArgs = (0, _element.useMemo)(() => {
-    if (!currentPostId) {
-      return urlQueryArgs;
-    }
-    return {
-      post_id: currentPostId,
-      ...urlQueryArgs
-    };
-  }, [currentPostId, urlQueryArgs]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_serverSideRender.default, {
-    urlQueryArgs: newUrlQueryArgs,
-    ...props
-  });
-}
+ * 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';
+ * ```
+ */
+const ServerSideRenderCompat = _serverSideRender.ServerSideRenderWithPostId;
+ServerSideRenderCompat.ServerSideRender = _serverSideRender.ServerSideRenderWithPostId;
+ServerSideRenderCompat.useServerSideRender = _hook.useServerSideRender;
+var _default = exports.default = ServerSideRenderCompat;
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_data","_serverSideRender","_interopRequireDefault","_jsxRuntime","EMPTY_OBJECT","ExportedServerSideRender","urlQueryArgs","props","currentPostId","useSelect","select","postId","getCurrentPostId","newUrlQueryArgs","useMemo","post_id","jsx","default"],"sources":["@wordpress/server-side-render/src/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ServerSideRender from './server-side-render';\n\n/**\n * Constants\n */\nconst EMPTY_OBJECT = {};\n\nexport default function ExportedServerSideRender( {\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,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAAoD,IAAAI,WAAA,GAAAJ,OAAA;AATpD;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA,GACA,MAAMK,YAAY,GAAG,CAAC,CAAC;AAER,SAASC,wBAAwBA,CAAE;EACjDC,YAAY,GAAGF,YAAY;EAC3B,GAAGG;AACJ,CAAC,EAAG;EACH,MAAMC,aAAa,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC9C;IACA;IACA;IACA,MAAMC,MAAM,GAAGD,MAAM,CAAE,aAAc,CAAC,EAAEE,gBAAgB,CAAC,CAAC;;IAE1D;IACA;IACA;IACA;IACA,OAAOD,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,IAAI;EAC5D,CAAC,EAAE,EAAG,CAAC;EAEP,MAAME,eAAe,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACtC,IAAK,CAAEN,aAAa,EAAG;MACtB,OAAOF,YAAY;IACpB;IACA,OAAO;MACNS,OAAO,EAAEP,aAAa;MACtB,GAAGF;IACJ,CAAC;EACF,CAAC,EAAE,CAAEE,aAAa,EAAEF,YAAY,CAAG,CAAC;EAEpC,oBAAO,IAAAH,WAAA,CAAAa,GAAA,EAACf,iBAAA,CAAAgB,OAAgB;IAACX,YAAY,EAAGO,eAAiB;IAAA,GAAMN;EAAK,CAAI,CAAC;AAC1E","ignoreList":[]}
+{"version":3,"names":["_serverSideRender","require","_hook","ServerSideRenderCompat","ServerSideRenderWithPostId","ServerSideRender","useServerSideRender","_default","exports","default"],"sources":["@wordpress/server-side-render/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,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,sBAAsB,GAAGC,4CAA0B;AACzDD,sBAAsB,CAACE,gBAAgB,GAAGD,4CAA0B;AACpED,sBAAsB,CAACG,mBAAmB,GAAGA,yBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAIlDN,sBAAsB","ignoreList":[]}