Position and label tweaks for group block background size control (#5…

…8854)

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

packages/block-editor/src/hooks/background.js

@@ -365,12 +365,12 @@ function BackgroundImagePanelItem( {
 
 function backgroundSizeHelpText( value ) {
 	if ( value === 'cover' || value === undefined ) {
-		return __( 'Stretch image to cover the block.' );
+		return __( 'Image covers the space evenly.' );
 	}
 	if ( value === 'contain' ) {
-		return __( 'Resize image to fit without cropping.' );
+		return __( 'Image is contained without distortion.' );
 	}
-	return __( 'Set a fixed width.' );
+	return __( 'Specify a fixed width.' );
 }
 
 export const coordsToBackgroundPosition = ( value ) => {
@@ -510,7 +510,6 @@ function BackgroundSizePanelItem( {
 			panelId={ clientId }
 		>
 			<FocalPointPicker
-				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				label={ __( 'Position' ) }
 				url={ style?.background?.backgroundImage?.url }
@@ -520,7 +519,6 @@ function BackgroundSizePanelItem( {
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleGroupControl
-				__nextHasNoMarginBottom
 				size={ '__unstable-large' }
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
@@ -555,8 +553,7 @@ function BackgroundSizePanelItem( {
 			) : null }
 			{ currentValueForToggle !== 'cover' && (
 				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ __( 'Repeat image' ) }
+					label={ __( 'Repeat' ) }
 					checked={ repeatCheckedValue }
 					onChange={ toggleIsRepeated }
 				/>