Gutenberg / 12.1.0

Gutenberg v12.1.0

gutenberg / build / server-side-render / index.js

index.js in Gutenberg 12.1.0, at build/server-side-render/index.js

355 lines 12.2 KB

Raw Download Zip

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