@wordpress/server-side-render 4.34.0 → 5.0.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
 ## 4.34.0 (2024-05-02)
 
 ## 4.33.0 (2024-04-19)

package/build/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 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
  */
@@ -19,8 +19,7 @@ var _serverSideRender = _interopRequireDefault(require("./server-side-render"));
 
 /**
  * Constants
- */
-const EMPTY_OBJECT = {};
+ */const EMPTY_OBJECT = {};
 const ExportedServerSideRender = (0, _data.withSelect)(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.
@@ -53,7 +52,7 @@ const ExportedServerSideRender = (0, _data.withSelect)(select => {
       ...urlQueryArgs
     };
   }, [currentPostId, urlQueryArgs]);
-  return (0, _react.createElement)(_serverSideRender.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_serverSideRender.default, {
     urlQueryArgs: newUrlQueryArgs,
     ...props
   });

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_data","_serverSideRender","_interopRequireDefault","EMPTY_OBJECT","ExportedServerSideRender","withSelect","select","coreEditorSelect","currentPostId","getCurrentPostId","urlQueryArgs","props","newUrlQueryArgs","useMemo","post_id","_react","createElement","default","_default","exports"],"sources":["@wordpress/server-side-render/src/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ServerSideRender from './server-side-render';\n\n/**\n * Constants\n */\nconst EMPTY_OBJECT = {};\n\nconst ExportedServerSideRender = withSelect( ( select ) => {\n\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\tconst coreEditorSelect = select( 'core/editor' );\n\tif ( coreEditorSelect ) {\n\t\tconst currentPostId = coreEditorSelect.getCurrentPostId();\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\tif ( currentPostId && typeof currentPostId === 'number' ) {\n\t\t\treturn {\n\t\t\t\tcurrentPostId,\n\t\t\t};\n\t\t}\n\t}\n\treturn EMPTY_OBJECT;\n} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {\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\nexport default ExportedServerSideRender;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAC,sBAAA,CAAAH,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA,MAAMI,YAAY,GAAG,CAAC,CAAC;AAEvB,MAAMC,wBAAwB,GAAG,IAAAC,gBAAU,EAAIC,MAAM,IAAM;EAC1D;EACA;EACA;EACA,MAAMC,gBAAgB,GAAGD,MAAM,CAAE,aAAc,CAAC;EAChD,IAAKC,gBAAgB,EAAG;IACvB,MAAMC,aAAa,GAAGD,gBAAgB,CAACE,gBAAgB,CAAC,CAAC;IACzD;IACA;IACA;IACA;IACA,IAAKD,aAAa,IAAI,OAAOA,aAAa,KAAK,QAAQ,EAAG;MACzD,OAAO;QACNA;MACD,CAAC;IACF;EACD;EACA,OAAOL,YAAY;AACpB,CAAE,CAAC,CAAE,CAAE;EAAEO,YAAY,GAAGP,YAAY;EAAEK,aAAa;EAAE,GAAGG;AAAM,CAAC,KAAM;EACpE,MAAMC,eAAe,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACtC,IAAK,CAAEL,aAAa,EAAG;MACtB,OAAOE,YAAY;IACpB;IACA,OAAO;MACNI,OAAO,EAAEN,aAAa;MACtB,GAAGE;IACJ,CAAC;EACF,CAAC,EAAE,CAAEF,aAAa,EAAEE,YAAY,CAAG,CAAC;EAEpC,OAAO,IAAAK,MAAA,CAAAC,aAAA,EAACf,iBAAA,CAAAgB,OAAgB;IAACP,YAAY,EAAGE,eAAiB;IAAA,GAAMD;EAAK,CAAI,CAAC;AAC1E,CAAE,CAAC;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEWb,wBAAwB","ignoreList":[]}
+{"version":3,"names":["_element","require","_data","_serverSideRender","_interopRequireDefault","_jsxRuntime","EMPTY_OBJECT","ExportedServerSideRender","withSelect","select","coreEditorSelect","currentPostId","getCurrentPostId","urlQueryArgs","props","newUrlQueryArgs","useMemo","post_id","jsx","default","_default","exports"],"sources":["@wordpress/server-side-render/src/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ServerSideRender from './server-side-render';\n\n/**\n * Constants\n */\nconst EMPTY_OBJECT = {};\n\nconst ExportedServerSideRender = withSelect( ( select ) => {\n\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\tconst coreEditorSelect = select( 'core/editor' );\n\tif ( coreEditorSelect ) {\n\t\tconst currentPostId = coreEditorSelect.getCurrentPostId();\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\tif ( currentPostId && typeof currentPostId === 'number' ) {\n\t\t\treturn {\n\t\t\t\tcurrentPostId,\n\t\t\t};\n\t\t}\n\t}\n\treturn EMPTY_OBJECT;\n} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {\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\nexport default ExportedServerSideRender;\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;AAEvB,MAAMC,wBAAwB,GAAG,IAAAC,gBAAU,EAAIC,MAAM,IAAM;EAC1D;EACA;EACA;EACA,MAAMC,gBAAgB,GAAGD,MAAM,CAAE,aAAc,CAAC;EAChD,IAAKC,gBAAgB,EAAG;IACvB,MAAMC,aAAa,GAAGD,gBAAgB,CAACE,gBAAgB,CAAC,CAAC;IACzD;IACA;IACA;IACA;IACA,IAAKD,aAAa,IAAI,OAAOA,aAAa,KAAK,QAAQ,EAAG;MACzD,OAAO;QACNA;MACD,CAAC;IACF;EACD;EACA,OAAOL,YAAY;AACpB,CAAE,CAAC,CAAE,CAAE;EAAEO,YAAY,GAAGP,YAAY;EAAEK,aAAa;EAAE,GAAGG;AAAM,CAAC,KAAM;EACpE,MAAMC,eAAe,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACtC,IAAK,CAAEL,aAAa,EAAG;MACtB,OAAOE,YAAY;IACpB;IACA,OAAO;MACNI,OAAO,EAAEN,aAAa;MACtB,GAAGE;IACJ,CAAC;EACF,CAAC,EAAE,CAAEF,aAAa,EAAEE,YAAY,CAAG,CAAC;EAEpC,oBAAO,IAAAR,WAAA,CAAAa,GAAA,EAACf,iBAAA,CAAAgB,OAAgB;IAACN,YAAY,EAAGE,eAAiB;IAAA,GAAMD;EAAK,CAAI,CAAC;AAC1E,CAAE,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEWZ,wBAAwB","ignoreList":[]}

package/build/server-side-render.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = ServerSideRender;
 exports.removeBlockSupportAttributes = removeBlockSupportAttributes;
 exports.rendererPath = rendererPath;
-var _react = require("react");
 var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
 var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
@@ -16,6 +15,7 @@ var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _url = require("@wordpress/url");
 var _components = require("@wordpress/components");
 var _blocks = require("@wordpress/blocks");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -61,9 +61,10 @@ function removeBlockSupportAttributes(attributes) {
 function DefaultEmptyResponsePlaceholder({
   className
 }) {
-  return (0, _react.createElement)(_components.Placeholder, {
-    className: className
-  }, (0, _i18n.__)('Block rendered as empty.'));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
+    className: className,
+    children: (0, _i18n.__)('Block rendered as empty.')
+  });
 }
 function DefaultErrorResponsePlaceholder({
   response,
@@ -72,31 +73,35 @@ function DefaultErrorResponsePlaceholder({
   const errorMessage = (0, _i18n.sprintf)(
   // translators: %s: error message describing the problem
   (0, _i18n.__)('Error loading block: %s'), response.errorMsg);
-  return (0, _react.createElement)(_components.Placeholder, {
-    className: className
-  }, errorMessage);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
+    className: className,
+    children: errorMessage
+  });
 }
 function DefaultLoadingResponsePlaceholder({
   children,
   showLoader
 }) {
-  return (0, _react.createElement)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     style: {
       position: 'relative'
-    }
-  }, showLoader && (0, _react.createElement)("div", {
-    style: {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      marginTop: '-9px',
-      marginLeft: '-9px'
-    }
-  }, (0, _react.createElement)(_components.Spinner, null)), (0, _react.createElement)("div", {
-    style: {
-      opacity: showLoader ? '0.3' : 1
-    }
-  }, children));
+    },
+    children: [showLoader && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        marginTop: '-9px',
+        marginLeft: '-9px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        opacity: showLoader ? '0.3' : 1
+      },
+      children: children
+    })]
+  });
 }
 function ServerSideRender(props) {
   const {
@@ -110,7 +115,7 @@ function ServerSideRender(props) {
     ErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,
     LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder
   } = props;
-  const isMountedRef = (0, _element.useRef)(true);
+  const isMountedRef = (0, _element.useRef)(false);
   const [showLoader, setShowLoader] = (0, _element.useState)(false);
   const fetchRequestRef = (0, _element.useRef)();
   const [response, setResponse] = (0, _element.useState)(null);
@@ -122,6 +127,11 @@ function ServerSideRender(props) {
       return;
     }
     setIsLoading(true);
+
+    // Schedule showing the Spinner after 1 second.
+    const timeout = setTimeout(() => {
+      setShowLoader(true);
+    }, 1000);
     let sanitizedAttributes = attributes && (0, _blocks.__experimentalSanitizeBlockAttributes)(block, attributes);
     if (skipBlockSupportAttributes) {
       sanitizedAttributes = removeBlockSupportAttributes(sanitizedAttributes);
@@ -156,6 +166,9 @@ function ServerSideRender(props) {
     }).finally(() => {
       if (isMountedRef.current && fetchRequest === fetchRequestRef.current) {
         setIsLoading(false);
+        // Cancel the timeout to show the Spinner.
+        setShowLoader(false);
+        clearTimeout(timeout);
       }
     });
     return fetchRequest;
@@ -164,8 +177,11 @@ function ServerSideRender(props) {
 
   // When the component unmounts, set isMountedRef to false. This will
   // let the async fetch callbacks know when to stop.
-  (0, _element.useEffect)(() => () => {
-    isMountedRef.current = false;
+  (0, _element.useEffect)(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
   }, []);
   (0, _element.useEffect)(() => {
     // Don't debounce the first fetch. This ensures that the first render
@@ -176,45 +192,33 @@ function ServerSideRender(props) {
       debouncedFetchData();
     }
   });
-
-  /**
-   * Effect to handle showing the loading placeholder.
-   * Show it only if there is no previous response or
-   * the request takes more than one second.
-   */
-  (0, _element.useEffect)(() => {
-    if (!isLoading) {
-      return;
-    }
-    const timeout = setTimeout(() => {
-      setShowLoader(true);
-    }, 1000);
-    return () => clearTimeout(timeout);
-  }, [isLoading]);
   const hasResponse = !!response;
   const hasEmptyResponse = response === '';
   const hasError = response?.error;
   if (isLoading) {
-    return (0, _react.createElement)(LoadingResponsePlaceholder, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingResponsePlaceholder, {
       ...props,
-      showLoader: showLoader
-    }, hasResponse && (0, _react.createElement)(_element.RawHTML, {
-      className: className
-    }, response));
+      showLoader: showLoader,
+      children: hasResponse && /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
+        className: className,
+        children: response
+      })
+    });
   }
   if (hasEmptyResponse || !hasResponse) {
-    return (0, _react.createElement)(EmptyResponsePlaceholder, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyResponsePlaceholder, {
       ...props
     });
   }
   if (hasError) {
-    return (0, _react.createElement)(ErrorResponsePlaceholder, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorResponsePlaceholder, {
       response: response,
       ...props
     });
   }
