server-side-render.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. /******/ (function() { // webpackBootstrap
  2. /******/ "use strict";
  3. /******/ // The require scope
  4. /******/ var __webpack_require__ = {};
  5. /******/
  6. /************************************************************************/
  7. /******/ /* webpack/runtime/compat get default export */
  8. /******/ !function() {
  9. /******/ // getDefaultExport function for compatibility with non-harmony modules
  10. /******/ __webpack_require__.n = function(module) {
  11. /******/ var getter = module && module.__esModule ?
  12. /******/ function() { return module['default']; } :
  13. /******/ function() { return module; };
  14. /******/ __webpack_require__.d(getter, { a: getter });
  15. /******/ return getter;
  16. /******/ };
  17. /******/ }();
  18. /******/
  19. /******/ /* webpack/runtime/define property getters */
  20. /******/ !function() {
  21. /******/ // define getter functions for harmony exports
  22. /******/ __webpack_require__.d = function(exports, definition) {
  23. /******/ for(var key in definition) {
  24. /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
  25. /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
  26. /******/ }
  27. /******/ }
  28. /******/ };
  29. /******/ }();
  30. /******/
  31. /******/ /* webpack/runtime/hasOwnProperty shorthand */
  32. /******/ !function() {
  33. /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
  34. /******/ }();
  35. /******/
  36. /************************************************************************/
  37. var __webpack_exports__ = {};
  38. // EXPORTS
  39. __webpack_require__.d(__webpack_exports__, {
  40. "default": function() { return /* binding */ build_module; }
  41. });
  42. ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
  43. function _extends() {
  44. _extends = Object.assign ? Object.assign.bind() : function (target) {
  45. for (var i = 1; i < arguments.length; i++) {
  46. var source = arguments[i];
  47. for (var key in source) {
  48. if (Object.prototype.hasOwnProperty.call(source, key)) {
  49. target[key] = source[key];
  50. }
  51. }
  52. }
  53. return target;
  54. };
  55. return _extends.apply(this, arguments);
  56. }
  57. ;// CONCATENATED MODULE: external ["wp","element"]
  58. var external_wp_element_namespaceObject = window["wp"]["element"];
  59. ;// CONCATENATED MODULE: external ["wp","data"]
  60. var external_wp_data_namespaceObject = window["wp"]["data"];
  61. ;// CONCATENATED MODULE: external ["wp","deprecated"]
  62. var external_wp_deprecated_namespaceObject = window["wp"]["deprecated"];
  63. var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject);
  64. ;// CONCATENATED MODULE: external "lodash"
  65. var external_lodash_namespaceObject = window["lodash"];
  66. ;// CONCATENATED MODULE: external ["wp","compose"]
  67. var external_wp_compose_namespaceObject = window["wp"]["compose"];
  68. ;// CONCATENATED MODULE: external ["wp","i18n"]
  69. var external_wp_i18n_namespaceObject = window["wp"]["i18n"];
  70. ;// CONCATENATED MODULE: external ["wp","apiFetch"]
  71. var external_wp_apiFetch_namespaceObject = window["wp"]["apiFetch"];
  72. var external_wp_apiFetch_default = /*#__PURE__*/__webpack_require__.n(external_wp_apiFetch_namespaceObject);
  73. ;// CONCATENATED MODULE: external ["wp","url"]
  74. var external_wp_url_namespaceObject = window["wp"]["url"];
  75. ;// CONCATENATED MODULE: external ["wp","components"]
  76. var external_wp_components_namespaceObject = window["wp"]["components"];
  77. ;// CONCATENATED MODULE: external ["wp","blocks"]
  78. var external_wp_blocks_namespaceObject = window["wp"]["blocks"];
  79. ;// CONCATENATED MODULE: ./node_modules/@wordpress/server-side-render/build-module/server-side-render.js
  80. /**
  81. * External dependencies
  82. */
  83. /**
  84. * WordPress dependencies
  85. */
  86. function rendererPath(block) {
  87. let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
  88. let urlQueryArgs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  89. return (0,external_wp_url_namespaceObject.addQueryArgs)(`/wp/v2/block-renderer/${block}`, {
  90. context: 'edit',
  91. ...(null !== attributes ? {
  92. attributes
  93. } : {}),
  94. ...urlQueryArgs
  95. });
  96. }
  97. function DefaultEmptyResponsePlaceholder(_ref) {
  98. let {
  99. className
  100. } = _ref;
  101. return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Placeholder, {
  102. className: className
  103. }, (0,external_wp_i18n_namespaceObject.__)('Block rendered as empty.'));
  104. }
  105. function DefaultErrorResponsePlaceholder(_ref2) {
  106. let {
  107. response,
  108. className
  109. } = _ref2;
  110. const errorMessage = (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: error message describing the problem
  111. (0,external_wp_i18n_namespaceObject.__)('Error loading block: %s'), response.errorMsg);
  112. return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Placeholder, {
  113. className: className
  114. }, errorMessage);
  115. }
  116. function DefaultLoadingResponsePlaceholder(_ref3) {
  117. let {
  118. children,
  119. showLoader
  120. } = _ref3;
  121. return (0,external_wp_element_namespaceObject.createElement)("div", {
  122. style: {
  123. position: 'relative'
  124. }
  125. }, showLoader && (0,external_wp_element_namespaceObject.createElement)("div", {
  126. style: {
  127. position: 'absolute',
  128. top: '50%',
  129. left: '50%',
  130. marginTop: '-9px',
  131. marginLeft: '-9px'
  132. }
  133. }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Spinner, null)), (0,external_wp_element_namespaceObject.createElement)("div", {
  134. style: {
  135. opacity: showLoader ? '0.3' : 1
  136. }
  137. }, children));
  138. }
  139. function ServerSideRender(props) {
  140. const {
  141. attributes,
  142. block,
  143. className,
  144. httpMethod = 'GET',
  145. urlQueryArgs,
  146. EmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,
  147. ErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,
  148. LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder
  149. } = props;
  150. const isMountedRef = (0,external_wp_element_namespaceObject.useRef)(true);
  151. const [showLoader, setShowLoader] = (0,external_wp_element_namespaceObject.useState)(false);
  152. const fetchRequestRef = (0,external_wp_element_namespaceObject.useRef)();
  153. const [response, setResponse] = (0,external_wp_element_namespaceObject.useState)(null);
  154. const prevProps = (0,external_wp_compose_namespaceObject.usePrevious)(props);
  155. const [isLoading, setIsLoading] = (0,external_wp_element_namespaceObject.useState)(false);
  156. function fetchData() {
  157. if (!isMountedRef.current) {
  158. return;
  159. }
  160. setIsLoading(true);
  161. const sanitizedAttributes = attributes && (0,external_wp_blocks_namespaceObject.__experimentalSanitizeBlockAttributes)(block, attributes); // If httpMethod is 'POST', send the attributes in the request body instead of the URL.
  162. // This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.
  163. const isPostRequest = 'POST' === httpMethod;
  164. const urlAttributes = isPostRequest ? null : sanitizedAttributes !== null && sanitizedAttributes !== void 0 ? sanitizedAttributes : null;
  165. const path = rendererPath(block, urlAttributes, urlQueryArgs);
  166. const data = isPostRequest ? {
  167. attributes: sanitizedAttributes !== null && sanitizedAttributes !== void 0 ? sanitizedAttributes : null
  168. } : null; // Store the latest fetch request so that when we process it, we can
  169. // check if it is the current request, to avoid race conditions on slow networks.
  170. const fetchRequest = fetchRequestRef.current = external_wp_apiFetch_default()({
  171. path,
  172. data,
  173. method: isPostRequest ? 'POST' : 'GET'
  174. }).then(fetchResponse => {
  175. if (isMountedRef.current && fetchRequest === fetchRequestRef.current && fetchResponse) {
  176. setResponse(fetchResponse.rendered);
  177. }
  178. }).catch(error => {
  179. if (isMountedRef.current && fetchRequest === fetchRequestRef.current) {
  180. setResponse({
  181. error: true,
  182. errorMsg: error.message
  183. });
  184. }
  185. }).finally(() => {
  186. if (isMountedRef.current && fetchRequest === fetchRequestRef.current) {
  187. setIsLoading(false);
  188. }
  189. });
  190. return fetchRequest;
  191. }
  192. const debouncedFetchData = (0,external_wp_compose_namespaceObject.useDebounce)(fetchData, 500); // When the component unmounts, set isMountedRef to false. This will
  193. // let the async fetch callbacks know when to stop.
  194. (0,external_wp_element_namespaceObject.useEffect)(() => () => {
  195. isMountedRef.current = false;
  196. }, []);
  197. (0,external_wp_element_namespaceObject.useEffect)(() => {
  198. // Don't debounce the first fetch. This ensures that the first render
  199. // shows data as soon as possible.
  200. if (prevProps === undefined) {
  201. fetchData();
  202. } else if (!(0,external_lodash_namespaceObject.isEqual)(prevProps, props)) {
  203. debouncedFetchData();
  204. }
  205. });
  206. /**
  207. * Effect to handle showing the loading placeholder.
  208. * Show it only if there is no previous response or
  209. * the request takes more than one second.
  210. */
  211. (0,external_wp_element_namespaceObject.useEffect)(() => {
  212. if (!isLoading) {
  213. return;
  214. }
  215. const timeout = setTimeout(() => {
  216. setShowLoader(true);
  217. }, 1000);
  218. return () => clearTimeout(timeout);
  219. }, [isLoading]);
  220. const hasResponse = !!response;
  221. const hasEmptyResponse = response === '';
  222. const hasError = response === null || response === void 0 ? void 0 : response.error;
  223. if (isLoading) {
  224. return (0,external_wp_element_namespaceObject.createElement)(LoadingResponsePlaceholder, _extends({}, props, {
  225. showLoader: showLoader
  226. }), hasResponse && (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.RawHTML, {
  227. className: className
  228. }, response));
  229. }
  230. if (hasEmptyResponse || !hasResponse) {
  231. return (0,external_wp_element_namespaceObject.createElement)(EmptyResponsePlaceholder, props);
  232. }
  233. if (hasError) {
  234. return (0,external_wp_element_namespaceObject.createElement)(ErrorResponsePlaceholder, _extends({
  235. response: response
  236. }, props));
  237. }
  238. return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.RawHTML, {
  239. className: className
  240. }, response);
  241. }
  242. ;// CONCATENATED MODULE: ./node_modules/@wordpress/server-side-render/build-module/index.js
  243. /**
  244. * WordPress dependencies
  245. */
  246. /**
  247. * Internal dependencies
  248. */
  249. /**
  250. * Constants
  251. */
  252. const EMPTY_OBJECT = {};
  253. const ExportedServerSideRender = (0,external_wp_data_namespaceObject.withSelect)(select => {
  254. // FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.
  255. // It is used by blocks that can be loaded into a *non-post* block editor.
  256. // eslint-disable-next-line @wordpress/data-no-store-string-literals
  257. const coreEditorSelect = select('core/editor');
  258. if (coreEditorSelect) {
  259. const currentPostId = coreEditorSelect.getCurrentPostId(); // For templates and template parts we use a custom ID format.
  260. // Since they aren't real posts, we don't want to use their ID
  261. // for server-side rendering. Since they use a string based ID,
  262. // we can assume real post IDs are numbers.
  263. if (currentPostId && typeof currentPostId === 'number') {
  264. return {
  265. currentPostId
  266. };
  267. }
  268. }
  269. return EMPTY_OBJECT;
  270. })(_ref => {
  271. let {
  272. urlQueryArgs = EMPTY_OBJECT,
  273. currentPostId,
  274. ...props
  275. } = _ref;
  276. const newUrlQueryArgs = (0,external_wp_element_namespaceObject.useMemo)(() => {
  277. if (!currentPostId) {
  278. return urlQueryArgs;
  279. }
  280. return {
  281. post_id: currentPostId,
  282. ...urlQueryArgs
  283. };
  284. }, [currentPostId, urlQueryArgs]);
  285. return (0,external_wp_element_namespaceObject.createElement)(ServerSideRender, _extends({
  286. urlQueryArgs: newUrlQueryArgs
  287. }, props));
  288. });
  289. if (window && window.wp && window.wp.components) {
  290. window.wp.components.ServerSideRender = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
  291. external_wp_deprecated_default()('wp.components.ServerSideRender', {
  292. version: '6.2',
  293. since: '5.3',
  294. alternative: 'wp.serverSideRender'
  295. });
  296. return (0,external_wp_element_namespaceObject.createElement)(ExportedServerSideRender, _extends({}, props, {
  297. ref: ref
  298. }));
  299. });
  300. }
  301. /* harmony default export */ var build_module = (ExportedServerSideRender);
  302. (window.wp = window.wp || {}).serverSideRender = __webpack_exports__["default"];
  303. /******/ })()
  304. ;