Replace "Image size" with "Resolution" in image size controls (#49112)

* Image Size -> Resolution throughout * Add missing imageSizeHelp to the Latest Posts * Update test * Update CHANGELOG.md * Update image-size.spec.js
WordPress · Mar 23, 2023 · 9b574ab · 9b574ab · github-actions · Mar 23, 2023
1 parent 5b0f89c
commit 9b574ab
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 10 deletions.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   `ImageSizeControl`: Update image size label ([#49112](https://github.com/WordPress/gutenberg/pull/49112)).
+
 ## 11.6.0 (2023-03-15)
 
 ## 11.5.0 (2023-03-01)

diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
@@ -38,7 +38,7 @@ export default function ImageSizeControl( {
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
 					__nextHasNoMarginBottom
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					value={ slug }
 					options={ imageSizeOptions }
 					onChange={ onChangeImage }

diff --git a/packages/block-editor/src/components/image-size-control/test/index.js b/packages/block-editor/src/components/image-size-control/test/index.js
@@ -334,7 +334,7 @@ describe( 'ImageSizeControl', () => {
 			);
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Image size' } )
+				screen.getByRole( 'combobox', { name: 'Resolution' } )
 			).toHaveValue( 'medium' );
 		} );
 
@@ -351,7 +351,7 @@ describe( 'ImageSizeControl', () => {
 			);
 
 			await user.selectOptions(
-				screen.getByRole( 'combobox', { name: 'Image size' } ),
+				screen.getByRole( 'combobox', { name: 'Resolution' } ),
 				'thumbnail'
 			);
 

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -592,7 +592,7 @@ function GalleryEdit( props ) {
 					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
 							__nextHasNoMarginBottom
-							label={ __( 'Image size' ) }
+							label={ __( 'Resolution' ) }
 							help={ __(
 								'Select the size of the source images.'
 							) }
@@ -606,7 +606,7 @@ function GalleryEdit( props ) {
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
 						<BaseControl className={ 'gallery-image-sizes' }>
 							<BaseControl.VisualLabel>
-								{ __( 'Image size' ) }
+								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
 							<View className={ 'gallery-image-sizes__loading' }>
 								<Spinner />

diff --git a/packages/block-library/src/gallery/use-image-sizes.js b/packages/block-library/src/gallery/use-image-sizes.js
@@ -5,7 +5,7 @@ import { useMemo } from '@wordpress/element';
 
 /**
  * Calculates the image sizes that are avaible for the current gallery images in order to
- * populate the 'Image size' selector.
+ * populate the 'Resolution' selector.
  *
  * @param {Array}    images      Basic image block data taken from current gallery innerBlock
  * @param {boolean}  isSelected  Is the block currently selected in the editor.

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -211,7 +211,7 @@ export function ImageEdit( {
 					: 'full',
 			};
 		} else {
-			// Keep the same url when selecting the same file, so "Image Size"
+			// Keep the same url when selecting the same file, so "Resolution"
 			// option is not changed.
 			additionalAttributes = { url };
 		}

diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
@@ -289,6 +289,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							imageWidth={ defaultImageWidth }
 							imageHeight={ defaultImageHeight }
 							imageSizeOptions={ imageSizeOptions }
+							imageSizeHelp={ __(
+								'Select the size of the source image.'
+							) }
 							onChangeImage={ ( value ) =>
 								setAttributes( {
 									featuredImageSizeSlug: value,

diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -204,7 +204,7 @@ const DimensionControls = ( {
 			{ !! imageSizeOptions.length && (
 				<ToolsPanelItem
 					hasValue={ () => !! sizeSlug }
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					onDeselect={ () =>
 						setAttributes( { sizeSlug: undefined } )
 					}
@@ -216,7 +216,7 @@ const DimensionControls = ( {
 				>
 					<SelectControl
 						__nextHasNoMarginBottom
-						label={ __( 'Image size' ) }
+						label={ __( 'Resolution' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
 						options={ imageSizeOptions }
 						onChange={ ( nextSizeSlug ) =>

diff --git a/test/e2e/specs/editor/plugins/image-size.spec.js b/test/e2e/specs/editor/plugins/image-size.spec.js
@@ -46,7 +46,7 @@ test.describe( 'changing image size', () => {
 
 		// Select the new size updated with the plugin.
 		await editor.openDocumentSettingsSidebar();
-		await page.selectOption( 'role=combobox[name="Image size"i]', {
+		await page.selectOption( 'role=combobox[name="Resolution"i]', {
 			label: 'Custom Size One',
 		} );