@wordpress/server-side-render 6.8.0 → 6.8.1-next.b8c8708f3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/hook.js +86 -119
- package/build/hook.js.map +7 -1
- package/build/index.js +33 -36
- package/build/index.js.map +7 -1
- package/build/server-side-render.js +78 -150
- package/build/server-side-render.js.map +7 -1
- package/build-module/hook.js +51 -109
- package/build-module/hook.js.map +7 -1
- package/build-module/index.js +9 -20
- package/build-module/index.js.map +7 -1
- package/build-module/server-side-render.js +58 -140
- package/build-module/server-side-render.js.map +7 -1
- package/package.json +19 -12
package/build/hook.js
CHANGED
|
@@ -1,27 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
Object.
|
|
5
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
var hook_exports = {};
|
|
29
|
+
__export(hook_exports, {
|
|
30
|
+
removeBlockSupportAttributes: () => removeBlockSupportAttributes,
|
|
31
|
+
rendererPath: () => rendererPath,
|
|
32
|
+
useServerSideRender: () => useServerSideRender
|
|
6
33
|
});
|
|
7
|
-
exports
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var _url = require("@wordpress/url");
|
|
14
|
-
var _blocks = require("@wordpress/blocks");
|
|
15
|
-
/**
|
|
16
|
-
* WordPress dependencies
|
|
17
|
-
*/
|
|
18
|
-
|
|
34
|
+
module.exports = __toCommonJS(hook_exports);
|
|
35
|
+
var import_compose = require("@wordpress/compose");
|
|
36
|
+
var import_element = require("@wordpress/element");
|
|
37
|
+
var import_api_fetch = __toESM(require("@wordpress/api-fetch"));
|
|
38
|
+
var import_url = require("@wordpress/url");
|
|
39
|
+
var import_blocks = require("@wordpress/blocks");
|
|
19
40
|
function rendererPath(block, attributes = null, urlQueryArgs = {}) {
|
|
20
|
-
return (0,
|
|
21
|
-
context:
|
|
22
|
-
...
|
|
23
|
-
attributes
|
|
24
|
-
} : {}),
|
|
41
|
+
return (0, import_url.addQueryArgs)(`/wp/v2/block-renderer/${block}`, {
|
|
42
|
+
context: "edit",
|
|
43
|
+
...null !== attributes ? { attributes } : {},
|
|
25
44
|
...urlQueryArgs
|
|
26
45
|
});
|
|
27
46
|
}
|
|
@@ -50,116 +69,58 @@ function removeBlockSupportAttributes(attributes) {
|
|
|
50
69
|
style: restStyles
|
|
51
70
|
};
|
|
52
71
|
}
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* @typedef {Object} ServerSideRenderResponse
|
|
56
|
-
* @property {string} status - The current request status: 'idle', 'loading', 'success', or 'error'.
|
|
57
|
-
* @property {string} [content] - The rendered block content (available when status is 'success').
|
|
58
|
-
* @property {string} [error] - The error message (available when status is 'error').
|
|
59
|
-
*/
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* A hook for server-side rendering a preview of dynamic blocks to display in the editor.
|
|
63
|
-
*
|
|
64
|
-
* Handles fetching server-rendered previews for blocks, managing loading states,
|
|
65
|
-
* and automatically debouncing requests to prevent excessive API calls. It supports both
|
|
66
|
-
* GET and POST requests, with POST requests used for larger attribute payloads.
|
|
67
|
-
*
|
|
68
|
-
* @example
|
|
69
|
-
* Basic usage:
|
|
70
|
-
*
|
|
71
|
-
* ```jsx
|
|
72
|
-
* import { RawHTML } from '@wordpress/element';
|
|
73
|
-
* import { useServerSideRender } from '@wordpress/server-side-render';
|
|
74
|
-
*
|
|
75
|
-
* function MyServerSideRender( { attributes, block } ) {
|
|
76
|
-
* const { content, status, error } = useServerSideRender( {
|
|
77
|
-
* attributes,
|
|
78
|
-
* block,
|
|
79
|
-
* } );
|
|
80
|
-
*
|
|
81
|
-
* if ( status === 'loading' ) {
|
|
82
|
-
* return <div>Loading...</div>;
|
|
83
|
-
* }
|
|
84
|
-
*
|
|
85
|
-
* if ( status === 'error' ) {
|
|
86
|
-
* return <div>Error: { error }</div>;
|
|
87
|
-
* }
|
|
88
|
-
*
|
|
89
|
-
* return <RawHTML>{ content }</RawHTML>;
|
|
90
|
-
* }
|
|
91
|
-
* ```
|
|
92
|
-
*
|
|
93
|
-
* @param {Object} args The hook configuration object.
|
|
94
|
-
* @param {Object} args.attributes The block attributes to be sent to the server for rendering.
|
|
95
|
-
* @param {string} args.block The identifier of the block to be serverside rendered. Example: 'core/archives'.
|
|
96
|
-
* @param {boolean} [args.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.
|
|
97
|
-
* @param {string} [args.httpMethod='GET'] The HTTP method to use ('GET' or 'POST'). Default is 'GET'.
|
|
98
|
-
* @param {Object} [args.urlQueryArgs] Additional query arguments to append to the request URL.
|
|
99
|
-
*
|
|
100
|
-
* @return {ServerSideRenderResponse} The server-side render response object.
|
|
101
|
-
*/
|
|
102
72
|
function useServerSideRender(args) {
|
|
103
|
-
|
|
104
|
-
const
|
|
105
|
-
status: 'idle'
|
|
106
|
-
});
|
|
107
|
-
const shouldDebounceRef = (0, _element.useRef)(false);
|
|
73
|
+
const [response, setResponse] = (0, import_element.useState)({ status: "idle" });
|
|
74
|
+
const shouldDebounceRef = (0, import_element.useRef)(false);
|
|
108
75
|
const {
|
|
109
76
|
attributes,
|
|
110
77
|
block,
|
|
111
78
|
skipBlockSupportAttributes = false,
|
|
112
|
-
httpMethod =
|
|
79
|
+
httpMethod = "GET",
|
|
113
80
|
urlQueryArgs
|
|
114
81
|
} = args;
|
|
115
|
-
let sanitizedAttributes = attributes && (0,
|
|
82
|
+
let sanitizedAttributes = attributes && (0, import_blocks.__experimentalSanitizeBlockAttributes)(block, attributes);
|
|
116
83
|
if (skipBlockSupportAttributes) {
|
|
117
84
|
sanitizedAttributes = removeBlockSupportAttributes(sanitizedAttributes);
|
|
118
85
|
}
|
|
119
|
-
|
|
120
|
-
// If httpMethod is 'POST', send the attributes in the request body instead of the URL.
|
|
121
|
-
// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.
|
|
122
|
-
const isPostRequest = 'POST' === httpMethod;
|
|
86
|
+
const isPostRequest = "POST" === httpMethod;
|
|
123
87
|
const urlAttributes = isPostRequest ? null : sanitizedAttributes;
|
|
124
88
|
const path = rendererPath(block, urlAttributes, urlQueryArgs);
|
|
125
|
-
const body = isPostRequest ? JSON.stringify({
|
|
126
|
-
|
|
127
|
-
}) : undefined;
|
|
128
|
-
(0, _element.useEffect)(() => {
|
|
89
|
+
const body = isPostRequest ? JSON.stringify({ attributes: sanitizedAttributes ?? null }) : void 0;
|
|
90
|
+
(0, import_element.useEffect)(() => {
|
|
129
91
|
const controller = new AbortController();
|
|
130
|
-
const debouncedFetch = (0,
|
|
131
|
-
{
|
|
132
|
-
|
|
133
|
-
status:
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
92
|
+
const debouncedFetch = (0, import_compose.debounce)(
|
|
93
|
+
function() {
|
|
94
|
+
{
|
|
95
|
+
setResponse({ status: "loading" });
|
|
96
|
+
(0, import_api_fetch.default)({
|
|
97
|
+
path,
|
|
98
|
+
method: isPostRequest ? "POST" : "GET",
|
|
99
|
+
body,
|
|
100
|
+
headers: isPostRequest ? {
|
|
101
|
+
"Content-Type": "application/json"
|
|
102
|
+
} : {},
|
|
103
|
+
signal: controller.signal
|
|
104
|
+
}).then((res) => {
|
|
105
|
+
setResponse({
|
|
106
|
+
status: "success",
|
|
107
|
+
content: res ? res.rendered : ""
|
|
108
|
+
});
|
|
109
|
+
}).catch((error) => {
|
|
110
|
+
if (error.name === "AbortError") {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
setResponse({
|
|
114
|
+
status: "error",
|
|
115
|
+
error: error.message
|
|
116
|
+
});
|
|
117
|
+
}).finally(() => {
|
|
118
|
+
shouldDebounceRef.current = true;
|
|
147
119
|
});
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
}
|
|
153
|
-
setResponse({
|
|
154
|
-
status: 'error',
|
|
155
|
-
error: error.message
|
|
156
|
-
});
|
|
157
|
-
}).finally(() => {
|
|
158
|
-
// Debounce requests after first fetch.
|
|
159
|
-
shouldDebounceRef.current = true;
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
}, shouldDebounceRef.current ? 500 : 0);
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
shouldDebounceRef.current ? 500 : 0
|
|
123
|
+
);
|
|
163
124
|
debouncedFetch();
|
|
164
125
|
return () => {
|
|
165
126
|
controller.abort();
|
|
@@ -168,4 +129,10 @@ function useServerSideRender(args) {
|
|
|
168
129
|
}, [path, isPostRequest, body]);
|
|
169
130
|
return response;
|
|
170
131
|
}
|
|
171
|
-
|
|
132
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
133
|
+
0 && (module.exports = {
|
|
134
|
+
removeBlockSupportAttributes,
|
|
135
|
+
rendererPath,
|
|
136
|
+
useServerSideRender
|
|
137
|
+
});
|
|
138
|
+
//# sourceMappingURL=hook.js.map
|
package/build/hook.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/hook.js"],
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyB;AACzB,qBAA4C;AAC5C,uBAAqB;AACrB,iBAA6B;AAC7B,oBAAsD;AAE/C,SAAS,aAAc,OAAO,aAAa,MAAM,eAAe,CAAC,GAAI;AAC3E,aAAO,yBAAc,yBAA0B,KAAM,IAAI;AAAA,IACxD,SAAS;AAAA,IACT,GAAK,SAAS,aAAa,EAAE,WAAW,IAAI,CAAC;AAAA,IAC7C,GAAG;AAAA,EACJ,CAAE;AACH;AAEO,SAAS,6BAA8B,YAAa;AAC1D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI;AAEJ,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,IAAI,YAAY,SAAS,CAAC;AAE1B,SAAO;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,EACR;AACD;AAkDO,SAAS,oBAAqB,MAAO;AAC3C,QAAM,CAAE,UAAU,WAAY,QAAI,yBAAU,EAAE,QAAQ,OAAO,CAAE;AAC/D,QAAM,wBAAoB,uBAAQ,KAAM;AAExC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,6BAA6B;AAAA,IAC7B,aAAa;AAAA,IACb;AAAA,EACD,IAAI;AAEJ,MAAI,sBACH,kBACA,qDAAuC,OAAO,UAAW;AAE1D,MAAK,4BAA6B;AACjC,0BACC,6BAA8B,mBAAoB;AAAA,EACpD;AAIA,QAAM,gBAAgB,WAAW;AACjC,QAAM,gBAAgB,gBAAgB,OAAO;AAC7C,QAAM,OAAO,aAAc,OAAO,eAAe,YAAa;AAC9D,QAAM,OAAO,gBACV,KAAK,UAAW,EAAE,YAAY,uBAAuB,KAAK,CAAE,IAC5D;AAEH,gCAAW,MAAM;AAChB,UAAM,aAAa,IAAI,gBAAgB;AACvC,UAAM,qBAAiB;AAAA,MACtB,WAAY;AACX;AACC,sBAAa,EAAE,QAAQ,UAAU,CAAE;AAEnC,+BAAAA,SAAU;AAAA,YACT;AAAA,YACA,QAAQ,gBAAgB,SAAS;AAAA,YACjC;AAAA,YACA,SAAS,gBACN;AAAA,cACA,gBAAgB;AAAA,YAChB,IACA,CAAC;AAAA,YACJ,QAAQ,WAAW;AAAA,UACpB,CAAE,EACA,KAAM,CAAE,QAAS;AACjB,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,MAAM,IAAI,WAAW;AAAA,YAC/B,CAAE;AAAA,UACH,CAAE,EACD,MAAO,CAAE,UAAW;AAEpB,gBAAK,MAAM,SAAS,cAAe;AAClC;AAAA,YACD;AAEA,wBAAa;AAAA,cACZ,QAAQ;AAAA,cACR,OAAO,MAAM;AAAA,YACd,CAAE;AAAA,UACH,CAAE,EACD,QAAS,MAAM;AAEf,8BAAkB,UAAU;AAAA,UAC7B,CAAE;AAAA,QACJ;AAAA,MACD;AAAA,MACA,kBAAkB,UAAU,MAAM;AAAA,IACnC;AAEA,mBAAe;AAEf,WAAO,MAAM;AACZ,iBAAW,MAAM;AACjB,qBAAe,OAAO;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,MAAM,eAAe,IAAK,CAAE;AAEjC,SAAO;AACR;",
|
|
6
|
+
"names": ["apiFetch"]
|
|
7
|
+
}
|
package/build/index.js
CHANGED
|
@@ -1,39 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
14
|
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var index_exports = {};
|
|
19
|
+
__export(index_exports, {
|
|
20
|
+
ServerSideRender: () => import_server_side_render.ServerSideRenderWithPostId,
|
|
21
|
+
default: () => index_default,
|
|
22
|
+
useServerSideRender: () => import_hook.useServerSideRender
|
|
11
23
|
});
|
|
12
|
-
exports
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
24
|
+
module.exports = __toCommonJS(index_exports);
|
|
25
|
+
var import_server_side_render = require("./server-side-render");
|
|
26
|
+
var import_hook = require("./hook");
|
|
27
|
+
const ServerSideRenderCompat = import_server_side_render.ServerSideRenderWithPostId;
|
|
28
|
+
ServerSideRenderCompat.ServerSideRender = import_server_side_render.ServerSideRenderWithPostId;
|
|
29
|
+
ServerSideRenderCompat.useServerSideRender = import_hook.useServerSideRender;
|
|
30
|
+
var index_default = ServerSideRenderCompat;
|
|
31
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
32
|
+
0 && (module.exports = {
|
|
33
|
+
ServerSideRender,
|
|
34
|
+
useServerSideRender
|
|
18
35
|
});
|
|
19
|
-
|
|
20
|
-
var _hook = require("./hook");
|
|
21
|
-
/**
|
|
22
|
-
* Internal dependencies
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* A compatibility layer for the `ServerSideRender` component when used with `wp` global namespace.
|
|
27
|
-
*
|
|
28
|
-
* @deprecated Use `ServerSideRender` non-default export instead.
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* ```js
|
|
32
|
-
* import ServerSideRender from '@wordpress/server-side-render';
|
|
33
|
-
* ```
|
|
34
|
-
*/
|
|
35
|
-
const ServerSideRenderCompat = _serverSideRender.ServerSideRenderWithPostId;
|
|
36
|
-
ServerSideRenderCompat.ServerSideRender = _serverSideRender.ServerSideRenderWithPostId;
|
|
37
|
-
ServerSideRenderCompat.useServerSideRender = _hook.useServerSideRender;
|
|
38
|
-
var _default = exports.default = ServerSideRenderCompat;
|
|
39
|
-
//# sourceMappingURL=index.js.map
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
package/build/index.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/index.js"],
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gCAA2C;AAC3C,kBAAoC;AAYpC,MAAM,yBAAyB;AAC/B,uBAAuB,mBAAmB;AAC1C,uBAAuB,sBAAsB;AAI7C,IAAO,gBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,79 +1,71 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.
|
|
4
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var server_side_render_exports = {};
|
|
19
|
+
__export(server_side_render_exports, {
|
|
20
|
+
ServerSideRender: () => ServerSideRender,
|
|
21
|
+
ServerSideRenderWithPostId: () => ServerSideRenderWithPostId
|
|
5
22
|
});
|
|
6
|
-
exports
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
-
/**
|
|
15
|
-
* WordPress dependencies
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Internal dependencies
|
|
20
|
-
*/
|
|
21
|
-
|
|
23
|
+
module.exports = __toCommonJS(server_side_render_exports);
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_element = require("@wordpress/element");
|
|
26
|
+
var import_i18n = require("@wordpress/i18n");
|
|
27
|
+
var import_components = require("@wordpress/components");
|
|
28
|
+
var import_data = require("@wordpress/data");
|
|
29
|
+
var import_hook = require("./hook");
|
|
22
30
|
const EMPTY_OBJECT = {};
|
|
23
|
-
function DefaultEmptyResponsePlaceholder({
|
|
24
|
-
className
|
|
25
|
-
}) {
|
|
26
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
|
|
27
|
-
className: className,
|
|
28
|
-
children: (0, _i18n.__)('Block rendered as empty.')
|
|
29
|
-
});
|
|
31
|
+
function DefaultEmptyResponsePlaceholder({ className }) {
|
|
32
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Placeholder, { className, children: (0, import_i18n.__)("Block rendered as empty.") });
|
|
30
33
|
}
|
|
31
|
-
function DefaultErrorResponsePlaceholder({
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
(0,
|
|
38
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
|
|
39
|
-
className: className,
|
|
40
|
-
children: errorMessage
|
|
41
|
-
});
|
|
34
|
+
function DefaultErrorResponsePlaceholder({ message, className }) {
|
|
35
|
+
const errorMessage = (0, import_i18n.sprintf)(
|
|
36
|
+
// translators: %s: error message describing the problem
|
|
37
|
+
(0, import_i18n.__)("Error loading block: %s"),
|
|
38
|
+
message
|
|
39
|
+
);
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Placeholder, { className, children: errorMessage });
|
|
42
41
|
}
|
|
43
|
-
function DefaultLoadingResponsePlaceholder({
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
const [showLoader, setShowLoader] = (0, _element.useState)(false);
|
|
47
|
-
(0, _element.useEffect)(() => {
|
|
48
|
-
// Schedule showing the Spinner after 1 second.
|
|
42
|
+
function DefaultLoadingResponsePlaceholder({ children }) {
|
|
43
|
+
const [showLoader, setShowLoader] = (0, import_element.useState)(false);
|
|
44
|
+
(0, import_element.useEffect)(() => {
|
|
49
45
|
const timeout = setTimeout(() => {
|
|
50
46
|
setShowLoader(true);
|
|
51
|
-
},
|
|
47
|
+
}, 1e3);
|
|
52
48
|
return () => clearTimeout(timeout);
|
|
53
49
|
}, []);
|
|
54
|
-
return
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
},
|
|
71
|
-
children: children
|
|
72
|
-
})]
|
|
73
|
-
});
|
|
50
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
|
|
51
|
+
showLoader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
style: {
|
|
55
|
+
position: "absolute",
|
|
56
|
+
top: "50%",
|
|
57
|
+
left: "50%",
|
|
58
|
+
marginTop: "-9px",
|
|
59
|
+
marginLeft: "-9px"
|
|
60
|
+
},
|
|
61
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { opacity: showLoader ? "0.3" : 1 }, children })
|
|
65
|
+
] });
|
|
74
66
|
}
|
|
75
67
|
function ServerSideRender(props) {
|
|
76
|
-
const prevContentRef = (0,
|
|
68
|
+
const prevContentRef = (0, import_element.useRef)("");
|
|
77
69
|
const {
|
|
78
70
|
className,
|
|
79
71
|
EmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,
|
|
@@ -81,98 +73,32 @@ function ServerSideRender(props) {
|
|
|
81
73
|
LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,
|
|
82
74
|
...restProps
|
|
83
75
|
} = props;
|
|
84
|
-
const {
|
|
85
|
-
|
|
86
|
-
status,
|
|
87
|
-
error
|
|
88
|
-
} = (0, _hook.useServerSideRender)(restProps);
|
|
89
|
-
|
|
90
|
-
// Store the previous successful HTML response to show while loading.
|
|
91
|
-
(0, _element.useEffect)(() => {
|
|
76
|
+
const { content, status, error } = (0, import_hook.useServerSideRender)(restProps);
|
|
77
|
+
(0, import_element.useEffect)(() => {
|
|
92
78
|
if (content) {
|
|
93
79
|
prevContentRef.current = content;
|
|
94
80
|
}
|
|
95
81
|
}, [content]);
|
|
96
|
-
if (status ===
|
|
97
|
-
return
|
|
98
|
-
...props,
|
|
99
|
-
children: !!prevContentRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
|
|
100
|
-
className: className,
|
|
101
|
-
children: prevContentRef.current
|
|
102
|
-
})
|
|
103
|
-
});
|
|
82
|
+
if (status === "loading") {
|
|
83
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingResponsePlaceholder, { ...props, children: !!prevContentRef.current && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_element.RawHTML, { className, children: prevContentRef.current }) });
|
|
104
84
|
}
|
|
105
|
-
if (status ===
|
|
106
|
-
return
|
|
107
|
-
...props
|
|
108
|
-
});
|
|
85
|
+
if (status === "success" && !content) {
|
|
86
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyResponsePlaceholder, { ...props });
|
|
109
87
|
}
|
|
110
|
-
if (status ===
|
|
111
|
-
return
|
|
112
|
-
message: error,
|
|
113
|
-
...props
|
|
114
|
-
});
|
|
88
|
+
if (status === "error") {
|
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorResponsePlaceholder, { message: error, ...props });
|
|
115
90
|
}
|
|
116
|
-
return
|
|
117
|
-
className: className,
|
|
118
|
-
children: content
|
|
119
|
-
});
|
|
91
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_element.RawHTML, { className, children: content });
|
|
120
92
|
}
|
|
121
|
-
|
|
122
|
-
/**
|
|
123
|
-
* A component that renders server-side content for blocks.
|
|
124
|
-
*
|
|
125
|
-
* Note: URL query will include the current post ID when applicable.
|
|
126
|
-
* This is useful for blocks that depend on the context of the current post for rendering.
|
|
127
|
-
*
|
|
128
|
-
* @example
|
|
129
|
-
* ```jsx
|
|
130
|
-
* import { ServerSideRender } from '@wordpress/server-side-render';
|
|
131
|
-
* // Legacy import for WordPress 6.8 and earlier
|
|
132
|
-
* // import { default as ServerSideRender } from '@wordpress/server-side-render';
|
|
133
|
-
*
|
|
134
|
-
* function Example() {
|
|
135
|
-
* return (
|
|
136
|
-
* <ServerSideRender
|
|
137
|
-
* block="core/archives"
|
|
138
|
-
* attributes={ { showPostCounts: true } }
|
|
139
|
-
* urlQueryArgs={ { customArg: 'value' } }
|
|
140
|
-
* className="custom-class"
|
|
141
|
-
* />
|
|
142
|
-
* );
|
|
143
|
-
* }
|
|
144
|
-
* ```
|
|
145
|
-
*
|
|
146
|
-
* @param {Object} props Component props.
|
|
147
|
-
* @param {string} props.block The identifier of the block to be serverside rendered.
|
|
148
|
-
* @param {Object} props.attributes The block attributes to be sent to the server for rendering.
|
|
149
|
-
* @param {string} [props.className] Additional classes to apply to the wrapper element.
|
|
150
|
-
* @param {string} [props.httpMethod='GET'] The HTTP method to use ('GET' or 'POST'). Default is 'GET'
|
|
151
|
-
* @param {Object} [props.urlQueryArgs] Additional query arguments to append to the request URL.
|
|
152
|
-
* @param {boolean} [props.skipBlockSupportAttributes=false] Whether to remove block support attributes before sending.
|
|
153
|
-
* @param {Function} [props.EmptyResponsePlaceholder] Component rendered when the API response is empty.
|
|
154
|
-
* @param {Function} [props.ErrorResponsePlaceholder] Component rendered when the API response is an error.
|
|
155
|
-
* @param {Function} [props.LoadingResponsePlaceholder] Component rendered while the API request is loading.
|
|
156
|
-
*
|
|
157
|
-
* @return {JSX.Element} The rendered server-side content.
|
|
158
|
-
*/
|
|
159
93
|
function ServerSideRenderWithPostId({
|
|
160
94
|
urlQueryArgs = EMPTY_OBJECT,
|
|
161
95
|
...props
|
|
162
96
|
}) {
|
|
163
|
-
const currentPostId = (0,
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
// eslint-disable-next-line @wordpress/data-no-store-string-literals
|
|
167
|
-
const postId = select('core/editor')?.getCurrentPostId();
|
|
168
|
-
|
|
169
|
-
// For templates and template parts we use a custom ID format.
|
|
170
|
-
// Since they aren't real posts, we don't want to use their ID
|
|
171
|
-
// for server-side rendering. Since they use a string based ID,
|
|
172
|
-
// we can assume real post IDs are numbers.
|
|
173
|
-
return postId && typeof postId === 'number' ? postId : null;
|
|
97
|
+
const currentPostId = (0, import_data.useSelect)((select) => {
|
|
98
|
+
const postId = select("core/editor")?.getCurrentPostId();
|
|
99
|
+
return postId && typeof postId === "number" ? postId : null;
|
|
174
100
|
}, []);
|
|
175
|
-
const newUrlQueryArgs = (0,
|
|
101
|
+
const newUrlQueryArgs = (0, import_element.useMemo)(() => {
|
|
176
102
|
if (!currentPostId) {
|
|
177
103
|
return urlQueryArgs;
|
|
178
104
|
}
|
|
@@ -181,9 +107,11 @@ function ServerSideRenderWithPostId({
|
|
|
181
107
|
...urlQueryArgs
|
|
182
108
|
};
|
|
183
109
|
}, [currentPostId, urlQueryArgs]);
|
|
184
|
-
return
|
|
185
|
-
urlQueryArgs: newUrlQueryArgs,
|
|
186
|
-
...props
|
|
187
|
-
});
|
|
110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ServerSideRender, { urlQueryArgs: newUrlQueryArgs, ...props });
|
|
188
111
|
}
|
|
189
|
-
|
|
112
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
113
|
+
0 && (module.exports = {
|
|
114
|
+
ServerSideRender,
|
|
115
|
+
ServerSideRenderWithPostId
|
|
116
|
+
});
|
|
117
|
+
//# sourceMappingURL=server-side-render.js.map
|