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

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

post-carousel / src / blocks / post-grid-two / generalTab.js

generalTab.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/post-grid-two/generalTab.js

258 lines 7.2 KB

Raw Download Zip

1	import { __ } from "@wordpress/i18n";
2	import { Toggle, SPRangeControl, SelectField, InputControl, Layouts } from "../../components";
3	import { AlignCenter, AlignLeft, AlignRight, CarouselTwoOrientationFourIcon, CarouselTwoOrientationOneIcon, CarouselTwoOrientationThreeIcon, CarouselTwoOrientationTwoIcon } from "../../icons/icons";
4	import { getPaginationBlock } from "../shared/helpFn";
5	import { openLinksOptions } from "../../controls/constants";
6	import SPToggleGroupControl from "../../components/toggleGroupControl/toggleGroupControl";
7	import ContentOrientations from "../shared/templates/templates-parts/contentOrientations";
8	import { useOrientation } from "../../hooks/useOrientation";
9	import ProInfo from "../../components/proInfo/proInfo";
10
11	export const GridTwoGeneralTab = ({ attributes, setAttributes }) => {
12	const {
13	gridTwoColumns,
14	gridTwoHorizontalGap,
15	gridTwoVerticalGap,
16	contentAlignment,
17	preloaderEnable,
18	generalLinkOpen,
19	postLimit,
20	smallItemHeight,
21	paginationEnable,
22	liveFilterEnable,
23	clientId,
24	contentOrientation,
25	blockName,
26	// orientations
27
28	postCardPadding,
29	postCardBorder,
30	postCardBorderWidth,
31	contentAreaPadding,
32	catTabCategoryBg,
33	catTabCategoryColor,
34	catTabCategoryLineHeight,
35	catTabCategoryFontSize,
36	catTabCategoryBorder,
37	metaTypography,
38	metaFontSize,
39	imageOverlayCustomColor,
40	contentOnHover,
41	} = attributes;
42	// const layouts = useLayouts( blockName, postGridLayout );
43
44	const orientationConfig = useOrientation({
45	postCardPadding,
46	postCardBorder,
47	postCardBorderWidth,
48	contentAreaPadding,
49	catTabCategoryBg,
50	catTabCategoryColor,
51	catTabCategoryLineHeight,
52	catTabCategoryFontSize,
53	catTabCategoryBorder,
54	metaTypography,
55	metaFontSize,
56	imageOverlayCustomColor,
57	});
58
59	const paginationBlock = getPaginationBlock(clientId);
60
61	const paginationToggle = (newValue) => {
62	setAttributes({ paginationEnable: !newValue });
63
64	if (!newValue && paginationBlock) {
65	const { block, select } = paginationBlock;
66	select(block?.clientId);
67	}
68	};
69
70	const orientationHandler = (newValue) => {
71	if (newValue === contentOrientation) {
72	return;
73	}
74
75	const newData = {
76	contentOrientation: newValue,
77	...orientationConfig[newValue],
78	};
79	setAttributes(newData);
80	};
81
82	return (
83	<>
84	{/* { layouts?.length > 0 && (
85	<Layouts
86	label={ __( 'Grid Layout', 'post-carousel' ) }
87	attributes={ postGridLayout }
88	attributesKey={ 'postGridLayout' }
89	setAttributes={ setAttributes }
90	displayActive={ true }
91	grid={ 3 }
92	items={ layouts }
93	/>
94	) } */}
95
96	{/* <ContentOrientations
97	label={__("Content Orientation", "post-carousel")}
98	attributes={contentOrientation}
99	setAttributes={setAttributes}
100	attributesKey={"contentOrientation"}
101	onChange={orientationHandler}
102	blockName={blockName}
103	/> */}
104
105	<Layouts
106	attributes={contentOrientation}
107	setAttributes={setAttributes}
108	attributesKey={"contentOrientation"}
109	displayActive={true}
110	grid={4}
111	proBtnClass="sp-smart-small-size"
112	showDemoTitle={true}
113	label={__("Content Orientation", "post-carousel")}
114	onChange={orientationHandler}
115	items={[
116	{
117	icon: <CarouselTwoOrientationOneIcon value={contentOrientation} />,
118	value: "orientation_one",
119	},
120	{
121	icon: <CarouselTwoOrientationTwoIcon value={contentOrientation} />,
122	value: "orientations_two",
123	type: "pro",
124	demoLink: "https://wpsmartpost.com/blocks/#demoId3504"
125	},
126	{
127	icon: <CarouselTwoOrientationThreeIcon value={contentOrientation} />,
128	value: "orientation_three",
129	type: "pro",
130	demoLink: "https://wpsmartpost.com/blocks/#demoId3504"
131	},
132	{
133	icon: <CarouselTwoOrientationFourIcon value={contentOrientation} />,
134	value: "orientations_four",
135	type: "pro",
136	demoLink: "https://wpsmartpost.com/blocks/#demoId3504"
137	},
138	]}
139	/>
140
141	<Toggle
142	label={__("Content on Hover", "post-carousel")}
143	attributes={contentOnHover}
144	attributesKey={"contentOnHover"}
145	setAttributes={setAttributes}
146	pro={true}
147	/>
148
149	<Toggle
150	label={__("Smart Frontend Filter", "post-carousel")}
151	attributes={liveFilterEnable}
152	setAttributes={setAttributes}
153	attributesKey={"liveFilterEnable"}
154	/>
155	<Toggle
156	label={__("Smart Pagination", "post-carousel")}
157	attributes={paginationEnable}
158	// attributesKey={ 'paginationEnable' }
159	// setAttributes={ setAttributes }
160	onChange={paginationToggle}
161	/>
162	<SPRangeControl
163	label={__("Columns", "post-carousel")}
164	attributes={gridTwoColumns}
165	attributesKey={"gridTwoColumns"}
166	setAttributes={setAttributes}
167	max={9}
168	min={1}
169	defaultValue={{ unit: "", value: "" }}
170	/>
171	<InputControl
172	label={__("Posts Per Page", "post-carousel")}
173	className="sp-smart-limit-field"
174	ajax={true}
175	attributes={postLimit}
176	min={1}
177	max={500}
178	attributesKey={"postLimit"}
179	setAttributes={setAttributes}
180	/>
181	{/* { ! gridTwoMasonryEnable && ( */}
182	<SPRangeControl
183	label={__("Items Height", "post-carousel")}
184	attributes={smallItemHeight}
185	attributesKey={"smallItemHeight"}
186	setAttributes={setAttributes}
187	max={2000}
188	units={["PX", "%", "EM"]}
189	defaultValue={{ unit: "px", value: "260" }}
190	pro={true}
191	/>
192	{/* ) } */}
193	<SPRangeControl
194	label={__("Horizontal Gap", "post-carousel")}
195	attributes={gridTwoHorizontalGap}
196	attributesKey={"gridTwoHorizontalGap"}
197	setAttributes={setAttributes}
198	max={150}
199	units={["PX", "%", "EM"]}
200	defaultValue={{ unit: "px", value: 20 }}
201	/>
202	<SPRangeControl
203	label={__("Vertical Gap", "post-carousel")}
204	attributes={gridTwoVerticalGap}
205	attributesKey={"gridTwoVerticalGap"}
206	setAttributes={setAttributes}
207	max={150}
208	units={["PX", "%", "EM"]}
209	defaultValue={{ unit: "px", value: 20 }}
210	/>
211	{/* { gridTwoMasonryEnable && (
212	<SPRangeControl
213	label={ __( 'Masonry Gap', 'post-carousel' ) }
214	attributes={ masonryGap }
215	attributesKey={ 'masonryGap' }
216	setAttributes={ setAttributes }
217	max={ 150 }
218	units={ [ 'PX', '%', 'EM' ] }
219	/>
220	) } */}
221	<SPToggleGroupControl
222	label={__("Content Alignment", "post-carousel")}
223	attributes={contentAlignment}
224	attributesKey={"contentAlignment"}
225	setAttributes={setAttributes}
226	items={[
227	{ label: <AlignLeft />, value: "left" },
228	{ label: <AlignCenter />, value: "center" },
229	{ label: <AlignRight />, value: "right" },
230	]}
231	/>
232	<SelectField
233	label={__("Link Open In", "post-carousel")}
234	attributes={generalLinkOpen}
235	attributesKey={"generalLinkOpen"}
236	setAttributes={setAttributes}
237	items={openLinksOptions}
238	/>
239	{/* Hide Masonry option from Grid two. */}
240	{/* <Toggle
241	label={ __( 'Masonry', 'post-carousel' ) }
242	attributes={ gridTwoMasonryEnable }
243	attributesKey={ 'gridTwoMasonryEnable' }
244	setAttributes={ setAttributes }
245	/> */}
246	<Toggle
247	label={__("Preloader", "post-carousel")}
248	attributes={preloaderEnable}
249	attributesKey={"preloaderEnable"}
250	setAttributes={setAttributes}
251	/>
252	<ProInfo>
253	<span>Unlock exclusive layouts and advanced display controls.</span> <a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer">Upgrade to Pro!</a>
254	</ProInfo>
255	</>
256	);
257	};
258