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 / store / typography.js

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

308 lines 7.5 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4
5	/**
6	* WordPress dependencies
7	*/
8	import apiFetch from "@wordpress/api-fetch";
9
10	/**
11	* Internal dependencies
12	*/
13
14	/**
15	* Constants
16	*/
17
18	/**
19	* Default typography
20	*/
21	export const defaultFontFamily = {
22	body: {
23	fontFamily: "Nunito",
24	genericFamily: "sans-serif",
25	fontVariants: [],
26	},
27	headings: {
28	fontFamily: "Roboto",
29	genericFamily: "sans-serif",
30	fontVariants: [],
31	},
32	additionalFonts: [],
33	};
34
35	/**
36	* Default font combinations
37	*/
38	export const defaultFontFamilyPresets = [
39	{
40	body: { fontFamily: "Nunito", genericFamily: "sans-serif" },
41	headings: { fontFamily: "Roboto", genericFamily: "sans-serif" },
42	},
43	{
44	body: { fontFamily: "Montserrat", genericFamily: "sans-serif" },
45	headings: { fontFamily: "Oswald", genericFamily: "sans-serif" },
46	},
47	{
48	body: { fontFamily: "Merriweather", genericFamily: "serif" },
49	headings: { fontFamily: "Oswald", genericFamily: "sans-serif" },
50	},
51	{
52	body: { fontFamily: "Montserrat", genericFamily: "sans-serif" },
53	headings: { fontFamily: "Source Sans Pro", genericFamily: "sans-serif" },
54	},
55	{
56	body: { fontFamily: "Source Sans Pro", genericFamily: "sans-serif" },
57	headings: { fontFamily: "Libre Baskerville", genericFamily: "serif" },
58	},
59	{
60	body: { fontFamily: "Fauna One", genericFamily: "serif" },
61	headings: { fontFamily: "Playfair Display", genericFamily: "serif" },
62	},
63	{
64	body: { fontFamily: "Josefin Slab", genericFamily: "serif" },
65	headings: { fontFamily: "Six Caps", genericFamily: "sans-serif" },
66	},
67	{
68	body: { fontFamily: "Source Sans Pro", genericFamily: "sans-serif" },
69	headings: { fontFamily: "Playfair Display", genericFamily: "serif" },
70	},
71	{
72	body: { fontFamily: "Quattrocento", genericFamily: "serif" },
73	headings: { fontFamily: "Oswald", genericFamily: "sans-serif" },
74	},
75	{
76	body: { fontFamily: "Alice", genericFamily: "serif" },
77	headings: { fontFamily: "Sacramento", genericFamily: "cursive" },
78	},
79	{
80	body: { fontFamily: "Lato", genericFamily: "sans-serif" },
81	headings: { fontFamily: "Arvo", genericFamily: "serif" },
82	},
83	{
84	body: { fontFamily: "Poppins", genericFamily: "sans-serif" },
85	headings: { fontFamily: "Abril Fatface", genericFamily: "cursive" },
86	},
87	{
88	body: { fontFamily: "Inconsolata", genericFamily: "monospace" },
89	headings: { fontFamily: "Karla", genericFamily: "sans-serif" },
90	},
91	{
92	body: { fontFamily: "Andika", genericFamily: "sans-serif" },
93	headings: { fontFamily: "Amatic SC", genericFamily: "sans-serif" },
94	},
95	{
96	body: { fontFamily: "Lato", genericFamily: "sans-serif" },
97	headings: { fontFamily: "Lustria", genericFamily: "serif" },
98	},
99	{
100	body: { fontFamily: "Proza Libre", genericFamily: "sans-serif" },
101	headings: { fontFamily: "Cormorant Garamond", genericFamily: "serif" },
102	},
103	{
104	body: { fontFamily: "EB Garamond", genericFamily: "serif" },
105	headings: { fontFamily: "Oswald", genericFamily: "sans-serif" },
106	},
107	{
108	body: { fontFamily: "Josefin Sans", genericFamily: "sans-serif" },
109	headings: { fontFamily: "Yeseva One", genericFamily: "cursive" },
110	},
111	{
112	body: { fontFamily: "Inter", genericFamily: "sans-serif" },
113	headings: { fontFamily: "EB Garamond", genericFamily: "serif" },
114	},
115	];
116
117	/**
118	* Initial state
119	*/
120	const initialState = {
121	typography: {
122	fonts: defaultFontFamily,
123	fontsPresets: defaultFontFamilyPresets,
124	googleFonts: [],
125	},
126	postTypography: {
127	fonts: null,
128	},
129	};
130
131	export const typographySelectors = {
132	getGoogleFonts(state) {
133	return state.typography.googleFonts;
134	},
135	getTypography(state) {
136	return {
137	fonts: state.typography.fonts,
138	fontsPresets: state.typography.fontsPresets,
139	};
140	},
141	getPostTypography(state, apiPath) {
142	return {
143	fonts: state.postTypography.fonts,
144	fontsPresets: state.typography.fontsPresets,
145	};
146	},
147	};
148
149	export const typographyResolvers = {
150	getGoogleFonts() {
151	return async ({ dispatch }) => {
152	const googleFonts = await apiFetch({
153	path: "boldblocks/v1/getGoogleFonts",
154	});
155
156	if (googleFonts && googleFonts.success) {
157	dispatch({
158	type: "SET_GOOGLE_FONTS",
159	payload: googleFonts.data,
160	});
161	}
162
163	return googleFonts;
164	};
165	},
166	getTypography() {
167	return async ({ dispatch }) => {
168	const { CBBTypography } = await apiFetch({
169	path: "wp/v2/settings",
170	});
171
172	if (CBBTypography) {
173	return dispatchUpdatedFonts(CBBTypography, dispatch);
174	} else {
175	// Save default value for the first time
176	const { CBBTypography } = await apiFetch({
177	path: "wp/v2/settings",
178	method: "POST",
179	data: {
180	CBBTypography: {
181	fonts: JSON.stringify(initialState.typography.fonts),
182	},
183	},
184	});
185
186	return dispatchUpdatedFonts(CBBTypography, dispatch);
187	}
188	};
189	},
190	getPostTypography(apiPath) {
191	return async ({ dispatch }) => {
192	if (!apiPath) {
193	return;
194	}
195
196	const { meta: { CBBTypography } = {} } = await apiFetch({
197	path: apiPath,
198	});
199
200	return dispatchPostUpdatedFonts(CBBTypography, dispatch);
201	};
202	},
203	};
204
205	export const dispatchUpdatedFonts = (typography, dispatch) => {
206	if (typography && typography?.fonts) {
207	const fonts = JSON.parse(typography.fonts);
208	dispatch({
209	type: "UPDATE_FONTS",
210	payload: fonts,
211	});
212
213	return fonts;
214	}
215
216	return typography;
217	};
218
219	export const dispatchPostUpdatedFonts = (typography, dispatch) => {
220	let fonts;
221	if (typography && typography?.fonts) {
222	fonts = JSON.parse(typography.fonts);
223	}
224
225	dispatch({
226	type: "UPDATE_POST_FONTS",
227	payload: fonts,
228	});
229
230	return fonts;
231	};
232
233	export const typographyActions = {
234	updateFonts(fonts) {
235	return {
236	type: "UPDATE_FONTS",
237	payload: fonts,
238	};
239	},
240	updatePostFonts(fonts) {
241	return {
242	type: "UPDATE_POST_FONTS",
243	payload: fonts,
244	};
245	},
246	updateAndPersistFonts(stringifiedFonts) {
247	return async ({ dispatch }) => {
248	const { CBBTypography } = await apiFetch({
249	path: "wp/v2/settings",
250	method: "POST",
251	data: {
252	CBBTypography: { fonts: stringifiedFonts },
253	},
254	});
255
256	return dispatchUpdatedFonts(CBBTypography, dispatch);
257	};
258	},
259	updateAndPersistPostFonts(stringifiedFonts, apiPath) {
260	return async ({ dispatch }) => {
261	const { meta: { CBBTypography } = {} } = await apiFetch({
262	path: apiPath,
263	method: "POST",
264	data: {
265	meta: {
266	CBBTypography: { fonts: stringifiedFonts },
267	},
268	},
269	});
270
271	return dispatchPostUpdatedFonts(CBBTypography, dispatch);
272	};
273	},
274	};
275
276	export const typographyReducer = (state = initialState.typography, action) => {
277	switch (action.type) {
278	case "SET_GOOGLE_FONTS":
279	return {
280	...state,
281	googleFonts: action.payload,
282	};
283
284	case "UPDATE_FONTS":
285	return {
286	...state,
287	fonts: action.payload,
288	};
289	}
290
291	return state;
292	};
293
294	export const postTypographyReducer = (
295	state = initialState.postTypography,
296	action,
297	) => {
298	switch (action.type) {
299	case "UPDATE_POST_FONTS":
300	return {
301	...state,
302	fonts: action.payload,
303	};
304	}
305
306	return state;
307	};
308