diff --git a/packages/block-library/src/gallery/constants.js b/packages/block-library/src/gallery/constants.js
index 19fc61cac8458..d7c5684d420d4 100644
--- a/packages/block-library/src/gallery/constants.js
+++ b/packages/block-library/src/gallery/constants.js
@@ -4,3 +4,4 @@ export const LINK_DESTINATION_LIGHTBOX = 'lightbox';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
 export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
 export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';
+export const DEFAULT_SIZE_SLUG = 'large';
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 01e725cc16cde..015985c8d3fac 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -8,14 +8,16 @@ import clsx from 'clsx';
  */
 import {
 	BaseControl,
-	PanelBody,
 	SelectControl,
 	ToggleControl,
 	RangeControl,
 	Spinner,
 	MenuGroup,
 	MenuItem,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToolbarDropdownMenu,
+	PanelBody,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -58,6 +60,7 @@ import {
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_LIGHTBOX,
+	DEFAULT_SIZE_SLUG,
 } from './constants';
 import useImageSizes from './use-image-sizes';
 import useGetNewImages from './use-get-new-images';
@@ -474,6 +477,12 @@ export default function GalleryEdit( props ) {
 		);
 	}
 
+	const defaultImageSizeSlug = imageSizeOptions?.find(
+		( size ) => size.value === DEFAULT_SIZE_SLUG
+	)
+		? DEFAULT_SIZE_SLUG
+		: imageSizeOptions?.[ 0 ]?.value;
+
 	useEffect( () => {
 		// linkTo attribute must be saved so blocks don't break when changing image_default_link_type in options.php.
 		if ( ! linkTo ) {
@@ -555,44 +564,181 @@ export default function GalleryEdit( props ) {
 		);
 	}
 
+	const sizeSlugInOptions = imageSizeOptions?.some(
+		( size ) => size.value === sizeSlug
+	);
+
 	const hasLinkTo = linkTo && linkTo !== 'none';
 
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					{ images.length > 1 && (
-						<RangeControl
-							__nextHasNoMarginBottom
-							label={ __( 'Columns' ) }
-							value={
-								columns
-									? columns
-									: defaultColumnsNumber( images.length )
+				{ Platform.isWeb && (
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								columns: images.length,
+								linkTarget: undefined,
+								linkTo: 'none',
+								sizeSlug: defaultImageSizeSlug,
+								imageCrop: true,
+								randomOrder: false,
+							} );
+						} }
+					>
+						{ images.length > 1 && (
+							<ToolsPanelItem
+								isShownByDefault
+								label={ __( 'Columns' ) }
+								hasValue={ () =>
+									columns ? columns !== images.length : false
+								}
+								onDeselect={ () =>
+									setColumnsNumber( images.length )
+								}
+							>
+								<RangeControl
+									__nextHasNoMarginBottom
+									label={ __( 'Columns' ) }
+									value={
+										columns
+											? columns
+											: defaultColumnsNumber(
+													images.length
+											  )
+									}
+									onChange={ setColumnsNumber }
+									min={ 1 }
+									max={ Math.min(
+										MAX_COLUMNS,
+										images.length
+									) }
+									required
+									__next40pxDefaultSize
+								/>
+							</ToolsPanelItem>
+						) }
+						{ imageSizeOptions?.length > 0 && (
+							<ToolsPanelItem
+								isShownByDefault
+								label={ __( 'Resolution' ) }
+								hasValue={ () =>
+									sizeSlug !== defaultImageSizeSlug &&
+									sizeSlugInOptions
+								}
+								onDeselect={ () =>
+									updateImagesSize( defaultImageSizeSlug )
+								}
+							>
+								<SelectControl
+									__nextHasNoMarginBottom
+									label={ __( 'Resolution' ) }
+									help={ __(
+										'Select the size of the source images.'
+									) }
+									value={ sizeSlug }
+									options={ imageSizeOptions }
+									onChange={ updateImagesSize }
+									hideCancelButton
+									size="__unstable-large"
+								/>
+							</ToolsPanelItem>
+						) }
+						<ToolsPanelItem
+							isShownByDefault
+							label={ __( 'Crop images to fit' ) }
+							hasValue={ () => ! imageCrop }
+							onDeselect={ () =>
+								setAttributes( { imageCrop: true } )
 							}
-							onChange={ setColumnsNumber }
-							min={ 1 }
-							max={ Math.min( MAX_COLUMNS, images.length ) }
-							{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
-							required
-							__next40pxDefaultSize
-						/>
-					) }
-					{ imageSizeOptions?.length > 0 && (
-						<SelectControl
-							__nextHasNoMarginBottom
-							label={ __( 'Resolution' ) }
-							help={ __(
-								'Select the size of the source images.'
-							) }
-							value={ sizeSlug }
-							options={ imageSizeOptions }
-							onChange={ updateImagesSize }
-							hideCancelButton
-							size="__unstable-large"
-						/>
-					) }
-					{ Platform.isNative ? (
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Crop images to fit' ) }
+								checked={ !! imageCrop }
+								onChange={ toggleImageCrop }
+							/>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							isShownByDefault
+							label={ __( 'Randomize order' ) }
+							hasValue={ () => !! randomOrder }
+							onDeselect={ () =>
+								setAttributes( { randomOrder: false } )
+							}
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Randomize order' ) }
+								checked={ !! randomOrder }
+								onChange={ toggleRandomOrder }
+							/>
+						</ToolsPanelItem>
+						{ hasLinkTo && (
+							<ToolsPanelItem
+								isShownByDefault
+								label={ __( 'Open images in a new tab' ) }
+								hasValue={ () => linkTarget === '_blank' }
+								onDeselect={ () => toggleOpenInNewTab( false ) }
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Open images in new tab' ) }
+									checked={ linkTarget === '_blank' }
+									onChange={ toggleOpenInNewTab }
+								/>
+							</ToolsPanelItem>
+						) }
+						{ ! imageSizeOptions && hasImageIds && (
+							<BaseControl
+								className="gallery-image-sizes"
+								__nextHasNoMarginBottom
+							>
+								<BaseControl.VisualLabel>
+									{ __( 'Resolution' ) }
+								</BaseControl.VisualLabel>
+								<View className="gallery-image-sizes__loading">
+									<Spinner />
+									{ __( 'Loading options…' ) }
+								</View>
+							</BaseControl>
+						) }
+					</ToolsPanel>
+				) }
+				{ Platform.isNative && (
+					<PanelBody title={ __( 'Settings' ) }>
+						{ images.length > 1 && (
+							<RangeControl
+								__nextHasNoMarginBottom
+								label={ __( 'Columns' ) }
+								value={
+									columns
+										? columns
+										: defaultColumnsNumber( images.length )
+								}
+								onChange={ setColumnsNumber }
+								min={ 1 }
+								max={ Math.min( MAX_COLUMNS, images.length ) }
+								{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
+								required
+								__next40pxDefaultSize
+							/>
+						) }
+						{ imageSizeOptions?.length > 0 && (
+							<SelectControl
+								__nextHasNoMarginBottom
+								label={ __( 'Resolution' ) }
+								help={ __(
+									'Select the size of the source images.'
+								) }
+								value={ sizeSlug }
+								options={ imageSizeOptions }
+								onChange={ updateImagesSize }
+								hideCancelButton
+								size="__unstable-large"
+							/>
+						) }
 						<SelectControl
 							__nextHasNoMarginBottom
 							label={ __( 'Link' ) }
@@ -602,42 +748,28 @@ export default function GalleryEdit( props ) {
 							hideCancelButton
 							size="__unstable-large"
 						/>
-					) : null }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Crop images to fit' ) }
-						checked={ !! imageCrop }
-						onChange={ toggleImageCrop }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Randomize order' ) }
-						checked={ !! randomOrder }
-						onChange={ toggleRandomOrder }
-					/>
-					{ hasLinkTo && (
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open images in new tab' ) }
-							checked={ linkTarget === '_blank' }
-							onChange={ toggleOpenInNewTab }
+							label={ __( 'Crop images to fit' ) }
+							checked={ !! imageCrop }
+							onChange={ toggleImageCrop }
 						/>
-					) }
-					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
-						<BaseControl
-							className="gallery-image-sizes"
+						<ToggleControl
 							__nextHasNoMarginBottom
-						>
-							<BaseControl.VisualLabel>
-								{ __( 'Resolution' ) }
-							</BaseControl.VisualLabel>
-							<View className="gallery-image-sizes__loading">
-								<Spinner />
-								{ __( 'Loading options…' ) }
-							</View>
-						</BaseControl>
-					) }
-				</PanelBody>
+							label={ __( 'Randomize order' ) }
+							checked={ !! randomOrder }
+							onChange={ toggleRandomOrder }
+						/>
+						{ hasLinkTo && (
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open images in new tab' ) }
+								checked={ linkTarget === '_blank' }
+								onChange={ toggleOpenInNewTab }
+							/>
+						) }
+					</PanelBody>
+				) }
 			</InspectorControls>
 			{ Platform.isWeb ? (
 				<BlockControls group="block">
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 61121f3dd866d..f32c636a13618 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -78,6 +78,7 @@
 		align-items: center;
 		color: $gray-700;
 		font-size: $helptext-font-size;
+		width: max-content;
 	}
 
 	.components-spinner {