From c82108fe23bd6ccc94b3d14f87474c39e88e2007 Mon Sep 17 00:00:00 2001
From: inc2734 <inc@2inc.org>
Date: Thu, 4 Jul 2024 16:25:28 +0900
Subject: [PATCH] fix #800

---
 src/blocks/child-pages/block.json  |  4 ++
 src/blocks/child-pages/edit.js     | 77 +++++++++++++++++++++++++++++-
 src/blocks/child-pages/view.php    |  2 +
 src/css/blocks-editor-wrapper.scss |  9 ++++
 4 files changed, 91 insertions(+), 1 deletion(-)

diff --git a/src/blocks/child-pages/block.json b/src/blocks/child-pages/block.json
index db3b5820..5e1e2d6b 100644
--- a/src/blocks/child-pages/block.json
+++ b/src/blocks/child-pages/block.json
@@ -19,6 +19,10 @@
 			"type": "string",
 			"default": "rich-media"
 		},
+		"gap": {
+			"type": "string",
+			"default": ""
+		},
 		"smCols": {
 			"type": "number",
 			"default": 0
diff --git a/src/blocks/child-pages/edit.js b/src/blocks/child-pages/edit.js
index 23985d84..457deb41 100644
--- a/src/blocks/child-pages/edit.js
+++ b/src/blocks/child-pages/edit.js
@@ -22,10 +22,11 @@ import { toNumber } from '@smb/helper';
 
 import metadata from './block.json';
 
-export default function ( { attributes, setAttributes } ) {
+export default function ( { attributes, setAttributes, clientId } ) {
 	const {
 		title,
 		layout,
+		gap,
 		smCols,
 		itemTitleTagName,
 		itemThumbnailSizeSlug,
@@ -50,6 +51,21 @@ export default function ( { attributes, setAttributes } ) {
 
 	const itemTitleTagNames = [ 'h2', 'h3', 'h4' ];
 
+	const gapOptions = [
+		{
+			label: 'S',
+			value: 1,
+		},
+		{
+			label: 'M',
+			value: 2,
+		},
+		{
+			label: 'L',
+			value: 3,
+		},
+	];
+
 	return (
 		<>
 			<InspectorControls>
@@ -463,6 +479,65 @@ export default function ( { attributes, setAttributes } ) {
 				</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/child-pages/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 { ...useBlockProps() }>
 				<Disabled>
 					<ServerSideRender
diff --git a/src/blocks/child-pages/view.php b/src/blocks/child-pages/view.php
index 5f847143..4889150f 100644
--- a/src/blocks/child-pages/view.php
+++ b/src/blocks/child-pages/view.php
@@ -47,6 +47,7 @@
 			'_context'             => 'snow-monkey-blocks/child-pages',
 			'_parent_id'           => $parent_id,
 			'_entries_layout'      => $attributes['layout'],
+			'_entries_gap'         => $attributes['gap'],
 			'_force_sm_1col'       => $force_sm_1col,
 			'_item_thumbnail_size' => $attributes['itemThumbnailSizeSlug'],
 			'_item_title_tag'      => $attributes['itemTitleTagName'],
@@ -65,6 +66,7 @@
 			'_context'             => 'snow-monkey-blocks/child-pages',
 			'_parent_id'           => ! empty( $attributes['parent']['id'] ) ? $attributes['parent']['id'] : get_the_ID(),
 			'_entries_layout'      => $attributes['layout'],
+			'_entries_gap'         => $attributes['gap'],
 			'_force_sm_1col'       => $force_sm_1col,
 			'_item_thumbnail_size' => $attributes['itemThumbnailSizeSlug'],
 			'_item_title_tag'      => $attributes['itemTitleTagName'],
diff --git a/src/css/blocks-editor-wrapper.scss b/src/css/blocks-editor-wrapper.scss
index 56512c50..4521e59e 100644
--- a/src/css/blocks-editor-wrapper.scss
+++ b/src/css/blocks-editor-wrapper.scss
@@ -122,6 +122,15 @@
 		.block-editor-link-control__search-enter {
 			right: 0;
 		}
+
+		.block-editor-link-control__search-results {
+			margin-top: 8px;
+			padding: 0;
+		}
+
+		.components-button.has-icon.has-text {
+			padding: 4px 0;
+		}
 	}
 }