Organize gallery controls (#58407)

* Move controls * Remove extraneous crop help * Append new tab control * Adjust labels * Fix unit tests --------- Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
WordPress · Feb 5, 2024 · f294dd2 · f294dd2
1 parent 8174ba1
commit f294dd2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 34 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -382,12 +382,6 @@ function GalleryEdit( props ) {
 		setAttributes( { imageCrop: ! imageCrop } );
 	}
 
-	function getImageCropHelp( checked ) {
-		return checked
-			? __( 'Thumbnails are cropped to align.' )
-			: __( 'Thumbnails are not cropped.' );
-	}
-
 	function toggleRandomOrder() {
 		setAttributes( { randomOrder: ! randomOrder } );
 	}
@@ -548,50 +542,49 @@ function GalleryEdit( props ) {
 							__next40pxDefaultSize
 						/>
 					) }
+					{ imageSizeOptions?.length > 0 && (
+						<SelectControl
+							__nextHasNoMarginBottom
+							label={ __( 'Resolution' ) }
+							help={ __(
+								'Select the size of the source images.'
+							) }
+							value={ sizeSlug }
+							options={ imageSizeOptions }
+							onChange={ updateImagesSize }
+							hideCancelButton={ true }
+							size="__unstable-large"
+						/>
+					) }
+					<SelectControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link to' ) }
+						value={ linkTo }
+						onChange={ setLinkTo }
+						options={ linkOptions }
+						hideCancelButton={ true }
+						size="__unstable-large"
+					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Crop images' ) }
+						label={ __( 'Crop images to fit' ) }
 						checked={ !! imageCrop }
 						onChange={ toggleImageCrop }
-						help={ getImageCropHelp }
 					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Random order' ) }
+						label={ __( 'Randomize order' ) }
 						checked={ !! randomOrder }
 						onChange={ toggleRandomOrder }
 					/>
-					<SelectControl
-						__nextHasNoMarginBottom
-						label={ __( 'Link to' ) }
-						value={ linkTo }
-						onChange={ setLinkTo }
-						options={ linkOptions }
-						hideCancelButton={ true }
-						size="__unstable-large"
-					/>
 					{ hasLinkTo && (
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
+							label={ __( 'Open images in new tab' ) }
 							checked={ linkTarget === '_blank' }
 							onChange={ toggleOpenInNewTab }
 						/>
 					) }
-					{ imageSizeOptions?.length > 0 && (
-						<SelectControl
-							__nextHasNoMarginBottom
-							label={ __( 'Resolution' ) }
-							help={ __(
-								'Select the size of the source images.'
-							) }
-							value={ sizeSlug }
-							options={ imageSizeOptions }
-							onChange={ updateImagesSize }
-							hideCancelButton={ true }
-							size="__unstable-large"
-						/>
-					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
 						<BaseControl className={ 'gallery-image-sizes' }>
 							<BaseControl.VisualLabel>

diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
@@ -694,7 +694,7 @@ describe( 'Gallery block', () => {
 		await openBlockSettings( screen );
 
 		// Disable crop images setting
-		fireEvent.press( getByText( 'Crop images' ) );
+		fireEvent.press( getByText( 'Crop images to fit' ) );
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );