diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 67128f843aca47..f796ed8e4c7594 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/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; - } } } } diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index e7e13f8a9e06aa..3ecb8dcc263b82 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/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; }