Gallery: Hide some controls when multi-editing blocks (#57378)

* Gallery: Hide some controls when multi-editing blocks * Fix typo
WordPress · Dec 27, 2023 · 3880148 · 3880148 · github-actions · Dec 27, 2023
1 parent 9cf9a30
commit 3880148
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 26 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -104,23 +104,38 @@ function GalleryEdit( props ) {
 		getSettings,
 		preferredStyle,
 		innerBlockImages,
-		wasBlockJustInserted,
+		blockWasJustInserted,
+		multiGallerySelection,
 	} = useSelect(
 		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
+			const {
+				getBlockName,
+				getMultiSelectedBlockClientIds,
+				getSettings: _getSettings,
+				getBlock: _getBlock,
+				wasBlockJustInserted,
+			} = select( blockEditorStore );
 			const preferredStyleVariations =
-				settings.__experimentalPreferredStyleVariations;
+				_getSettings().__experimentalPreferredStyleVariations;
+			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
+
 			return {
-				getBlock: select( blockEditorStore ).getBlock,
-				getSettings: select( blockEditorStore ).getSettings,
+				getBlock: _getBlock,
+				getSettings: _getSettings,
 				preferredStyle:
 					preferredStyleVariations?.value?.[ 'core/image' ],
 				innerBlockImages:
-					select( blockEditorStore ).getBlock( clientId )
-						?.innerBlocks ?? EMPTY_ARRAY,
-				wasBlockJustInserted: select(
-					blockEditorStore
-				).wasBlockJustInserted( clientId, 'inserter_menu' ),
+					_getBlock( clientId )?.innerBlocks ?? EMPTY_ARRAY,
+				blockWasJustInserted: wasBlockJustInserted(
+					clientId,
+					'inserter_menu'
+				),
+				multiGallerySelection:
+					multiSelectedClientIds.length &&
+					multiSelectedClientIds.every(
+						( _clientId ) =>
+							getBlockName( _clientId ) === 'core/gallery'
+					),
 			};
 		},
 		[ clientId ]
@@ -461,7 +476,7 @@ function GalleryEdit( props ) {
 				( hasImages && ! isSelected ) || imagesUploading,
 			value: hasImageIds ? images : {},
 			autoOpenMediaUpload:
-				! hasImages && isSelected && wasBlockJustInserted,
+				! hasImages && isSelected && blockWasJustInserted,
 			onFocus,
 		},
 	} );
@@ -583,20 +598,22 @@ function GalleryEdit( props ) {
 			</InspectorControls>
 			{ Platform.isWeb && (
 				<>
-					<BlockControls group="other">
-						<MediaReplaceFlow
-							allowedTypes={ ALLOWED_MEDIA_TYPES }
-							accept="image/*"
-							handleUpload={ false }
-							onSelect={ updateImages }
-							name={ __( 'Add' ) }
-							multiple={ true }
-							mediaIds={ images
-								.filter( ( image ) => image.id )
-								.map( ( image ) => image.id ) }
-							addToGallery={ hasImageIds }
-						/>
-					</BlockControls>
+					{ ! multiGallerySelection && (
+						<BlockControls group="other">
+							<MediaReplaceFlow
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
+								accept="image/*"
+								handleUpload={ false }
+								onSelect={ updateImages }
+								name={ __( 'Add' ) }
+								multiple={ true }
+								mediaIds={ images
+									.filter( ( image ) => image.id )
+									.map( ( image ) => image.id ) }
+								addToGallery={ hasImageIds }
+							/>
+						</BlockControls>
+					) }
 					<GapStyles
 						blockGap={ attributes.style?.spacing?.blockGap }
 						clientId={ clientId }
@@ -614,6 +631,7 @@ function GalleryEdit( props ) {
 				}
 				blockProps={ innerBlocksProps }
 				insertBlocksAfter={ insertBlocksAfter }
+				multiGallerySelection={ multiGallerySelection }
 			/>
 		</>
 	);

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -24,6 +24,7 @@ export default function Gallery( props ) {
 		blockProps,
 		__unstableLayoutClassNames: layoutClassNames,
 		isContentLocked,
+		multiGallerySelection,
 	} = props;
 
 	const { align, columns, imageCrop } = attributes;
@@ -54,7 +55,9 @@ export default function Gallery( props ) {
 				setAttributes={ setAttributes }
 				isSelected={ isSelected }
 				insertBlocksAfter={ insertBlocksAfter }
-				showToolbarButton={ ! isContentLocked }
+				showToolbarButton={
+					! multiGallerySelection && ! isContentLocked
+				}
 				className="blocks-gallery-caption"
 				label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Add gallery caption' ) }