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 ) => ( ) ) } -
- -
+ ); } diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index be07bae730033..22565309d6a89 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -1,5 +1,6 @@ .editor-visual-editor { - margin-top: 60px; + margin: 60px auto 0; + max-width: 700px; &, & p { @@ -9,12 +10,6 @@ } } -.editor-visual-editor__block, -.editor-visual-editor__container { - max-width: 700px; - margin: 0 auto; -} - .editor-visual-editor__block { position: relative; left: -35px;