fix #785

inc2734 · Jul 7, 2024 · 096e981 · 096e981
1 parent 755dba3
commit 096e981
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 4 deletions.
diff --git a/src/blocks/testimonial/block.json b/src/blocks/testimonial/block.json
@@ -15,6 +15,10 @@
 			"type": "number",
 			"default": 2
 		},
+		"gap": {
+			"type": "string",
+			"default": ""
+		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]

diff --git a/src/blocks/testimonial/edit.js b/src/blocks/testimonial/edit.js
@@ -8,6 +8,7 @@ import {
 } from '@wordpress/block-editor';
 
 import {
+	BaseControl,
 	RangeControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -33,7 +34,7 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
 		},
 	] );
 
-	const { md, lg, templateLock } = attributes;
+	const { md, lg, gap, templateLock } = attributes;
 
 	const hasInnerBlocks = useSelect(
 		( select ) =>
@@ -43,7 +44,9 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
 	);
 
 	const classes = classnames( 'smb-testimonial', className );
-	const rowClasses = classnames( 'c-row', 'c-row--margin' );
+	const rowClasses = classnames( 'c-row', 'c-row--margin', {
+		[ `c-row--margin-${ gap }` ]: !! gap,
+	} );
 
 	const blockProps = useBlockProps( {
 		className: classes,
@@ -64,6 +67,21 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
 		}
 	);
 
+	const gapOptions = [
+		{
+			label: 'S',
+			value: 1,
+		},
+		{
+			label: 'M',
+			value: 2,
+		},
+		{
+			label: 'L',
+			value: 3,
+		},
+	];
+
 	return (
 		<>
 			<InspectorControls>
@@ -122,6 +140,65 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
 				</ToolsPanel>
 			</InspectorControls>
 
+			<InspectorControls group="dimensions">
+				<ToolsPanelItem
+					hasValue={ () => gap !== metadata.attributes.gap.default }
+					isShownByDefault
+					label={ __(
+						'The gap between each item',
+						'snow-monkey-blocks'
+					) }
+					onDeselect={ () =>
+						setAttributes( {
+							gap: metadata.attributes.gap.default,
+						} )
+					}
+					panelId={ clientId }
+				>
+					<BaseControl
+						id="snow-monkey-blocks/testimonials/gap"
+						label={ __(
+							'The gap between each item',
+							'snow-monkey-blocks'
+						) }
+						className="spacing-sizes-control"
+					>
+						<RangeControl
+							className="spacing-sizes-control__range-control"
+							value={
+								gapOptions.filter(
+									( option ) =>
+										option.label?.toLowerCase() === gap
+								)?.[ 0 ]?.value
+							}
+							resetFallbackValue={ undefined }
+							onChange={ ( value ) =>
+								setAttributes( {
+									gap: gapOptions
+										.filter(
+											( option ) => option.value === value
+										)?.[ 0 ]
+										?.label?.toLowerCase(),
+								} )
+							}
+							withInputField={ false }
+							min={ 1 }
+							max={ 3 }
+							marks
+							renderTooltipContent={ ( _value ) =>
+								gapOptions
+									.filter(
+										( option ) => option.value === _value
+									)?.[ 0 ]
+									?.label?.toUpperCase()
+							}
+							hideLabelFromVision
+							__nextHasNoMarginBottom
+						/>
+					</BaseControl>
+				</ToolsPanelItem>
+			</InspectorControls>
+
 			<div { ...blockProps }>
 				<div className="smb-testimonial__body">
 					<div

diff --git a/src/blocks/testimonial/save.js b/src/blocks/testimonial/save.js
@@ -3,10 +3,12 @@ import classnames from 'classnames';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function ( { attributes, className } ) {
-	const { md, lg } = attributes;
+	const { md, lg, gap } = attributes;
 
 	const classes = classnames( 'smb-testimonial', className );
-	const rowClasses = classnames( 'c-row', 'c-row--margin' );
+	const rowClasses = classnames( 'c-row', 'c-row--margin', {
+		[ `c-row--margin-${ gap }` ]: !! gap,
+	} );
 
 	return (
 		<div { ...useBlockProps.save( { className: classes } ) }>