diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
index 1dd810a9e7322..5f7ae58958416 100644
--- a/blocks/library/image/style.scss
+++ b/blocks/library/image/style.scss
@@ -17,12 +17,58 @@
}
&[data-align="wide"] {
- left: 0;
+ // Here be dragons...
+ //
+ // Variable offsets:
+ // - Left sidebar
+ // - Hidden at small viewports
+ // - Foldable
+ // - Expanded at medium and above
+ // - Post settings
+ // - Collapsed
+ // - Expanded
+
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+ width: 100vw;
padding-left: 0;
padding-right: 0;
- width: 100%;
max-width: none;
+ .editor-layout.is-sidebar-opened & {
+ margin-left: calc( -50vw + #{ $sidebar-width / 2 } );
+ margin-right: calc( -50vw + #{ $sidebar-width / 2 } );
+ width: calc( 100vw - #{ $sidebar-width } );
+ }
+
+ @include break-medium() {
+ margin-left: calc( -50vw + 80px );
+ margin-right: calc( -50vw + 80px );
+ width: calc( 100vw - 160px );
+
+ .auto-fold &,
+ .folded & {
+ margin-left: calc( -50vw + 18px );
+ margin-right: calc( -50vw + 18px );
+ width: calc( 100vw - 36px );
+ }
+
+ .editor-layout.is-sidebar-opened & {
+ margin-left: calc( -50vw + 80px + #{ $sidebar-width / 2 } );
+ margin-right: calc( -50vw + 80px + #{ $sidebar-width / 2 } );
+ width: calc( 100vw - 160px - #{ $sidebar-width } );
+
+ .auto-fold &,
+ .folded & {
+ margin-left: calc( -50vw + 18px + #{ $sidebar-width / 2 } );
+ margin-right: calc( -50vw + 18px + #{ $sidebar-width / 2 } );
+ width: calc( 100vw - 36px - #{ $sidebar-width } );
+ }
+ }
+ }
+
&:before {
left: 0;
border-left-width: 0;
diff --git a/editor/layout/style.scss b/editor/layout/style.scss
index 3abdaa4b4b873..a9bfb11deca51 100644
--- a/editor/layout/style.scss
+++ b/editor/layout/style.scss
@@ -1,3 +1,7 @@
-.editor-layout.is-sidebar-opened .editor-layout__content {
- margin-right: $sidebar-width;
+.editor-layout__content {
+ overflow: hidden;
+
+ .editor-layout.is-sidebar-opened & {
+ margin-right: $sidebar-width;
+ }
}
diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js
index b5ed5a8a30334..fa63f1f66dd6b 100644
--- a/editor/modes/visual-editor/index.js
+++ b/editor/modes/visual-editor/index.js
@@ -16,9 +16,7 @@ function VisualEditor( { blocks } ) {
{ blocks.map( ( uid ) => (