Fix wide image jumping. (#12305)

Fixes #12292.

This PR fixes an issue where the block toolbar would cause an image to jump downwards when the wide or fullwide buttons were pressed.

Recently as part of a floats refactor, we also refactored how the block toolbar worked. This meant the removal of a floats rule to the toolbar itself, because it was both unnecessary and interfered with adjacent floats. This PR restores that rule, but for wide and fullwide only, fixing the regression.

packages/edit-post/src/components/visual-editor/style.scss

@@ -35,9 +35,17 @@
 			height: 0; // This collapses the container to an invisible element without margin.
 			text-align: center;
 
+			// This float rule takes the toolbar out of the flow, without it having to be absolute positioned.
+			// This is necessary because otherwise the mere presence of the toolbar can push down content.
+			// Pairs with relative rule on line 49.
+			float: left;
+
 			.editor-block-toolbar {
 				max-width: $content-width;
 				width: 100%;
+
+				// Necessary for the toolbar to be centered.
+				// This unsets an absolute position that will otherwise left align the toolbar.
 				position: relative;
 			}
 		}
@@ -47,10 +55,6 @@
 			width: 100%;
 			margin-left: 0;
 			margin-right: 0;
-
-			.editor-block-toolbar {
-				max-width: $content-width - $border-width - $border-width;
-			}
 		}
 	}
 }

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

@@ -870,7 +870,7 @@
 		// Hide right border on desktop, where the .components-toolbar instead has a right border.
 		border-right: none;
 
-		// This prevents floats from messing up the position.
+		// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
 		position: absolute;
 		left: 0;
 	}