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 / post-grid-six / edit.js

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

223 lines 5.5 KB

Raw Download Zip

1	import { useEffect, useRef, useState, useMemo } from "@wordpress/element";
2	import InspectorControl from "../../components/inspectorControls/inspectorControls";
3	import { panelBodyRightIcon, panelBodyTitleIcon } from "../../icons/icons";
4	import { useBlockProps } from "@wordpress/block-editor";
5	import Inspector from "./inspect";
6	import dynamicCssFn from "./dynamicCss";
7	import Render from "./render";
8	import { EditorWrapper } from "../shared/wrapper";
9	import { useDeviceType } from "../../controls/controls";
10	import { TogglePanelBodyProvider } from "../../context";
11	import { cssDependency } from "../shared/cssDependency";
12	import { useSelect } from "@wordpress/data";
13	import { compose } from "@wordpress/compose";
14	import addInitialAttr from "../shared/addInitialAttr";
15
16	const GridSixEdit = ({ attributes, setAttributes, isSelected }) => {
17	const [posts, setPosts] = useState([]);
18	const {
19	blockName,
20	postGridLayout,
21	titleColor,
22	largeItemTitleColor,
23	metaColors,
24	gridSixColumns,
25	largeMetaColors,
26	excerptColor,
27	fontListsEditPage,
28	titleFontSize,
29	largeItemTitleFontSize,
30	imageSpace,
31	titleLength,
32	imagePosition,
33	readMoreButtonFontSize,
34	readMoreButtonLineHeight,
35	largeItemReadMoreButtonBorder,
36	customCss,
37	socialPopupShareColor,
38	largeImageWidth,
39	} = attributes;
40
41	const blockProps = useBlockProps();
42	const firstLoad = useRef(true);
43	const deviceType = useDeviceType();
44	const [horizontalImagePosition, setHorizontalImagePosition] = useState("left");
45
46	useEffect(() => {
47	if (!blockName) {
48	setAttributes({
49	// align: 'wide',
50	// Set default attributes value for this block.
51	// postLimit: 7,
52	excerptShow: true,
53	showReadMoreButton: true,
54	catTabCategoryEnable: true,
55	imageOverlayColor: "default",
56	titleColor: { ...titleColor, color: "" },
57	metaColors: { ...metaColors, color: "" },
58	largeMetaColors: { ...largeMetaColors, color: "" },
59	gridSixColumns: {
60	...gridSixColumns,
61	device: {
62	...gridSixColumns.device,
63	Desktop: "",
64	},
65	},
66	largeItemTitleColor: {
67	...largeItemTitleColor,
68	color: "",
69	},
70	excerptColor: { ...excerptColor, color: "" },
71	imageSize: "smart-post-landscape",
72	largeImageWidth: {
73	...largeImageWidth,
74	device: {
75	...largeImageWidth.device,
76	Desktop: "",
77	},
78	unit: {
79	...largeImageWidth.unit,
80	Desktop: "%",
81	},
82	},
83	titleFontSize: {
84	...titleFontSize,
85	device: {
86	...titleFontSize.device,
87	Desktop: 22,
88	Tablet: 18,
89	Mobile: 22,
90	},
91	},
92	titleLength: {
93	...titleLength,
94	value: 6,
95	},
96	largeItemTitleFontSize: {
97	...largeItemTitleFontSize,
98	device: {
99	...largeItemTitleFontSize.device,
100	Desktop: 32,
101	Tablet: 26,
102	Mobile: 22,
103	},
104	},
105	imageSpace: {
106	...imageSpace,
107	device: {
108	...imageSpace.device,
109	Desktop: 24,
110	Tablet: 20,
111	},
112	},
113
114	smallItemContentAlignment: "start",
115	contentVerticalPosition: "bottom",
116
117	readMoreButtonFontSize: {
118	...readMoreButtonFontSize,
119	device: {
120	...readMoreButtonFontSize.device,
121	Desktop: 14,
122	},
123	},
124	readMoreButtonLineHeight: {
125	...readMoreButtonLineHeight,
126	device: {
127	...readMoreButtonLineHeight.device,
128	Desktop: 150,
129	},
130	unit: {
131	...readMoreButtonLineHeight.unit,
132	Desktop: "%",
133	},
134	},
135	largeItemReadMoreButtonBorder: {
136	...largeItemReadMoreButtonBorder,
137	style: "solid",
138	color: "",
139	},
140	socialPopupShareColor: {
141	...socialPopupShareColor,
142	color: "",
143	},
144	});
145	}
146	}, []);
147
148	// useEffect(() => {
149	// setAttributes({
150	// dynamicCss: dynamicCssFn(attributes, 'frontend', setAttributes),
151	// });
152	// }, cssDependency(attributes));
153	const blockStyling = useMemo(
154	() => dynamicCssFn(attributes, "frontend", deviceType),
155	[...cssDependency(attributes), deviceType, attributes]
156	);
157	useEffect(() => {
158	if (firstLoad.current) {
159	firstLoad.current = false;
160	} else {
161	setAttributes({
162	contentOrientation: postGridLayout,
163	blockLayoutName: postGridLayout,
164	});
165	const defaultOption = {
166	"grid-six-layout-one": {
167	imagePosition: horizontalImagePosition,
168	},
169	"grid-six-layout-two": {
170	imagePosition: horizontalImagePosition,
171	},
172	"grid-six-layout-three": {
173	imagePosition: "top",
174	},
175	"grid-six-layout-four": {
176	imagePosition: "left",
177	},
178	};
179	// Set attributes for grid-six-layout-four
180	if (defaultOption[postGridLayout]) {
181	const data = defaultOption[postGridLayout];
182	setAttributes(data);
183	}
184	}
185	}, [blockName, postGridLayout]);
186
187	useEffect(() => {
188	if (["grid-six-layout-one", "grid-six-layout-two"].includes(postGridLayout)) {
189	const imgPositionValue = imagePosition;
190	setHorizontalImagePosition(imgPositionValue);
191	}
192	}, [imagePosition]);
193
194	useEffect(() => {
195	setAttributes({ currentScreen: deviceType });
196	}, [deviceType]);
197
198	return (
199	<div {...blockProps}>
200	<style>
201	{fontListsEditPage}
202	{blockStyling}
203	{customCss}
204	</style>
205	<TogglePanelBodyProvider>
206	<InspectorControl
207	TitleIcon={panelBodyTitleIcon}
208	RightIcon={panelBodyRightIcon}
209	Inspector={Inspector}
210	attributes={attributes}
211	setAttributes={setAttributes}
212	isSelected={isSelected}
213	/>
214	<EditorWrapper setPosts={setPosts} setAttributes={setAttributes}>
215	<Render posts={posts} attributes={attributes} page={"editor"} />
216	</EditorWrapper>
217	</TogglePanelBodyProvider>
218	</div>
219	);
220	};
221
222	export default compose(addInitialAttr)(GridSixEdit);
223