Image editing: move zoom control to toolbar (#23677)

WordPress · Jul 3, 2020 · 5fd9619 · 5fd9619
1 parent 21709e3
commit 5fd9619
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 51 deletions.
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -90,46 +90,31 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-.wp-block-image__zoom-control {
-	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
-	background-color: $white;
-	padding: $grid-unit-10;
-	line-height: 1;
-	width: 100%;
-	max-width: 280px;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	// Place as a stacked toolbar.
-	position: sticky;
-	top: $grid-unit-60 + $grid-unit-15;
-	z-index: z-index(".block-editor-block-list__block-popover");
-	float: left;
+.wp-block-image__zoom {
+	.components-popover__content {
+		overflow: visible;
+	}
 
 	.components-range-control {
 		flex: 1;
-		margin-right: $grid-unit-15;
-		margin-left: $grid-unit-15;
 	}
 
 	.components-base-control__field {
 		display: flex;
 		margin-bottom: 0;
 	}
+}
 
-	.wp-block-image__aspect-ratio {
-		height: $grid-unit-60 - $border-width - $border-width;
-		margin-top: -$grid-unit-10;
-		margin-bottom: -$grid-unit-10;
-		display: flex;
-		align-items: center;
+.wp-block-image__aspect-ratio {
+	height: $grid-unit-60 - $border-width - $border-width;
+	margin-top: -$grid-unit-10;
+	margin-bottom: -$grid-unit-10;
+	display: flex;
+	align-items: center;
 
-		.components-button {
-			width: $button-size;
-			padding-left: 0;
-			padding-right: 0;
-		}
+	.components-button {
+		width: $button-size;
+		padding-left: 0;
+		padding-right: 0;
 	}
 }
diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
@@ -12,7 +12,6 @@ import classnames from 'classnames';
 import { BlockControls } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import {
-	Icon,
 	search,
 	check,
 	rotateRight as rotateRightIcon,
@@ -21,11 +20,13 @@ import {
 import {
 	ToolbarGroup,
 	ToolbarButton,
+	__experimentalToolbarItem as ToolbarItem,
 	Spinner,
 	RangeControl,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
+	Dropdown,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
@@ -282,26 +283,6 @@ export default function ImageEditor( {
 
 	return (
 		<>
-			{ ! inProgress && (
-				<div
-					className="wp-block-image__zoom-control"
-					aria-label={ __( 'Zoom' ) }
-				>
-					<Icon icon={ search } />
-					<RangeControl
-						min={ MIN_ZOOM }
-						max={ MAX_ZOOM }
-						value={ Math.round( zoom ) }
-						onChange={ setZoom }
-					/>
-					<AspectMenu
-						isDisabled={ inProgress }
-						onClick={ setAspect }
-						value={ aspect }
-						defaultValue={ naturalWidth / naturalHeight }
-					/>
-				</div>
-			) }
 			<div
 				className={ classnames( 'wp-block-image__crop-area', {
 					'is-applying': inProgress,
@@ -330,6 +311,40 @@ export default function ImageEditor( {
 				{ inProgress && <Spinner /> }
 			</div>
 			<BlockControls>
+				<ToolbarGroup>
+					<Dropdown
+						contentClassName="wp-block-image__zoom"
+						popoverProps={ POPOVER_PROPS }
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<ToolbarButton
+								icon={ search }
+								label={ __( 'Zoom' ) }
+								onClick={ onToggle }
+								aria-expanded={ isOpen }
+								disabled={ inProgress }
+							/>
+						) }
+						renderContent={ () => (
+							<RangeControl
+								min={ MIN_ZOOM }
+								max={ MAX_ZOOM }
+								value={ Math.round( zoom ) }
+								onChange={ setZoom }
+							/>
+						) }
+					/>
+					<ToolbarItem>
+						{ ( toggleProps ) => (
+							<AspectMenu
+								toggleProps={ toggleProps }
+								isDisabled={ inProgress }
+								onClick={ setAspect }
+								value={ aspect }
+								defaultValue={ naturalWidth / naturalHeight }
+							/>
+						) }
+					</ToolbarItem>
+				</ToolbarGroup>
 				<ToolbarGroup>
 					<ToolbarButton
 						icon={ rotateRightIcon }

diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
@@ -95,6 +95,7 @@ export default function Dropdown( {
 					headerTitle={ headerTitle }
 					focusOnMount={ focusOnMount }
 					{ ...popoverProps }
+					anchorRef={ containerRef.current }
 					className={ classnames(
 						'components-dropdown__content',
 						popoverProps ? popoverProps.className : undefined,