Revisit image floats. (#7721)

* Revisit image floats.

This adds a wrapping `aside` element to any image block that's floated left or right. From the spec, https://www.w3.org/TR/html52/grouping-content.html#the-figure-element:

> For content that is only tangentially related, or that serves a separate purpose than the surrounding flow, the aside element should be used (and can itself wrap a figure). For example, a pull quote that repeats content from an article would be more appropriate in an aside than in a figure, because it isn’t part of the content, it’s a repetition of the content for the purposes of enticing readers or highlighting key topics.

The above is the reasoning for using the `aside` element to wrap the figure. But why wrap the figure at all?

Because due to issues surfaced in #7624 (comment), it seems our current implmeentation isn't responsive.

The challenge is — what if you float a very small image to the left, and write a giant caption. Even if we apply `width: fit-content;` on the `figure`, the caption will expand the `figure` to accommodate as much text as the parent wrapping element will allow. `min-content` doesn't work either, because this will make the `figure` only as wide as the smallest word.

What we have in master works in most cases, through dark magic, but it also only works because we remove the `max-width` from the nested image. This means the image won't resize with the viewport, and is therefore not responsive.

I have explored so many many options for fixing this, and after all this time, what it boils down to is this:

- We can either set a fixed size on floated captions, say 33%, and hope it works for the image that's floated. Not ideal, and you can see the end result here: https://codepen.io/joen/pen/wXbqwN
- We can add a wrapping element around the `figure`, so that it and the `figcaption` can be sized using table rules, as in this PR.

Why not just set the width on the figure element and float that? Because then we can't accommodate wide images, which rely on an unbounded main column.

It's not ideal that we have to add an extra wrapping element, but it can be semantic, and it feels like the simplest to work with for themers implementing wide images coexisting with floats.

* chore: tweak documentation

* docs: Tweak some comments

Add clarity to HTML elemeents in the comments which might also be read as words.

* fix: Update test fixtures for new image float

* Fix resize handle names

* Revert the part that limits caption width on unresized images

We have a plethora of different combinations of images and captions.

Floated images with captions, non floated images with captions, small images with captions, etc. etc.

In general we use a `display: table;` trick to get the caption to size itself according to the image. However if an unfloated image follows a floated image, this means the unfloated image can size itself down to "fit in the available space", which is not what we want. So for now, if you upload a small image and _don't_ float it, a wide caption will be as centered as the block itself.

This might be worth revisiting, but at this point I'd like to look at that separately from this PR which is already big.

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,

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,

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;
+	}
+}

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 } ) {

packages/block-library/src/image/style.scss

@@ -1,37 +1,46 @@
 .wp-block-image {
-	width: fit-content;
 	max-width: 100%;
 
 	img {
 		max-width: 100%;
 	}
 
 	&.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();
 	}

packages/editor/src/components/block-list/style.scss

@@ -346,14 +346,16 @@
 		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.
 		.editor-block-list__block-edit {
 			&::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.

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>

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 -->

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 -->

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>"
     }
 ]

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": {},

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 -->

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"
         },

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"
         },

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"}}}}
+{"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"}}}}