@wordpress/block-editor 12.3.0 → 12.3.2

package/src/components/list-view/use-list-view-client-ids.js

@@ -16,31 +16,14 @@ export default function useListViewClientIds( { blocks, rootClientId } ) {
 			const {
 				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
-				__unstableGetClientIdsTree,
-				getBlockEditingMode,
+				getListViewClientIdsTree,
 			} = unlock( select( blockEditorStore ) );
 
-			const removeDisabledBlocks = ( tree ) => {
-				return tree.flatMap( ( { clientId, innerBlocks, ...rest } ) => {
-					if ( getBlockEditingMode( clientId ) === 'disabled' ) {
-						return removeDisabledBlocks( innerBlocks );
-					}
-					return [
-						{
-							clientId,
-							innerBlocks: removeDisabledBlocks( innerBlocks ),
-							...rest,
-						},
-					];
-				} );
-			};
-
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
-				clientIdsTree: removeDisabledBlocks(
-					blocks ?? __unstableGetClientIdsTree( rootClientId )
-				),
+				clientIdsTree:
+					blocks ?? getListViewClientIdsTree( rootClientId ),
 			};
 		},
 		[ blocks, rootClientId ]

package/src/components/list-view/use-list-view-drop-zone.js

@@ -7,6 +7,7 @@ import {
 	useThrottle,
 	__experimentalUseDropZone as useDropZone,
 } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -71,14 +72,16 @@ export const NESTING_LEVEL_INDENTATION = 28;
  * @param {WPPoint} point        The point representing the cursor position when dragging.
  * @param {DOMRect} rect         The rectangle.
  * @param {number}  nestingLevel The nesting level of the block.
+ * @param {boolean} rtl          Whether the editor is in RTL mode.
  * @return {boolean} Whether the gesture is an upward gesture.
  */
