From 951df1956946dd71149bc30e81eaba67f6936bbb Mon Sep 17 00:00:00 2001
From: JC <jc@webdevstudios.com>
Date: Thu, 1 Jul 2021 02:52:59 +0800
Subject: [PATCH] #110 - Only show innerblocks with content

---
 src/blocks/carousel-slide/edit.js  | 13 +++++++++++++
 src/blocks/carousel-slide/index.js |  4 ++++
 src/blocks/carousel-slide/save.js  |  9 ++++++---
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/blocks/carousel-slide/edit.js b/src/blocks/carousel-slide/edit.js
index 0e02f17a..f11ca589 100644
--- a/src/blocks/carousel-slide/edit.js
+++ b/src/blocks/carousel-slide/edit.js
@@ -1,4 +1,6 @@
 import { InnerBlocks, withColors } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import Settings from './components/Settings';
 import Slide from './components/Slide';
@@ -27,8 +29,19 @@ function Edit( props ) {
 		setBackgroundColor,
 		overlayColor,
 		setOverlayColor,
+		clientId,
 	} = props;
 
+	const { innerBlocksLength } = useSelect( ( select ) => ( {
+		innerBlocksLength: select( 'core/block-editor' ).getBlockCount(
+			clientId
+		),
+	} ) );
+
+	useEffect( () => {
+		setAttributes( { innerBlocksLength } );
+	}, [ innerBlocksLength ] );
+
 	// Define props relating to block background settings.
 	const backgroundProps = {
 		...attributes,
diff --git a/src/blocks/carousel-slide/index.js b/src/blocks/carousel-slide/index.js
index 0eb10017..84fae6fb 100644
--- a/src/blocks/carousel-slide/index.js
+++ b/src/blocks/carousel-slide/index.js
@@ -22,6 +22,10 @@ registerBlockType( `${ PREFIX }/carousel-slide`, {
 	category: 'wds-blocks',
 	keywords: [ __( 'carousel, slide', 'wdsblocks' ) ],
 	attributes: {
+		innerBlocksLength: {
+			type: 'number',
+			default: 0,
+		},
 		fontColor: {
 			type: 'string',
 			default: undefined,
diff --git a/src/blocks/carousel-slide/save.js b/src/blocks/carousel-slide/save.js
index 3bce1879..f5ba6ffa 100644
--- a/src/blocks/carousel-slide/save.js
+++ b/src/blocks/carousel-slide/save.js
@@ -17,6 +17,7 @@ import { PREFIX } from '../../utils/config';
  */
 export default function Save( props ) {
 	const { attributes } = props;
+	const { innerBlocksLength } = props.attributes;
 
 	// Define props relating to slide settings.
 	const slideProps = {
@@ -28,9 +29,11 @@ export default function Save( props ) {
 
 	return (
 		<Slide { ...slideProps }>
-			<div className="slide-content">
-				<InnerBlocks.Content />
-			</div>
+			{ innerBlocksLength > 0 && (
+				<div className="slide-content">
+					<InnerBlocks.Content />
+				</div>
+			) }
 		</Slide>
 	);
 }