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 / categorygrid / src / inspector.js

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

1,024 lines 35.0 KB

Raw Download Zip

1	/**
2	* WordPress dependencies
3	*/
4
5	import { __ } from '@wordpress/i18n';
6	import { InspectorControls } from '@wordpress/block-editor';
7	import { applyFilters } from "@wordpress/hooks";
8	import {
9	PanelBody,
10	TextControl,
11	Button,
12	ButtonGroup,
13	BaseControl,
14	ToggleControl,
15	SelectControl,
16	TabPanel,
17	Notice,
18	Placeholder
19	} from '@wordpress/components';
20	import { MediaPlaceholder } from '@wordpress/block-editor';
21	import upload from '../../../util/upload';
22	import cross from '../../../util/cross';
23	import { useEffect } from '@wordpress/element';
24	import { select, withSelect } from '@wordpress/data';
25
26	/**
27	* Internal depencencies
28	*/
29
30	import objAttributes from "./attributes";
31	import Select from "react-select";
32	import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
33	import faIcons from "../../../util/faIcons";
34
35	import {
36	mimmikCssForResBtns,
37	mimmikCssOnPreviewBtnClickWhileBlockSelected,
38	} from "../../../util/helpers";
39
40	import {
41	ORDER_BY,
42	ORDER,
43	LAYOUT,
44	GRID_BACKGROUND,
45	COLUMNS,
46	HTML_TAGS,
47	GRID_MARGIN,
48	GRID_PADDING,
49	GRID_BORDER,
50	TITLE_MARGIN,
51	TITLE_PADDING,
52	TITLE_BACKGROUND,
53	TITLE_BORDER,
54	POSTS_ORDER_BY,
55	LAYOUT_MODE,
56	GRID_SPACE,
57	COUNT_SIZE,
58	COUNT_BACKGROUND,
59	COUNT_BORDER,
60	LIST_MARGIN,
61	LIST_PADDING,
62	LIST_BACKGROUND,
63	ICON_SIZE,
64	ICON_WIDTH,
65	ICON_HEIGHT,
66	ICON_MARGIN,
67	BTN_MARGIN,
68	BTN_PADDING,
69	BTN_BACKGROUND,
70	BTN_BORDER,
71	BUTTON_POSITION,
72	WRAPPER_MARGIN,
73	CONTAINER_SECTION_MARGIN,
74	CONTAINER_SECTION_PADDING,
75	CONTAINER_SECTION_BACKGROUND,
76	COUNT_BACKGROUND_LAYOUT_2,
77	COUNT_PADDING_LAYOUT_2,
78	COUNT_MARGIN_LAYOUT_2,
79	TITLE_PADDING_LAYOUT_2,
80	TITLE_MARGIN_LAYOUT_2
81	} from "./constants";
82	import {
83	typoPrefix_title,
84	typoPrefix_count,
85	typoPrefix_list,
86	typoPrefix_button,
87	} from "./typographyPrefixConstants";
88	// util
89	import ResponsiveRangeController from "../../../util/responsive-range-control";
90	import ResponsiveDimensionsControl from "../../../util/dimensions-control-v2";
91	import TypographyDropdown from "../../../util/typography-control-v2";
92	import BackgroundControl from "../../../util/background-control";
93	import BorderShadowControl from "../../../util/border-shadow-control";
94	import ColorControl from "../../../util/color-control";
95
96	const Inspector = ({
97	docCategories,
98	categories,
99	attributes,
100	setAttributes,
101	}) => {
102	const {
103	resOption,
104	includeCategories,
105	excludeCategories,
106	postCategories,
107	gridPerPage,
108	orderBy,
109	order,
110	postsPerPage,
111	postsOrderBy,
112	postsOrder,
113	enableNestedSubcategory,
114	enableLazyLoad,
115	postPerSubcategory,
116	subCategoryPerGrid,
117	layout,
118	layoutMode,
119	showHeader,
120	showIcon,
121	showTitle,
122	titleTag,
123	showCount,
124	showList,
125	listIcon,
126	showButton,
127	categoryTitleLink,
128	buttonText,
129	titleColor,
130	titleHoverColor,
131	countColor,
132	countHoverColor,
133	listColor,
134	listHoverColor,
135	iconColor,
136	showButtonIcon,
137	buttonIcon,
138	buttonIconPosition,
139	buttonColor,
140	buttonHoverColor,
141	buttonPosition,
142	listIconImageUrl,
143	prefix,
144	suffix,
145	suffixSingular,
146	tickerBackgroundColor
147	} = attributes;
148
149	const editorStoreForGettingPreivew =
150	betterdocs_style_handler.editor_type === "edit-site"
151	? "core/edit-site"
152	: "core/edit-post";
153
154	// this useEffect is for setting the resOption attribute to desktop/tab/mobile depending on the added 'eb-res-option-' class only the first time once
155	useEffect(() => {
156	setAttributes({
157	resOption: select(
158	editorStoreForGettingPreivew
159	).__experimentalGetPreviewDeviceType(),
160	});
161	}, []);
162
163	const resRequiredProps = {
164	setAttributes,
165	resOption,
166	attributes,
167	objAttributes,
168	};
169
170	// handle include categories
171	const handleIncludeCategories = (categories) => {
172	setAttributes({
173	includeCategories: categories ? JSON.stringify(categories) : null,
174	});
175	};
176	// handle exclude categories
177	const handleExcludeCategories = (categories) => {
178	setAttributes({
179	excludeCategories: categories ? JSON.stringify(categories) : null,
180	});
181	};
182
183	// control POSTS_ORDER_BY for pro plugin
184	let posts_order_by = [
185	...POSTS_ORDER_BY,
186	{
187	label: __("BetterDocs Order", "betterdocs"),
188	value: "betterdocs_order",
189	},
190	];
191
192	return (
193	<InspectorControls key="controls">
194	<div className="eb-panel-control">
195	<TabPanel
196	className="eb-parent-tab-panel"
197	activeClass="active-tab"
198	tabs={[
199	{
200	name: "general",
201	title: __("General", "betterdocs"),
202	className: "eb-tab general",
203	},
204	{
205	name: "styles",
206	title: __("Style", "betterdocs"),
207	className: "eb-tab styles",
208	}
209	]}
210	>
211	{(tab) => (
212	<div key={tab.name} className={"eb-tab-controls " + tab.name}>
213	{tab.name === "general" && (
214	<>
215	<PanelBody title={__("Query", "betterdocs")}>
216	<>
217	{applyFilters("selectKnowledgeBase", '', attributes, setAttributes)}
218	<BaseControl>
219	<h3 className="eb-control-title">
220	{__("Include", "betterdocs")}
221	</h3>
222	</BaseControl>
223	<Select
224	name="include_categories"
225	value={
226	includeCategories && JSON.parse(includeCategories)
227	}
228	onChange={handleIncludeCategories}
229	options={
230	docCategories &&
231	docCategories.map((category) => ({
232	value: category.id,
233	label: category.name,
234	}))
235	}
236	isMulti="true"
237	/>
238	<BaseControl>
239	<h3 className="eb-control-title">
240	{__("Exclude", "betterdocs")}
241	</h3>
242	</BaseControl>
243	<Select
244	name="exclude_categories"
245	value={
246	excludeCategories && JSON.parse(excludeCategories)
247	}
248	onChange={handleExcludeCategories}
249	options={
250	docCategories &&
251	docCategories.map((category) => ({
252	value: category.id,
253	label: category.name,
254	}))
255	}
256	isMulti="true"
257	/>
258	<TextControl
259	label={__("Grid Per Page", "betterdocs")}
260	type="number"
261	value={gridPerPage}
262	onChange={(value) => {
263	setAttributes({
264	gridPerPage: parseInt(value),
265	});
266	}}
267	/>
268	<SelectControl
269	label={__("Order By", "betterdocs")}
270	value={orderBy}
271	options={ORDER_BY}
272	onChange={(newOrderby) =>
273	setAttributes({
274	orderBy: newOrderby,
275	})
276	}
277	/>
278	{orderBy != 'doc_category_order' && <SelectControl
279	label={__("Order", "betterdocs")}
280	value={order}
281	options={ORDER}
282	onChange={(newOrder) =>
283	setAttributes({
284	order: newOrder,
285	})
286	}
287	/>}
288	<hr />
289	<BaseControl>
290	<h3 className="eb-control-title">
291	<strong>{__("Grid List Docs", "betterdocs")}</strong>
292	</h3>
293	</BaseControl>
294	<TextControl
295	label={__("Docs Per Page", "betterdocs")}
296	type="number"
297	value={postsPerPage}
298	onChange={(value) => {
299	setAttributes({
300	postsPerPage: parseInt(value),
301	});
302	}}
303	/>
304	<SelectControl
305	label={__("Order By", "betterdocs")}
306	value={postsOrderBy}
307	options={posts_order_by}
308	onChange={(newPostsOrderBy) =>
309	setAttributes({
310	postsOrderBy: newPostsOrderBy,
311	})
312	}
313	/>
314	{postsOrderBy != 'betterdocs_order' && <SelectControl
315	label={__("Order", "betterdocs")}
316	value={postsOrder}
317	options={ORDER}
318	onChange={(newPostsOrder) =>
319	setAttributes({
320	postsOrder: newPostsOrder,
321	})
322	}
323	/>}
324	<ToggleControl
325	label={__("Enable Nested Subcategory", "betterdocs")}
326	checked={enableNestedSubcategory}
327	onChange={() => {
328	setAttributes({
329	enableNestedSubcategory: !enableNestedSubcategory,
330	});
331	}}
332	/>
333	<ToggleControl
334	label={__("Lazy Load Docs & Subcategories", "betterdocs")}
335	help={__("Render only the active category upfront; fetch the rest on click (or scroll for the Memphis layout).", "betterdocs")}
336	checked={enableLazyLoad}
337	onChange={() => {
338	setAttributes({
339	enableLazyLoad: !enableLazyLoad,
340	});
341	}}
342	/>
343	{enableNestedSubcategory && (
344	<>
345	<TextControl
346	label={__("Subcategory Per Grid", "betterdocs")}
347	type="number"
348	min={0}
349	max={100}
350	value={subCategoryPerGrid}
351	onChange={(value) => {
352	setAttributes({
353	subCategoryPerGrid: parseInt(value),
354	});
355	}}
356	/>
357	<TextControl
358	label={__("Doc Per Subcategory", "betterdocs")}
359	type="number"
360	min={0}
361	max={100}
362	value={postPerSubcategory}
363	onChange={(value) => {
364	setAttributes({
365	postPerSubcategory: parseInt(value),
366	});
367	}}
368	/>
369	</>
370	)}
371	</>
372	</PanelBody>
373	<PanelBody title={__("Settings", "betterdocs")}>
374	<>
375	<SelectControl
376	label={__("Select layout", "betterdocs")}
377	value={layout}
378	options={LAYOUT}
379	onChange={(newLayout) =>
380	setAttributes({
381	layout: newLayout,
382	})
383	}
384	/>
385	<SelectControl
386	label={__("Layout Mode", "betterdocs")}
387	value={layoutMode}
388	options={LAYOUT_MODE}
389	onChange={(newLayoutMode) =>
390	setAttributes({
391	layoutMode: newLayoutMode,
392	})
393	}
394	/>
395	{layoutMode === "masonry" && (
396	<>
397	<Notice status="info" isDismissible={false}>
398	{__(
399	"Please save and reload the view page to get the effect of column and space on masonry layout",
400	"betterdocs"
401	)}
402	</Notice>
403	<hr />
404	</>
405	)}
406	<ResponsiveRangeController
407	baseLabel={__("Grid Column", "betterdocs")}
408	controlName={COLUMNS}
409	resRequiredProps={resRequiredProps}
410	min={1}
411	max={6}
412	step={1}
413	noUnits
414	/>
415	{layoutMode === "masonry" && (
416	<ResponsiveRangeController
417	baseLabel={__("Grid Space", "betterdocs")}
418	controlName={GRID_SPACE}
419	resRequiredProps={resRequiredProps}
420	min={1}
421	max={100}
422	step={1}
423	noUnits
424	/>
425	)}
426	<ToggleControl
427	label={__("Show header bar", "betterdocs")}
428	checked={showHeader}
429	onChange={() => {
430	setAttributes({
431	showHeader: !showHeader,
432	});
433	}}
434	/>
435	<ToggleControl
436	label={__("Show Icon", "betterdocs")}
437	checked={showIcon}
438	onChange={() => {
439	setAttributes({
440	showIcon: !showIcon,
441	});
442	}}
443	/>
444	<ToggleControl
445	label={__("Show Title", "betterdocs")}
446	checked={showTitle}
447	onChange={() => {
448	setAttributes({
449	showTitle: !showTitle,
450	});
451	}}
452	/>
453	<SelectControl
454	label={__("Select Tag", "betterdocs")}
455	value={titleTag}
456	options={HTML_TAGS}
457	onChange={(newTitleTag) =>
458	setAttributes({
459	titleTag: newTitleTag,
460	})
461	}
462	/>
463	<ToggleControl
464	label={__("Show Count", "betterdocs")}
465	checked={showCount}
466	onChange={() => {
467	setAttributes({
468	showCount: !showCount,
469	});
470	}}
471	/>
472	<ToggleControl
473	label={__("Show List", "betterdocs")}
474	checked={showList}
475	onChange={() => {
476	setAttributes({
477	showList: !showList,
478	});
479	}}
480	/>
481	<ToggleControl
482	label={__("Show Button", "betterdocs")}
483	checked={showButton}
484	onChange={() => {
485	setAttributes({
486	showButton: !showButton,
487	});
488	}}
489	/>
490	<ToggleControl
491	label={__("Category Title Link", "betterdocs")}
492	checked={categoryTitleLink}
493	onChange={(value) => {
494	setAttributes({
495	categoryTitleLink: !categoryTitleLink,
496	});
497	}}
498	/>
499	{showButton && (
500	<TextControl
501	label={__("Button Text", "betterdocs")}
502	value={buttonText}
503	onChange={(value) => {
504	setAttributes({
505	buttonText: value,
506	});
507	}}
508	/>
509	)}
510	{layout == 'layout-2' &&
511	<>
512	<TextControl
513	label={__("Prefix", "betterdocs")}
514	value={prefix}
515	onChange={(prefix) =>
516	setAttributes({
517	prefix,
518	})
519	}
520	/>
521	<TextControl
522	label={__("Suffix", "betterdocs")}
523	value={suffix}
524	onChange={(suffix) =>
525	setAttributes({
526	suffix,
527	})
528	}
529	/>
530	<TextControl
531	label={__("Suffix Singular", "betterdocs")}
532	value={suffixSingular}
533	onChange={(suffixSingular) =>
534	setAttributes({
535	suffixSingular,
536	})
537	}
538	/>
539	</>
540	}
541	</>
542	</PanelBody>
543	</>
544	)}
545	{tab.name === "styles" && (
546	<>
547	<PanelBody title={__("Container Section", "betterdocs")}>
548	<ResponsiveDimensionsControl
549	baseLabel={__(
550	"Padding",
551	"betterdocs",
552	)}
553	resRequiredProps={resRequiredProps}
554	controlName={CONTAINER_SECTION_PADDING}
555	/>
556	<ResponsiveDimensionsControl
557	baseLabel={__(
558	"Margin",
559	"betterdocs",
560	)}
561	resRequiredProps={resRequiredProps}
562	controlName={CONTAINER_SECTION_MARGIN}
563	/>
564	<ResponsiveDimensionsControl
565	baseLabel={__("Inner Margin", "betterdocs")}
566	resRequiredProps={resRequiredProps}
567	controlName={WRAPPER_MARGIN}
568	/>
569	<BackgroundControl
570	controlName={
571	CONTAINER_SECTION_BACKGROUND
572	}
573	resRequiredProps={resRequiredProps}
574	noOverlay={true}
575	/>
576	</PanelBody>
577	<PanelBody title={__("Grid", "betterdocs")}>
578	<ResponsiveDimensionsControl
579	baseLabel={__("Grid Padding", "betterdocs")}
580	resRequiredProps={resRequiredProps}
581	controlName={GRID_PADDING}
582	/>
583	<ResponsiveDimensionsControl
584	baseLabel={__("Grid Margin", "betterdocs")}
585	resRequiredProps={resRequiredProps}
586	controlName={GRID_MARGIN}
587	/>
588	<hr />
589	<BaseControl>
590	<h3 className="eb-control-title">
591	{__("Background", "betterdocs")}
592	</h3>
593	</BaseControl>
594	<BackgroundControl
595	controlName={GRID_BACKGROUND}
596	resRequiredProps={resRequiredProps}
597	noOverlay={true}
598	/>
599	<BaseControl>
600	<h3 className="eb-control-title">
601	{__("Border", "betterdocs")}
602	</h3>
603	</BaseControl>
604	<BorderShadowControl
605	controlName={GRID_BORDER}
606	resRequiredProps={resRequiredProps}
607	/>
608	</PanelBody>
609	<PanelBody
610	title={__("Title", "betterdocs")}
611	initialOpen={false}
612	>
613	<TypographyDropdown
614	baseLabel={__("Typography", "betterdocs")}
615	typographyPrefixConstant={typoPrefix_title}
616	resRequiredProps={resRequiredProps}
617	defaultFontSize={20}
618	/>
619	<ColorControl
620	label={__("Color", "betterdocs")}
621	color={titleColor}
622	onChange={(titleColor) => setAttributes({ titleColor })}
623	/>
624	<ColorControl
625	label={__("Hover Color", "betterdocs")}
626	color={titleHoverColor}
627	onChange={(titleHoverColor) =>
628	setAttributes({
629	titleHoverColor,
630	})
631	}
632	/>
633	<ResponsiveDimensionsControl
634	baseLabel={__("Padding", "betterdocs")}
635	resRequiredProps={resRequiredProps}
636	controlName={layout == 'default' ? TITLE_PADDING : TITLE_PADDING_LAYOUT_2}
637	/>
638	<ResponsiveDimensionsControl
639	baseLabel={__("Margin", "betterdocs")}
640	resRequiredProps={resRequiredProps}
641	controlName={layout == 'default' ? TITLE_MARGIN : TITLE_MARGIN_LAYOUT_2}
642	/>
643	<hr />
644	<BaseControl>
645	<h3 className="eb-control-title">
646	{__("Background", "betterdocs")}
647	</h3>
648	</BaseControl>
649	<BackgroundControl
650	controlName={TITLE_BACKGROUND}
651	resRequiredProps={resRequiredProps}
652	noOverlay={true}
653	noMainBgi={true}
654	/>
655	<BaseControl>
656	<h3 className="eb-control-title">
657	{__("Border", "betterdocs")}
658	</h3>
659	</BaseControl>
660	<BorderShadowControl
661	controlName={TITLE_BORDER}
662	noShadow={true}
663	resRequiredProps={resRequiredProps}
664	/>
665	</PanelBody>
666	<PanelBody
667	title={__("Count", "betterdocs")}
668	initialOpen={false}
669	>
670	<TypographyDropdown
671	baseLabel={__("Typography", "betterdocs")}
672	typographyPrefixConstant={typoPrefix_count}
673	resRequiredProps={resRequiredProps}
674	defaultFontSize={15}
675	/>
676	<ColorControl
677	label={__("Color", "betterdocs")}
678	color={countColor}
679	onChange={(countColor) => setAttributes({ countColor })}
680	/>
681	<ColorControl
682	label={__("Hover Color", "betterdocs")}
683	color={countHoverColor}
684	onChange={(countHoverColor) =>
685	setAttributes({
686	countHoverColor,
687	})
688	}
689	/>
690	{layout == 'default' && <ResponsiveRangeController
691	baseLabel={__("Size", "betterdocs")}
692	controlName={COUNT_SIZE}
693	resRequiredProps={resRequiredProps}
694	min={1}
695	max={100}
696	step={1}
697	/>}
698	{layout == 'layout-2' && <><ResponsiveDimensionsControl
699	baseLabel={__("Padding", "betterdocs")}
700	resRequiredProps={resRequiredProps}
701	controlName={COUNT_PADDING_LAYOUT_2}
702	/>
703	<ResponsiveDimensionsControl
704	baseLabel={__("Margin", "betterdocs")}
705	resRequiredProps={resRequiredProps}
706	controlName={COUNT_MARGIN_LAYOUT_2}
707	/>
708	</>}
709	{layout == 'layout-2' && <ColorControl
710	label={__("Ticker Background Color", "betterdocs")}
711	color={tickerBackgroundColor}
712	onChange={(tickerBackgroundColor) => setAttributes({ tickerBackgroundColor })}
713	/>}
714	<hr />
715	<BaseControl>
716	<h3 className="eb-control-title">
717	{__("Background", "betterdocs")}
718	</h3>
719	</BaseControl>
720	<BackgroundControl
721	controlName={layout == 'default' ? COUNT_BACKGROUND : COUNT_BACKGROUND_LAYOUT_2}
722	resRequiredProps={resRequiredProps}
723	noOverlay={true}
724	noMainBgi={true}
725	/>
726	<BaseControl>
727	<h3 className="eb-control-title">
728	{__("Border", "betterdocs")}
729	</h3>
730	</BaseControl>
731	<BorderShadowControl
732	controlName={COUNT_BORDER}
733	noShadow={true}
734	resRequiredProps={resRequiredProps}
735	/>
736	</PanelBody>
737	<PanelBody
738	title={__("List", "betterdocs")}
739	initialOpen={false}
740	>
741	<TypographyDropdown
742	baseLabel={__("Typography", "betterdocs")}
743	typographyPrefixConstant={typoPrefix_list}
744	resRequiredProps={resRequiredProps}
745	defaultFontSize={15}
746	/>
747	<ColorControl
748	label={__("Color", "betterdocs")}
749	color={listColor}
750	onChange={(listColor) => setAttributes({ listColor })}
751	/>
752	<ColorControl
753	label={__("Hover Color", "betterdocs")}
754	color={listHoverColor}
755	onChange={(listHoverColor) =>
756	setAttributes({
757	listHoverColor,
758	})
759	}
760	/>
761	<ResponsiveDimensionsControl
762	baseLabel={__("List Item Spacing", "betterdocs")}
763	resRequiredProps={resRequiredProps}
764	controlName={LIST_MARGIN}
765	/>
766	<ResponsiveDimensionsControl
767	baseLabel={__("List Area Padding", "betterdocs")}
768	resRequiredProps={resRequiredProps}
769	controlName={LIST_PADDING}
770	/>
771	<BaseControl>
772	<h3 className="eb-control-title">
773	{__("Background", "betterdocs")}
774	</h3>
775	</BaseControl>
776	<BackgroundControl
777	controlName={LIST_BACKGROUND}
778	resRequiredProps={resRequiredProps}
779	noOverlay={true}
780	noMainBgi={true}
781	/>
782	<hr />
783	<MediaPlaceholder
784	onSelect={(image) => {
785	setAttributes({
786	listIconImageUrl:image?.url
787	})
788	}}
789	value={listIconImageUrl}
790	accept="image/*"
791	allowedTypes={["image"]}
792	mediaLibraryButton={({ open }) => {
793	return (
794	<>
795	<Button
796	icon={upload}
797	variant="primary"
798	label={__('Add image from media')}
799	showTooltip
800	tooltipPosition="top center"
801	onClick={() => {
802	open();
803	}}
804	/>
805	{listIconImageUrl?.length > 0 && <div className="preview-wrapper-controller" style={{position:'relative'}}>
806	<img src={listIconImageUrl} />
807	<div className="preview-wrapper" style={{position:'absolute', top:'0px', right:'0px', height:'30px', width:'30px', backgroundColor:'#1e1e1e', borderRadius:'5px', cursor:'pointer'}} onClick={(e) => {
808	setAttributes({
809	listIconImageUrl:''
810	})
811	}}>
812	{cross()}
813	</div>
814	</div>}
815	</>
816	);
817	}}
818	labels={{
819	title: "Upload Image",
820	instructions:
821	"Drag media file, upload or select image from your library.",
822	}}
823	/>
824	{listIconImageUrl == '' && <><BaseControl>
825	<h3 className="eb-control-title">
826	{__("Icon", "betterdocs")}
827	</h3>
828	</BaseControl>
829	<FontIconPicker
830	icons={faIcons}
831	value={listIcon}
832	onChange={(listIcon) => setAttributes({ listIcon })}
833	appendTo="body"
834	closeOnSelect
835	/>
836	<ColorControl
837	label={__("Color", "betterdocs")}
838	color={iconColor}
839	onChange={(iconColor) =>
840	setAttributes({
841	iconColor,
842	})
843	}
844	/>
845	<ResponsiveRangeController
846	baseLabel={__("Size", "betterdocs")}
847	controlName={ICON_SIZE}
848	resRequiredProps={resRequiredProps}
849	min={1}
850	max={100}
851	step={1}
852	/></>}
853	{listIconImageUrl != '' && <>
854	<ResponsiveRangeController
855	baseLabel={__("Height", "betterdocs")}
856	controlName={ICON_HEIGHT}
857	resRequiredProps={resRequiredProps}
858	min={1}
859	max={100}
860	step={1}
861	/>
862	<ResponsiveRangeController
863	baseLabel={__("Width", "betterdocs")}
864	controlName={ICON_WIDTH}
865	resRequiredProps={resRequiredProps}
866	min={1}
867	max={100}
868	step={1}
869	/>
870	</>}
871	<ResponsiveDimensionsControl
872	baseLabel={__("Space", "betterdocs")}
873	resRequiredProps={resRequiredProps}
874	controlName={ICON_MARGIN}
875	/>
876	</PanelBody>
877	<PanelBody
878	title={__("Button", "betterdocs")}
879	initialOpen={false}
880	>
881	<ToggleControl
882	label={__("Show Icon", "betterdocs")}
883	checked={showButtonIcon}
884	onChange={() => {
885	setAttributes({
886	showButtonIcon: !showButtonIcon,
887	});
888	}}
889	/>
890	{showButtonIcon && (
891	<>
892	<BaseControl label={__("Icon", "betterdocs")}>
893	<FontIconPicker
894	icons={faIcons}
895	value={buttonIcon}
896	onChange={(buttonIcon) =>
897	setAttributes({
898	buttonIcon,
899	})
900	}
901	appendTo="body"
902	closeOnSelect
903	/>
904	</BaseControl>
905	<SelectControl
906	label={__("Icon Positon", "betterdocs")}
907	value={buttonIconPosition}
908	options={[
909	{
910	value: "after",
911	label: __("After", "betterdocs"),
912	},
913	{
914	value: "before",
915	label: __("Before", "betterdocs"),
916	},
917	]}
918	onChange={(newButtonIconPosition) =>
919	setAttributes({
920	buttonIconPosition: newButtonIconPosition,
921	})
922	}
923	/>
924	</>
925	)}
926	<TypographyDropdown
927	baseLabel={__("Typography", "betterdocs")}
928	typographyPrefixConstant={typoPrefix_button}
929	resRequiredProps={resRequiredProps}
930	defaultFontSize={16}
931	/>
932	<ColorControl
933	label={__("Color", "betterdocs")}
934	color={buttonColor}
935	onChange={(buttonColor) => setAttributes({ buttonColor })}
936	/>
937	<ColorControl
938	label={__("Hover Color", "betterdocs")}
939	color={buttonHoverColor}
940	onChange={(buttonHoverColor) =>
941	setAttributes({
942	buttonHoverColor,
943	})
944	}
945	/>
946	<ResponsiveDimensionsControl
947	baseLabel={__("Padding", "betterdocs")}
948	resRequiredProps={resRequiredProps}
949	controlName={BTN_PADDING}
950	/>
951	<ResponsiveDimensionsControl
952	baseLabel={__("Margin", "betterdocs")}
953	resRequiredProps={resRequiredProps}
954	controlName={BTN_MARGIN}
955	/>
956	<BaseControl>
957	<h3 className="eb-control-title">{__("Background")}</h3>
958	</BaseControl>
959	<BackgroundControl
960	controlName={BTN_BACKGROUND}
961	resRequiredProps={resRequiredProps}
962	noOverlay={true}
963	noMainBgi={true}
964	/>
965	<BaseControl>
966	<h3 className="eb-control-title">
967	{__("Border", "betterdocs")}
968	</h3>
969	</BaseControl>
970	<BorderShadowControl
971	controlName={BTN_BORDER}
972	noShadow={true}
973	resRequiredProps={resRequiredProps}
974	/>
975	<BaseControl
976	label={__("Alignment")}
977	id="eb-button-group-alignment"
978	>
979	<ButtonGroup id="eb-button-group-alignment">
980	{BUTTON_POSITION.map((item) => (
981	<Button
982	key={item.value}
983	isLarge
984	isPrimary={buttonPosition === item.value}
985	isSecondary={buttonPosition !== item.value}
986	onClick={() =>
987	setAttributes({
988	buttonPosition: item.value,
989	})
990	}
991	>
992	{item.label}
993	</Button>
994	))}
995	</ButtonGroup>
996	</BaseControl>
997	</PanelBody>
998	</>
999	)}
1000	{/* {tab.name === "advance" && (
1001	<PanelBody title={__("Wrapper", "betterdocs")}>
1002	<ResponsiveDimensionsControl
1003	baseLabel={__("Margin", "betterdocs")}
1004	resRequiredProps={resRequiredProps}
1005	controlName={WRAPPER_MARGIN}
1006	/>
1007	</PanelBody>
1008	)} */}
1009	</div>
1010	)}
1011	</TabPanel>
1012	</div>
1013	</InspectorControls>
1014	);
1015	};
1016
1017	export default withSelect((select) => {
1018	return {
1019	docCategories: select("core").getEntityRecords("taxonomy", "doc_category", {
1020	per_page: -1,
1021	}),
1022	};
1023	})(Inspector);
1024