BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites / trunk

BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites vtrunk

blockspare / assets / images / inspector.js

inspector.js in BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites trunk, at assets/images/inspector.js

2,157 lines 57.7 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import compact from 'lodash/compact';
5	import map from 'lodash/map';
6	/**
7	* Latest Post Box depedencies
8	*/
9
10	import ImageDesignStyleFull1 from '../../utils/component/design-separator-control/images/blockspare-posts-block-full-layout1.png';
11	import ImageDesignStyleFull2 from '../../utils/component/design-separator-control/images/blockspare-posts-block-full-layout2.png';
12	import ImageDesignStyleFull3 from '../../utils/component/design-separator-control/images/blockspare-posts-block-full-layout3.png';
13	import ImageDesignStyleFull4 from '../../utils/component/design-separator-control/images/blockspare-posts-block-full-layout4.png';
14	import ImageDesignStyleFull5 from '../../utils/component/design-separator-control/images/blockspare-posts-block-full-layout5.png';
15	import ImageDesignStyleFull6 from '../../utils/component/design-separator-control/images/blockspare-posts-block-full-layout6.png';
16
17	import ImageDesignStyleContent1 from '../../utils/component/design-separator-control/images/blockspare-posts-block-content-order-layout-1.png';
18	import ImageDesignStyleContent2 from '../../utils/component/design-separator-control/images/blockspare-posts-block-content-order-layout-2.png';
19	import ImageDesignStyleContent3 from '../../utils/component/design-separator-control/images/blockspare-posts-block-content-order-layout-3.png';
20	import ImageDesignStyleContent4 from '../../utils/component/design-separator-control/images/blockspare-posts-block-content-order-layout-4.png';
21	import ImageDesignStyleContent5 from '../../utils/component/design-separator-control/images/blockspare-posts-block-content-order-layout-5.png';
22	import ImageDesignStyleContent6 from '../../utils/component/design-separator-control/images/blockspare-posts-block-content-order-layout-6.png';
23	import DesignPanelBody from '../../utils/component/design-panel-body';
24
25	import Margin from '../../utils/margin';
26	import TypographyControl from '../../utils/component/typography';
27	import BoxShadow from '../../utils/component/boxshadow';
28	import ImageFilltyle1 from '../../utils/component/design-separator-control/images/category-fill.png';
29	import ImageBorderStyle2 from '../../utils/component/design-separator-control/images/category-border.png';
30	import ImageNoneStyle3 from '../../utils/component/design-separator-control/images/category-none.png';
31	import BSIconSettings from '../../utils/post-meta-icons/icon-settings';
32	/**
33	* WordPress dependencies
34	*/
35	import { Component } from '@wordpress/element';
36	import { __ } from '@wordpress/i18n';
37	const { addFilter, applyFilters } = wp.hooks;
38	const MAX_POSTS_COLUMNS = 6;
39	// Import block components
40	import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
41
42	// Import Inspector components
43	import {
44	PanelBody,
45	QueryControls,
46	RangeControl,
47	SelectControl,
48	TextControl,
49	ToggleControl,
50	} from '@wordpress/components';
51
52	const { addQueryArgs } = wp.url;
53
54	const { apiFetch } = wp;
55
56	/**
57	* Create an Inspector Controls wrapper Component
58	*/
59	export default class Inspector extends Component {
60	constructor() {
61	super( ...arguments );
62	this.state = { categoriesList: [] };
63	}
64
65	componentDidMount() {
66	this.stillMounted = true;
67	this.fetchRequest = apiFetch( {
68	path: addQueryArgs( '/wp/v2/categories', { per_page: -1 } ),
69	} )
70	.then( ( categoriesList ) => {
71	if ( this.stillMounted ) {
72	this.setState( { categoriesList } );
73	}
74	} )
75	.catch( () => {
76	if ( this.stillMounted ) {
77	this.setState( { categoriesList: [] } );
78	}
79	} );
80	}
81
82	componentWillUnmount() {
83	this.stillMounted = false;
84	}
85
86	imageSizeSelect() {
87	const getSettings = wp?.data
88	?.select( 'core/editor' )
89	?.getEditorSettings();
90
91	return compact(
92	map( getSettings?.imageSizes, ( { name, slug } ) => {
93	return {
94	value: slug,
95	label: name,
96	};
97	} )
98	);
99	}
100
101	render() {
102	// Setup the attributes
103	const {
104	attributes: {
105	postType,
106	displayPostTitle,
107	PostTitleLength,
108	displayPostCategory,
109	displayPostAuthor,
110	displayPostDate,
111	displayPostExcerpt,
112	displayPostLink,
113	excerptLength,
114	readMoreText,
115	design = 'blockspare-posts-block-list-layout-1',
116	enableTwoColumn,
117	grid = 'blockspare-posts-block-grid-layout-1',
118	tile = 'blockspare-posts-block-tile-layout-1',
119	express = 'blockspare-posts-block-express-layout-1',
120	full = 'blockspare-posts-block-full-layout-1',
121	columns,
122	postsToShow,
123	backGroundColor,
124	enableBackgroundColor,
125	marginTop,
126	marginBottom,
127	imageSize,
128	order,
129	orderBy,
130	categories,
131	offset,
132	contentOrder,
133	postTitleColor,
134	postTitleFontSize,
135	linkColor,
136	generalColor,
137	borderRadius,
138	enableBoxShadow,
139	xOffset,
140	yOffset,
141	blur,
142	spread,
143	shadowColor,
144
145	titleLoadGoogleFonts,
146	titleFontFamily,
147	titleFontWeight,
148	titleFontSubset,
149	titleFontSizeType,
150	titleFontSizeMobile,
151	titleFontSizeTablet,
152
153	descriptionFontSize,
154	descriptionFontFamily,
155	descriptionFontWeight,
156	descriptionFontSubset,
157	descriptionFontSizeType,
158	descriptionFontSizeMobile,
159	descriptionFontSizeTablet,
160	descriptionLoadGoogleFonts,
161	postListingOption,
162	tileGaps,
163
164	contentPaddingTop,
165	contentPaddingLeft,
166	contentPaddingBottom,
167	contentPaddingRight,
168	categoryMarginTop,
169	categoryMarginBottom,
170	titleMarginTop,
171	titleMarginBottom,
172	metaMarginTop,
173	metaMarginBottom,
174	exceprtMarginTop,
175	exceprtMarginBottom,
176	moreLinkMarginTop,
177	moreLinkMarginBottom,
178
179	categoryLayoutOption,
180	categoryTextColor,
181	categoryBackgroundColor,
182	categoryBorderColor,
183	categoryBorderWidth,
184	categoryBorderRadius,
185
186	tilePostTitleColor,
187	tilePostLinkColor,
188	tilePostGeneralColor,
189
190	authorIcon,
191	dateIcon,
192	enableComment,
193	commentIcon,
194
195	expressLayout5TextOverLink,
196	expressLayout5TextOverGeneral,
197
198	spostTitleFontSize,
199	spostTitleFontFamily,
200	spostTitleFontWeight,
201	spostTitleFontSubset,
202	spostTitleFontSizeType,
203	spostTitleFontSizeMobile,
204	spostTitleFontSizeTablet,
205	spostTitleLoadGoogleFonts,
206
207	displaySpotLightExceprt,
208
209	spotCategoryTextColor,
210	spotCategoryBorderColor,
211	spotCategoryBackgroundColor,
212	},
213	attributes,
214	setAttributes,
215	latestPosts,
216	} = this.props;
217
218	const hasPosts = Array.isArray( latestPosts ) && latestPosts.length;
219
220	//const {categoriesList} = this.state;
221	const onChangeTitlecolor = ( value ) =>
222	setAttributes( { postTitleColor: value } );
223	const onChangeLinkcolor = ( value ) =>
224	setAttributes( { linkColor: value } );
225	const onChangeGeneralcolor = ( value ) =>
226	setAttributes( { generalColor: value } );
227	const onChangeBackgroundcolor = ( value ) =>
228	setAttributes( { backGroundColor: value } );
229
230	const onChangeCategoryTextcolor = ( value ) =>
231	setAttributes( { categoryTextColor: value } );
232	const onChangeCategoryBackgroundcolor = ( value ) =>
233	setAttributes( { categoryBackgroundColor: value } );
234	const onChangeCategoryBordercolor = ( value ) =>
235	setAttributes( { categoryBorderColor: value } );
236
237	const onChangeSpotCategoryTextcolor = ( value ) =>
238	setAttributes( { spotCategoryTextColor: value } );
239	const onChangeSpotCategoryBackgroundcolor = ( value ) =>
240	setAttributes( { spotCategoryBackgroundColor: value } );
241	const onChangeSpotCategoryBordercolor = ( value ) =>
242	setAttributes( { spotCategoryBorderColor: value } );
243
244	const imageSizeOptions = this.imageSizeSelect();
245
246	const imageSizeValue = () => {
247	for ( let i = 0; i < imageSizeOptions.length; i++ ) {
248	if ( imageSizeOptions[ i ].value === imageSize ) {
249	return imageSize;
250	}
251	}
252	return 'full';
253	};
254
255	// Check the post type
256	const isPost = postType === 'post';
257
258	const contentListGridOption = [
259	{
260	value: 'blockspare-posts-block-latestpost-grid',
261	label: __( 'Grid', 'blockspare' ),
262	},
263	{
264	value: 'blockspare-posts-block-latestpost-list',
265	label: __( 'List', 'blockspare' ),
266	},
267	{
268	value: 'blockspare-posts-block-latestpost-full',
269	label: __( 'Full', 'blockspare' ),
270	},
271	{
272	value: 'blockspare-posts-block-latestpost-express',
273	label: __( 'Express', 'blockspare' ),
274	},
275	{
276	value: 'blockspare-posts-block-latestpost-tile',
277	label: __( 'Tile', 'blockspare' ),
278	},
279	];
280
281	const metaColorDate = {
282	value: generalColor,
283	onChange: onChangeGeneralcolor,
284	label: __( 'General Color', 'blockspare' ),
285	};
286
287	const authorLinkColor = {
288	value: linkColor,
289	onChange: onChangeLinkcolor,
290	label: __( 'Link Color', 'blockspare' ),
291	};
292
293	const categoryBgColor = {
294	value: categoryBackgroundColor,
295	onChange: onChangeCategoryBackgroundcolor,
296	label: __( 'Background Color', 'blockspare' ),
297	};
298
299	const categoryBorderColors = {
300	value: categoryBorderColor,
301	onChange: onChangeCategoryBordercolor,
302	label: __( 'Border Color', 'blockspare' ),
303	};
304
305	const spotCategoryTextColorOpt = {
306	value: spotCategoryTextColor,
307	onChange: onChangeSpotCategoryTextcolor,
308	label: __( 'Text Over Color', 'blockspare' ),
309	};
310
311	const spotcategoryBgColor = {
312	value: spotCategoryBackgroundColor,
313	onChange: onChangeSpotCategoryBackgroundcolor,
314	label: __( 'Text Over Background Color', 'blockspare' ),
315	};
316
317	const spotCategoryBorderColors = {
318	value: spotCategoryBorderColor,
319	onChange: onChangeSpotCategoryBordercolor,
320	label: __( 'Text Over Border Color', 'blockspare' ),
321	};
322
323	const titlePostColors = {
324	value: postTitleColor,
325	onChange: onChangeTitlecolor,
326	label: __( 'Title Color', 'blockspare' ),
327	};
328
329	const onChangeTileTitlecolor = ( value ) =>
330	setAttributes( { tilePostTitleColor: value } );
331	const tilePostColors = {
332	value: tilePostTitleColor,
333	onChange: onChangeTileTitlecolor,
334	label: __( 'Title Over Image Color', 'blockspare' ),
335	};
336
337	const onChangeTileLinkcolor = ( value ) =>
338	setAttributes( { tilePostLinkColor: value } );
339	const onChangeTileGeneralcolor = ( value ) =>
340	setAttributes( { tilePostGeneralColor: value } );
341
342	const tileMetaColorDate = {
343	value: tilePostGeneralColor,
344	onChange: onChangeTileGeneralcolor,
345	label: __( 'Text Over General Color', 'blockspare' ),
346	};
347
348	const TileAuthorLinkColor = {
349	value: tilePostLinkColor,
350	onChange: onChangeTileLinkcolor,
351	label: __( 'Text Over Link Color', 'blockspare' ),
352	};
353
354	const onChangeexpressTextOverLinkColor = ( value ) =>
355	setAttributes( { expressLayout5TextOverLink: value } );
356	const onChangeexpressTextOverGeneralColor = ( value ) =>
357	setAttributes( { expressLayout5TextOverGeneral: value } );
358
359	const expressTextOverLinkColor = {
360	value: expressLayout5TextOverLink,
361	onChange: onChangeexpressTextOverLinkColor,
362	label: __( 'Text Over Link Color', 'blockspare' ),
363	};
364
365	const expressTextOverGeneralColor = {
366	value: expressLayout5TextOverGeneral,
367	onChange: onChangeexpressTextOverGeneralColor,
368	label: __( 'Text Over General Color', 'blockspare' ),
369	};
370
371	const categoriesList = JSON.parse( blockspare_globals.taxonomies );
372
373	const categorySelect = {
374	value: '',
375	label: __( 'Select Category ' ),
376	};
377
378	categoriesList.unshift( categorySelect );
379
380	let iconPanel = false;
381
382	if (
383	displayPostAuthor == true \|\|
384	displayPostDate == true \|\|
385	enableComment == true
386	) {
387	iconPanel = true;
388	}
389
390	return (
391	<InspectorControls>
392	<div className="blockspare-posts-block-inspector-wrapper">
393	<PanelBody
394	title={ __( 'Layout Options', 'blockspare' ) }
395	className={
396	isPost ? null : 'blockspare-posts-block-hide-query'
397	}
398	initialOpen={ false }
399	>
400	<SelectControl
401	label={ __( 'Choose Layout', 'blockspare' ) }
402	value={ postListingOption }
403	options={ contentListGridOption }
404	onChange={ ( value ) =>
405	this.props.setAttributes( {
406	postListingOption: value,
407	} )
408	}
409	/>
410
411	{ postListingOption ===
412	'blockspare-posts-block-latestpost-list' && (
413	<DesignPanelBody
414	initialOpen={ true }
415	selected={ design }
416	paneltitle={ _( 'Layouts', 'blockspare' ) }
417	options={ applyFilters(
418	'blockspare-posts-block.cta.edit.layouts',
419	[
420	{
421	label: __(
422	'List Style 1',
423	'blockspare'
424	),
425	value: 'blockspare-posts-block-list-layout-1',
426	image: ImageDesignStyle1,
427	},
428	{
429	label: __(
430	'List Style 2',
431	'blockspare'
432	),
433	value: 'blockspare-posts-block-list-layout-2',
434	image: ImageDesignStyle2,
435	},
436	{
437	label: __(
438	'List List Style 3',
439	'blockspare'
440	),
441	value: 'blockspare-posts-block-list-layout-3',
442	image: ImageDesignStyle3,
443	},
444	{
445	label: __(
446	'List Style 4',
447	'blockspare'
448	),
449	value: 'blockspare-posts-block-list-layout-4',
450	image: ImageDesignStyle4,
451	},
452	{
453	label: __(
454	'List Style 5',
455	'blockspare'
456	),
457	value: 'blockspare-posts-block-list-layout-5',
458	image: ImageDesignStyle5,
459	},
460	{
461	label: __(
462	'List Style 6',
463	'blockspare'
464	),
465	value: 'blockspare-posts-block-list-layout-6',
466	image: ImageDesignStyle6,
467	},
468	]
469	) }
470	onChange={ ( design ) =>
471	setAttributes( { design } )
472	}
473	></DesignPanelBody>
474	) }
475	{ postListingOption ===
476	'blockspare-posts-block-latestpost-grid' && (
477	<DesignPanelBody
478	initialOpen={ true }
479	selected={ grid }
480	paneltitle={ 'Layout' }
481	options={ applyFilters(
482	'blockspare-posts-block.cta.edit.layouts',
483	[
484	{
485	label: __(
486	'Grid Style 1',
487	'blockspare'
488	),
489	value: 'blockspare-posts-block-grid-layout-1',
490	image: ImageDesignStyleGrid1,
491	},
492	{
493	label: __(
494	'Grid Style 2',
495	'blockspare'
496	),
497	value: 'blockspare-posts-block-grid-layout-2',
498	image: ImageDesignStyleGrid2,
499	},
500	{
501	label: __(
502	'Grid Style 3',
503	'blockspare'
504	),
505	value: 'blockspare-posts-block-grid-layout-3',
506	image: ImageDesignStyleGrid3,
507	},
508	{
509	label: __(
510	'Grid Style 4',
511	'blockspare'
512	),
513	value: 'blockspare-posts-block-grid-layout-4',
514	image: ImageDesignStyleGrid4,
515	},
516	{
517	label: __(
518	'Grid Style 5',
519	'blockspare'
520	),
521	value: 'blockspare-posts-block-grid-layout-5',
522	image: ImageDesignStyleGrid5,
523	},
524	{
525	label: __(
526	'Grid Style 6',
527	'blockspare'
528	),
529	value: 'blockspare-posts-block-grid-layout-6',
530	image: ImageDesignStyleGrid6,
531	},
532	]
533	) }
534	onChange={ ( grid ) =>
535	setAttributes( { grid } )
536	}
537	></DesignPanelBody>
538	) }
539
540	{ postListingOption ===
541	'blockspare-posts-block-latestpost-tile' && (
542	<DesignPanelBody
543	initialOpen={ true }
544	selected={ tile }
545	paneltitle={ 'Layout' }
546	options={ applyFilters(
547	'blockspare-posts-block.cta.edit.layouts',
548	[
549	{
550	label: __(
551	'Tile Style 1',
552	'blockspare'
553	),
554	value: 'blockspare-posts-block-tile-layout-1',
555	image: ImageDesignStyleTile1,
556	},
557	{
558	label: __(
559	'Tile Style 2',
560	'blockspare'
561	),
562	value: 'blockspare-posts-block-tile-layout-2',
563	image: ImageDesignStyleTile2,
564	},
565	{
566	label: __(
567	'Tile Style 3',
568	'blockspare'
569	),
570	value: 'blockspare-posts-block-tile-layout-3',
571	image: ImageDesignStyleTile3,
572	},
573	{
574	label: __(
575	'Tile Style 4',
576	'blockspare'
577	),
578	value: 'blockspare-posts-block-tile-layout-4',
579	image: ImageDesignStyleTile4,
580	},
581	{
582	label: __(
583	'Tile Style 5',
584	'blockspare'
585	),
586	value: 'blockspare-posts-block-tile-layout-5',
587	image: ImageDesignStyleTile5,
588	},
589	{
590	label: __(
591	'Tile Style 6',
592	'blockspare'
593	),
594	value: 'blockspare-posts-block-tile-layout-6',
595	image: ImageDesignStyleTile6,
596	},
597	]
598	) }
599	onChange={ ( tile ) =>
600	setAttributes( { tile } )
601	}
602	></DesignPanelBody>
603	) }
604
605	{ postListingOption ===
606	'blockspare-posts-block-latestpost-express' && (
607	<DesignPanelBody
608	initialOpen={ true }
609	selected={ express }
610	paneltitle={ 'Layout' }
611	options={ applyFilters(
612	'blockspare-posts-block.cta.edit.layouts',
613	[
614	{
615	label: __(
616	'Express Style 1',
617	'blockspare'
618	),
619	value: 'blockspare-posts-block-express-layout-1',
620	image: ImageDesignStyleExpress1,
621	},
622	{
623	label: __(
624	'Express Style 2',
625	'blockspare'
626	),
627	value: 'blockspare-posts-block-express-layout-2',
628	image: ImageDesignStyleExpress2,
629	},
630	{
631	label: __(
632	'Express Style 3',
633	'blockspare'
634	),
635	value: 'blockspare-posts-block-express-layout-3',
636	image: ImageDesignStyleExpress3,
637	},
638	{
639	label: __(
640	'Express Style 4',
641	'blockspare'
642	),
643	value: 'blockspare-posts-block-express-layout-4',
644	image: ImageDesignStyleExpress4,
645	},
646	{
647	label: __(
648	'Express Style 5',
649	'blockspare'
650	),
651	value: 'blockspare-posts-block-express-layout-5',
652	image: ImageDesignStyleExpress5,
653	},
654	{
655	label: __(
656	'Express Style 6',
657	'blockspare'
658	),
659	value: 'blockspare-posts-block-express-layout-6',
660	image: ImageDesignStyleExpress6,
661	},
662	]
663	) }
664	onChange={ ( express ) =>
665	setAttributes( { express } )
666	}
667	></DesignPanelBody>
668	) }
669
670	{ postListingOption ===
671	'blockspare-posts-block-latestpost-full' && (
672	<DesignPanelBody
673	initialOpen={ true }
674	selected={ full }
675	paneltitle={ 'Layout' }
676	options={ applyFilters(
677	'blockspare-posts-block.cta.edit.layouts',
678	[
679	{
680	label: __(
681	'Full Style 1',
682	'blockspare'
683	),
684	value: 'blockspare-posts-block-full-layout-1',
685	image: ImageDesignStyleFull1,
686	},
687	{
688	label: __(
689	'Full Style 2',
690	'blockspare'
691	),
692	value: 'blockspare-posts-block-full-layout-2',
693	image: ImageDesignStyleFull2,
694	},
695	{
696	label: __(
697	'Full Style 3',
698	'blockspare'
699	),
700	value: 'blockspare-posts-block-full-layout-3',
701	image: ImageDesignStyleFull3,
702	},
703	{
704	label: __(
705	'Full Style 4',
706	'blockspare'
707	),
708	value: 'blockspare-posts-block-full-layout-4',
709	image: ImageDesignStyleFull4,
710	},
711	{
712	label: __(
713	'Full Style 5',
714	'blockspare'
715	),
716	value: 'blockspare-posts-block-full-layout-5',
717	image: ImageDesignStyleFull5,
718	},
719	{
720	label: __(
721	'Full Style 6',
722	'blockspare'
723	),
724	value: 'blockspare-posts-block-full-layout-6',
725	image: ImageDesignStyleFull6,
726	},
727	]
728	) }
729	onChange={ ( full ) =>
730	setAttributes( { full } )
731	}
732	></DesignPanelBody>
733	) }
734	</PanelBody>
735
736	<PanelBody
737	title={ __( 'Post Settings', 'blockspare' ) }
738	className={
739	isPost ? null : 'blockspare-posts-block-hide-query'
740	}
741	initialOpen={ false }
742	>
743	<SelectControl
744	label={ `Category` }
745	value={ categories }
746	onChange={ ( value ) =>
747	setAttributes( { categories: value } )
748	}
749	options={ categoriesList }
750	/>
751
752	<QueryControls
753	{ ...{ order, orderBy } }
754	onCategoryChange={ ( value ) =>
755	setAttributes( {
756	categories:
757	'' !== value ? value : undefined,
758	} )
759	}
760	numberOfItems={ postsToShow }
761	onOrderChange={ ( value ) =>
762	setAttributes( { order: value } )
763	}
764	onOrderByChange={ ( value ) =>
765	setAttributes( { orderBy: value } )
766	}
767	onNumberOfItemsChange={ ( value ) =>
768	setAttributes( { postsToShow: value } )
769	}
770	/>
771
772	<RangeControl
773	label={ __(
774	'Number of items to offset',
775	'blockspare'
776	) }
777	value={ offset }
778	onChange={ ( value ) =>
779	setAttributes( { offset: value } )
780	}
781	min={ 0 }
782	max={ 20 }
783	/>
784	</PanelBody>
785
786	<PanelBody
787	title={ __( 'Block Settings', 'blockspare' ) }
788	className={
789	isPost ? null : 'blockspare-posts-block-hide-query'
790	}
791	initialOpen={ false }
792	>
793	<SelectControl
794	label={ __( 'Image Size', 'blockspare' ) }
795	value={ imageSizeValue() }
796	options={ imageSizeOptions }
797	onChange={ ( value ) =>
798	this.props.setAttributes( { imageSize: value } )
799	}
800	/>
801	{ postListingOption ===
802	'blockspare-posts-block-latestpost-grid' && (
803	<RangeControl
804	label={ __( 'Columns', 'blockspare' ) }
805	value={ columns }
806	onChange={ ( value ) =>
807	setAttributes( { columns: value } )
808	}
809	min={ 1 }
810	max={
811	! hasPosts
812	? MAX_POSTS_COLUMNS
813	: Math.min(
814	MAX_POSTS_COLUMNS,
815	latestPosts.length
816	)
817	}
818	/>
819	) }
820	{ postListingOption ===
821	'blockspare-posts-block-latestpost-list' && (
822	<ToggleControl
823	label={ __(
824	'Display in Two Columns',
825	'blockspare'
826	) }
827	checked={ enableTwoColumn }
828	onChange={ () =>
829	this.props.setAttributes( {
830	enableTwoColumn: ! enableTwoColumn,
831	} )
832	}
833	/>
834	) }
835
836	{ postListingOption ===
837	'blockspare-posts-block-latestpost-tile' && (
838	<RangeControl
839	label={ __( 'Tile Gaps', 'blockspare' ) }
840	value={ tileGaps }
841	onChange={ ( value ) =>
842	setAttributes( { tileGaps: value } )
843	}
844	min={ 0 }
845	step={ 1 }
846	max={ 5 }
847	/>
848	) }
849
850	<ToggleControl
851	label={ __( 'Display Title', 'blockspare' ) }
852	checked={ displayPostTitle }
853	onChange={ () =>
854	this.props.setAttributes( {
855	displayPostTitle: ! displayPostTitle,
856	} )
857	}
858	/>
859
860	<ToggleControl
861	label={ __( 'Display Category', 'blockspare' ) }
862	checked={ displayPostCategory }
863	onChange={ () =>
864	this.props.setAttributes( {
865	displayPostCategory: ! displayPostCategory,
866	} )
867	}
868	/>
869
870	<ToggleControl
871	label={ __( 'Display Author', 'blockspare' ) }
872	checked={ displayPostAuthor }
873	onChange={ () =>
874	this.props.setAttributes( {
875	displayPostAuthor: ! displayPostAuthor,
876	} )
877	}
878	/>
879
880	<ToggleControl
881	label={ __( 'Display Date', 'blockspare' ) }
882	checked={ displayPostDate }
883	onChange={ () =>
884	this.props.setAttributes( {
885	displayPostDate: ! displayPostDate,
886	} )
887	}
888	/>
889
890	<ToggleControl
891	label={ __(
892	'Display Comment Count',
893	'blockspare'
894	) }
895	checked={ enableComment }
896	onChange={ () =>
897	this.props.setAttributes( {
898	enableComment: ! enableComment,
899	} )
900	}
901	/>
902
903	<ToggleControl
904	label={ __( 'Display Excerpt', 'blockspare' ) }
905	checked={ displayPostExcerpt }
906	onChange={ () =>
907	this.props.setAttributes( {
908	displayPostExcerpt: ! displayPostExcerpt,
909	} )
910	}
911	/>
912
913	{ displayPostExcerpt &&
914	postListingOption ===
915	'blockspare-posts-block-latestpost-express' && (
916	<ToggleControl
917	label={ __(
918	'Display Excerpt On Spotlight Only',
919	'blockspare'
920	) }
921	checked={ displaySpotLightExceprt }
922	onChange={ () =>
923	this.props.setAttributes( {
924	displaySpotLightExceprt:
925	! displaySpotLightExceprt,
926	} )
927	}
928	/>
929	) }
930
931	{ displayPostExcerpt &&
932	postListingOption ===
933	'blockspare-posts-block-latestpost-tile' && (
934	<div>
935	{ tile !==
936	'blockspare-posts-block-tile-layout-1' && (
937	<ToggleControl
938	label={ __(
939	'Display Excerpt On Spotlight Only',
940	'blockspare'
941	) }
942	checked={ displaySpotLightExceprt }
943	onChange={ () =>
944	this.props.setAttributes( {
945	displaySpotLightExceprt:
946	! displaySpotLightExceprt,
947	} )
948	}
949	/>
950	) }
951	</div>
952	) }
953	{ displayPostExcerpt && (
954	<RangeControl
955	label={ __( 'Excerpt Length', 'blockspare' ) }
956	value={ excerptLength }
957	onChange={ ( value ) =>
958	setAttributes( { excerptLength: value } )
959	}
960	min={ 0 }
961	max={ 150 }
962	/>
963	) }
964
965	<ToggleControl
966	label={ __(
967	'Display Read More Link',
968	'blockspare'
969	) }
970	checked={ displayPostLink }
971	onChange={ () =>
972	this.props.setAttributes( {
973	displayPostLink: ! displayPostLink,
974	} )
975	}
976	/>
977	{ displayPostLink && (
978	<TextControl
979	label={ __(
980	'Customize Continue Reading Text',
981	'blockspare'
982	) }
983	type="text"
984	value={ readMoreText }
985	onChange={ ( value ) =>
986	this.props.setAttributes( {
987	readMoreText: value,
988	} )
989	}
990	/>
991	) }
992
993	{ categoryLayoutOption === 'solid' && (
994	<div>
995	<RangeControl
996	label={ __(
997	'Category Border Radius',
998	'blockspare-posts-block'
999	) }
1000	value={ categoryBorderRadius }
1001	onChange={ ( value ) =>
1002	setAttributes( {
1003	categoryBorderRadius: value,
1004	} )
1005	}
1006	min={ 1 }
1007	step={ 1 }
1008	max={ 100 }
1009	/>
1010	</div>
1011	) }
1012	{ categoryLayoutOption === 'border' && (
1013	<div>
1014	<RangeControl
1015	label={ __(
1016	'Category Border Width',
1017	'blockspare-posts-block'
1018	) }
1019	value={ categoryBorderWidth }
1020	onChange={ ( value ) =>
1021	setAttributes( {
1022	categoryBorderWidth: value,
1023	} )
1024	}
1025	min={ 1 }
1026	step={ 1 }
1027	max={ 5 }
1028	/>
1029	<RangeControl
1030	label={ __(
1031	'Category Border Radius',
1032	'blockspare-posts-block'
1033	) }
1034	value={ categoryBorderRadius }
1035	onChange={ ( value ) =>
1036	setAttributes( {
1037	categoryBorderRadius: value,
1038	} )
1039	}
1040	min={ 1 }
1041	step={ 1 }
1042	max={ 100 }
1043	/>
1044	</div>
1045	) }
1046
1047	{ postListingOption !==
1048	'blockspare-posts-block-latestpost-express' && (
1049	<div>
1050	{ postListingOption !==
1051	'blockspare-posts-block-latestpost-full' &&
1052	design !==
1053	'blockspare-posts-block-list-layout-6' &&
1054	design !==
1055	'blockspare-posts-block-list-layout-5' &&
1056	design !==
1057	'blockspare-posts-block-list-layout-4' &&
1058	grid !==
1059	'blockspare-posts-block-grid-layout-6' &&
1060	grid !==
1061	'blockspare-posts-block-grid-layout-5' &&
1062	grid !==
1063	'blockspare-posts-block-grid-layout-4' && (
1064	<RangeControl
1065	label={ __(
1066	'Content Border Radius',
1067	'blockspare'
1068	) }
1069	value={ borderRadius }
1070	onChange={ ( value ) =>
1071	this.props.setAttributes( {
1072	borderRadius: value,
1073	} )
1074	}
1075	min={ 0 }
1076	max={ 50 }
1077	step={ 1 }
1078	/>
1079	) }
1080
1081	{ postListingOption ===
1082	'blockspare-posts-block-latestpost-full' && (
1083	<RangeControl
1084	label={ __(
1085	'Content Border Radius',
1086	'blockspare'
1087	) }
1088	value={ borderRadius }
1089	onChange={ ( value ) =>
1090	this.props.setAttributes( {
1091	borderRadius: value,
1092	} )
1093	}
1094	min={ 0 }
1095	max={ 50 }
1096	step={ 1 }
1097	/>
1098	) }
1099	{ postListingOption !==
1100	'blockspare-posts-block-latestpost-full' && (
1101	<div>
1102	{ design !=
1103	'blockspare-posts-block-list-layout-6' &&
1104	design !=
1105	'blockspare-posts-block-list-layout-5' &&
1106	design !=
1107	'blockspare-posts-block-list-layout-4' &&
1108	grid !=
1109	'blockspare-posts-block-grid-layout-6' &&
1110	grid !=
1111	'blockspare-posts-block-grid-layout-5' &&
1112	grid !=
1113	'blockspare-posts-block-grid-layout-4' && (
1114	<ToggleControl
1115	label={ __(
1116	'Enable Box Shadow',
1117	'blockspare'
1118	) }
1119	checked={ enableBoxShadow }
1120	onChange={ () =>
1121	this.props.setAttributes(
1122	{
1123	enableBoxShadow:
1124	! enableBoxShadow,
1125	}
1126	)
1127	}
1128	/>
1129	) }
1130	</div>
1131	) }
1132
1133	{ postListingOption ===
1134	'blockspare-posts-block-latestpost-full' && (
1135	<ToggleControl
1136	label={ __(
1137	'Enable Box Shadow',
1138	'blockspare'
1139	) }
1140	checked={ enableBoxShadow }
1141	onChange={ () =>
1142	this.props.setAttributes( {
1143	enableBoxShadow:
1144	! enableBoxShadow,
1145	} )
1146	}
1147	/>
1148	) }
1149
1150	{ postListingOption !==
1151	'blockspare-posts-block-latestpost-full' && (
1152	<div>
1153	{ enableBoxShadow &&
1154	design !=
1155	'blockspare-posts-block-list-layout-6' &&
1156	design !=
1157	'blockspare-posts-block-list-layout-5' &&
1158	design !=
1159	'blockspare-posts-block-list-layout-4' &&
1160	grid !=
1161	'blockspare-posts-block-grid-layout-6' &&
1162	grid !=
1163	'blockspare-posts-block-grid-layout-5' &&
1164	grid !=
1165	'blockspare-posts-block-grid-layout-4' && (
1166	<BoxShadow
1167	enableShadowColor={ false }
1168	enableOptions={ true }
1169	shadowColor={ shadowColor }
1170	onChangeShadowColor={ (
1171	shadowColor
1172	) =>
1173	setAttributes( {
1174	shadowColor,
1175	} )
1176	}
1177	xOffset={ xOffset }
1178	onChangeXOffset={ (
1179	xOffset
1180	) =>
1181	setAttributes( {
1182	xOffset,
1183	} )
1184	}
1185	yOffset={ yOffset }
1186	onChangeYOffset={ (
1187	yOffset
1188	) =>
1189	setAttributes( {
1190	yOffset,
1191	} )
1192	}
1193	blur={ blur }
1194	onChangeBlur={ ( blur ) =>
1195	setAttributes( {
1196	blur,
1197	} )
1198	}
1199	spread={ spread }
1200	onChangeSpread={ (
1201	spread
1202	) =>
1203	setAttributes( {
1204	spread,
1205	} )
1206	}
1207	/>
1208	) }
1209	</div>
1210	) }
1211
1212	{ postListingOption ===
1213	'blockspare-posts-block-latestpost-full' &&
1214	enableBoxShadow && (
1215	<BoxShadow
1216	enableShadowColor={ false }
1217	enableOptions={ true }
1218	shadowColor={ shadowColor }
1219	onChangeShadowColor={ (
1220	shadowColor
1221	) =>
1222	setAttributes( { shadowColor } )
1223	}
1224	xOffset={ xOffset }
1225	onChangeXOffset={ ( xOffset ) =>
1226	setAttributes( { xOffset } )
1227	}
1228	yOffset={ yOffset }
1229	onChangeYOffset={ ( yOffset ) =>
1230	setAttributes( { yOffset } )
1231	}
1232	blur={ blur }
1233	onChangeBlur={ ( blur ) =>
1234	setAttributes( { blur } )
1235	}
1236	spread={ spread }
1237	onChangeSpread={ ( spread ) =>
1238	setAttributes( { spread } )
1239	}
1240	/>
1241	) }
1242	</div>
1243	) }
1244	</PanelBody>
1245
1246	{ displayPostCategory && (
1247	<PanelBody
1248	title={ __( 'Category Style', 'blockspare' ) }
1249	initialOpen={ false }
1250	>
1251	<DesignPanelBody
1252	initialOpen={ true }
1253	selected={ categoryLayoutOption }
1254	paneltitle={ `Category layout` }
1255	options={ applyFilters(
1256	'blockspare-posts-block.cta.edit.layouts',
1257	[
1258	{
1259	label: __( 'Solid', 'blockspare' ),
1260	value: 'solid',
1261	image: ImageFilltyle1,
1262	},
1263	{
1264	label: __( 'Border', 'blockspare' ),
1265	value: 'border',
1266	image: ImageBorderStyle2,
1267	},
1268	{
1269	label: __( 'None', 'blockspare' ),
1270	value: 'none',
1271	image: ImageNoneStyle3,
1272	},
1273	]
1274	) }
1275	onChange={ ( categoryLayoutOption ) =>
1276	setAttributes( { categoryLayoutOption } )
1277	}
1278	></DesignPanelBody>
1279	</PanelBody>
1280	) }
1281
1282	<DesignPanelBody
1283	initialOpen={ false }
1284	selected={ contentOrder }
1285	paneltitle={ 'Content Order' }
1286	options={ applyFilters(
1287	'blockspare-posts-block.cta.edit.layouts',
1288	[
1289	{
1290	label: __( 'Style 1', 'blockspare' ),
1291	value: 'content-order-1',
1292	image: ImageDesignStyleContent1,
1293	},
1294
1295	{
1296	label: __( 'Style 2', 'blockspare' ),
1297	value: 'content-order-2',
1298	image: ImageDesignStyleContent2,
1299	},
1300
1301	{
1302	label: __( 'Style 3', 'blockspare' ),
1303	value: 'content-order-3',
1304	image: ImageDesignStyleContent3,
1305	},
1306
1307	{
1308	label: __( 'Style 4', 'blockspare' ),
1309	value: 'content-order-4',
1310	image: ImageDesignStyleContent4,
1311	},
1312	{
1313	label: __( 'Style 5', 'blockspare' ),
1314	value: 'content-order-5',
1315	image: ImageDesignStyleContent5,
1316	},
1317
1318	{
1319	label: __( 'Style 6', 'blockspare' ),
1320	value: 'content-order-6',
1321	image: ImageDesignStyleContent6,
1322	},
1323	]
1324	) }
1325	onChange={ ( contentOrder ) =>
1326	setAttributes( { contentOrder } )
1327	}
1328	></DesignPanelBody>
1329
1330	<PanelBody
1331	title={ __( 'Typography Settings', 'blockspare' ) }
1332	initialOpen={ false }
1333	>
1334	{ postListingOption ===
1335	'blockspare-posts-block-latestpost-tile' &&
1336	tile !== 'blockspare-posts-block-tile-layout-1' && (
1337	<TypographyControl
1338	label={ __(
1339	'Spotlight Title Fonts Settings'
1340	) }
1341	attributes={ attributes }
1342	setAttributes={ setAttributes }
1343	loadGoogleFonts={ {
1344	value: spostTitleLoadGoogleFonts,
1345	label: __(
1346	'spostTitleLoadGoogleFonts'
1347	),
1348	} }
1349	fontFamily={ {
1350	value: spostTitleFontFamily,
1351	label: __( 'spostTitleFontFamily' ),
1352	} }
1353	fontWeight={ {
1354	value: spostTitleFontWeight,
1355	label: __( 'spostTitleFontWeight' ),
1356	} }
1357	fontSubset={ {
1358	value: spostTitleFontSubset,
1359	label: __( 'spostTitleFontSubset' ),
1360	} }
1361	fontSizeType={ {
1362	value: spostTitleFontSizeType,
1363	label: __( 'spostTitleFontSizeType' ),
1364	} }
1365	fontSize={ {
1366	value: spostTitleFontSize,
1367	label: __( 'spostTitleFontSize' ),
1368	} }
1369	fontSizeMobile={ {
1370	value: spostTitleFontSizeMobile,
1371	label: __( 'spostTitleFontSizeMobile' ),
1372	} }
1373	fontSizeTablet={ {
1374	value: spostTitleFontSizeTablet,
1375	label: __( 'spostTitleFontSizeTablet' ),
1376	} }
1377	disableLineHeight={ true }
1378	/>
1379	) }
1380
1381	{ postListingOption ===
1382	'blockspare-posts-block-latestpost-express' && (
1383	<TypographyControl
1384	label={ __( 'Spotlight Title Fonts Settings' ) }
1385	attributes={ attributes }
1386	setAttributes={ setAttributes }
1387	loadGoogleFonts={ {
1388	value: spostTitleLoadGoogleFonts,
1389	label: __( 'spostTitleLoadGoogleFonts' ),
1390	} }
1391	fontFamily={ {
1392	value: spostTitleFontFamily,
1393	label: __( 'spostTitleFontFamily' ),
1394	} }
1395	fontWeight={ {
1396	value: spostTitleFontWeight,
1397	label: __( 'spostTitleFontWeight' ),
1398	} }
1399	fontSubset={ {
1400	value: spostTitleFontSubset,
1401	label: __( 'spostTitleFontSubset' ),
1402	} }
1403	fontSizeType={ {
1404	value: spostTitleFontSizeType,
1405	label: __( 'spostTitleFontSizeType' ),
1406	} }
1407	fontSize={ {
1408	value: spostTitleFontSize,
1409	label: __( 'spostTitleFontSize' ),
1410	} }
1411	fontSizeMobile={ {
1412	value: spostTitleFontSizeMobile,
1413	label: __( 'spostTitleFontSizeMobile' ),
1414	} }
1415	fontSizeTablet={ {
1416	value: spostTitleFontSizeTablet,
1417	label: __( 'spostTitleFontSizeTablet' ),
1418	} }
1419	disableLineHeight={ true }
1420	/>
1421	) }
1422
1423	{ displayPostTitle && (
1424	<TypographyControl
1425	label={ __( 'Title Fonts Settings' ) }
1426	attributes={ attributes }
1427	setAttributes={ setAttributes }
1428	loadGoogleFonts={ {
1429	value: titleLoadGoogleFonts,
1430	label: __( 'titleLoadGoogleFonts' ),
1431	} }
1432	fontFamily={ {
1433	value: titleFontFamily,
1434	label: __( 'titleFontFamily' ),
1435	} }
1436	fontWeight={ {
1437	value: titleFontWeight,
1438	label: __( 'titleFontWeight' ),
1439	} }
1440	fontSubset={ {
1441	value: titleFontSubset,
1442	label: __( 'titleFontSubset' ),
1443	} }
1444	fontSizeType={ {
1445	value: titleFontSizeType,
1446	label: __( 'titleFontSizeType' ),
1447	} }
1448	fontSize={ {
1449	value: postTitleFontSize,
1450	label: __( 'postTitleFontSize' ),
1451	} }
1452	fontSizeMobile={ {
1453	value: titleFontSizeMobile,
1454	label: __( 'titleFontSizeMobile' ),
1455	} }
1456	fontSizeTablet={ {
1457	value: titleFontSizeTablet,
1458	label: __( 'titleFontSizeTablet' ),
1459	} }
1460	disableLineHeight={ true }
1461	/>
1462	) }
1463
1464	{ displayPostExcerpt && (
1465	<TypographyControl
1466	label={ __( 'Description Fonts Settings' ) }
1467	attributes={ attributes }
1468	setAttributes={ setAttributes }
1469	loadGoogleFonts={ {
1470	value: descriptionLoadGoogleFonts,
1471	label: __( 'descriptionLoadGoogleFonts' ),
1472	} }
1473	fontFamily={ {
1474	value: descriptionFontFamily,
1475	label: __( 'descriptionFontFamily' ),
1476	} }
1477	fontWeight={ {
1478	value: descriptionFontWeight,
1479	label: __( 'descriptionFontWeight' ),
1480	} }
1481	fontSubset={ {
1482	value: descriptionFontSubset,
1483	label: __( 'descriptionFontSubset' ),
1484	} }
1485	fontSizeType={ {
1486	value: descriptionFontSizeType,
1487	label: __( 'descriptionFontSizeType' ),
1488	} }
1489	fontSize={ {
1490	value: descriptionFontSize,
1491	label: __( 'descriptionFontSize' ),
1492	} }
1493	fontSizeMobile={ {
1494	value: descriptionFontSizeMobile,
1495	label: __( 'descriptionFontSizeMobile' ),
1496	} }
1497	fontSizeTablet={ {
1498	value: descriptionFontSizeTablet,
1499	label: __( 'descriptionFontSizeTablet' ),
1500	} }
1501	disableLineHeight={ true }
1502	/>
1503	) }
1504	</PanelBody>
1505
1506	<PanelBody
1507	title={ __( 'Color Settings', 'blockspare' ) }
1508	className={
1509	isPost ? null : 'blockspare-posts-block-hide-query'
1510	}
1511	initialOpen={ false }
1512	>
1513	{ displayPostTitle &&
1514	postListingOption !==
1515	'blockspare-posts-block-latestpost-express' &&
1516	postListingOption !==
1517	'blockspare-posts-block-latestpost-tile' && (
1518	<PanelColorSettings
1519	title={ __( 'Colors', 'blockspare' ) }
1520	initialOpen={ true }
1521	colorSettings={ [
1522	full ===
1523	'blockspare-posts-block-full-layout-4'
1524	? tilePostColors
1525	: titlePostColors,
1526	full ===
1527	'blockspare-posts-block-full-layout-4'
1528	? TileAuthorLinkColor
1529	: authorLinkColor,
1530	full ===
1531	'blockspare-posts-block-full-layout-4'
1532	? tileMetaColorDate
1533	: metaColorDate,
1534	] }
1535	></PanelColorSettings>
1536	) }
1537
1538	{ displayPostTitle &&
1539	postListingOption ===
1540	'blockspare-posts-block-latestpost-express' && (
1541	<PanelColorSettings
1542	title={ __( 'Colors', 'blockspare' ) }
1543	initialOpen={ true }
1544	colorSettings={ [
1545	express ===
1546	'blockspare-posts-block-express-layout-1'
1547	? tilePostColors
1548	: '',
1549	express ===
1550	'blockspare-posts-block-express-layout-3'
1551	? tilePostColors
1552	: '',
1553	express ===
1554	'blockspare-posts-block-express-layout-5'
1555	? tilePostColors
1556	: '',
1557	express ===
1558	'blockspare-posts-block-express-layout-6'
1559	? tilePostColors
1560	: '',
1561	titlePostColors,
1562	express ===
1563	'blockspare-posts-block-express-layout-1'
1564	? expressTextOverLinkColor
1565	: '',
1566	express ===
1567	'blockspare-posts-block-express-layout-1'
1568	? expressTextOverGeneralColor
1569	: '',
1570	express ===
1571	'blockspare-posts-block-express-layout-3'
1572	? expressTextOverLinkColor
1573	: '',
1574	express ===
1575	'blockspare-posts-block-express-layout-3'
1576	? expressTextOverGeneralColor
1577	: '',
1578	express ===
1579	'blockspare-posts-block-express-layout-5'
1580	? expressTextOverLinkColor
1581	: '',
1582	express ===
1583	'blockspare-posts-block-express-layout-5'
1584	? expressTextOverGeneralColor
1585	: '',
1586	express ===
1587	'blockspare-posts-block-express-layout-6'
1588	? expressTextOverLinkColor
1589	: '',
1590	express ===
1591	'blockspare-posts-block-express-layout-6'
1592	? expressTextOverGeneralColor
1593	: '',
1594	authorLinkColor,
1595	metaColorDate,
1596	] }
1597	></PanelColorSettings>
1598	) }
1599	{ displayPostTitle &&
1600	postListingOption ===
1601	'blockspare-posts-block-latestpost-tile' && (
1602	<PanelColorSettings
1603	title={ __( 'Colors', 'blockspare' ) }
1604	initialOpen={ true }
1605	colorSettings={ [
1606	tilePostColors,
1607	TileAuthorLinkColor,
1608	tileMetaColorDate,
1609	] }
1610	></PanelColorSettings>
1611	) }
1612
1613	{ postListingOption !==
1614	'blockspare-posts-block-latestpost-express' && (
1615	<PanelColorSettings
1616	title={ __( 'Category Color', 'blockspare' ) }
1617	initialOpen={ false }
1618	colorSettings={ [
1619	{
1620	value: categoryTextColor,
1621	onChange: onChangeCategoryTextcolor,
1622	label: __( 'Text Color', 'blockspare' ),
1623	},
1624	categoryLayoutOption === 'solid'
1625	? categoryBgColor
1626	: '',
1627	categoryLayoutOption === 'border'
1628	? categoryBorderColors
1629	: '',
1630	] }
1631	></PanelColorSettings>
1632	) }
1633
1634	{ postListingOption ===
1635	'blockspare-posts-block-latestpost-express' &&
1636	categoryLayoutOption === 'none' && (
1637	<PanelColorSettings
1638	title={ __(
1639	'Category Color',
1640	'blockspare'
1641	) }
1642	initialOpen={ false }
1643	colorSettings={ [
1644	{
1645	value: categoryTextColor,
1646	onChange: onChangeCategoryTextcolor,
1647	label: __(
1648	'Text Color',
1649	'blockspare'
1650	),
1651	},
1652	categoryLayoutOption === 'solid'
1653	? categoryBgColor
1654	: '',
1655	categoryLayoutOption === 'border'
1656	? categoryBorderColors
1657	: '',
1658	] }
1659	></PanelColorSettings>
1660	) }
1661
1662	{ postListingOption ===
1663	'blockspare-posts-block-latestpost-express' &&
1664	categoryLayoutOption === 'solid' && (
1665	<PanelColorSettings
1666	title={ __(
1667	'Category Color',
1668	'blockspare'
1669	) }
1670	initialOpen={ false }
1671	colorSettings={ [
1672	{
1673	value: categoryTextColor,
1674	onChange: onChangeCategoryTextcolor,
1675	label: __(
1676	'Text Color',
1677	'blockspare'
1678	),
1679	},
1680	categoryLayoutOption === 'solid'
1681	? categoryBgColor
1682	: '',
1683	categoryLayoutOption === 'border'
1684	? categoryBorderColors
1685	: '',
1686
1687	express ===
1688	'blockspare-posts-block-express-layout-1' \|\|
1689	express ===
1690	'blockspare-posts-block-express-layout-3' \|\|
1691	express ===
1692	'blockspare-posts-block-express-layout-5' \|\|
1693	express ===
1694	'blockspare-posts-block-express-layout-6'
1695	? spotCategoryTextColorOpt
1696	: '',
1697	express ===
1698	'blockspare-posts-block-express-layout-1' \|\|
1699	express ===
1700	'blockspare-posts-block-express-layout-3' \|\|
1701	express ===
1702	'blockspare-posts-block-express-layout-5' \|\|
1703	express ===
1704	'blockspare-posts-block-express-layout-6'
1705	? spotcategoryBgColor
1706	: '',
1707	] }
1708	></PanelColorSettings>
1709	) }
1710
1711	{ postListingOption ===
1712	'blockspare-posts-block-latestpost-express' &&
1713	categoryLayoutOption === 'border' && (
1714	<PanelColorSettings
1715	title={ __(
1716	'Category Color',
1717	'blockspare'
1718	) }
1719	initialOpen={ false }
1720	colorSettings={ [
1721	{
1722	value: categoryTextColor,
1723	onChange: onChangeCategoryTextcolor,
1724	label: __(
1725	'Text Color',
1726	'blockspare'
1727	),
1728	},
1729	categoryLayoutOption === 'solid'
1730	? categoryBgColor
1731	: '',
1732	categoryLayoutOption === 'border'
1733	? categoryBorderColors
1734	: '',
1735
1736	express ===
1737	'blockspare-posts-block-express-layout-1' \|\|
1738	express ===
1739	'blockspare-posts-block-express-layout-3' \|\|
1740	express ===
1741	'blockspare-posts-block-express-layout-5' \|\|
1742	express ===
1743	'blockspare-posts-block-express-layout-6'
1744	? spotCategoryTextColorOpt
1745	: '',
1746	express ===
1747	'blockspare-posts-block-express-layout-1' \|\|
1748	express ===
1749	'blockspare-posts-block-express-layout-3' \|\|
1750	express ===
1751	'blockspare-posts-block-express-layout-5' \|\|
1752	express ===
1753	'blockspare-posts-block-express-layout-6'
1754	? spotCategoryBorderColors
1755	: '',
1756	] }
1757	></PanelColorSettings>
1758	) }
1759
1760	{ postListingOption !==
1761	'blockspare-posts-block-latestpost-tile' &&
1762	postListingOption !==
1763	'blockspare-posts-block-latestpost-express' && (
1764	<div>
1765	{ design !==
1766	'blockspare-posts-block-list-layout-6' &&
1767	design !==
1768	'blockspare-posts-block-list-layout-5' &&
1769	design !==
1770	'blockspare-posts-block-list-layout-4' &&
1771	grid !==
1772	'blockspare-posts-block-grid-layout-6' &&
1773	grid !==
1774	'blockspare-posts-block-grid-layout-5' &&
1775	grid !==
1776	'blockspare-posts-block-grid-layout-4' && (
1777	<PanelColorSettings
1778	title={ __(
1779	'Background Color',
1780	'blockspare'
1781	) }
1782	initialOpen={ false }
1783	colorSettings={ [
1784	{
1785	value: backGroundColor,
1786	onChange:
1787	onChangeBackgroundcolor,
1788	label: __(
1789	'Background Color',
1790	'blockspare'
1791	),
1792	},
1793	] }
1794	></PanelColorSettings>
1795	) }
1796	</div>
1797	) }
1798
1799	{ enableBoxShadow &&
1800	postListingOption !==
1801	'blockspare-posts-block-latestpost-express' &&
1802	design != 'blockspare-posts-block-list-layout-6' &&
1803	design != 'blockspare-posts-block-list-layout-5' &&
1804	design != 'blockspare-posts-block-list-layout-4' &&
1805	design != 'blockspare-posts-block-grid-layout-6' &&
1806	design != 'blockspare-posts-block-grid-layout-5' &&
1807	design !=
1808	'blockspare-posts-block-grid-layout-4' && (
1809	<BoxShadow
1810	enableShadowColor={ true }
1811	enableOptions={ false }
1812	shadowColor={ shadowColor }
1813	onChangeShadowColor={ ( shadowColor ) =>
1814	setAttributes( { shadowColor } )
1815	}
1816	xOffset={ xOffset }
1817	onChangeXOffset={ ( xOffset ) =>
1818	setAttributes( { xOffset } )
1819	}
1820	yOffset={ yOffset }
1821	onChangeYOffset={ ( yOffset ) =>
1822	setAttributes( { yOffset } )
1823	}
1824	blur={ blur }
1825	onChangeBlur={ ( blur ) =>
1826	setAttributes( { blur } )
1827	}
1828	spread={ spread }
1829	onChangeSpread={ ( spread ) =>
1830	setAttributes( { spread } )
1831	}
1832	/>
1833	) }
1834
1835	{ enableBoxShadow &&
1836	postListingOption ===
1837	'blockspare-posts-block-latestpost-full' && (
1838	<BoxShadow
1839	enableShadowColor={ true }
1840	enableOptions={ false }
1841	shadowColor={ shadowColor }
1842	onChangeShadowColor={ ( shadowColor ) =>
1843	setAttributes( { shadowColor } )
1844	}
1845	xOffset={ xOffset }
1846	onChangeXOffset={ ( xOffset ) =>
1847	setAttributes( { xOffset } )
1848	}
1849	yOffset={ yOffset }
1850	onChangeYOffset={ ( yOffset ) =>
1851	setAttributes( { yOffset } )
1852	}
1853	blur={ blur }
1854	onChangeBlur={ ( blur ) =>
1855	setAttributes( { blur } )
1856	}
1857	spread={ spread }
1858	onChangeSpread={ ( spread ) =>
1859	setAttributes( { spread } )
1860	}
1861	/>
1862	) }
1863	</PanelBody>
1864
1865	{ iconPanel == true && (
1866	<PanelBody
1867	title={ __( 'Icon Settings' ) }
1868	initialOpen={ false }
1869	>
1870	{ displayPostAuthor && (
1871	<PanelBody
1872	title={ __( 'Author Icon' ) }
1873	initialOpen={ false }
1874	>
1875	<BSIconSettings
1876	name={ authorIcon }
1877	onChangeName={ ( authorIcon ) =>
1878	setAttributes( { authorIcon } )
1879	}
1880	/>
1881	</PanelBody>
1882	) }
1883	{ displayPostDate && (
1884	<PanelBody
1885	title={ __( 'Date Icon' ) }
1886	initialOpen={ false }
1887	>
1888	<BSIconSettings
1889	name={ dateIcon }
1890	onChangeName={ ( dateIcon ) =>
1891	setAttributes( { dateIcon } )
1892	}
1893	/>
1894	</PanelBody>
1895	) }
1896	{ enableComment && (
1897	<PanelBody
1898	title={ __( 'Comment Count Icon' ) }
1899	initialOpen={ false }
1900	>
1901	<BSIconSettings
1902	name={ commentIcon }
1903	onChangeName={ ( commentIcon ) =>
1904	setAttributes( { commentIcon } )
1905	}
1906	/>
1907	</PanelBody>
1908	) }
1909	</PanelBody>
1910	) }
1911
1912	<PanelBody
1913	title={ __( 'Gaps Settings', 'blockspare' ) }
1914	initialOpen={ false }
1915	>
1916	<PanelBody
1917	title={ __( 'Block Gaps', 'blockspare' ) }
1918	initialOpen={ false }
1919	>
1920	<Margin
1921	// Top padding
1922	marginEnableTop={ true }
1923	marginTop={ marginTop }
1924	marginTopMin="-300"
1925	marginTopMax="300"
1926	onChangeMarginTop={ ( marginTop ) =>
1927	setAttributes( { marginTop } )
1928	}
1929	// Bottom margin
1930	marginEnableBottom={ true }
1931	marginBottom={ marginBottom }
1932	marginBottomMin="-300"
1933	marginBottomMax="300"
1934	onChangeMarginBottom={ ( marginBottom ) =>
1935	setAttributes( { marginBottom } )
1936	}
1937	/>
1938	</PanelBody>
1939
1940	<PanelBody
1941	title={ __( 'Content Gaps', 'blockspare' ) }
1942	initialOpen={ false }
1943	>
1944	<RangeControl
1945	label={ __(
1946	'Padding Top',
1947	'blockspare-posts-block'
1948	) }
1949	value={ contentPaddingTop }
1950	onChange={ ( value ) =>
1951	setAttributes( {
1952	contentPaddingTop: value,
1953	} )
1954	}
1955	min={ 0 }
1956	step={ 1 }
1957	max={ 300 }
1958	/>
1959
1960	<RangeControl
1961	label={ __(
1962	'Padding Right',
1963	'blockspare-posts-block'
1964	) }
1965	value={ contentPaddingRight }
1966	onChange={ ( value ) =>
1967	setAttributes( {
1968	contentPaddingRight: value,
1969	} )
1970	}
1971	min={ 0 }
1972	step={ 1 }
1973	max={ 300 }
1974	/>
1975
1976	<RangeControl
1977	label={ __(
1978	'Padding Bottom',
1979	'blockspare-posts-block'
1980	) }
1981	value={ contentPaddingBottom }
1982	onChange={ ( value ) =>
1983	setAttributes( {
1984	contentPaddingBottom: value,
1985	} )
1986	}
1987	min={ 0 }
1988	step={ 1 }
1989	max={ 300 }
1990	/>
1991
1992	<RangeControl
1993	label={ __(
1994	'Padding Left',
1995	'blockspare-posts-block'
1996	) }
1997	value={ contentPaddingLeft }
1998	onChange={ ( value ) =>
1999	setAttributes( {
2000	contentPaddingLeft: value,
2001	} )
2002	}
2003	min={ 0 }
2004	step={ 1 }
2005	max={ 300 }
2006	/>
2007	</PanelBody>
2008	{ displayPostTitle && (
2009	<PanelBody
2010	title={ __( 'Title Gap', 'blockspare' ) }
2011	initialOpen={ false }
2012	>
2013	<Margin
2014	// Top padding
2015	marginEnableTop={ true }
2016	marginTop={ titleMarginTop }
2017	marginTopMin="-300"
2018	marginTopMax="300"
2019	onChangeMarginTop={ ( titleMarginTop ) =>
2020	setAttributes( { titleMarginTop } )
2021	}
2022	// Bottom margin
2023	marginEnableBottom={ true }
2024	marginBottom={ titleMarginBottom }
2025	marginBottomMin="-300"
2026	marginBottomMax="300"
2027	onChangeMarginBottom={ (
2028	titleMarginBottom
2029	) =>
2030	setAttributes( { titleMarginBottom } )
2031	}
2032	/>
2033	</PanelBody>
2034	) }
2035
2036	{ displayPostCategory && (
2037	<PanelBody
2038	title={ __( 'Category Gap', 'blockspare' ) }
2039	initialOpen={ false }
2040	>
2041	<Margin
2042	// Top padding
2043	marginEnableTop={ true }
2044	marginTop={ categoryMarginTop }
2045	marginTopMin="-300"
2046	marginTopMax="300"
2047	onChangeMarginTop={ ( categoryMarginTop ) =>
2048	setAttributes( { categoryMarginTop } )
2049	}
2050	// Bottom margin
2051	marginEnableBottom={ true }
2052	marginBottom={ categoryMarginBottom }
2053	marginBottomMin="-300"
2054	marginBottomMax="300"
2055	onChangeMarginBottom={ (
2056	categoryMarginBottom
2057	) =>
2058	setAttributes( {
2059	categoryMarginBottom,
2060	} )
2061	}
2062	/>
2063	</PanelBody>
2064	) }
2065
2066	{ displayPostDate && displayPostAuthor && (
2067	<PanelBody
2068	title={ __( 'Meta Gap', 'blockspare' ) }
2069	initialOpen={ false }
2070	>
2071	<Margin
2072	// Top padding
2073	marginEnableTop={ true }
2074	marginTop={ metaMarginTop }
2075	marginTopMin="-300"
2076	marginTopMax="300"
2077	onChangeMarginTop={ ( metaMarginTop ) =>
2078	setAttributes( { metaMarginTop } )
2079	}
2080	// Bottom margin
2081	marginEnableBottom={ true }
2082	marginBottom={ metaMarginBottom }
2083	marginBottomMin="-300"
2084	marginBottomMax="300"
2085	onChangeMarginBottom={ (
2086	metaMarginBottom
2087	) => setAttributes( { metaMarginBottom } ) }
2088	/>
2089	</PanelBody>
2090	) }
2091
2092	{ displayPostExcerpt && (
2093	<PanelBody
2094	title={ __( 'Excerpt Gap', 'blockspare' ) }
2095	initialOpen={ false }
2096	>
2097	<Margin
2098	// Top padding
2099	marginEnableTop={ true }
2100	marginTop={ exceprtMarginTop }
2101	marginTopMin="-300"
2102	marginTopMax="300"
2103	onChangeMarginTop={ ( exceprtMarginTop ) =>
2104	setAttributes( { exceprtMarginTop } )
2105	}
2106	// Bottom margin
2107	marginEnableBottom={ true }
2108	marginBottom={ exceprtMarginBottom }
2109	marginBottomMin="-300"
2110	marginBottomMax="300"
2111	onChangeMarginBottom={ (
2112	exceprtMarginBottom
2113	) =>
2114	setAttributes( { exceprtMarginBottom } )
2115	}
2116	/>
2117	</PanelBody>
2118	) }
2119	{ displayPostLink && (
2120	<PanelBody
2121	title={ __(
2122	'Read More Link Gap',
2123	'blockspare'
2124	) }
2125	initialOpen={ false }
2126	>
2127	<Margin
2128	// Top padding
2129	marginEnableTop={ true }
2130	marginTop={ moreLinkMarginTop }
2131	marginTopMin="-300"
2132	marginTopMax="300"
2133	onChangeMarginTop={ ( moreLinkMarginTop ) =>
2134	setAttributes( { moreLinkMarginTop } )
2135	}
2136	// Bottom margin
2137	marginEnableBottom={ true }
2138	marginBottom={ moreLinkMarginBottom }
2139	marginBottomMin="-300"
2140	marginBottomMax="300"
2141	onChangeMarginBottom={ (
2142	moreLinkMarginBottom
2143	) =>
2144	setAttributes( {
2145	moreLinkMarginBottom,
2146	} )
2147	}
2148	/>
2149	</PanelBody>
2150	) }
2151	</PanelBody>
2152	</div>
2153	</InspectorControls>
2154	);
2155	}
2156	}
2157