-  return (0, _react.createElement)(_element.RawHTML, {
-    className: className
-  }, response);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
+    className: className,
+    children: response
+  });
 }
 //# sourceMappingURL=server-side-render.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_es","_interopRequireDefault","require","_compose","_element","_i18n","_apiFetch","_url","_components","_blocks","EMPTY_OBJECT","rendererPath","block","attributes","urlQueryArgs","addQueryArgs","context","removeBlockSupportAttributes","backgroundColor","borderColor","fontFamily","fontSize","gradient","textColor","className","restAttributes","border","color","elements","spacing","typography","restStyles","style","DefaultEmptyResponsePlaceholder","_react","createElement","Placeholder","__","DefaultErrorResponsePlaceholder","response","errorMessage","sprintf","errorMsg","DefaultLoadingResponsePlaceholder","children","showLoader","position","top","left","marginTop","marginLeft","Spinner","opacity","ServerSideRender","props","httpMethod","skipBlockSupportAttributes","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","isMountedRef","useRef","setShowLoader","useState","fetchRequestRef","setResponse","prevProps","usePrevious","isLoading","setIsLoading","fetchData","_sanitizedAttributes","_sanitizedAttributes2","current","sanitizedAttributes","__experimentalSanitizeBlockAttributes","isPostRequest","urlAttributes","path","data","fetchRequest","apiFetch","method","then","fetchResponse","rendered","catch","error","message","finally","debouncedFetchData","useDebounce","useEffect","undefined","fastDeepEqual","timeout","setTimeout","clearTimeout","hasResponse","hasEmptyResponse","hasError","RawHTML"],"sources":["@wordpress/server-side-render/src/server-side-render.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce, usePrevious } from '@wordpress/compose';\nimport { RawHTML, useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nconst EMPTY_OBJECT = {};\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 { border, color, elements, spacing, typography, ...restStyles } =\n\t\tattributes?.style || EMPTY_OBJECT;\n\n\treturn {\n\t\t...restAttributes,\n\t\tstyle: restStyles,\n\t};\n}\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( { response, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tresponse.errorMsg\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children, showLoader } ) {\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 default function ServerSideRender( props ) {\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tclassName,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t\tskipBlockSupportAttributes = false,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t} = props;\n\n\tconst isMountedRef = useRef( true );\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\tconst fetchRequestRef = useRef();\n\tconst [ response, setResponse ] = useState( null );\n\tconst prevProps = usePrevious( props );\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\n\tfunction fetchData() {\n\t\tif ( ! isMountedRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsLoading( true );\n\n\t\tlet sanitizedAttributes =\n\t\t\tattributes &&\n\t\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\t\tif ( skipBlockSupportAttributes ) {\n\t\t\tsanitizedAttributes =\n\t\t\t\tremoveBlockSupportAttributes( sanitizedAttributes );\n\t\t}\n\n\t\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\t\tconst isPostRequest = 'POST' === httpMethod;\n\t\tconst urlAttributes = isPostRequest\n\t\t\t? null\n\t\t\t: sanitizedAttributes ?? null;\n\t\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\t\tconst data = isPostRequest\n\t\t\t? { attributes: sanitizedAttributes ?? null }\n\t\t\t: null;\n\n\t\t// Store the latest fetch request so that when we process it, we can\n\t\t// check if it is the current request, to avoid race conditions on slow networks.\n\t\tconst fetchRequest = ( fetchRequestRef.current = apiFetch( {\n\t\t\tpath,\n\t\t\tdata,\n\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t} )\n\t\t\t.then( ( fetchResponse ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current &&\n\t\t\t\t\tfetchResponse\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( fetchResponse.rendered );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\terror: true,\n\t\t\t\t\t\terrorMsg: error.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetIsLoading( false );\n\t\t\t\t}\n\t\t\t} ) );\n\n\t\treturn fetchRequest;\n\t}\n\n\tconst debouncedFetchData = useDebounce( fetchData, 500 );\n\n\t// When the component unmounts, set isMountedRef to false. This will\n\t// let the async fetch callbacks know when to stop.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tisMountedRef.current = false;\n\t\t},\n\t\t[]\n\t);\n\n\tuseEffect( () => {\n\t\t// Don't debounce the first fetch. This ensures that the first render\n\t\t// shows data as soon as possible.\n\t\tif ( prevProps === undefined ) {\n\t\t\tfetchData();\n\t\t} else if ( ! fastDeepEqual( prevProps, props ) ) {\n\t\t\tdebouncedFetchData();\n\t\t}\n\t} );\n\n\t/**\n\t * Effect to handle showing the loading placeholder.\n\t * Show it only if there is no previous response or\n\t * the request takes more than one second.\n\t */\n\tuseEffect( () => {\n\t\tif ( ! isLoading ) {\n\t\t\treturn;\n\t\t}\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [ isLoading ] );\n\n\tconst hasResponse = !! response;\n\tconst hasEmptyResponse = response === '';\n\tconst hasError = response?.error;\n\n\tif ( isLoading ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props } showLoader={ showLoader }>\n\t\t\t\t{ hasResponse && (\n\t\t\t\t\t<RawHTML className={ className }>{ response }</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( hasEmptyResponse || ! hasResponse ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( hasError ) {\n\t\treturn <ErrorResponsePlaceholder response={ response } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ response }</RawHTML>;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_es","_interopRequireDefault","require","_compose","_element","_i18n","_apiFetch","_url","_components","_blocks","_jsxRuntime","EMPTY_OBJECT","rendererPath","block","attributes","urlQueryArgs","addQueryArgs","context","removeBlockSupportAttributes","backgroundColor","borderColor","fontFamily","fontSize","gradient","textColor","className","restAttributes","border","color","elements","spacing","typography","restStyles","style","DefaultEmptyResponsePlaceholder","jsx","Placeholder","children","__","DefaultErrorResponsePlaceholder","response","errorMessage","sprintf","errorMsg","DefaultLoadingResponsePlaceholder","showLoader","jsxs","position","top","left","marginTop","marginLeft","Spinner","opacity","ServerSideRender","props","httpMethod","skipBlockSupportAttributes","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","isMountedRef","useRef","setShowLoader","useState","fetchRequestRef","setResponse","prevProps","usePrevious","isLoading","setIsLoading","fetchData","_sanitizedAttributes","_sanitizedAttributes2","current","timeout","setTimeout","sanitizedAttributes","__experimentalSanitizeBlockAttributes","isPostRequest","urlAttributes","path","data","fetchRequest","apiFetch","method","then","fetchResponse","rendered","catch","error","message","finally","clearTimeout","debouncedFetchData","useDebounce","useEffect","undefined","fastDeepEqual","hasResponse","hasEmptyResponse","hasError","RawHTML"],"sources":["@wordpress/server-side-render/src/server-side-render.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce, usePrevious } from '@wordpress/compose';\nimport { RawHTML, useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nconst EMPTY_OBJECT = {};\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 { border, color, elements, spacing, typography, ...restStyles } =\n\t\tattributes?.style || EMPTY_OBJECT;\n\n\treturn {\n\t\t...restAttributes,\n\t\tstyle: restStyles,\n\t};\n}\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( { response, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tresponse.errorMsg\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children, showLoader } ) {\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 default function ServerSideRender( props ) {\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tclassName,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t\tskipBlockSupportAttributes = false,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t} = props;\n\n\tconst isMountedRef = useRef( false );\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\tconst fetchRequestRef = useRef();\n\tconst [ response, setResponse ] = useState( null );\n\tconst prevProps = usePrevious( props );\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\n\tfunction fetchData() {\n\t\tif ( ! isMountedRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsLoading( true );\n\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\n\t\tlet sanitizedAttributes =\n\t\t\tattributes &&\n\t\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\t\tif ( skipBlockSupportAttributes ) {\n\t\t\tsanitizedAttributes =\n\t\t\t\tremoveBlockSupportAttributes( sanitizedAttributes );\n\t\t}\n\n\t\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\t\tconst isPostRequest = 'POST' === httpMethod;\n\t\tconst urlAttributes = isPostRequest\n\t\t\t? null\n\t\t\t: sanitizedAttributes ?? null;\n\t\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\t\tconst data = isPostRequest\n\t\t\t? { attributes: sanitizedAttributes ?? null }\n\t\t\t: null;\n\n\t\t// Store the latest fetch request so that when we process it, we can\n\t\t// check if it is the current request, to avoid race conditions on slow networks.\n\t\tconst fetchRequest = ( fetchRequestRef.current = apiFetch( {\n\t\t\tpath,\n\t\t\tdata,\n\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t} )\n\t\t\t.then( ( fetchResponse ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current &&\n\t\t\t\t\tfetchResponse\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( fetchResponse.rendered );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\terror: true,\n\t\t\t\t\t\terrorMsg: error.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetIsLoading( false );\n\t\t\t\t\t// Cancel the timeout to show the Spinner.\n\t\t\t\t\tsetShowLoader( false );\n\t\t\t\t\tclearTimeout( timeout );\n\t\t\t\t}\n\t\t\t} ) );\n\n\t\treturn fetchRequest;\n\t}\n\n\tconst debouncedFetchData = useDebounce( fetchData, 500 );\n\n\t// When the component unmounts, set isMountedRef to false. This will\n\t// let the async fetch callbacks know when to stop.\n\tuseEffect( () => {\n\t\tisMountedRef.current = true;\n\t\treturn () => {\n\t\t\tisMountedRef.current = false;\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\t// Don't debounce the first fetch. This ensures that the first render\n\t\t// shows data as soon as possible.\n\t\tif ( prevProps === undefined ) {\n\t\t\tfetchData();\n\t\t} else if ( ! fastDeepEqual( prevProps, props ) ) {\n\t\t\tdebouncedFetchData();\n\t\t}\n\t} );\n\n\tconst hasResponse = !! response;\n\tconst hasEmptyResponse = response === '';\n\tconst hasError = response?.error;\n\n\tif ( isLoading ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props } showLoader={ showLoader }>\n\t\t\t\t{ hasResponse && (\n\t\t\t\t\t<RawHTML className={ className }>{ response }</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( hasEmptyResponse || ! hasResponse ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( hasError ) {\n\t\treturn <ErrorResponsePlaceholder response={ response } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ response }</RawHTML>;\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/index.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -13,6 +12,7 @@ import ServerSideRender from './server-side-render';
 /**
  * Constants
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_OBJECT = {};
 const ExportedServerSideRender = withSelect(select => {
   // FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.
@@ -46,7 +46,7 @@ const ExportedServerSideRender = withSelect(select => {
       ...urlQueryArgs
     };
   }, [currentPostId, urlQueryArgs]);
-  return createElement(ServerSideRender, {
+  return /*#__PURE__*/_jsx(ServerSideRender, {
     urlQueryArgs: newUrlQueryArgs,
     ...props
   });

