BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5

betterdocs / react-src / gutenberg / blocks / category-slate-layout / src / style.js

style.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/category-slate-layout/src/style.js

394 lines 14.2 KB

Raw Download Zip

1	import { useEffect } from "@wordpress/element";
2	import { select } from "@wordpress/data";
3
4	import {
5	generateDimensionsControlStyles,
6	generateTypographyStyles,
7	generateBackgroundControlStyles,
8	generateBorderShadowStyles,
9	generateResponsiveRangeStyles,
10	duplicateBlockIdFix,
11	softMinifyCssStrings,
12	isCssExists
13	} from "../../../util/helpers";
14
15	import { usePreviewDeviceType } from '../../../hooks';
16
17	import {
18	CONTAINER_MARGIN,
19	CONTAINER_PADDING,
20	CONTAINER_BACKGROUND,
21	GRID_MARGIN,
22	GRID_PADDING,
23	GRID_BACKGROUND,
24	GRID_BORDER,
25	GRID_COLUMNS,
26	GRID_SPACE,
27	TITLE_MARGIN,
28	TITLE_PADDING,
29	TITLE_BACKGROUND,
30	TITLE_BORDER,
31	LIST_MARGIN,
32	LIST_PADDING,
33	LIST_BACKGROUND,
34	LIST_BORDER,
35	} from './constants';
36
37	import {
38	TITLE_TYPOGRAPHY,
39	LIST_TYPOGRAPHY,
40	} from './typographyPrefixConstants';
41
42	const Style = ({ attributes, setAttributes, clientId }) => {
43	const {
44	blockId,
45	blockMeta,
46	resOption,
47	// Layout Options
48	gridColumns,
49	gridSpace,
50	// Colors
51	titleColor,
52	titleHoverColor,
53	listColor,
54	listHoverColor,
55	// Background Colors (for backward compatibility)
56	containerBgColor,
57	gridBgColor,
58	} = attributes;
59
60	// Generate container styles
61	const { dimensionStylesDesktop: containerMarginDesk, dimensionStylesMobile: containerMarginMob, dimensionStylesTab: containerMarginTab } = generateDimensionsControlStyles({
62	controlName: CONTAINER_MARGIN,
63	styleFor: 'margin',
64	attributes
65	});
66
67	const { dimensionStylesDesktop: containerPaddingDesk, dimensionStylesMobile: containerPaddingMob, dimensionStylesTab: containerPaddingTab } = generateDimensionsControlStyles({
68	controlName: CONTAINER_PADDING,
69	styleFor: 'padding',
70	attributes
71	});
72
73	const { backgroundStylesDesktop: containerBgDesk, backgroundStylesTab: containerBgTab, backgroundStylesMobile: containerBgMob } = generateBackgroundControlStyles({
74	attributes,
75	controlName: CONTAINER_BACKGROUND,
76	});
77
78	// Generate grid styles
79	const { dimensionStylesDesktop: gridMarginDesk, dimensionStylesMobile: gridMarginMob, dimensionStylesTab: gridMarginTab } = generateDimensionsControlStyles({
80	controlName: GRID_MARGIN,
81	styleFor: 'margin',
82	attributes
83	});
84
85	const { dimensionStylesDesktop: gridPaddingDesk, dimensionStylesMobile: gridPaddingMob, dimensionStylesTab: gridPaddingTab } = generateDimensionsControlStyles({
86	controlName: GRID_PADDING,
87	styleFor: 'padding',
88	attributes
89	});
90
91	const { backgroundStylesDesktop: gridBgDesk, backgroundStylesTab: gridBgTab, backgroundStylesMobile: gridBgMob } = generateBackgroundControlStyles({
92	attributes,
93	controlName: GRID_BACKGROUND,
94	});
95
96	const { stylesDesktop: gridBorderDesk, stylesTab: gridBorderTab, stylesMobile: gridBorderMob } = generateBorderShadowStyles({
97	controlName: GRID_BORDER,
98	attributes,
99	});
100
101
102
103	// Generate responsive range styles for grid space
104	const { rangeStylesDesktop: gridSpaceDesk, rangeStylesTab: gridSpaceTab, rangeStylesMobile: gridSpaceMob } = generateResponsiveRangeStyles({
105	controlName: GRID_SPACE,
106	property: 'gap',
107	attributes,
108	customUnit: 'px',
109	});
110
111	// Generate grid columns styles manually
112	const gridColumnsRange = attributes[`${GRID_COLUMNS}Range`] \|\| 3;
113	const tabGridColumnsRange = attributes[`TAB${GRID_COLUMNS}Range`] \|\| gridColumnsRange;
114	const mobGridColumnsRange = attributes[`MOB${GRID_COLUMNS}Range`] \|\| gridColumnsRange;
115
116	const gridColumnsDesk = gridColumnsRange ? `grid-template-columns: repeat(${gridColumnsRange}, 1fr);` : '';
117	const gridColumnsTab = tabGridColumnsRange ? `grid-template-columns: repeat(${tabGridColumnsRange}, 1fr);` : '';
118	const gridColumnsMob = mobGridColumnsRange ? `grid-template-columns: repeat(${mobGridColumnsRange}, 1fr);` : '';
119
120	// Generate title styles
121	const { typoStylesDesktop: titleTypoDesk, typoStylesTab: titleTypoTab, typoStylesMobile: titleTypoMob } = generateTypographyStyles({
122	attributes,
123	prefixConstant: TITLE_TYPOGRAPHY,
124	});
125
126	const { dimensionStylesDesktop: titleMarginDesk, dimensionStylesMobile: titleMarginMob, dimensionStylesTab: titleMarginTab } = generateDimensionsControlStyles({
127	controlName: TITLE_MARGIN,
128	styleFor: 'margin',
129	attributes
130	});
131
132	const { dimensionStylesDesktop: titlePaddingDesk, dimensionStylesMobile: titlePaddingMob, dimensionStylesTab: titlePaddingTab } = generateDimensionsControlStyles({
133	controlName: TITLE_PADDING,
134	styleFor: 'padding',
135	attributes
136	});
137
138	const { backgroundStylesDesktop: titleBgDesk, backgroundStylesTab: titleBgTab, backgroundStylesMobile: titleBgMob } = generateBackgroundControlStyles({
139	attributes,
140	controlName: TITLE_BACKGROUND,
141	});
142
143	const { stylesDesktop: titleBorderDesk, stylesTab: titleBorderTab, stylesMobile: titleBorderMob } = generateBorderShadowStyles({
144	controlName: TITLE_BORDER,
145	attributes,
146	});
147
148	// Generate list styles
149	const { typoStylesDesktop: listTypoDesk, typoStylesTab: listTypoTab, typoStylesMobile: listTypoMob } = generateTypographyStyles({
150	attributes,
151	prefixConstant: LIST_TYPOGRAPHY,
152	});
153
154	const { dimensionStylesDesktop: listMarginDesk, dimensionStylesMobile: listMarginMob, dimensionStylesTab: listMarginTab } = generateDimensionsControlStyles({
155	controlName: LIST_MARGIN,
156	styleFor: 'margin',
157	attributes
158	});
159
160	const { dimensionStylesDesktop: listPaddingDesk, dimensionStylesMobile: listPaddingMob, dimensionStylesTab: listPaddingTab } = generateDimensionsControlStyles({
161	controlName: LIST_PADDING,
162	styleFor: 'padding',
163	attributes
164	});
165
166	const { backgroundStylesDesktop: listBgDesk, backgroundStylesTab: listBgTab, backgroundStylesMobile: listBgMob } = generateBackgroundControlStyles({
167	attributes,
168	controlName: LIST_BACKGROUND,
169	});
170
171	const { stylesDesktop: listBorderDesk, stylesTab: listBorderTab, stylesMobile: listBorderMob } = generateBorderShadowStyles({
172	controlName: LIST_BORDER,
173	attributes,
174	});
175
176	// Generate CSS styles
177	const desktopStyles = `
178	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-grid-inner-wrapper {
179	${containerMarginDesk \|\| ''}
180	${containerPaddingDesk \|\| ''}
181	${containerBgDesk \|\| ''}
182	${containerBgColor ? `background-color: ${containerBgColor};` : ''}
183	}
184
185	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-grid-inner-wrapper.layout-flex {
186	display: grid;
187	${gridSpaceDesk \|\| ''}
188	}
189
190	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-grid-inner-wrapper.layout-flex {
191	${gridColumnsDesk \|\| ''}
192	}
193
194	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper {
195	${gridMarginDesk \|\| ''}
196	${gridPaddingDesk \|\| ''}
197	${gridBgDesk \|\| ''}
198	${gridBorderDesk \|\| ''}
199	${gridBgColor ? `background-color: ${gridBgColor};` : ''}
200	}
201
202	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title:not(:has(a)),
203	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title a {
204	${titleTypoDesk \|\| ''}
205	${titleMarginDesk \|\| ''}
206	${titlePaddingDesk \|\| ''}
207	${titleBgDesk \|\| ''}
208	${titleBorderDesk \|\| ''}
209	${titleColor ? `color: ${titleColor};` : ''}
210	}
211
212	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title:not(:has(a)):hover,
213	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title a:hover {
214	${titleHoverColor ? `color: ${titleHoverColor};` : ''}
215	}
216
217	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper .betterdocs-articles-list {
218	${listMarginDesk \|\| ''}
219	${listPaddingDesk \|\| ''}
220	${listBgDesk \|\| ''}
221	${listBorderDesk \|\| ''}
222	}
223
224	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper .betterdocs-articles-list li {
225	${listTypoDesk \|\| ''}
226	}
227
228	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper .betterdocs-articles-list li a {
229	${listColor ? `color: ${listColor};` : ''}
230	}
231
232	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper .betterdocs-articles-list li a:hover {
233	${listHoverColor ? `color: ${listHoverColor};` : ''}
234	}
235
236
237	`;
238
239	const tabStyles = `
240	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-grid-inner-wrapper {
241	${containerMarginTab \|\| ''}
242	${containerPaddingTab \|\| ''}
243	${containerBgTab \|\| ''}
244	}
245
246	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-grid-inner-wrapper.layout-flex {
247	display: grid;
248	${gridSpaceTab \|\| ''}
249	}
250
251	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-grid-inner-wrapper.layout-flex {
252	${gridColumnsTab \|\| ''}
253	}
254
255	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper {
256	${gridMarginTab \|\| ''}
257	${gridPaddingTab \|\| ''}
258	${gridBgTab \|\| ''}
259	${gridBorderTab \|\| ''}
260	}
261
262	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title:not(:has(a)),
263	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title a {
264	${titleTypoTab \|\| ''}
265	${titleMarginTab \|\| ''}
266	${titlePaddingTab \|\| ''}
267	${titleBgTab \|\| ''}
268	${titleBorderTab \|\| ''}
269	}
270
271	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper .betterdocs-articles-list {
272	${listMarginTab \|\| ''}
273	${listPaddingTab \|\| ''}
274	${listBgTab \|\| ''}
275	${listBorderTab \|\| ''}
276	}
277
278	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper .betterdocs-articles-list li {
279	${listTypoTab \|\| ''}
280	}
281	`;
282
283	const mobileStyles = `
284	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-grid-inner-wrapper {
285	${containerMarginMob \|\| ''}
286	${containerPaddingMob \|\| ''}
287	${containerBgMob \|\| ''}
288	}
289
290	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-grid-inner-wrapper.layout-flex {
291	display: grid;
292	${gridSpaceMob \|\| ''}
293	}
294
295	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-grid-inner-wrapper.layout-flex {
296	${gridColumnsMob \|\| ''}
297	}
298
299	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper {
300	${gridMarginMob \|\| ''}
301	${gridPaddingMob \|\| ''}
302	${gridBgMob \|\| ''}
303	${gridBorderMob \|\| ''}
304	}
305
306	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title:not(:has(a)),
307	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title a {
308	${titleTypoMob \|\| ''}
309	${titleMarginMob \|\| ''}
310	${titlePaddingMob \|\| ''}
311	${titleBgMob \|\| ''}
312	${titleBorderMob \|\| ''}
313	}
314
315	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper .betterdocs-articles-list {
316	${listMarginMob \|\| ''}
317	${listPaddingMob \|\| ''}
318	${listBgMob \|\| ''}
319	${listBorderMob \|\| ''}
320	}
321
322	.${blockId} .betterdocs-category-grid-three-wrapper .betterdocs-single-category-wrapper .betterdocs-articles-list li {
323	${listTypoMob \|\| ''}
324	}
325	`;
326
327	//Desktop CSS Styles
328	const desktopAllStyles = softMinifyCssStrings(`
329	${isCssExists(desktopStyles) ? desktopStyles : ''}
330	`);
331
332	//Tablet CSS Styles
333	const tabAllStyles = softMinifyCssStrings(`
334	${isCssExists(tabStyles) ? tabStyles : ''}
335	`);
336
337	//Mobile CSS Styles
338	const mobileAllStyles = softMinifyCssStrings(`
339	${isCssExists(mobileStyles) ? mobileStyles : ''}
340	`);
341
342	//Save Styles In An Object Form On Block Meta Attribute
343	useEffect(() => {
344	const styleObject = {
345	desktop: desktopAllStyles,
346	tab: tabAllStyles,
347	mobile: mobileAllStyles,
348	};
349
350	if (JSON.stringify(blockMeta) != JSON.stringify(styleObject)) {
351	setAttributes({ blockMeta: styleObject });
352	}
353	}, [attributes]);
354
355	/**
356	* resOption: __experimentalPreviewDeviceType()
357	* Set Responsive Option
358	*/
359	usePreviewDeviceType(setAttributes);
360
361	//Generate Unique Block ID For Every Block Instance
362	useEffect(() => {
363	const BLOCK_PREFIX = "betterdocs-category-slate-layout";
364	duplicateBlockIdFix({
365	BLOCK_PREFIX,
366	blockId,
367	setAttributes,
368	select,
369	clientId,
370	});
371	});
372
373	return (
374	<style>
375	{`
376	${desktopAllStyles}
377
378	${resOption === 'Tablet' ? tabAllStyles : ''}
379	${resOption === 'Mobile' ? mobileAllStyles : ''}
380
381	@media all and (max-width: 1024px) {
382	${tabAllStyles}
383	}
384
385	@media all and (max-width: 767px) {
386	${mobileAllStyles}
387	}
388	`}
389	</style>
390	);
391	};
392
393	export default Style;
394