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 (
<>
@@ -463,6 +479,65 @@ export default function ( { attributes, setAttributes } ) {
+
+ gap !== metadata.attributes.gap.default }
+ isShownByDefault
+ label={ __(
+ 'The gap between each item',
+ 'snow-monkey-blocks'
+ ) }
+ onDeselect={ () =>
+ setAttributes( {
+ gap: metadata.attributes.gap.default,
+ } )
+ }
+ panelId={ clientId }
+ >
+
+
+ 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
+ />
+
+
+
+
'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;
+ }
}
}