Image tools: Polish zoom slider (#23418)

* Basic polish for zoom slider. * Polish menu. * Show zoom toolbar as overlay. * Update classname. * Retire toolbaritem.
WordPress · Jul 1, 2020 · d47c8eb · d47c8eb
1 parent c65cf1e
commit d47c8eb
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 48 deletions.
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -72,13 +72,13 @@ figure.wp-block-image:not(.wp-block) {
 	text-align: center;
 }
 
-.richimage__crop-area {
+.wp-block-image__crop-area {
 	position: relative;
 	max-width: 100%;
 	width: 100%;
 }
 
-.richimage__crop-icon {
+.wp-block-image__crop-icon {
 	padding: 0 8px;
 	min-width: 48px;
 	display: flex;
@@ -90,34 +90,46 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-.richimage__zoom-control {
+.wp-block-image__zoom-control {
 	border: $border-width solid $dark-gray-primary;
 	border-radius: $radius-block-ui;
 	background-color: $white;
-	margin-top: $grid-unit-15;
-	margin-bottom: $grid-unit-15;
-	padding: $grid-unit-15 $grid-unit-15 $grid-unit-10;
+	padding: $grid-unit-10;
 	line-height: 1;
-}
+	width: 100%;
+	max-width: 280px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
 
-// Make the toolbar dropdowns blend in.
-.components-toolbar.richimage-toolbar__dropdown { // Needs specificity.
-	padding: 0;
-	border-left: none;
-	border-right: none;
+	// 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;
 
-	.components-icon-button.has-text svg {
-		margin-right: 0;
+	.components-range-control {
+		flex: 1;
+		margin-right: $grid-unit-15;
+		margin-left: $grid-unit-15;
 	}
 
-	.components-dropdown-menu__indicator {
-		display: none;
+	.components-base-control__field {
+		display: flex;
+		margin-bottom: 0;
 	}
-}
 
-// Make icons 24x24 unscaled.
-.richimage-toolbar__dropdown > .components-button,
-.richimage-toolbar__dropdown,
-.richimage-toolbar__control {
-	padding: 6px;
+	.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;
+		}
+	}
 }
diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
@@ -12,13 +12,14 @@ import classnames from 'classnames';
 import { BlockControls } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import {
+	Icon,
+	search,
 	rotateRight as rotateRightIcon,
 	aspectRatio as aspectRatioIcon,
 } from '@wordpress/icons';
 import {
 	ToolbarGroup,
 	ToolbarButton,
-	__experimentalToolbarItem as ToolbarItem,
 	Spinner,
 	RangeControl,
 	DropdownMenu,
@@ -31,7 +32,10 @@ import apiFetch from '@wordpress/api-fetch';
 
 const MIN_ZOOM = 100;
 const MAX_ZOOM = 300;
-const POPOVER_PROPS = { position: 'bottom right' };
+const POPOVER_PROPS = {
+	position: 'bottom right',
+	isAlternate: true,
+};
 
 function AspectGroup( { aspectRatios, isDisabled, label, onClick } ) {
 	return (
@@ -51,13 +55,13 @@ function AspectGroup( { aspectRatios, isDisabled, label, onClick } ) {
 	);
 }
 
-function AspectMenu( { isDisabled, onClick, toggleProps } ) {
+function AspectMenu( { isDisabled, onClick } ) {
 	return (
 		<DropdownMenu
 			icon={ aspectRatioIcon }
 			label={ __( 'Aspect Ratio' ) }
 			popoverProps={ POPOVER_PROPS }
-			toggleProps={ toggleProps }
+			className="wp-block-image__aspect-ratio"
 		>
 			{ ( { onClose } ) => (
 				<>
@@ -267,8 +271,26 @@ 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 }
+					/>
+				</div>
+			) }
 			<div
-				className={ classnames( 'richimage__crop-area', {
+				className={ classnames( 'wp-block-image__crop-area', {
 					'is-applying': inProgress,
 				} ) }
 				style={ {
@@ -292,16 +314,6 @@ export default function ImageEditor( {
 				/>
 				{ inProgress && <Spinner /> }
 			</div>
-			{ ! inProgress && (
-				<RangeControl
-					className="richimage__zoom-control"
-					label={ __( 'Zoom' ) }
-					min={ MIN_ZOOM }
-					max={ MAX_ZOOM }
-					value={ Math.round( zoom ) }
-					onChange={ setZoom }
-				/>
-			) }
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -311,17 +323,6 @@ export default function ImageEditor( {
 						disabled={ inProgress }
 					/>
 				</ToolbarGroup>
-				<ToolbarGroup>
-					<ToolbarItem>
-						{ ( toggleProps ) => (
-							<AspectMenu
-								toggleProps={ toggleProps }
-								isDisabled={ inProgress }
-								onClick={ setAspect }
-							/>
-						) }
-					</ToolbarItem>
-				</ToolbarGroup>
 				<ToolbarGroup>
 					<ToolbarButton onClick={ apply } disabled={ inProgress }>
 						{ __( 'Apply' ) }