Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts / trunk

Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts vtrunk

content-blocks-builder / src / variations / utils.js

utils.js in Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts trunk, at src/variations/utils.js

234 lines 4.9 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4
5	/**
6	* WordPress dependencies
7	*/
8	import { __, sprintf } from "@wordpress/i18n";
9	import { registerBlockVariation, serialize } from "@wordpress/blocks";
10	import apiFetch from "@wordpress/api-fetch";
11	import { useMemo } from "@wordpress/element";
12	import { addQueryArgs } from "@wordpress/url";
13
14	/**
15	* Internal dependencies
16	*/
17	import { buildTemplateFromBlocks } from "../utils/blocks";
18	import { getEditPostURL } from "../utils/posts";
19	import { shareLabels } from "../utils/shared-labels";
20
21	export const ContentAttributes = [
22	// Common fields
23	"id",
24	"content",
25	"title",
26	"text",
27	"customText",
28	"moreText",
29	"buttonText",
30	"description",
31	"slug",
32	"url",
33	"src",
34	"href",
35	"linkTo",
36	"placeholder",
37	"caption",
38	"alt",
39	"label",
40	"userId",
41	"byline",
42
43	// Gallery, image
44	"ids",
45	"images",
46	"linkDestination",
47
48	// Media text
49	"mediaAlt",
50	"mediaId",
51	"mediaUrl",
52	"mediaLink",
53	"mediaType",
54
55	// Pull quote
56	"citation",
57	"value",
58
59	// Video
60	"poster",
61	"tracks",
62	];
63
64	/**
65	* Build the meta data for variations
66	*
67	* @param {Object}
68	* @returns {Object}
69	*/
70	export const buildVariationData = ({
71	blockName,
72	variationName,
73	title,
74	block,
75	}) => {
76	const { attributes = {}, innerBlocks = [] } = block ?? {};
77
78	const variationData = {
79	blockName,
80	variation: {
81	name: variationName,
82	title,
83	attributes,
84	innerBlocks: buildTemplateFromBlocks(innerBlocks),
85	},
86	};
87
88	return variationData;
89	};
90
91	/**
92	* Create a new variation
93	*
94	* @param {Object}
95	*/
96	export const createVariation = ({
97	variationName,
98	blockName,
99	title,
100	description = "",
101	iconString = "",
102	block,
103	createSuccessNotice,
104	createErrorNotice,
105	isDefault = false,
106	doneCb,
107	finallyCb,
108	}) => {
109	// Get post content
110	const variationContent = serialize([block]);
111
112	// Build the meta data for the variation.
113	const variationData = buildVariationData({
114	blockName,
115	variationName,
116	title,
117	block,
118	});
119
120	apiFetch({
121	path: "boldblocks/v1/createVariation",
122	method: "POST",
123	data: {
124	title,
125	content: variationContent,
126	status: "publish",
127	meta: {
128	boldblocks_variation_block_name: blockName,
129	boldblocks_variation_name: variationName,
130	boldblocks_variation_data: JSON.stringify(variationData),
131	boldblocks_variation_icon: iconString,
132	boldblocks_variation_description: description,
133	boldblocks_variation_is_default: isDefault,
134	boldblocks_variation_is_transformable: true,
135	},
136	cbb_variation_nonce: CBBBlocks?.variationNonce,
137	},
138	})
139	.then((json) => {
140	const { success, data, post } = json;
141	if (success) {
142	createSuccessNotice(
143	data \|\|
144	__(
145	"Your variation has been created successfully!",
146	"content-blocks-builder",
147	),
148	{
149	type: "snackbar",
150	actions: [
151	{
152	label: sprintf(shareLabels.editItem, shareLabels.variation),
153	url: getEditPostURL(post.id),
154	},
155	],
156	},
157	);
158
159	// Register new variation
160	registerBlockVariation(blockName, variationData.variation);
161
162	if (doneCb) {
163	doneCb(post);
164	}
165	} else {
166	createErrorNotice(data \|\| "Request failed!", {
167	type: "snackbar",
168	});
169	}
170	})
171	.catch(({ data }) => {
172	createErrorNotice(data, { type: "snackbar" });
173	})
174	.finally(() => {
175	if (finallyCb) {
176	finallyCb();
177	}
178	});
179	};
180
181	/**
182	* Get CBB variations for a block name
183	*
184	* @param {string} blockName
185	* @returns {Array}
186	*/
187	export const getCBBVariations = (blockName) => {
188	const cache_key = `cbb-${blockName}`;
189	if (window?.[cache_key]) {
190	return window?.[cache_key];
191	}
192
193	if (!CBBBlocks?.variations) {
194	return [];
195	}
196
197	const allCBBVariations = CBBBlocks?.variations.filter(
198	(item) => item?.blockName === blockName,
199	);
200
201	// Cache the result
202	window[cache_key] = allCBBVariations;
203
204	return allCBBVariations;
205	};
206
207	/**
208	* Get the default variation for a block name
209	*
210	* @param {string} blockName
211	* @returns {Array}
212	*/
213	export const useDefaultVariation = (blockName) => {
214	return useMemo(() => {
215	if (!CBBBlocks?.variations \|\| !blockName) {
216	return false;
217	}
218	return CBBBlocks?.variations.find(
219	(item) => item?.isDefault && item?.blockName === blockName,
220	);
221	}, [blockName]);
222	};
223
224	/**
225	* Get the all variations URL for a block type
226	*
227	* @param {String} blockName
228	* @returns {String}
229	*/
230	export const getAllVariationsURL = (blockName) =>
231	addQueryArgs(
232	`edit.php?post_type=boldblocks_variation&filter_action=Filter&boldblocks_variation_filter_block=${blockName}`,
233	);
234