Try: Improve floats UI. (#10085)

* Try: Improve floats UI.

This PR tries to improve the block UI on floated elements. It does a few things:

- It hides the side UI entirely. Because this is now just the ellipsis and drag handle, this is not the end of the world. The argument being, that when you need to move an image up or down, you do it before you float. And the side UI overlapped with parents anyway, so the only alternative was to use the mobile UI (buttons below the block), for floats. This was not as compelling as initially thought.
- Because the block outline is hidden on floated UI anyway (it has to be, because it doesn't know how tall the floated content is due to the nature of floats), the toolbar looked offset to the side. This PR positions the block toolbar to better align with the float.
- Improves the mobile UI for floats, it was quite broken.
- It adds a min-width to embeds, which after the most recent responsive feature would collapse completely when floated.

* chore: Tidy up docs

Author: jasmussen

packages/block-library/src/embed/editor.scss

@@ -1,6 +1,10 @@
 .wp-block-embed {
 	margin: 0;
-	clear: both; // necessary because we use responsive trickery to set width/height, and therefore the video doesn't intrinsically clear floats like an img does
+	// Necessary because we use responsive trickery to set width/height,
+	// therefore the video doesn't intrinsically clear floats like an image does.
+	clear: both;
+	// Apply a min-width, or the embed can collapse when floated.
+	min-width: $break-mobile / 2;
 
 	&.is-loading {
 		display: flex;

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

@@ -287,28 +287,62 @@
 		.editor-block-contextual-toolbar {
 			margin-bottom: $border-width;
 		}
-	}
 
-	// Left: This is in the editor only; the image should be floated on the frontend.
-	&[data-align="left"] > .editor-block-list__block-edit {
-		/*!rtl:begin:ignore*/
-		float: left;
-		margin-right: 2em;
-		/*!rtl:end:ignore*/
+		// Hide all additional UI on floats.
+		.editor-block-mover,
+		.editor-block-list__block-mobile-toolbar {
+			display: none;
+		}
+
+		// Position toolbar better on mobile.
+		.editor-block-contextual-toolbar {
+			border-bottom: 1px solid $light-gray-500;
+			bottom: $block-padding;
+			left: auto;
+			right: auto;
+		}
 	}
 
-	// Right: This is in the editor only; the image should be floated on the frontend.
-	&[data-align="right"] > .editor-block-list__block-edit {
-		/*!rtl:begin:ignore*/
-		float: right;
-		margin-left: 2em;
-		/*!rtl:end:ignore*/
+	// Left
+	&[data-align="left"] {
+		// This is in the editor only; the image should be floated on the frontend.
+		.editor-block-list__block-edit {
+			/*!rtl:begin:ignore*/
+			float: left;
+			margin-right: 2em;
+			/*!rtl:end:ignore*/
+		}
+
+		// Align block toolbar to floated content.
+		@include break-small() {
+			.editor-block-toolbar {
+				/*!rtl:begin:ignore*/
+				left: $block-padding;
+				right: auto;
+				/*!rtl:end:ignore*/
+			}
+		}
 	}
 
-	&[data-align="right"] > .editor-block-contextual-toolbar > .editor-block-toolbar {
-		/*!rtl:begin:ignore*/
-		float: right;
-		/*!rtl:end:ignore*/
+	// Right
+	&[data-align="right"] {
+		// Right: This is in the editor only; the image should be floated on the frontend.
+		> .editor-block-list__block-edit {
+			/*!rtl:begin:ignore*/
+			float: right;
+			margin-left: 2em;
+			/*!rtl:end:ignore*/
+		}
+
+		// Align block toolbar to floated content.
+		@include break-small() {
+			.editor-block-toolbar {
+				/*!rtl:begin:ignore*/
+				right: $block-padding;
+				left: auto;
+				/*!rtl:end:ignore*/
+			}
+		}
 	}
 
 	// Wide and full-wide
@@ -802,21 +836,6 @@
 		left: 0;
 	}
 
-	.editor-block-list__block[data-align="right"] & {
-		/*!rtl:begin:ignore*/
-		left: auto;
-		right: 0;
-		/*!rtl:end:ignore*/
-	}
-
-	.editor-block-list__block[data-align="left"] & {
-		/*!rtl:begin:ignore*/
-		right: auto;
-		left: 0;
-		/*!rtl:end:ignore*/
-	}
-
-
 	@include break-small() {
 		width: auto;
 	}