Improve image figure widths, remove inline styles (#5973)

* Fix various image width problems

This fixes #3945 and #5213. It is a new PR that is meant to replace #5209. This PR is a work in progress.

* Remove inline style for unscaled images.

Also fix placeholder.

* Restore float widths for blocks without intrinsice width

Affects CoverImage, Gallery, Embed. This moves those styles to each blocks individual stylesheet.

* Remove inline style on figure for scaled images

With the presence of `fit-content` applied to the figure, the explicit inline style is no longer required.

blocks/library/cover-image/style.scss

@@ -71,4 +71,12 @@
 		height: inherit;
 	}
 
+	// Apply max-width to floated items that have no intrinsic width
+	[data-align="left"] &,
+	[data-align="right"] &,
+	&.alignleft,
+	&.alignright {
+		max-width: $content-width / 2;
+		width: 100%;
+	}
 }

blocks/library/embed/style.scss

@@ -4,3 +4,12 @@
 	text-align: center;
 	font-size: $default-font-size;
 }
+
+// Apply max-width to floated items that have no intrinsic width
+.editor-block-list__block[data-type="core/embed"][data-align="left"] .editor-block-list__block-edit,
+.editor-block-list__block[data-type="core/embed"][data-align="right"] .editor-block-list__block-edit,
+.wp-block-embed.alignleft,
+.wp-block-embed.alignright {
+	max-width: $content-width / 2;
+	width: 100%;
+}

blocks/library/gallery/style.scss

@@ -1,7 +1,4 @@
-.wp-block-gallery,
-.wp-block-gallery.alignleft,
-.wp-block-gallery.alignright,
-.wp-block-gallery.aligncenter {
+.wp-block-gallery {
 	display: flex;
 	flex-wrap: wrap;
 	list-style-type: none;
@@ -82,4 +79,13 @@
 			}
 		}
 	}
+
+	// Apply max-width to floated items that have no intrinsic width
+	[data-align="left"] &,
+	[data-align="right"] &,
+	&.alignleft,
+	&.alignright {
+		max-width: $content-width / 2;
+		width: 100%;
+	}
 }

blocks/library/image/index.js

@@ -170,16 +170,8 @@ export const settings = {
 			/>
 		);
 
-		let figureStyle = {};
-
-		if ( width ) {
-			figureStyle = { width };
-		} else if ( align === 'left' || align === 'right' ) {
-			figureStyle = { maxWidth: '50%' };
-		}
-
 		return (
-			<figure className={ align ? `align${ align }` : null } style={ figureStyle }>
+			<figure className={ align ? `align${ align }` : null }>
 				{ href ? <a href={ href }>{ image }</a> : image }
 				{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
 			</figure>

blocks/library/image/style.scss

@@ -1,4 +1,5 @@
 .wp-block-image {
+	width: fit-content;
 	figcaption {
 		margin-top: 0.5em;
 		color: $dark-gray-300;

components/placeholder/style.scss

@@ -5,6 +5,7 @@
 	justify-content: center;
 	padding: 1em;
 	min-height: 200px;
+	width: 100%;
 	text-align: center;
 	font-family: $default-font;
 	font-size: $default-font-size;

editor/components/block-list/style.scss

@@ -273,21 +273,6 @@
 		}
 	}
 
-	// Apply max-width to floated items that have no intrinsic width, like Cover Image or Gallery
-	&[data-align="left"],
-	&[data-align="right"] {
-		> .editor-block-list__block-edit {
-			max-width: 360px;
-			width: 100%;
-		}
-
-		// reset when data-resized
-		&[data-resized="true"] > .editor-block-list__block-edit {
-			max-width: none;
-			width: auto;
-		}
-	}
-
 	// Left
 	&[data-align="left"] {
 		.editor-block-list__block-edit {	// This is in the editor only, on the frontend, the img should be floated
@@ -319,7 +304,7 @@
 
 	// Full-wide
 	&[data-align="full"] {
-
+		
 		// compensate for main container padding
 		@include break-small() {
 			margin-left: -$block-side-ui-padding;
@@ -334,6 +319,11 @@
 				margin-left: -$block-side-ui-padding - $block-padding;
 				margin-right: -$block-side-ui-padding - $block-padding;
 			}
+
+			// this explicitly sets the width of the block, to override the fit-content from the image block
+			figure {
+				width: 100%;
+			}
 		}
 
 		> .editor-block-list__block-edit:before {