Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.7

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.7

post-carousel / src / blocks / smart-list / edit.js

edit.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/blocks/smart-list/edit.js

248 lines 5.7 KB

Raw Download Zip

1	import { useBlockProps } from "@wordpress/block-editor";
2	import { useEffect, useMemo } from "@wordpress/element";
3	import { getBlockShortName, jsonStringify } from "../shared/helpFn";
4	import InspectorControl from "../../components/inspectorControls/inspectorControls";
5	import Inspector from "./inspect";
6	import { TogglePanelBodyProvider } from "../../context";
7	import { panelBodyRightIcon, panelBodyTitleIcon } from "../../icons/icons";
8	import RenderHtml from "./renderHtml";
9	import dynamicCssFn from "./dynamicCss";
10	import { googleFonts } from "../../controls/controls";
11	import { useSyncParentAttributes } from "./hook";
12	import { useSelect } from "@wordpress/data";
13
14	const SmartListEdit = ({ attributes, setAttributes, clientId, name }) => {
15	const {
16	uniqueId,
17	blockName,
18	advancedAdditionalClass,
19	iconSource,
20	svgIconName,
21	borderStyle,
22	smartListBg,
23	smartListRadialShape,
24	smartListRadialPosition,
25	borderHoverStyle,
26	smartListHoverRadialShape,
27	smartListHoverRadialPosition,
28	borderRadius,
29	boxShadowEnable,
30	listBoxShadow,
31	borderHoverRadius,
32	boxShadowHoverEnable,
33	borderStyleWidth,
34	borderHoverStyleWidth,
35	boxShadowHover,
36	listPadding,
37	iconSize,
38	iconCustomWidth,
39	iconCustomHeight,
40	iconPosition,
41	titleDescriptionGap,
42	iconHorizontalAlignment,
43	iconBackgroundEnable,
44	iconBg,
45	iconBorderStyle,
46	backgroundShape,
47	iconHoverBorderStyle,
48	iconColor,
49	iconPadding,
50	iconBgHoverRadialShape,
51	iconBgHoverRadialPosition,
52	iconHoverBorderStyleWidth,
53	iconHoverBorderRadius,
54	titleColor,
55	descriptionColor,
56	iconAlignment,
57	titleTypography,
58	descriptionTypography,
59	iconBorderStyleWidth,
60	titleFontSize,
61	titleLineHeight,
62	titleLatterSpacing,
63	titleWordSpacing,
64	descriptionFontSize,
65	descriptionLineHeight,
66	descriptionLatterSpacing,
67	descriptionWordSpacing,
68	badgeColor,
69	badgeTypography,
70	badgeBgColor,
71	badgeBorderStyle,
72	badgeFontSize,
73	badgeLineHeight,
74	badgeLatterSpacing,
75	badgeWordSpacing,
76	badgePadding,
77	badgeMargin,
78	badgeBorderStyleWidth,
79	badgeBorderRadius,
80	parentListsLayout,
81	iconBgRadialShape,
82	iconBgRadialPosition,
83	hideOnDesktop,
84	hideOnTablet,
85	hideOnMobile,
86	iconBorderRadius,
87	padding,
88	fontLists,
89	// listItemWidth,
90	} = attributes;
91
92	// Setup
93	const parentAttributes = useSelect(
94	(select) => {
95	const { getBlockRootClientId, getBlock } = select("core/block-editor");
96	const parentClientId = getBlockRootClientId(clientId);
97	return getBlock(parentClientId)?.attributes;
98	},
99	[clientId]
100	);
101
102	const blockProps = useBlockProps({ className: advancedAdditionalClass });
103
104	// Fonts
105	const googleFontLists = useMemo(
106	() => [titleTypography, descriptionTypography, badgeTypography],
107	[titleTypography, descriptionTypography, badgeTypography]
108	);
109
110	const googleFontListsEditor = useMemo(() => googleFonts(googleFontLists), [googleFontLists]);
111
112	useEffect(() => {
113	setAttributes({
114	fontLists: jsonStringify(googleFonts(googleFontLists, "frontend")),
115	});
116	}, [googleFontLists]);
117
118	useEffect(() => {
119	setAttributes({
120	uniqueId: `sp-smart-post-smart-list-${clientId?.split("-").pop()}`,
121	});
122	}, [clientId]);
123
124	// Dynamic CSS
125	const dynamicCssValue = useMemo(
126	() => dynamicCssFn(attributes, "frontend"),
127	[
128	uniqueId,
129	borderStyle,
130	padding,
131	smartListBg,
132	smartListRadialShape,
133	smartListRadialPosition,
134	borderHoverStyle,
135	smartListHoverRadialShape,
136	smartListHoverRadialPosition,
137	borderStyleWidth,
138	borderRadius,
139	boxShadowEnable,
140	listBoxShadow,
141	borderHoverStyleWidth,
142	borderHoverRadius,
143	boxShadowHoverEnable,
144	iconAlignment,
145	boxShadowHover,
146	listPadding,
147	iconSize,
148	iconSource,
149	iconBorderRadius,
150	iconCustomWidth,
151	iconCustomHeight,
152	iconPosition,
153	iconHorizontalAlignment,
154	iconBackgroundEnable,
155	iconBg,
156	iconBorderStyle,
157	backgroundShape,
158	iconHoverBorderStyle,
159	iconColor,
160	iconPadding,
161	iconHoverBorderRadius,
162	iconHoverBorderStyleWidth,
163	iconBorderStyleWidth,
164	titleColor,
165	descriptionColor,
166	titleTypography,
167	descriptionTypography,
168	titleFontSize,
169	titleLineHeight,
170	titleLatterSpacing,
171	titleWordSpacing,
172	descriptionFontSize,
173	descriptionLineHeight,
174	descriptionLatterSpacing,
175	descriptionWordSpacing,
176	badgeColor,
177	badgeTypography,
178	badgeBgColor,
179	badgeBorderStyle,
180	badgeFontSize,
181	badgeLineHeight,
182	badgeLatterSpacing,
183	badgeWordSpacing,
184	badgePadding,
185	badgeMargin,
186	badgeBorderStyleWidth,
187	badgeBorderRadius,
188	titleDescriptionGap,
189	iconBgHoverRadialShape,
190	iconBgHoverRadialPosition,
191	iconBg,
192	iconBgRadialShape,
193	iconBgRadialPosition,
194	svgIconName,
195	hideOnDesktop,
196	hideOnTablet,
197	hideOnMobile,
198	// listItemWidth,
199	]
200	);
201
202	// BlockName init
203	useEffect(() => {
204	if (!blockName) {
205	setAttributes({ blockName: getBlockShortName(name) });
206	}
207	}, []);
208
209	useSyncParentAttributes({ parentAttributes, attributes, setAttributes });
210
211	useEffect(() => {
212	const isSpecialLayout = ["layout-four", "layout-five"].includes(parentListsLayout);
213	const newPadding = isSpecialLayout
214	? { top: "12", right: "12", bottom: "12", left: "12" }
215	: { top: "0", right: "0", bottom: "0", left: "0" };
216
217	setAttributes({
218	padding: {
219	...padding,
220	device: { ...padding.device, Desktop: newPadding },
221	},
222	});
223	}, [parentListsLayout]);
224
225	return (
226	<div {...blockProps}>
227	<style>
228	{googleFontListsEditor}
229	{dynamicCssValue}
230	</style>
231
232	<TogglePanelBodyProvider>
233	<InspectorControl
234	TitleIcon={panelBodyTitleIcon}
235	RightIcon={panelBodyRightIcon}
236	Inspector={Inspector}
237	attributes={attributes}
238	setAttributes={setAttributes}
239	/>
240
241	<RenderHtml attributes={attributes} setAttributes={setAttributes} />
242	</TogglePanelBodyProvider>
243	</div>
244	);
245	};
246
247	export default SmartListEdit;
248