package/build-module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","withSelect","ServerSideRender","EMPTY_OBJECT","ExportedServerSideRender","select","coreEditorSelect","currentPostId","getCurrentPostId","urlQueryArgs","props","newUrlQueryArgs","post_id","createElement"],"sources":["@wordpress/server-side-render/src/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ServerSideRender from './server-side-render';\n\n/**\n * Constants\n */\nconst EMPTY_OBJECT = {};\n\nconst ExportedServerSideRender = withSelect( ( select ) => {\n\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\tconst coreEditorSelect = select( 'core/editor' );\n\tif ( coreEditorSelect ) {\n\t\tconst currentPostId = coreEditorSelect.getCurrentPostId();\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\tif ( currentPostId && typeof currentPostId === 'number' ) {\n\t\t\treturn {\n\t\t\t\tcurrentPostId,\n\t\t\t};\n\t\t}\n\t}\n\treturn EMPTY_OBJECT;\n} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {\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\nexport default ExportedServerSideRender;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,UAAU,QAAQ,iBAAiB;;AAE5C;AACA;AACA;AACA,OAAOC,gBAAgB,MAAM,sBAAsB;;AAEnD;AACA;AACA;AACA,MAAMC,YAAY,GAAG,CAAC,CAAC;AAEvB,MAAMC,wBAAwB,GAAGH,UAAU,CAAII,MAAM,IAAM;EAC1D;EACA;EACA;EACA,MAAMC,gBAAgB,GAAGD,MAAM,CAAE,aAAc,CAAC;EAChD,IAAKC,gBAAgB,EAAG;IACvB,MAAMC,aAAa,GAAGD,gBAAgB,CAACE,gBAAgB,CAAC,CAAC;IACzD;IACA;IACA;IACA;IACA,IAAKD,aAAa,IAAI,OAAOA,aAAa,KAAK,QAAQ,EAAG;MACzD,OAAO;QACNA;MACD,CAAC;IACF;EACD;EACA,OAAOJ,YAAY;AACpB,CAAE,CAAC,CAAE,CAAE;EAAEM,YAAY,GAAGN,YAAY;EAAEI,aAAa;EAAE,GAAGG;AAAM,CAAC,KAAM;EACpE,MAAMC,eAAe,GAAGX,OAAO,CAAE,MAAM;IACtC,IAAK,CAAEO,aAAa,EAAG;MACtB,OAAOE,YAAY;IACpB;IACA,OAAO;MACNG,OAAO,EAAEL,aAAa;MACtB,GAAGE;IACJ,CAAC;EACF,CAAC,EAAE,CAAEF,aAAa,EAAEE,YAAY,CAAG,CAAC;EAEpC,OAAOI,aAAA,CAACX,gBAAgB;IAACO,YAAY,EAAGE,eAAiB;IAAA,GAAMD;EAAK,CAAI,CAAC;AAC1E,CAAE,CAAC;AAEH,eAAeN,wBAAwB","ignoreList":[]}
+{"version":3,"names":["useMemo","withSelect","ServerSideRender","jsx","_jsx","EMPTY_OBJECT","ExportedServerSideRender","select","coreEditorSelect","currentPostId","getCurrentPostId","urlQueryArgs","props","newUrlQueryArgs","post_id"],"sources":["@wordpress/server-side-render/src/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ServerSideRender from './server-side-render';\n\n/**\n * Constants\n */\nconst EMPTY_OBJECT = {};\n\nconst ExportedServerSideRender = withSelect( ( select ) => {\n\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\tconst coreEditorSelect = select( 'core/editor' );\n\tif ( coreEditorSelect ) {\n\t\tconst currentPostId = coreEditorSelect.getCurrentPostId();\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\tif ( currentPostId && typeof currentPostId === 'number' ) {\n\t\t\treturn {\n\t\t\t\tcurrentPostId,\n\t\t\t};\n\t\t}\n\t}\n\treturn EMPTY_OBJECT;\n} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {\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\nexport default ExportedServerSideRender;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,UAAU,QAAQ,iBAAiB;;AAE5C;AACA;AACA;AACA,OAAOC,gBAAgB,MAAM,sBAAsB;;AAEnD;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAGA,MAAMC,YAAY,GAAG,CAAC,CAAC;AAEvB,MAAMC,wBAAwB,GAAGL,UAAU,CAAIM,MAAM,IAAM;EAC1D;EACA;EACA;EACA,MAAMC,gBAAgB,GAAGD,MAAM,CAAE,aAAc,CAAC;EAChD,IAAKC,gBAAgB,EAAG;IACvB,MAAMC,aAAa,GAAGD,gBAAgB,CAACE,gBAAgB,CAAC,CAAC;IACzD;IACA;IACA;IACA;IACA,IAAKD,aAAa,IAAI,OAAOA,aAAa,KAAK,QAAQ,EAAG;MACzD,OAAO;QACNA;MACD,CAAC;IACF;EACD;EACA,OAAOJ,YAAY;AACpB,CAAE,CAAC,CAAE,CAAE;EAAEM,YAAY,GAAGN,YAAY;EAAEI,aAAa;EAAE,GAAGG;AAAM,CAAC,KAAM;EACpE,MAAMC,eAAe,GAAGb,OAAO,CAAE,MAAM;IACtC,IAAK,CAAES,aAAa,EAAG;MACtB,OAAOE,YAAY;IACpB;IACA,OAAO;MACNG,OAAO,EAAEL,aAAa;MACtB,GAAGE;IACJ,CAAC;EACF,CAAC,EAAE,CAAEF,aAAa,EAAEE,YAAY,CAAG,CAAC;EAEpC,oBAAOP,IAAA,CAACF,gBAAgB;IAACS,YAAY,EAAGE,eAAiB;IAAA,GAAMD;EAAK,CAAI,CAAC;AAC1E,CAAE,CAAC;AAEH,eAAeN,wBAAwB","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -14,6 +13,8 @@ import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { Placeholder, Spinner } from '@wordpress/components';
 import { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const EMPTY_OBJECT = {};
 export function rendererPath(block, attributes = null, urlQueryArgs = {}) {
   return addQueryArgs(`/wp/v2/block-renderer/${block}`, {
@@ -51,9 +52,10 @@ export function removeBlockSupportAttributes(attributes) {
 function DefaultEmptyResponsePlaceholder({
   className
 }) {
-  return createElement(Placeholder, {
-    className: className
-  }, __('Block rendered as empty.'));
+  return /*#__PURE__*/_jsx(Placeholder, {
+    className: className,
+    children: __('Block rendered as empty.')
+  });
 }
 function DefaultErrorResponsePlaceholder({
   response,
@@ -62,31 +64,35 @@ function DefaultErrorResponsePlaceholder({
   const errorMessage = sprintf(
   // translators: %s: error message describing the problem
   __('Error loading block: %s'), response.errorMsg);
-  return createElement(Placeholder, {
-    className: className
-  }, errorMessage);
+  return /*#__PURE__*/_jsx(Placeholder, {
+    className: className,
+    children: errorMessage
+  });
 }
 function DefaultLoadingResponsePlaceholder({
   children,
   showLoader
 }) {
-  return createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     style: {
       position: 'relative'
-    }
-  }, showLoader && createElement("div", {
-    style: {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      marginTop: '-9px',
-      marginLeft: '-9px'
-    }
-  }, createElement(Spinner, null)), createElement("div", {
-    style: {
-      opacity: showLoader ? '0.3' : 1
-    }
-  }, children));
+    },
+    children: [showLoader && /*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        marginTop: '-9px',
+        marginLeft: '-9px'
+      },
+      children: /*#__PURE__*/_jsx(Spinner, {})
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        opacity: showLoader ? '0.3' : 1
+      },
+      children: children
+    })]
+  });
 }
 export default function ServerSideRender(props) {
   const {
@@ -100,7 +106,7 @@ export default function ServerSideRender(props) {
     ErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,
     LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder
   } = props;
-  const isMountedRef = useRef(true);
+  const isMountedRef = useRef(false);
   const [showLoader, setShowLoader] = useState(false);
   const fetchRequestRef = useRef();
   const [response, setResponse] = useState(null);
@@ -112,6 +118,11 @@ export default function ServerSideRender(props) {
       return;
     }
     setIsLoading(true);
+
+    // Schedule showing the Spinner after 1 second.
+    const timeout = setTimeout(() => {
+      setShowLoader(true);
+    }, 1000);
     let sanitizedAttributes = attributes && __experimentalSanitizeBlockAttributes(block, attributes);
     if (skipBlockSupportAttributes) {
       sanitizedAttributes = removeBlockSupportAttributes(sanitizedAttributes);
@@ -146,6 +157,9 @@ export default function ServerSideRender(props) {
     }).finally(() => {
       if (isMountedRef.current && fetchRequest === fetchRequestRef.current) {
         setIsLoading(false);
+        // Cancel the timeout to show the Spinner.
+        setShowLoader(false);
+        clearTimeout(timeout);
       }
     });
     return fetchRequest;
@@ -154,8 +168,11 @@ export default function ServerSideRender(props) {
 
   // When the component unmounts, set isMountedRef to false. This will
   // let the async fetch callbacks know when to stop.
-  useEffect(() => () => {
-    isMountedRef.current = false;
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
   }, []);
   useEffect(() => {
     // Don't debounce the first fetch. This ensures that the first render
@@ -166,45 +183,33 @@ export default function ServerSideRender(props) {
       debouncedFetchData();
     }
   });
-
-  /**
-   * Effect to handle showing the loading placeholder.
-   * Show it only if there is no previous response or
-   * the request takes more than one second.
-   */
-  useEffect(() => {
-    if (!isLoading) {
-      return;
-    }
-    const timeout = setTimeout(() => {
-      setShowLoader(true);
-    }, 1000);
-    return () => clearTimeout(timeout);
-  }, [isLoading]);
   const hasResponse = !!response;
   const hasEmptyResponse = response === '';
   const hasError = response?.error;
   if (isLoading) {
-    return createElement(LoadingResponsePlaceholder, {
+    return /*#__PURE__*/_jsx(LoadingResponsePlaceholder, {
       ...props,
-      showLoader: showLoader
-    }, hasResponse && createElement(RawHTML, {
-      className: className
-    }, response));
+      showLoader: showLoader,
+      children: hasResponse && /*#__PURE__*/_jsx(RawHTML, {
+        className: className,
+        children: response
+      })
+    });
   }
   if (hasEmptyResponse || !hasResponse) {
-    return createElement(EmptyResponsePlaceholder, {
+    return /*#__PURE__*/_jsx(EmptyResponsePlaceholder, {
       ...props
     });
   }
   if (hasError) {
-    return createElement(ErrorResponsePlaceholder, {
+    return /*#__PURE__*/_jsx(ErrorResponsePlaceholder, {
       response: response,
       ...props
     });
   }
-  return createElement(RawHTML, {
-    className: className
-  }, response);
+  return /*#__PURE__*/_jsx(RawHTML, {
+    className: className,
+    children: response
+  });
 }
 //# sourceMappingURL=server-side-render.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["fastDeepEqual","useDebounce","usePrevious","RawHTML","useEffect","useRef","useState","__","sprintf","apiFetch","addQueryArgs","Placeholder","Spinner","__experimentalSanitizeBlockAttributes","EMPTY_OBJECT","rendererPath","block","attributes","urlQueryArgs","context","removeBlockSupportAttributes","backgroundColor","borderColor","fontFamily","fontSize","gradient","textColor","className","restAttributes","border","color","elements","spacing","typography","restStyles","style","DefaultEmptyResponsePlaceholder","createElement","DefaultErrorResponsePlaceholder","response","errorMessage","errorMsg","DefaultLoadingResponsePlaceholder","children","showLoader","position","top","left","marginTop","marginLeft","opacity","ServerSideRender","props","httpMethod","skipBlockSupportAttributes","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","isMountedRef","setShowLoader","fetchRequestRef","setResponse","prevProps","isLoading","setIsLoading","fetchData","_sanitizedAttributes","_sanitizedAttributes2","current","sanitizedAttributes","isPostRequest","urlAttributes","path","data","fetchRequest","method","then","fetchResponse","rendered","catch","error","message","finally","debouncedFetchData","undefined","timeout","setTimeout","clearTimeout","hasResponse","hasEmptyResponse","hasError"],"sources":["@wordpress/server-side-render/src/server-side-render.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce, usePrevious } from '@wordpress/compose';\nimport { RawHTML, useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nconst EMPTY_OBJECT = {};\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 { border, color, elements, spacing, typography, ...restStyles } =\n\t\tattributes?.style || EMPTY_OBJECT;\n\n\treturn {\n\t\t...restAttributes,\n\t\tstyle: restStyles,\n\t};\n}\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( { response, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tresponse.errorMsg\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children, showLoader } ) {\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 default function ServerSideRender( props ) {\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tclassName,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t\tskipBlockSupportAttributes = false,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t} = props;\n\n\tconst isMountedRef = useRef( true );\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\tconst fetchRequestRef = useRef();\n\tconst [ response, setResponse ] = useState( null );\n\tconst prevProps = usePrevious( props );\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\n\tfunction fetchData() {\n\t\tif ( ! isMountedRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsLoading( true );\n\n\t\tlet sanitizedAttributes =\n\t\t\tattributes &&\n\t\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\t\tif ( skipBlockSupportAttributes ) {\n\t\t\tsanitizedAttributes =\n\t\t\t\tremoveBlockSupportAttributes( sanitizedAttributes );\n\t\t}\n\n\t\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\t\tconst isPostRequest = 'POST' === httpMethod;\n\t\tconst urlAttributes = isPostRequest\n\t\t\t? null\n\t\t\t: sanitizedAttributes ?? null;\n\t\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\t\tconst data = isPostRequest\n\t\t\t? { attributes: sanitizedAttributes ?? null }\n\t\t\t: null;\n\n\t\t// Store the latest fetch request so that when we process it, we can\n\t\t// check if it is the current request, to avoid race conditions on slow networks.\n\t\tconst fetchRequest = ( fetchRequestRef.current = apiFetch( {\n\t\t\tpath,\n\t\t\tdata,\n\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t} )\n\t\t\t.then( ( fetchResponse ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current &&\n\t\t\t\t\tfetchResponse\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( fetchResponse.rendered );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\terror: true,\n\t\t\t\t\t\terrorMsg: error.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetIsLoading( false );\n\t\t\t\t}\n\t\t\t} ) );\n\n\t\treturn fetchRequest;\n\t}\n\n\tconst debouncedFetchData = useDebounce( fetchData, 500 );\n\n\t// When the component unmounts, set isMountedRef to false. This will\n\t// let the async fetch callbacks know when to stop.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tisMountedRef.current = false;\n\t\t},\n\t\t[]\n\t);\n\n\tuseEffect( () => {\n\t\t// Don't debounce the first fetch. This ensures that the first render\n\t\t// shows data as soon as possible.\n\t\tif ( prevProps === undefined ) {\n\t\t\tfetchData();\n\t\t} else if ( ! fastDeepEqual( prevProps, props ) ) {\n\t\t\tdebouncedFetchData();\n\t\t}\n\t} );\n\n\t/**\n\t * Effect to handle showing the loading placeholder.\n\t * Show it only if there is no previous response or\n\t * the request takes more than one second.\n\t */\n\tuseEffect( () => {\n\t\tif ( ! isLoading ) {\n\t\t\treturn;\n\t\t}\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [ isLoading ] );\n\n\tconst hasResponse = !! response;\n\tconst hasEmptyResponse = response === '';\n\tconst hasError = response?.error;\n\n\tif ( isLoading ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props } showLoader={ showLoader }>\n\t\t\t\t{ hasResponse && (\n\t\t\t\t\t<RawHTML className={ className }>{ response }</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( hasEmptyResponse || ! hasResponse ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( hasError ) {\n\t\treturn <ErrorResponsePlaceholder response={ response } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ response }</RawHTML>;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["fastDeepEqual","useDebounce","usePrevious","RawHTML","useEffect","useRef","useState","__","sprintf","apiFetch","addQueryArgs","Placeholder","Spinner","__experimentalSanitizeBlockAttributes","jsx","_jsx","jsxs","_jsxs","EMPTY_OBJECT","rendererPath","block","attributes","urlQueryArgs","context","removeBlockSupportAttributes","backgroundColor","borderColor","fontFamily","fontSize","gradient","textColor","className","restAttributes","border","color","elements","spacing","typography","restStyles","style","DefaultEmptyResponsePlaceholder","children","DefaultErrorResponsePlaceholder","response","errorMessage","errorMsg","DefaultLoadingResponsePlaceholder","showLoader","position","top","left","marginTop","marginLeft","opacity","ServerSideRender","props","httpMethod","skipBlockSupportAttributes","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","isMountedRef","setShowLoader","fetchRequestRef","setResponse","prevProps","isLoading","setIsLoading","fetchData","_sanitizedAttributes","_sanitizedAttributes2","current","timeout","setTimeout","sanitizedAttributes","isPostRequest","urlAttributes","path","data","fetchRequest","method","then","fetchResponse","rendered","catch","error","message","finally","clearTimeout","debouncedFetchData","undefined","hasResponse","hasEmptyResponse","hasError"],"sources":["@wordpress/server-side-render/src/server-side-render.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce, usePrevious } from '@wordpress/compose';\nimport { RawHTML, useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nconst EMPTY_OBJECT = {};\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 { border, color, elements, spacing, typography, ...restStyles } =\n\t\tattributes?.style || EMPTY_OBJECT;\n\n\treturn {\n\t\t...restAttributes,\n\t\tstyle: restStyles,\n\t};\n}\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( { response, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tresponse.errorMsg\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children, showLoader } ) {\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 default function ServerSideRender( props ) {\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tclassName,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t\tskipBlockSupportAttributes = false,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t} = props;\n\n\tconst isMountedRef = useRef( false );\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\tconst fetchRequestRef = useRef();\n\tconst [ response, setResponse ] = useState( null );\n\tconst prevProps = usePrevious( props );\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\n\tfunction fetchData() {\n\t\tif ( ! isMountedRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsLoading( true );\n\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\n\t\tlet sanitizedAttributes =\n\t\t\tattributes &&\n\t\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\t\tif ( skipBlockSupportAttributes ) {\n\t\t\tsanitizedAttributes =\n\t\t\t\tremoveBlockSupportAttributes( sanitizedAttributes );\n\t\t}\n\n\t\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\t\tconst isPostRequest = 'POST' === httpMethod;\n\t\tconst urlAttributes = isPostRequest\n\t\t\t? null\n\t\t\t: sanitizedAttributes ?? null;\n\t\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\t\tconst data = isPostRequest\n\t\t\t? { attributes: sanitizedAttributes ?? null }\n\t\t\t: null;\n\n\t\t// Store the latest fetch request so that when we process it, we can\n\t\t// check if it is the current request, to avoid race conditions on slow networks.\n\t\tconst fetchRequest = ( fetchRequestRef.current = apiFetch( {\n\t\t\tpath,\n\t\t\tdata,\n\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t} )\n\t\t\t.then( ( fetchResponse ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current &&\n\t\t\t\t\tfetchResponse\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( fetchResponse.rendered );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\terror: true,\n\t\t\t\t\t\terrorMsg: error.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetIsLoading( false );\n\t\t\t\t\t// Cancel the timeout to show the Spinner.\n\t\t\t\t\tsetShowLoader( false );\n\t\t\t\t\tclearTimeout( timeout );\n\t\t\t\t}\n\t\t\t} ) );\n\n\t\treturn fetchRequest;\n\t}\n\n\tconst debouncedFetchData = useDebounce( fetchData, 500 );\n\n\t// When the component unmounts, set isMountedRef to false. This will\n\t// let the async fetch callbacks know when to stop.\n\tuseEffect( () => {\n\t\tisMountedRef.current = true;\n\t\treturn () => {\n\t\t\tisMountedRef.current = false;\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\t// Don't debounce the first fetch. This ensures that the first render\n\t\t// shows data as soon as possible.\n\t\tif ( prevProps === undefined ) {\n\t\t\tfetchData();\n\t\t} else if ( ! fastDeepEqual( prevProps, props ) ) {\n\t\t\tdebouncedFetchData();\n\t\t}\n\t} );\n\n\tconst hasResponse = !! response;\n\tconst hasEmptyResponse = response === '';\n\tconst hasError = response?.error;\n\n\tif ( isLoading ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props } showLoader={ showLoader }>\n\t\t\t\t{ hasResponse && (\n\t\t\t\t\t<RawHTML className={ className }>{ response }</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\tif ( hasEmptyResponse || ! hasResponse ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( hasError ) {\n\t\treturn <ErrorResponsePlaceholder response={ response } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ response }</RawHTML>;\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "4.34.0",
+	"version": "5.0.0",
 	"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",
@@ -20,22 +20,23 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "^6.54.0",
-		"@wordpress/blocks": "^12.34.0",
-		"@wordpress/components": "^27.5.0",
-		"@wordpress/compose": "^6.34.0",
-		"@wordpress/data": "^9.27.0",
-		"@wordpress/deprecated": "^3.57.0",
-		"@wordpress/element": "^5.34.0",
-		"@wordpress/i18n": "^4.57.0",
-		"@wordpress/url": "^3.58.0",
+		"@wordpress/api-fetch": "^7.0.0",
+		"@wordpress/blocks": "^13.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/data": "^10.0.0",
+		"@wordpress/deprecated": "^4.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/url": "^4.0.0",
 		"fast-deep-equal": "^3.1.3"
 	},
 	"peerDependencies": {
@@ -45,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

package/src/server-side-render.js

@@ -98,7 +98,7 @@ export default function ServerSideRender( props ) {
 		LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,
 	} = props;
 
-	const isMountedRef = useRef( true );
+	const isMountedRef = useRef( false );
 	const [ showLoader, setShowLoader ] = useState( false );
 	const fetchRequestRef = useRef();
 	const [ response, setResponse ] = useState( null );
@@ -112,6 +112,11 @@ export default function ServerSideRender( props ) {
 
 		setIsLoading( true );
 
+		// Schedule showing the Spinner after 1 second.
+		const timeout = setTimeout( () => {
+			setShowLoader( true );
+		}, 1000 );
+
 		let sanitizedAttributes =
 			attributes &&
 			__experimentalSanitizeBlockAttributes( block, attributes );
@@ -165,6 +170,9 @@ export default function ServerSideRender( props ) {
 					fetchRequest === fetchRequestRef.current
 				) {
 					setIsLoading( false );
+					// Cancel the timeout to show the Spinner.
+					setShowLoader( false );
+					clearTimeout( timeout );
 				}
 			} ) );
 
@@ -175,12 +183,12 @@ export default function ServerSideRender( props ) {
 
 	// When the component unmounts, set isMountedRef to false. This will
 	// let the async fetch callbacks know when to stop.
-	useEffect(
-		() => () => {
+	useEffect( () => {
+		isMountedRef.current = true;
+		return () => {
 			isMountedRef.current = false;
-		},
-		[]
-	);
+		};
+	}, [] );
 
 	useEffect( () => {
 		// Don't debounce the first fetch. This ensures that the first render
@@ -192,21 +200,6 @@ export default function ServerSideRender( props ) {
 		}
 	} );
 
-	/**
-	 * Effect to handle showing the loading placeholder.
-	 * Show it only if there is no previous response or
-	 * the request takes more than one second.
-	 */
-	useEffect( () => {
-		if ( ! isLoading ) {
-			return;
-		}
-		const timeout = setTimeout( () => {
-			setShowLoader( true );
-		}, 1000 );
-		return () => clearTimeout( timeout );
-	}, [ isLoading ] );
-
 	const hasResponse = !! response;
 	const hasEmptyResponse = response === '';
 	const hasError = response?.error;