Add image count so we can work out default columns as innerBlocks not…

… available at point of block validation
WordPress · Nov 4, 2020 · 38ab027 · 38ab027
1 parent 1534386
commit 38ab027
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
@@ -41,6 +41,10 @@
 		"isListItem": {
 			"type": "boolean",
 			"default": true
+		},
+		"imageCount": {
+			"type": "number",
+			"default": 0
 		}
 	},
 	"providesContext": {

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -74,9 +74,10 @@ function GalleryEdit( props ) {
 	} = props;
 
 	const {
+		imageCount,
 		linkTarget,
 		linkTo,
-		columns = defaultColumnsNumber( images ),
+		columns = defaultColumnsNumber( imageCount ),
 		sizeSlug,
 		imageUploads,
 		imageCrop,
@@ -122,6 +123,12 @@ function GalleryEdit( props ) {
 		return newImages;
 	} );
 
+	useEffect( () => {
+		if ( images.length !== imageCount ) {
+			setAttributes( { imageCount: images.length } );
+		}
+	}, [ images ] );
+
 	const imageSizeOptions = useImageSizes( images, isSelected, getSettings );
 
 	const { replaceInnerBlocks, updateBlockAttributes } = useDispatch(

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -28,12 +28,12 @@ export const Gallery = ( props ) => {
 		mediaPlaceholder,
 		insertBlocksAfter,
 		blockProps,
-		images,
 	} = props;
 
 	const {
+		imageCount,
 		align,
-		columns = defaultColumnsNumber( images ),
+		columns = defaultColumnsNumber( imageCount ),
 		caption,
 		imageCrop,
 	} = attributes;

diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -13,9 +8,10 @@ import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
  */
 import { defaultColumnsNumber } from './shared';
 
-export default function save( { attributes, innerBlocks } ) {
+export default function save( { attributes } ) {
 	const {
-		columns = defaultColumnsNumber( innerBlocks ),
+		imageCount,
+		columns = defaultColumnsNumber( imageCount ),
 		imageCrop,
 		caption,
 	} = attributes;

diff --git a/packages/block-library/src/gallery/shared.js b/packages/block-library/src/gallery/shared.js
@@ -8,8 +8,8 @@ import { get, pick } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 
-export function defaultColumnsNumber( images ) {
-	return images?.length ? Math.min( 3, images.length ) : 3;
+export function defaultColumnsNumber( imageCount ) {
+	return imageCount ? Math.min( 3, imageCount ) : 3;
 }
 
 export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {