diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index 9a350e6868e7f6..480e8b098083c1 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -25,7 +25,7 @@ $z-layers: (
 	".editor-url-input__suggestions": 30,
 	".edit-post-header": 30,
 	".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
-	".wp-block-image__resize-handlers": 1, // Resize handlers above sibling inserter
+	".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
 
 	// Side UI active buttons
 	".editor-block-settings-remove": 1,
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index ec839709e22f63..2ae93346c923c6 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -432,6 +432,7 @@ class ImageEdit extends Component {
 								<Fragment>
 									{ getInspectorControls( imageWidth, imageHeight ) }
 									<ResizableBox
+										className="block-library-image__resizer"
 										size={
 											width && height ? {
 												width,
@@ -444,9 +445,9 @@ class ImageEdit extends Component {
 										maxHeight={ maxWidth / ratio }
 										lockAspectRatio
 										handleClasses={ {
-											right: 'wp-block-image__resize-handler-right',
-											bottom: 'wp-block-image__resize-handler-bottom',
-											left: 'wp-block-image__resize-handler-left',
+											right: 'block-library-image__resize-handler-right',
+											bottom: 'block-library-image__resize-handler-bottom',
+											left: 'block-library-image__resize-handler-left',
 										} }
 										enable={ {
 											top: false,
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index e3faa956594cf0..1c001538117ed2 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -2,15 +2,6 @@
 	position: relative;
 	margin: 0;
 
-	img {
-		display: block;
-		width: 100%;
-	}
-
-	&.is-resized img {
-		height: 100%;
-	}
-
 	&.is-transient img {
 		@include loading_fade;
 	}
@@ -20,9 +11,21 @@
 	}
 }
 
-.wp-block-image__resize-handler-right,
-.wp-block-image__resize-handler-bottom,
-.wp-block-image__resize-handler-left {
+// This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
+.wp-block-image {
+	.block-library-image__resizer {
+		display: inline-block;
+
+		img {
+			display: block;
+			width: 100%;
+		}
+	}
+}
+
+.block-library-image__resize-handler-right,
+.block-library-image__resize-handler-bottom,
+.block-library-image__resize-handler-left {
 	display: none;
 	border-radius: 50%;
 	border: 2px solid $white;
@@ -33,22 +36,22 @@
 
 	.wp-block-image.is-focused & {
 		display: block;
-		z-index: z-index(".wp-block-image__resize-handlers");
+		z-index: z-index(".block-library-image__resize-handlers");
 	}
 }
 
 /*!rtl:begin:ignore*/
-.wp-block-image__resize-handler-right {
+.block-library-image__resize-handler-right {
 	top: calc(50% - 9px) !important;
 	right: -8px !important;
 }
 
-.wp-block-image__resize-handler-left {
+.block-library-image__resize-handler-left {
 	top: calc(50% - 9px) !important;
 	left: -8px !important;
 }
 
-.wp-block-image__resize-handler-bottom {
+.block-library-image__resize-handler-bottom {
 	bottom: -8px !important;
 	left: calc(50% - 9px) !important;
 }
@@ -103,3 +106,43 @@
 		margin: -$border-width;
 	}
 }
+
+// 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"] {
+	.editor-block-list__block-edit {
+		figure {
+			margin: 0;
+			display: table;
+		}
+
+		// This maps to the figcaption on the frontend.
+		.editor-rich-text {
+			display: table-caption;
+			caption-side: bottom;
+		}
+	}
+}
+
+[data-type="core/image"][data-align="wide"],
+[data-type="core/image"][data-align="full"] {
+	figure img {
+		width: 100%;
+	}
+}
+
+// This is similar to above but for resized unfloated images only, where the markup is different.
+[data-type="core/image"] .editor-block-list__block-edit figure.is-resized {
+	margin: 0;
+	display: table;
+
+	// This maps to the figcaption on the frontend.
+	.editor-rich-text {
+		display: table-caption;
+		caption-side: bottom;
+	}
+}
diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index 48d4a51014c2f1..ce7256e0d65ac4 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	createBlock,
@@ -216,15 +217,59 @@ export const settings = {
 			/>
 		);
 
-		return (
-			<figure className={ classes }>
+		const figure = (
+			<Fragment>
 				{ href ? <a href={ href }>{ image }</a> : image }
 				{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+			</Fragment>
+		);
+
+		if ( 'left' === align || 'right' === align || 'center' === align ) {
+			return (
+				<div>
+					<figure className={ classes }>
+						{ figure }
+					</figure>
+				</div>
+			);
+		}
+
+		return (
+			<figure className={ classes }>
+				{ figure }
 			</figure>
 		);
 	},
 
 	deprecated: [
+		{
+			attributes: blockAttributes,
+			save( { attributes } ) {
+				const { url, alt, caption, align, href, width, height, id } = attributes;
+
+				const classes = classnames( {
+					[ `align${ align }` ]: align,
+					'is-resized': width || height,
+				} );
+
+				const image = (
+					<img
+						src={ url }
+						alt={ alt }
+						className={ id ? `wp-image-${ id }` : null }
+						width={ width }
+						height={ height }
+					/>
+				);
+
+				return (
+					<figure className={ classes }>
+						{ href ? <a href={ href }>{ image }</a> : image }
+						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+					</figure>
+				);
+			},
+		},
 		{
 			attributes: blockAttributes,
 			save( { attributes } ) {
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 321fc30504bc3c..4922b92449f5b9 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -1,5 +1,4 @@
 .wp-block-image {
-	width: fit-content;
 	max-width: 100%;
 
 	img {
@@ -7,31 +6,41 @@
 	}
 
 	&.aligncenter {
-		display: block;
-		margin-left: auto;
-		margin-right: auto;
 		text-align: center;
 	}
 
-	&.is-resized {
-		width: min-content;
+	&.alignfull img,
+	&.alignwide img {
+		width: 100%;
+	}
 
-		// Emulate min-content for Edge and IE11
-		display: -ms-inline-grid;
-		-ms-grid-columns: min-content;
+	// Floats get an extra wrapping <aside> element, so the <figure> becomes a child.
+	.alignleft,
+	.alignright,
+	.aligncenter,
+	&.is-resized {
+		display: table;
+		margin: 0;
 
-		figcaption {
-			-ms-grid-row: 2;
+		> figcaption {
+			display: table-caption;
+			caption-side: bottom;
 		}
+	}
 
-		img {
-			max-width: none;
-		}
+	.alignleft {
+		float: left;
+		margin-right: 1em;
+	}
+
+	.alignright {
+		float: right;
+		margin-left: 1em;
 	}
 
 	// Supply caption styles to images, even if the theme hasn't opted in.
-	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,
-	// so we supply the styles so as to not appear broken or unstyled in those.
+	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
+	// so we supply the styles so as to not appear broken or unstyled in those themes.
 	figcaption {
 		@include caption-style();
 	}
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 31a991f0c4ef82..e8b78f486c3417 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -346,7 +346,6 @@
 		width: 100%;
 
 		// When images are floated, the block itself should collapse to zero height.
-		margin-bottom: 0;
 		height: 0;
 
 		// Hide block outline when an image is floated.
@@ -354,6 +353,9 @@
 			&::before {
 				content: none;
 			}
+
+			// This margin won't collapse on its own, so zero it out.
+			margin-top: 0;
 		}
 
 		// Keep a 1px margin to compensate for the border/outline.
diff --git a/phpunit/fixtures/long-content.html b/phpunit/fixtures/long-content.html
index 7e5f15c121afa6..07677c3906437a 100644
--- a/phpunit/fixtures/long-content.html
+++ b/phpunit/fixtures/long-content.html
@@ -19,8 +19,8 @@ <h2>A Picture is worth a Thousand Words</h2>
 <!-- wp:paragraph -->
 <p>Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you&#x27;ll find aspects of adding captions or going full-width with your pictures much easier and robust than before.</p>
 <!-- /wp:paragraph -->
-<!-- wp:image {"align":"center"} -->
-<figure class="wp-block-image aligncenter"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape" /><figcaption>Give it a try. Press the &quot;wide&quot; button on the image toolbar.</figcaption></figure>
+<!-- wp:image {"align":"center","className":"aligncenter"} -->
+<div class="wp-block-image aligncenter"><figure class="aligncenter"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape" /><figcaption>Give it a try. Press the &quot;wide&quot; button on the image toolbar.</figcaption></figure></div>
 <!-- /wp:image -->
 <!-- wp:paragraph -->
 <p>Try selecting and removing or editing the caption, now you don&#x27;t have to be careful about selecting the image or other text by mistake and ruining the presentation.</p>
diff --git a/post-content.php b/post-content.php
index 5bc8a261373c46..22d02239328f89 100644
--- a/post-content.php
+++ b/post-content.php
@@ -26,10 +26,12 @@
 <p><?php _e( 'Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you&#8217;ll find aspects of adding captions or going full-width with your pictures much easier and robust than before.', 'gutenberg' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:image {"align":"center"} -->
-<figure class="wp-block-image aligncenter"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape" />
-	<figcaption><?php _e( 'If your theme supports it, you&#8217;ll see the "wide" button on the image toolbar. Give it a try.', 'gutenberg' ); ?></figcaption>
-</figure>
+<!-- wp:image {"align":"center","className":"aligncenter"} -->
+<div class="wp-block-image aligncenter">
+	<figure class="aligncenter"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape" />
+		<figcaption><?php _e( 'If your theme supports it, you&#8217;ll see the "wide" button on the image toolbar. Give it a try.', 'gutenberg' ); ?></figcaption>
+	</figure>
+</div>
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
diff --git a/test/integration/full-content/fixtures/core__image__center-caption.html b/test/integration/full-content/fixtures/core__image__center-caption.html
index 4fbce9c6fafd73..f383e4b80b1acb 100644
--- a/test/integration/full-content/fixtures/core__image__center-caption.html
+++ b/test/integration/full-content/fixtures/core__image__center-caption.html
@@ -1,3 +1,3 @@
 <!-- wp:core/image {"align":"center"} -->
-<figure class="wp-block-image aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt="" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>
+<div class="wp-block-image aligncenter"><figure class="aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt="" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>
 <!-- /wp:core/image -->
diff --git a/test/integration/full-content/fixtures/core__image__center-caption.json b/test/integration/full-content/fixtures/core__image__center-caption.json
index c9b19750b1868f..fed6af1f9f4d8b 100644
--- a/test/integration/full-content/fixtures/core__image__center-caption.json
+++ b/test/integration/full-content/fixtures/core__image__center-caption.json
@@ -10,9 +10,10 @@
                 "Give it a try. Press the \"really wide\" button on the image toolbar."
             ],
             "align": "center",
-            "linkDestination": "none"
+            "linkDestination": "none",
+            "className": "aligncenter"
         },
         "innerBlocks": [],
-        "originalContent": "<figure class=\"wp-block-image aligncenter\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" alt=\"\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>"
+        "originalContent": "<div class=\"wp-block-image aligncenter\"><figure class=\"aligncenter\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" alt=\"\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>"
     }
 ]
diff --git a/test/integration/full-content/fixtures/core__image__center-caption.parsed.json b/test/integration/full-content/fixtures/core__image__center-caption.parsed.json
index abd5611da19486..36fd3de1baf561 100644
--- a/test/integration/full-content/fixtures/core__image__center-caption.parsed.json
+++ b/test/integration/full-content/fixtures/core__image__center-caption.parsed.json
@@ -5,7 +5,7 @@
             "align": "center"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<figure class=\"wp-block-image aligncenter\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" alt=\"\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>\n"
+        "innerHTML": "\n<div class=\"wp-block-image aligncenter\"><figure class=\"aligncenter\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" alt=\"\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>\n"
     },
     {
         "attrs": {},
diff --git a/test/integration/full-content/fixtures/core__image__center-caption.serialized.html b/test/integration/full-content/fixtures/core__image__center-caption.serialized.html
index f9441dab3d9971..9029f4538590a7 100644
--- a/test/integration/full-content/fixtures/core__image__center-caption.serialized.html
+++ b/test/integration/full-content/fixtures/core__image__center-caption.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"center"} -->
-<figure class="wp-block-image aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt=""/><figcaption>Give it a try. Press the "really wide" button on the image toolbar.</figcaption></figure>
+<!-- wp:image {"align":"center","className":"aligncenter"} -->
+<div class="wp-block-image aligncenter"><figure class="aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt=""/><figcaption>Give it a try. Press the "really wide" button on the image toolbar.</figcaption></figure></div>
 <!-- /wp:image -->
diff --git a/test/integration/full-content/fixtures/core__latest-posts.json b/test/integration/full-content/fixtures/core__latest-posts.json
index 4579db256b8d11..f31c903f58c274 100644
--- a/test/integration/full-content/fixtures/core__latest-posts.json
+++ b/test/integration/full-content/fixtures/core__latest-posts.json
@@ -8,7 +8,6 @@
             "displayPostDate": false,
             "postLayout": "list",
             "columns": 3,
-            "align": "center",
             "order": "desc",
             "orderBy": "date"
         },
diff --git a/test/integration/full-content/fixtures/core__latest-posts__displayPostDate.json b/test/integration/full-content/fixtures/core__latest-posts__displayPostDate.json
index 1af4a266a25c21..024e1a7f37b8a7 100644
--- a/test/integration/full-content/fixtures/core__latest-posts__displayPostDate.json
+++ b/test/integration/full-content/fixtures/core__latest-posts__displayPostDate.json
@@ -8,7 +8,6 @@
             "displayPostDate": true,
             "postLayout": "list",
             "columns": 3,
-            "align": "center",
             "order": "desc",
             "orderBy": "date"
         },
diff --git a/test/integration/full-content/server-registered.json b/test/integration/full-content/server-registered.json
index b75f0231026d74..ae3a5650908577 100644
--- a/test/integration/full-content/server-registered.json
+++ b/test/integration/full-content/server-registered.json
@@ -1 +1 @@
-{"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/latest-comments":{"attributes":{"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true},"align":{"type":"string","enum":["center","left","right","wide","full",""]}}},"core\/archives":{"attributes":{"showPostCounts":{"type":"boolean","default":false},"displayAsDropdown":{"type":"boolean","default":false},"align":{"type":"string","default":"none"}}},"core\/latest-posts":{"attributes":{"categories":{"type":"string"},"className":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"align":{"type":"string","default":"center"},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}}}
\ No newline at end of file
+{"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/latest-comments":{"attributes":{"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true},"align":{"type":"string","enum":["center","left","right","wide","full",""]}}},"core\/archives":{"attributes":{"showPostCounts":{"type":"boolean","default":false},"displayAsDropdown":{"type":"boolean","default":false},"align":{"type":"string","default":"none"}}},"core\/latest-posts":{"attributes":{"categories":{"type":"string"},"className":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"align":{"type":"string"},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}}}
\ No newline at end of file