-function isUpGesture( point, rect, nestingLevel = 1 ) {
+function isUpGesture( point, rect, nestingLevel = 1, rtl = false ) {
 	// If the block is nested, and the user is dragging to the bottom
-	// left of the block, then it is an upward gesture.
-	const blockIndentPosition =
-		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
-	return point.x < blockIndentPosition;
+	// left of the block (or bottom right in RTL languages), then it is an upward gesture.
+	const blockIndentPosition = rtl
+		? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION
+		: rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+	return rtl ? point.x > blockIndentPosition : point.x < blockIndentPosition;
 }
 
 /**
@@ -96,14 +99,29 @@ function isUpGesture( point, rect, nestingLevel = 1 ) {
  * @param {WPPoint} point        The point representing the cursor position when dragging.
  * @param {DOMRect} rect         The rectangle.
  * @param {number}  nestingLevel The nesting level of the block.
+ * @param {boolean} rtl          Whether the editor is in RTL mode.
  * @return {number} The desired relative parent level.
  */
-function getDesiredRelativeParentLevel( point, rect, nestingLevel = 1 ) {
-	const blockIndentPosition =
-		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+function getDesiredRelativeParentLevel(
+	point,
+	rect,
+	nestingLevel = 1,
+	rtl = false
+) {
+	// In RTL languages, the block indent position is from the right edge of the block.
+	// In LTR languages, the block indent position is from the left edge of the block.
+	const blockIndentPosition = rtl
+		? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION
+		: rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+
+	const distanceBetweenPointAndBlockIndentPosition = rtl
+		? blockIndentPosition - point.x
+		: point.x - blockIndentPosition;
+
 	const desiredParentLevel = Math.round(
-		( point.x - blockIndentPosition ) / NESTING_LEVEL_INDENTATION
+		distanceBetweenPointAndBlockIndentPosition / NESTING_LEVEL_INDENTATION
 	);
+
 	return Math.abs( desiredParentLevel );
 }
 
@@ -158,14 +176,18 @@ function getNextNonDraggedBlock( blocksData, index ) {
  * @param {WPPoint} point        The point representing the cursor position when dragging.
  * @param {DOMRect} rect         The rectangle.
  * @param {number}  nestingLevel The nesting level of the block.
+ * @param {boolean} rtl          Whether the editor is in RTL mode.
  */
-function isNestingGesture( point, rect, nestingLevel = 1 ) {
-	const blockIndentPosition =
-		rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
-	return (
-		point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION &&
-		point.y < rect.bottom
-	);
+function isNestingGesture( point, rect, nestingLevel = 1, rtl = false ) {
+	const blockIndentPosition = rtl
+		? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION
+		: rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+
+	const isNestingHorizontalGesture = rtl
+		? point.x < blockIndentPosition - NESTING_LEVEL_INDENTATION
+		: point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION;
+
+	return isNestingHorizontalGesture && point.y < rect.bottom;
 }
 
 // Block navigation is always a vertical list, so only allow dropping
@@ -177,10 +199,11 @@ const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
  *
  * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
  * @param {WPPoint}                  position   The point representing the cursor position when dragging.
+ * @param {boolean}                  rtl        Whether the editor is in RTL mode.
  *
  * @return {WPListViewDropZoneTarget | undefined} An object containing data about the drop target.
  */
-export function getListViewDropTarget( blocksData, position ) {
+export function getListViewDropTarget( blocksData, position, rtl = false ) {
 	let candidateEdge;
 	let candidateBlockData;
 	let candidateDistance;
@@ -255,12 +278,48 @@ export function getListViewDropTarget( blocksData, position ) {
 
 	const isDraggingBelow = candidateEdge === 'bottom';
 
+	// If the user is dragging towards the bottom of the block check whether
+	// they might be trying to nest the block as a child.
+	// If the block already has inner blocks, and is expanded, this should be treated
+	// as nesting since the next block in the tree will be the first child.
+	// However, if the block is collapsed, dragging beneath the block should
+	// still be allowed, as the next visible block in the tree will be a sibling.
+	if (
+		isDraggingBelow &&
+		candidateBlockData.canInsertDraggedBlocksAsChild &&
+		( ( candidateBlockData.innerBlockCount > 0 &&
+			candidateBlockData.isExpanded ) ||
+			isNestingGesture(
+				position,
+				candidateRect,
+				candidateBlockParents.length,
+				rtl
+			) )
+	) {
+		// If the block is expanded, insert the block as the first child.
+		// Otherwise, for collapsed blocks, insert the block as the last child.
+		const newBlockIndex = candidateBlockData.isExpanded
+			? 0
+			: candidateBlockData.innerBlockCount || 0;
+
+		return {
+			rootClientId: candidateBlockData.clientId,
+			blockIndex: newBlockIndex,
+			dropPosition: 'inside',
+		};
+	}
+
 	// If the user is dragging towards the bottom of the block check whether
 	// they might be trying to move the block to be at a parent level.
 	if (
 		isDraggingBelow &&
 		candidateBlockData.rootClientId &&
-		isUpGesture( position, candidateRect, candidateBlockParents.length )
+		isUpGesture(
+			position,
+			candidateRect,
+			candidateBlockParents.length,
+			rtl
+		)
 	) {
 		const nextBlock = getNextNonDraggedBlock(
 			blocksData,
@@ -274,7 +333,8 @@ export function getListViewDropTarget( blocksData, position ) {
 			const desiredRelativeLevel = getDesiredRelativeParentLevel(
 				position,
 				candidateRect,
-				candidateBlockParents.length
+				candidateBlockParents.length,
+				rtl
 			);
 
 			const targetParentIndex = Math.max(
@@ -321,36 +381,6 @@ export function getListViewDropTarget( blocksData, position ) {
 		}
 	}
 
-	// If the user is dragging towards the bottom of the block check whether
-	// they might be trying to nest the block as a child.
-	// If the block already has inner blocks, and is expanded, this should be treated
-	// as nesting since the next block in the tree will be the first child.
-	// However, if the block is collapsed, dragging beneath the block should
-	// still be allowed, as the next visible block in the tree will be a sibling.
-	if (
-		isDraggingBelow &&
-		candidateBlockData.canInsertDraggedBlocksAsChild &&
-		( ( candidateBlockData.innerBlockCount > 0 &&
-			candidateBlockData.isExpanded ) ||
-			isNestingGesture(
-				position,
-				candidateRect,
-				candidateBlockParents.length
-			) )
-	) {
-		// If the block is expanded, insert the block as the first child.
-		// Otherwise, for collapsed blocks, insert the block as the last child.
-		const newBlockIndex = candidateBlockData.isExpanded
-			? 0
-			: candidateBlockData.innerBlockCount || 0;
-
-		return {
-			rootClientId: candidateBlockData.clientId,
-			blockIndex: newBlockIndex,
-			dropPosition: 'inside',
-		};
-	}
-
 	// If dropping as a sibling, but block cannot be inserted in
 	// this context, return early.
 	if ( ! candidateBlockData.canInsertDraggedBlocksAsSibling ) {
@@ -388,6 +418,8 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 
+	const rtl = isRTL();
+
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
@@ -402,6 +434,8 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 				const blocksData = blockElements.map( ( blockElement ) => {
 					const clientId = blockElement.dataset.block;
 					const isExpanded = blockElement.dataset.expanded === 'true';
+					const isDraggedBlock =
+						blockElement.classList.contains( 'is-dragging' );
 
 					// Get nesting level from `aria-level` attribute because Firefox does not support `element.ariaLevel`.
 					const nestingLevel = parseInt(
@@ -417,9 +451,7 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,
 						nestingLevel: nestingLevel || undefined,
-						isDraggedBlock: isBlockDrag
-							? draggedBlockClientIds.includes( clientId )
-							: false,
+						isDraggedBlock: isBlockDrag ? isDraggedBlock : false,
 						innerBlockCount: getBlockCount( clientId ),
 						canInsertDraggedBlocksAsSibling: isBlockDrag
 							? canInsertBlocks(
@@ -433,13 +465,24 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 					};
 				} );
 
-				const newTarget = getListViewDropTarget( blocksData, position );
+				const newTarget = getListViewDropTarget(
+					blocksData,
+					position,
+					rtl
+				);
 
 				if ( newTarget ) {
 					setTarget( newTarget );
 				}
 			},
-			[ draggedBlockClientIds ]
+			[
+				canInsertBlocks,
+				draggedBlockClientIds,
+				getBlockCount,
+				getBlockIndex,
+				getBlockRootClientId,
+				rtl,
+			]
 		),
 		200
 	);

package/src/components/media-placeholder/index.js

@@ -30,8 +30,14 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
-const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
-	<URLPopover onClose={ onClose }>
+const InsertFromURLPopover = ( {
+	src,
+	onChange,
+	onSubmit,
+	onClose,
+	popoverAnchor,
+} ) => (
+	<URLPopover anchor={ popoverAnchor } onClose={ onClose }>
 		<form
 			className="block-editor-media-placeholder__url-input-form"
 			onSubmit={ onSubmit }
@@ -54,6 +60,44 @@ const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
 	</URLPopover>
 );
 
+const URLSelectionUI = ( {
+	isURLInputVisible,
+	src,
+	onChangeSrc,
+	onSubmitSrc,
+	openURLInput,
+	closeURLInput,
+} ) => {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+
+	return (
+		<div
+			className="block-editor-media-placeholder__url-input-container"
+			ref={ setPopoverAnchor }
+		>
+			<Button
+				className="block-editor-media-placeholder__button"
+				onClick={ openURLInput }
+				isPressed={ isURLInputVisible }
+				variant="tertiary"
+			>
+				{ __( 'Insert from URL' ) }
+			</Button>
+			{ isURLInputVisible && (
+				<InsertFromURLPopover
+					src={ src }
+					onChange={ onChangeSrc }
+					onSubmit={ onSubmitSrc }
+					onClose={ closeURLInput }
+					popoverAnchor={ popoverAnchor }
+				/>
+			) }
+		</div>
+	);
+};
+
 export function MediaPlaceholder( {
 	value = {},
 	allowedTypes,
@@ -359,24 +403,14 @@ export function MediaPlaceholder( {
 	const renderUrlSelectionUI = () => {
 		return (
 			onSelectURL && (
-				<div className="block-editor-media-placeholder__url-input-container">
-					<Button
-						className="block-editor-media-placeholder__button"
-						onClick={ openURLInput }
-						isPressed={ isURLInputVisible }
-						variant="tertiary"
-					>
-						{ __( 'Insert from URL' ) }
-					</Button>
-					{ isURLInputVisible && (
-						<InsertFromURLPopover
-							src={ src }
-							onChange={ onChangeSrc }
-							onSubmit={ onSubmitSrc }
-							onClose={ closeURLInput }
-						/>
-					) }
-				</div>
+				<URLSelectionUI
+					isURLInputVisible={ isURLInputVisible }
+					src={ src }
+					onChangeSrc={ onChangeSrc }
+					onSubmitSrc={ onSubmitSrc }
+					openURLInput={ openURLInput }
+					closeURLInput={ closeURLInput }
+				/>
 			)
 		);
 	};

package/src/components/media-replace-flow/index.js

@@ -59,9 +59,7 @@ const MediaReplaceFlow = ( {
 	multiple = false,
 	addToGallery,
 	handleUpload = true,
-	popoverProps = {
-		variant: 'toolbar',
-	},
+	popoverProps,
 } ) => {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;

package/src/components/media-replace-flow/test/index.js

@@ -128,7 +128,7 @@ describe( 'General media replace flow', () => {
 		);
 
 		const mediaURLInput = screen.getByRole( 'combobox', {
-			name: 'URL',
+			name: 'Link',
 			expanded: false,
 		} );
 

package/src/components/preview-options/index.js

@@ -18,6 +18,7 @@ export default function PreviewOptions( {
 	isEnabled = true,
 	deviceType,
 	setDeviceType,
+	label,
 } ) {
 	const isMobile = useViewportMatch( 'small', '<' );
 	if ( isMobile ) return null;
@@ -27,10 +28,9 @@ export default function PreviewOptions( {
 			className,
 			'block-editor-post-preview__dropdown-content'
 		),
-		position: 'bottom left',
+		placement: 'bottom-end',
 	};
 	const toggleProps = {
-		variant: 'tertiary',
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
 		children: viewLabel,
@@ -52,6 +52,7 @@ export default function PreviewOptions( {
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			label={ label || __( 'Preview' ) }
 		>
 			{ () => (
 				<>

package/src/components/provider/test/experimental-provider.js

@@ -29,18 +29,21 @@ describe( 'BlockEditorProvider', () => {
 	beforeEach( () => {
 		registry = undefined;
 	} );
-	it( 'should strip experimental settings', async () => {
+	it( 'should not allow updating experimental settings', async () => {
 		render(
 			<BlockEditorProvider
 				settings={ {
-					inserterMediaCategories: true,
+					blockInspectorAnimation: true,
 				} }
 			>
 				<HasEditorSetting setRegistry={ setRegistry } />
 			</BlockEditorProvider>
 		);
 		const settings = registry.select( blockEditorStore ).getSettings();
-		expect( settings ).not.toHaveProperty( 'inserterMediaCategories' );
+		// `blockInspectorAnimation` setting is one of the block editor's
+		// default settings, so it has a value. We're testing that its
+		// value was not updated.
+		expect( settings.blockInspectorAnimation ).not.toBe( true );
 	} );
 	it( 'should preserve stable settings', async () => {
 		render(
@@ -65,18 +68,18 @@ describe( 'ExperimentalBlockEditorProvider', () => {
 	beforeEach( () => {
 		registry = undefined;
 	} );
-	it( 'should preserve experimental settings', async () => {
+	it( 'should allow updating/adding experimental settings', async () => {
 		render(
 			<ExperimentalBlockEditorProvider
 				settings={ {
-					inserterMediaCategories: true,
+					blockInspectorAnimation: true,
 				} }
 			>
 				<HasEditorSetting setRegistry={ setRegistry } />
 			</ExperimentalBlockEditorProvider>
 		);
 		const settings = registry.select( blockEditorStore ).getSettings();
-		expect( settings ).toHaveProperty( 'inserterMediaCategories' );
+		expect( settings.blockInspectorAnimation ).toBe( true );
 	} );
 	it( 'should preserve stable settings', async () => {
 		render(

package/src/components/provider/test/use-block-sync.js

@@ -48,7 +48,7 @@ describe( 'useBlockSync hook', () => {
 		jest.clearAllMocks();
 	} );
 
-	it( 'resets the block-editor blocks when the controll value changes', async () => {
+	it( 'resets the block-editor blocks when the controlled value changes', async () => {
 		const fakeBlocks = [];
 		const resetBlocks = jest.spyOn( blockEditorActions, 'resetBlocks' );
 		const replaceInnerBlocks = jest.spyOn(
@@ -58,7 +58,7 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		const { rerender } = render(
+		const { rerender, unmount } = render(
 			<TestWrapper
 				value={ fakeBlocks }
 				onChange={ onChange }
@@ -88,9 +88,16 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( testBlocks );
+
+		unmount();
+
+		expect( onChange ).not.toHaveBeenCalled();
+		expect( onInput ).not.toHaveBeenCalled();
+		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
+		expect( resetBlocks ).toHaveBeenCalledWith( [] );
 	} );
 
-	it( 'replaces the inner blocks of a block when the control value changes if a clientId is passed', async () => {
+	it( 'replaces the inner blocks of a block when the controlled value changes if a clientId is passed', async () => {
 		const fakeBlocks = [];
 		const replaceInnerBlocks = jest.spyOn(
 			blockEditorActions,
@@ -100,7 +107,7 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		const { rerender } = render(
+		const { rerender, unmount } = render(
 			<TestWrapper
 				clientId="test"
 				value={ fakeBlocks }
@@ -138,8 +145,16 @@ describe( 'useBlockSync hook', () => {
 		expect( onChange ).not.toHaveBeenCalled();
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( resetBlocks ).not.toHaveBeenCalled();
-		// We can't check the args because the blocks are cloned.
-		expect( replaceInnerBlocks ).toHaveBeenCalled();
+		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [
+			expect.objectContaining( { name: 'test/test-block' } ),
+		] );
+
+		unmount();
+
+		expect( onChange ).not.toHaveBeenCalled();
+		expect( onInput ).not.toHaveBeenCalled();
+		expect( resetBlocks ).not.toHaveBeenCalled();
+		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
 	} );
 
 	it( 'does not add the controlled blocks to the block-editor store if the store already contains them', async () => {

package/src/components/provider/use-block-sync.js

@@ -134,6 +134,19 @@ export default function useBlockSync( {
 		}
 	};
 
+	// Clean up the changes made by setControlledBlocks() when the component
+	// containing useBlockSync() unmounts.
+	const unsetControlledBlocks = () => {
+		__unstableMarkNextChangeAsNotPersistent();
+		if ( clientId ) {
+			setHasControlledInnerBlocks( clientId, false );
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [] );
+		} else {
+			resetBlocks( [] );
+		}
+	};
+
 	// Add a subscription to the block-editor registry to detect when changes
 	// have been made. This lets us inform the data source of changes. This
 	// is an effect so that the subscriber can run synchronously without
@@ -287,4 +300,10 @@ export default function useBlockSync( {
 			unsubscribe();
 		};
 	}, [ registry, clientId ] );
+
+	useEffect( () => {
+		return () => {
+			unsetControlledBlocks();
+		};
+	}, [] );
 }

package/src/components/resolution-tool/index.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+const DEFAULT_SIZE_OPTIONS = [
+	{
+		label: _x( 'Thumbnail', 'Image size option for resolution control' ),
+		value: 'thumbnail',
+	},
+	{
+		label: _x( 'Medium', 'Image size option for resolution control' ),
+		value: 'medium',
+	},
+	{
+		label: _x( 'Large', 'Image size option for resolution control' ),
+		value: 'large',
+	},
+	{
+		label: _x( 'Full Size', 'Image size option for resolution control' ),
+		value: 'full',
+	},
+];
+
+export default function ResolutionTool( {
+	panelId,
+	value,
+	onChange,
+	options = DEFAULT_SIZE_OPTIONS,
+	defaultValue = DEFAULT_SIZE_OPTIONS[ 0 ].value,
+	isShownByDefault = true,
+} ) {
+	const displayValue = value ?? defaultValue;
+	return (
+		<ToolsPanelItem
+			hasValue={ () => displayValue !== defaultValue }
+			label={ __( 'Resolution' ) }
+			onDeselect={ () => onChange( defaultValue ) }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<SelectControl
+				label={ __( 'Resolution' ) }
+				value={ displayValue }
+				options={ options }
+				onChange={ onChange }
+				help={ __( 'Select the size of the source image.' ) }
+				size={ '__unstable-large' }
+			/>
+		</ToolsPanelItem>
+	);
+}

package/src/components/resolution-tool/stories/index.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	Panel,
+	__experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ResolutionTool from '..';
+
+export default {
+	title: 'BlockEditor (Private APIs)/ResolutionControl',
+	component: ResolutionTool,
+	argTypes: {
+		panelId: { control: { type: null } },
+		onChange: { action: 'changed' },
+	},
+};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+	const [ resolution, setResolution ] = useState( undefined );
+	const resetAll = () => {
+		setResolution( undefined );
+		onChangeProp( undefined );
+	};
+	return (
+		<Panel>
+			<ToolsPanel panelId={ panelId } resetAll={ resetAll }>
+				<ResolutionTool
+					panelId={ panelId }
+					onChange={ ( newValue ) => {
+						setResolution( newValue );
+						onChangeProp( newValue );
+					} }
+					value={ resolution }
+					{ ...props }
+				/>
+			</ToolsPanel>
+		</Panel>
+	);
+};
+Default.args = {
+	panelId: 'panel-id',
+};