From c87c9b01e6506e47dc9435637d7c97fb260258cb Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 24 Apr 2020 11:39:39 +0100
Subject: [PATCH] Unify how editor alignments are applied across blocks
 (#21822)

Co-authored-by: Ella van Durpe <ella@vandurpe.com>
---
 packages/base-styles/_z-index.scss            |   4 +-
 .../components/block-list/block-wrapper.js    |  25 +-
 .../src/components/block-list/block.js        |   9 +-
 .../src/components/block-list/style.scss      |  65 ++--
 .../src/components/block-preview/style.scss   |   5 +-
 packages/block-library/src/button/editor.scss |  18 +-
 packages/block-library/src/button/style.scss  |   1 -
 packages/block-library/src/buttons/edit.js    |   7 +-
 .../block-library/src/buttons/editor.scss     |  26 +-
 packages/block-library/src/buttons/index.js   |   1 +
 packages/block-library/src/cover/editor.scss  |  14 +-
 packages/block-library/src/embed/style.scss   |   4 +-
 packages/block-library/src/group/editor.scss  |   2 +-
 packages/block-library/src/image/edit.js      | 364 ++++++++----------
 packages/block-library/src/image/editor.scss  |  65 ++--
 packages/block-library/src/image/index.js     |   5 +
 packages/block-library/src/image/style.scss   |   8 +-
 .../block-library/src/pullquote/editor.scss   |  10 +-
 .../src/social-links/editor.scss              |   2 +-
 packages/block-library/src/table/editor.scss  |  10 +-
 packages/block-library/src/video/editor.scss  |   2 +-
 packages/edit-post/src/style.scss             |   6 +-
 .../src/components/block-editor/style.scss    |   3 +-
 23 files changed, 299 insertions(+), 357 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index b0b09d483dab9f..cb3fc857703208 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -46,8 +46,8 @@ $z-layers: (
 	".components-drop-zone": 40,
 	".components-drop-zone__content": 50,
 
-	// The block mover for floats should overlap the controls of adjacent blocks.
-	".block-editor-block-list__block {core/image aligned left or right}": 21,
+	// The floated blocks should be above the other blocks to allow selection.
+	"{core/image aligned left or right} .wp-block": 21,
 
 	// Small screen inner blocks overlay must be displayed above drop zone,
 	// settings menu, and movers.
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
index 52f353428e23f0..09ce4d311fbabe 100644
--- a/packages/block-editor/src/components/block-list/block-wrapper.js
+++ b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -69,7 +69,7 @@ const BlockComponent = forwardRef(
 			'core/block-editor'
 		);
 		const fallbackRef = useRef();
-
+		const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
 		wrapper = wrapper || fallbackRef;
 
 		// Provide the selected node, or the first and last nodes of a multi-
@@ -196,19 +196,20 @@ const BlockComponent = forwardRef(
 		const blockElementId = `block-${ clientId }${ htmlSuffix }`;
 		const Animated = animated[ tagName ];
 
-		return (
+		const blockWrapper = (
 			<Animated
 				// Overrideable props.
 				aria-label={ blockLabel }
 				role="group"
-				{ ...wrapperProps }
+				{ ...omit( wrapperProps, [ 'data-align' ] ) }
 				{ ...props }
 				id={ blockElementId }
 				ref={ wrapper }
 				className={ classnames(
 					className,
 					props.className,
-					wrapperProps && wrapperProps.className
+					wrapperProps && wrapperProps.className,
+					! isAligned && 'wp-block'
 				) }
 				data-block={ clientId }
 				data-type={ name }
@@ -227,6 +228,22 @@ const BlockComponent = forwardRef(
 				{ children }
 			</Animated>
 		);
+
+		// For aligned blocks, provide a wrapper element so the block can be
+		// positioned relative to the block column. This is enabled with the
+		// .is-block-content className.
+		if ( isAligned ) {
+			const alignmentWrapperProps = {
+				'data-align': wrapperProps[ 'data-align' ],
+			};
+			return (
+				<div className="wp-block" { ...alignmentWrapperProps }>
+					{ blockWrapper }
+				</div>
+			);
+		}
+
+		return blockWrapper;
 	}
 );
 
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 448f4b74514565..8771be3f41c5fd 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -107,7 +107,7 @@ function BlockListBlock( {
 	const wrapperClassName = classnames(
 		generatedClassName,
 		customClassName,
-		'wp-block block-editor-block-list__block',
+		'block-editor-block-list__block',
 		{
 			'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
 			'is-selected': isSelected,
@@ -144,13 +144,6 @@ function BlockListBlock( {
 		/>
 	);
 
-	// For aligned blocks, provide a wrapper element so the block can be
-	// positioned relative to the block column. This is enabled with the
-	// .is-block-content className.
-	if ( ! lightBlockWrapper && isAligned ) {
-		blockEdit = <div className="is-block-content">{ blockEdit }</div>;
-	}
-
 	if ( mode !== 'visual' ) {
 		blockEdit = <div style={ { display: 'none' } }>{ blockEdit }</div>;
 	}
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index f7dc606b69cb15..d52bf1f28d7e52 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -1,8 +1,3 @@
-.block-editor-block-list__block {
-	margin-left: auto;
-	margin-right: auto;
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block { // Needs specificity to override inherited styles.
 	// While block is being dragged, dim the slot dragged from, and hide some UI.
 	&.is-dragging {
@@ -143,7 +138,6 @@
 			right: $border-width;
 		}
 
-		.is-block-content, // Floats.
 		&::after { // Everything else.
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
@@ -248,17 +242,28 @@
 		cursor: default;
 	}
 
-	.alignleft,
-	.alignright {
-		// Without z-index, won't be clickable as "above" adjacent content.
-		z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}");
+	// Clear floats.
+	&[data-clear="true"] {
+		float: none;
+	}
+
+	// This essentially duplicates the mobile styles for the appender component.
+	// It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
+	.block-editor-block-list__layout {
+		.block-editor-default-block-appender .block-editor-inserter {
+			left: auto;
+			right: $grid-unit-10;
+		}
 	}
+}
+
+.wp-block {
+	margin-left: auto;
+	margin-right: auto;
 
 	// Alignments.
 	&[data-align="left"],
 	&[data-align="right"] {
-		// Without z-index, won't be clickable as "above" adjacent content.
-		z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}");
 		width: 100%;
 
 		// When images are floated, the block itself should collapse to zero height.
@@ -269,8 +274,14 @@
 		}
 	}
 
+	&[data-align="left"] > *,
+	&[data-align="right"] > * {
+		// Without z-index, won't be clickable as "above" adjacent content.
+		z-index: z-index("{core/image aligned left or right} .wp-block");
+	}
+
 	// Left.
-	&[data-align="left"] > .is-block-content {
+	&[data-align="left"] > * {
 		// This is in the editor only; the image should be floated on the frontend.
 		/*!rtl:begin:ignore*/
 		float: left;
@@ -279,7 +290,7 @@
 	}
 
 	// Right.
-	&[data-align="right"] > .is-block-content {
+	&[data-align="right"] > * {
 		// Right: This is in the editor only; the image should be floated on the frontend.
 		/*!rtl:begin:ignore*/
 		float: right;
@@ -289,25 +300,9 @@
 
 	// Wide and full-wide.
 	&[data-align="full"],
-	&[data-align="wide"],
-	&.alignfull,
-	&.alignwide {
+	&[data-align="wide"] {
 		clear: both;
 	}
-
-	// Clear floats.
-	&[data-clear="true"] {
-		float: none;
-	}
-
-	// This essentially duplicates the mobile styles for the appender component.
-	// It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
-	.block-editor-block-list__layout {
-		.block-editor-default-block-appender .block-editor-inserter {
-			left: auto;
-			right: $grid-unit-10;
-		}
-	}
 }
 
 /**
@@ -624,12 +619,8 @@
 		padding-right: $block-side-ui-width;
 	}
 
-	// Full-wide. (to account for the padddings added above)
-	// The first two rules account for the alignment wrapper div for the image block.
-	> div:not(.block-editor-block-list__block) > .block-editor-block-list__block[data-align="full"],
-	> div:not(.block-editor-block-list__block) > .block-editor-block-list__block.alignfull,
-	> .block-editor-block-list__block[data-align="full"],
-	> .block-editor-block-list__block.alignfull {
+	// Full-wide. (to account for the paddings added above)
+	> .wp-block[data-align="full"] {
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
 
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 1d0df3962fd741..b3f344c4127c85 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -44,10 +44,7 @@
 		padding-left: 0;
 		padding-right: 0;
 
-		> div:not(.block-editor-block-list__block) > .block-editor-block-list__block[data-align="full"],
-		> div:not(.block-editor-block-list__block) > .block-editor-block-list__block.alignfull,
-		> .block-editor-block-list__block[data-align="full"],
-		> .block-editor-block-list__block.alignfull {
+		> .wp-block[data-align="full"] {
 			margin-left: 0;
 			margin-right: 0;
 		}
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index efed2d4910b1a1..e6301f241bacf2 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -1,14 +1,12 @@
-.block-editor-block-list__block[data-type="core/button"] {
-	&[data-align="center"] {
-		text-align: center;
-		margin-left: auto;
-		margin-right: auto;
-	}
+.wp-block[data-align="center"] .wp-block-button {
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+}
 
-	&[data-align="right"] {
-		/*!rtl:ignore*/
-		text-align: right;
-	}
+.wp-block[data-align="right"] .wp-block-button {
+	/*!rtl:ignore*/
+	text-align: right;
 }
 
 .wp-block-button {
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 40f44b71ace52b..b1851b55f630eb 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -11,7 +11,6 @@ $blocks-button__height: 56px;
 	cursor: pointer;
 	display: inline-block;
 	font-size: $big-font-size;
-	margin: 0;
 	padding: 12px 24px;
 	text-align: center;
 	text-decoration: none;
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index d9b76ed8f1bcb6..f6aa94582b3a6c 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -4,6 +4,7 @@
 import {
 	__experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
 	InnerBlocks,
+	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 
 /**
@@ -19,9 +20,9 @@ const alignmentHooksSetting = {
 	isEmbedButton: true,
 };
 
-function ButtonsEdit( { className } ) {
+function ButtonsEdit() {
 	return (
-		<div className={ className }>
+		<Block.div>
 			<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
 				<InnerBlocks
 					allowedBlocks={ ALLOWED_BLOCKS }
@@ -29,7 +30,7 @@ function ButtonsEdit( { className } ) {
 					__experimentalMoverDirection="horizontal"
 				/>
 			</AlignmentHookSettingsProvider>
-		</div>
+		</Block.div>
 	);
 }
 
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index 10838d577f0743..2a07114b65ad50 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -3,20 +3,18 @@
 	width: auto;
 }
 
-.wp-block-buttons {
-	&[data-align="center"] .block-editor-block-list__layout {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		justify-content: center;
-	}
+.wp-block[data-align="center"] > .wp-block-buttons {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	justify-content: center;
+}
 
-	&[data-align="right"] .block-editor-block-list__layout {
-		display: flex;
-		justify-content: flex-end;
-	}
+.wp-block[data-align="right"] > .wp-block-buttons {
+	display: flex;
+	justify-content: flex-end;
+}
 
-	.block-editor-block-list__layout > div:last-child {
-		display: inline-block;
-	}
+.wp-block-buttons .block-list-appender {
+	display: inline-block;
 }
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
index 4777968dd1e710..c9b6b6a7a74f89 100644
--- a/packages/block-library/src/buttons/index.js
+++ b/packages/block-library/src/buttons/index.js
@@ -26,6 +26,7 @@ export const settings = {
 	supports: {
 		align: true,
 		alignWide: false,
+		lightBlockWrapper: true,
 	},
 	transforms,
 	edit,
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 31faa3872936d0..1037fbf89158ab 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -1,6 +1,5 @@
 .wp-block-cover-image,
 .wp-block-cover {
-
 	&.components-placeholder h2 {
 		color: inherit;
 	}
@@ -23,13 +22,14 @@
 	.wp-block-cover__placeholder-background-options {
 		width: 100%;
 	}
+}
 
-	// Apply max-width to floated items that have no intrinsic width.
-	[data-align="left"] &,
-	[data-align="right"] & {
-		max-width: $content-width / 2;
-		width: 100%;
-	}
+[data-align="left"] > .wp-block-cover,
+[data-align="right"] > .wp-block-cover,
+[data-align="left"] > .wp-block-cover-image,
+[data-align="right"] > .wp-block-cover-image {
+	max-width: $content-width / 2;
+	width: 100%;
 }
 
 .block-library-cover__reset-button {
diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
index 0905f04dd8e4e8..3028e00a8bd51a 100644
--- a/packages/block-library/src/embed/style.scss
+++ b/packages/block-library/src/embed/style.scss
@@ -1,6 +1,6 @@
 // Apply max-width to floated items that have no intrinsic width
-.block-editor-block-list__block[data-type*="core-embed"][data-align="left"] .is-block-content,
-.block-editor-block-list__block[data-type*="core-embed"][data-align="right"] .is-block-content,
+.wp-block[data-align="left"] > .wp-block-embed,
+.wp-block[data-align="right"] > .wp-block-embed,
 .wp-block-embed.alignleft,
 .wp-block-embed.alignright {
 	// Instagram widgets have a min-width of 326px, so go a bit beyond that.
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 9371d7671bb8f3..6e414ad520b7e3 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -48,7 +48,7 @@
 /**
  * Group: Full Width Alignment
  */
-.wp-block[data-type="core/group"][data-align="full"] {
+.wp-block[data-align="full"] .wp-block-group {
 
 	// First tier of InnerBlocks must act like the container of the standard canvas
 	> div > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks {
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 30ddaefd89602e..10ea6dbb3a15c6 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -399,9 +399,6 @@ export class ImageEdit extends Component {
 				src={ url }
 			/>
 		);
-		const needsAlignmentWrapper = [ 'center', 'left', 'right' ].includes(
-			align
-		);
 
 		const mediaPlaceholder = (
 			<MediaPlaceholder
@@ -422,20 +419,7 @@ export class ImageEdit extends Component {
 			return (
 				<>
 					{ controls }
-					<Block.div
-						className={ classnames( className, {
-							[ `align${ align }` ]:
-								! needsAlignmentWrapper && align,
-						} ) }
-					>
-						{ needsAlignmentWrapper ? (
-							<div className={ `align${ align }` }>
-								{ mediaPlaceholder }
-							</div>
-						) : (
-							mediaPlaceholder
-						) }
-					</Block.div>
+					<Block.div>{ mediaPlaceholder }</Block.div>
 				</>
 			);
 		}
@@ -445,7 +429,6 @@ export class ImageEdit extends Component {
 			'is-resized': !! width || !! height,
 			'is-focused': isSelected,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
-			[ `align${ align }` ]: align,
 		} );
 
 		const isResizable =
@@ -514,198 +497,185 @@ export class ImageEdit extends Component {
 		return (
 			<>
 				{ controls }
-				<div
-					className={
-						// Ideally these classes are not needed, and ideally, we
-						// provide an alignment wrapper component that the block
-						// can wrap around the block or we build it into
-						// Block.*.
-						needsAlignmentWrapper
-							? 'wp-block block-editor-block-list__block'
-							: undefined
-					}
-				>
-					<Block.figure className={ classes }>
-						<ImageSize src={ url } dirtynessTrigger={ align }>
-							{ ( sizes ) => {
-								const {
-									imageWidthWithinContainer,
-									imageHeightWithinContainer,
-									imageWidth,
-									imageHeight,
-								} = sizes;
-
-								const filename = this.getFilename( url );
-								let defaultedAlt;
-								if ( alt ) {
-									defaultedAlt = alt;
-								} else if ( filename ) {
-									defaultedAlt = sprintf(
-										/* translators: %s: file name */
-										__(
-											'This image has an empty alt attribute; its file name is %s'
-										),
-										filename
-									);
-								} else {
-									defaultedAlt = __(
-										'This image has an empty alt attribute'
-									);
-								}
-
-								const img = (
-									// Disable reason: Image itself is not meant to be interactive, but
-									// should direct focus to block.
-									/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-									<>
-										<img
-											src={ url }
-											alt={ defaultedAlt }
-											onClick={ this.onImageClick }
-											onError={ () =>
-												this.onImageError( url )
-											}
-										/>
-										{ isBlobURL( url ) && <Spinner /> }
-									</>
-									/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+				<Block.figure className={ classes }>
+					<ImageSize src={ url } dirtynessTrigger={ align }>
+						{ ( sizes ) => {
+							const {
+								imageWidthWithinContainer,
+								imageHeightWithinContainer,
+								imageWidth,
+								imageHeight,
+							} = sizes;
+
+							const filename = this.getFilename( url );
+							let defaultedAlt;
+							if ( alt ) {
+								defaultedAlt = alt;
+							} else if ( filename ) {
+								defaultedAlt = sprintf(
+									/* translators: %s: file name */
+									__(
+										'This image has an empty alt attribute; its file name is %s'
+									),
+									filename
 								);
+							} else {
+								defaultedAlt = __(
+									'This image has an empty alt attribute'
+								);
+							}
 
-								if (
-									! isResizable ||
-									! imageWidthWithinContainer
-								) {
-									return (
-										<>
-											{ getInspectorControls(
-												imageWidth,
-												imageHeight
-											) }
-											<div style={ { width, height } }>
-												{ img }
-											</div>
-										</>
-									);
-								}
-
-								const currentWidth =
-									width || imageWidthWithinContainer;
-								const currentHeight =
-									height || imageHeightWithinContainer;
-
-								const ratio = imageWidth / imageHeight;
-								const minWidth =
-									imageWidth < imageHeight
-										? MIN_SIZE
-										: MIN_SIZE * ratio;
-								const minHeight =
-									imageHeight < imageWidth
-										? MIN_SIZE
-										: MIN_SIZE / ratio;
-
-								// With the current implementation of ResizableBox, an image needs an explicit pixel value for the max-width.
-								// In absence of being able to set the content-width, this max-width is currently dictated by the vanilla editor style.
-								// The following variable adds a buffer to this vanilla style, so 3rd party themes have some wiggleroom.
-								// This does, in most cases, allow you to scale the image beyond the width of the main column, though not infinitely.
-								// @todo It would be good to revisit this once a content-width variable becomes available.
-								const maxWidthBuffer = maxWidth * 2.5;
-
-								let showRightHandle = false;
-								let showLeftHandle = false;
-
-								/* eslint-disable no-lonely-if */
-								// See https://github.com/WordPress/gutenberg/issues/7584.
-								if ( align === 'center' ) {
-									// When the image is centered, show both handles.
-									showRightHandle = true;
-									showLeftHandle = true;
-								} else if ( isRTL ) {
-									// In RTL mode the image is on the right by default.
-									// Show the right handle and hide the left handle only when it is aligned left.
-									// Otherwise always show the left handle.
-									if ( align === 'left' ) {
-										showRightHandle = true;
-									} else {
-										showLeftHandle = true;
-									}
-								} else {
-									// Show the left handle and hide the right handle only when the image is aligned right.
-									// Otherwise always show the right handle.
-									if ( align === 'right' ) {
-										showLeftHandle = true;
-									} else {
-										showRightHandle = true;
-									}
-								}
-								/* eslint-enable no-lonely-if */
+							const img = (
+								// Disable reason: Image itself is not meant to be interactive, but
+								// should direct focus to block.
+								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+								<>
+									<img
+										src={ url }
+										alt={ defaultedAlt }
+										onClick={ this.onImageClick }
+										onError={ () =>
+											this.onImageError( url )
+										}
+									/>
+									{ isBlobURL( url ) && <Spinner /> }
+								</>
+								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+							);
 
+							if (
+								! isResizable ||
+								! imageWidthWithinContainer
+							) {
 								return (
 									<>
 										{ getInspectorControls(
 											imageWidth,
 											imageHeight
 										) }
-										<ResizableBox
-											size={ {
-												width,
-												height,
-											} }
-											minWidth={ minWidth }
-											maxWidth={ maxWidthBuffer }
-											minHeight={ minHeight }
-											maxHeight={ maxWidthBuffer / ratio }
-											lockAspectRatio
-											enable={ {
-												top: false,
-												right: showRightHandle,
-												bottom: true,
-												left: showLeftHandle,
-											} }
-											onResizeStart={ onResizeStart }
-											onResizeStop={ (
-												event,
-												direction,
-												elt,
-												delta
-											) => {
-												onResizeStop();
-												setAttributes( {
-													width: parseInt(
-														currentWidth +
-															delta.width,
-														10
-													),
-													height: parseInt(
-														currentHeight +
-															delta.height,
-														10
-													),
-												} );
-											} }
-										>
+										<div style={ { width, height } }>
 											{ img }
-										</ResizableBox>
+										</div>
 									</>
 								);
-							} }
-						</ImageSize>
-						{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-							<RichText
-								tagName="figcaption"
-								placeholder={ __( 'Write caption…' ) }
-								value={ caption }
-								unstableOnFocus={ this.onFocusCaption }
-								onChange={ ( value ) =>
-									setAttributes( { caption: value } )
+							}
+
+							const currentWidth =
+								width || imageWidthWithinContainer;
+							const currentHeight =
+								height || imageHeightWithinContainer;
+
+							const ratio = imageWidth / imageHeight;
+							const minWidth =
+								imageWidth < imageHeight
+									? MIN_SIZE
+									: MIN_SIZE * ratio;
+							const minHeight =
+								imageHeight < imageWidth
+									? MIN_SIZE
+									: MIN_SIZE / ratio;
+
+							// With the current implementation of ResizableBox, an image needs an explicit pixel value for the max-width.
+							// In absence of being able to set the content-width, this max-width is currently dictated by the vanilla editor style.
+							// The following variable adds a buffer to this vanilla style, so 3rd party themes have some wiggleroom.
+							// This does, in most cases, allow you to scale the image beyond the width of the main column, though not infinitely.
+							// @todo It would be good to revisit this once a content-width variable becomes available.
+							const maxWidthBuffer = maxWidth * 2.5;
+
+							let showRightHandle = false;
+							let showLeftHandle = false;
+
+							/* eslint-disable no-lonely-if */
+							// See https://github.com/WordPress/gutenberg/issues/7584.
+							if ( align === 'center' ) {
+								// When the image is centered, show both handles.
+								showRightHandle = true;
+								showLeftHandle = true;
+							} else if ( isRTL ) {
+								// In RTL mode the image is on the right by default.
+								// Show the right handle and hide the left handle only when it is aligned left.
+								// Otherwise always show the left handle.
+								if ( align === 'left' ) {
+									showRightHandle = true;
+								} else {
+									showLeftHandle = true;
+								}
+							} else {
+								// Show the left handle and hide the right handle only when the image is aligned right.
+								// Otherwise always show the right handle.
+								if ( align === 'right' ) {
+									showLeftHandle = true;
+								} else {
+									showRightHandle = true;
 								}
-								isSelected={ this.state.captionFocused }
-								inlineToolbar
-							/>
-						) }
-
-						{ mediaPlaceholder }
-					</Block.figure>
-				</div>
+							}
+							/* eslint-enable no-lonely-if */
+
+							return (
+								<>
+									{ getInspectorControls(
+										imageWidth,
+										imageHeight
+									) }
+									<ResizableBox
+										size={ {
+											width,
+											height,
+										} }
+										minWidth={ minWidth }
+										maxWidth={ maxWidthBuffer }
+										minHeight={ minHeight }
+										maxHeight={ maxWidthBuffer / ratio }
+										lockAspectRatio
+										enable={ {
+											top: false,
+											right: showRightHandle,
+											bottom: true,
+											left: showLeftHandle,
+										} }
+										onResizeStart={ onResizeStart }
+										onResizeStop={ (
+											event,
+											direction,
+											elt,
+											delta
+										) => {
+											onResizeStop();
+											setAttributes( {
+												width: parseInt(
+													currentWidth + delta.width,
+													10
+												),
+												height: parseInt(
+													currentHeight +
+														delta.height,
+													10
+												),
+											} );
+										} }
+									>
+										{ img }
+									</ResizableBox>
+								</>
+							);
+						} }
+					</ImageSize>
+					{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
+						<RichText
+							tagName="figcaption"
+							placeholder={ __( 'Write caption…' ) }
+							value={ caption }
+							unstableOnFocus={ this.onFocusCaption }
+							onChange={ ( value ) =>
+								setAttributes( { caption: value } )
+							}
+							isSelected={ this.state.captionFocused }
+							inlineToolbar
+						/>
+					) }
+
+					{ mediaPlaceholder }
+				</Block.figure>
 			</>
 		);
 		/* eslint-enable jsx-a11y/click-events-have-key-events */
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index db7e48edcd73d8..0ed59b5beaf8fb 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -1,3 +1,7 @@
+figure.wp-block-image:not(.wp-block) {
+	margin: 0;
+}
+
 .wp-block-image {
 	position: relative;
 
@@ -17,19 +21,6 @@
 		margin-top: -9px;
 		margin-left: -9px;
 	}
-
-	// These need specificity to override an inherited left/right block margin in the editor.
-	&.wp-block-image.alignleft {
-		margin-right: 1em;
-		margin-top: 0.5em;
-		margin-bottom: 0.5em;
-	}
-
-	&.wp-block-image.alignright {
-		margin-left: 1em;
-		margin-top: 0.5em;
-		margin-bottom: 0.5em;
-	}
 }
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
@@ -48,18 +39,6 @@
 	display: block;
 }
 
-.block-editor-block-list__block[data-type="core/image"][data-align="center"] {
-	.wp-block-image {
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	&[data-resized="false"] .wp-block-image > div {
-		margin-left: auto;
-		margin-right: auto;
-	}
-}
-
 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
 	position: absolute;
 	left: 0;
@@ -71,26 +50,28 @@
 	}
 }
 
-// Although the float markup is different in the editor compared to the frontend,
-// this CSS uses the same technique to allow floats in a wide images context.
-// That is, the block retains its centering and max-width, and a child inside
-// is floated instead of the block itself.
-[data-type="core/image"][data-align="center"],
-[data-type="core/image"][data-align="left"],
-[data-type="core/image"][data-align="right"] {
-	figure {
-		margin: 0;
+[data-align="wide"] > .wp-block-image,
+[data-align="full"] > .wp-block-image {
+	img {
+		width: 100%;
 	}
 }
 
-[data-type="core/image"][data-align="wide"],
-[data-type="core/image"][data-align="full"] {
-	figure img {
-		width: 100%;
-	}
+.wp-block[data-align="left"] > .wp-block-image {
+	margin-right: 1em;
+	margin-left: 0;
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
 }
 
-// This is similar to above but for resized unfloated images only, where the markup is different.
-[data-type="core/image"] figure.is-resized {
-	margin: 0;
+.wp-block[data-align="right"] > .wp-block-image {
+	margin-left: 1em;
+	margin-right: 0;
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+}
+
+.wp-block[data-align="center"] > .wp-block-image {
+	margin-left: auto;
+	margin-right: auto;
 }
diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index 4d855ca15cd107..6b0c1fcb0b9b97 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -61,6 +61,11 @@ export const settings = {
 			return alt + ( caption ? '. ' + caption : '' );
 		}
 	},
+	getEditWrapperProps( attributes ) {
+		return {
+			'data-align': attributes.align,
+		};
+	},
 	transforms,
 	edit,
 	save,
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 7ad122489aeac9..26bc158c9224ca 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -16,18 +16,12 @@
 		width: 100%;
 	}
 
-	// Floats get an extra wrapping <div> element, so the <figure> becomes a child.
 	.alignleft,
 	.alignright,
 	.aligncenter,
 	&.is-resized {
 		display: table;
 
-		// The figure is born with left and right margin.
-		// We remove this by default, and then customize it for left, right, and center.
-		margin-left: 0;
-		margin-right: 0;
-
 		> figcaption {
 			display: table-caption;
 			caption-side: bottom;
@@ -38,6 +32,7 @@
 		/*rtl:ignore*/
 		float: left;
 		/*rtl:ignore*/
+		margin-left: 0;
 		margin-right: 1em;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;
@@ -47,6 +42,7 @@
 		/*rtl:ignore*/
 		float: right;
 		/*rtl:ignore*/
+		margin-right: 0;
 		margin-left: 1em;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;
diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss
index db0e7989f59507..89c66a518fcb2b 100644
--- a/packages/block-library/src/pullquote/editor.scss
+++ b/packages/block-library/src/pullquote/editor.scss
@@ -1,9 +1,7 @@
-.block-editor-block-list__block[data-type="core/pullquote"] {
-	&[data-align="left"],
-	&[data-align="right"] {
-		& p {
-			font-size: 20px;
-		}
+.wp-block[data-align="left"] > .wp-block-pullquote,
+.wp-block[data-align="right"] > .wp-block-pullquote {
+	& p {
+		font-size: 20px;
 	}
 }
 
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index 878bd952a11863..d1a7018ffa3525 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -29,7 +29,7 @@
 }
 
 // Center flex items. This has an equivalent in style.scss.
-[data-type="core/social-links"][data-align="center"] .wp-block-social-links {
+.wp-block[data-align="center"] > .wp-block-social-links {
 	justify-content: center;
 }
 
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index 6aedff7549c2d0..6a9ef15b19d27e 100644
--- a/packages/block-library/src/table/editor.scss
+++ b/packages/block-library/src/table/editor.scss
@@ -1,7 +1,7 @@
-.block-editor-block-list__block[data-type="core/table"] {
-	&[data-align="left"],
-	&[data-align="right"],
-	&[data-align="center"] {
+.wp-block-table {
+	.wp-block[data-align="left"] > &,
+	.wp-block[data-align="right"] > &,
+	.wp-block[data-align="center"] > & {
 		// Stop table block from collapsing when tables are floated.
 		height: auto;
 
@@ -16,7 +16,7 @@
 		}
 	}
 
-	&[data-align="center"] {
+	.wp-block[data-align="center"] > & {
 		text-align: initial;
 
 		table {
diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
index dd93768200fbb7..a9eca779a24c08 100644
--- a/packages/block-library/src/video/editor.scss
+++ b/packages/block-library/src/video/editor.scss
@@ -1,4 +1,4 @@
-.block-editor-block-list__block[data-align="center"] {
+.wp-block[data-align="center"] > .wp-block-video {
 	text-align: center;
 }
 
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index c2c3c742c13eca..ee40ca8929200a 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -102,13 +102,11 @@ body.block-editor-page {
 .wp-block {
 	max-width: $content-width;
 
-	&[data-align="wide"],
-	&.alignwide {
+	&[data-align="wide"] {
 		max-width: 1100px;
 	}
 
-	&[data-align="full"],
-	&.alignfull {
+	&[data-align="full"] {
 		max-width: none;
 	}
 }
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index a1872f964f952d..d386841765cb3b 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -6,8 +6,7 @@
 	padding-right: $block-padding;
 
 	// Full-wide. (to account for the padddings added above)
-	.block-editor-block-list__block[data-align="full"],
-	.block-editor-block-list__block.alignfull {
+	.wp-block[data-align="full"] {
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
 	}