#110 - Only show innerblocks with content

WebDevStudios · Jun 30, 2021 · 951df19 · 951df19
1 parent 44e3ddd
commit 951df19
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>
 	);
 }