diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js index cae10db7e2834..dce10e1702a80 100644 --- a/blocks/library/image/index.js +++ b/blocks/library/image/index.js @@ -59,12 +59,18 @@ registerBlock( 'core/image', { title: wp.i18n.__( 'No alignment' ), isActive: ( { align } ) => ! align || 'none' === align, onClick: applyOrUnset( 'none' ) + }, + { + icon: 'align-full-width', + title: wp.i18n.__( 'Wide width' ), + isActive: ( { align } ) => 'wide' === align, + onClick: applyOrUnset( 'wide' ) } ], getEditWrapperProps( attributes ) { const { align } = attributes; - if ( 'left' === align || 'right' === align ) { + if ( 'left' === align || 'right' === align || 'wide' === align ) { return { 'data-align': align }; } }, diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 4f2a52fd70381..5f7ae58958416 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -15,6 +15,70 @@ float: right; margin-left: 15px; } + + &[data-align="wide"] { + // 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; + 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; + border-right-width: 0; + } + + .editor-block-mover { + display: none; + } + } } .blocks-image { @@ -22,5 +86,6 @@ img { display: block; + width: 100%; } } 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/style.scss b/editor/modes/visual-editor/style.scss index 9b269faeb3bff..22565309d6a89 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -1,6 +1,6 @@ .editor-visual-editor { margin: 60px auto 0; - width: 700px; + max-width: 700px; &, & p { @@ -12,10 +12,9 @@ .editor-visual-editor__block { position: relative; - border: 2px solid transparent; - transition: 0.2s border-color; - margin-left: -35px; + left: -35px; padding: 15px 15px 15px 50px; + transition: 0.2s border-color; &:before { z-index: -1; diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 928118c1eee50..d4f4953ac7ceb 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -46,7 +46,7 @@ msgid "Embed" msgstr "" #: blocks/library/embed/index.js:33 -#: blocks/library/image/index.js:81 +#: blocks/library/image/index.js:87 msgid "Write caption…" msgstr "" @@ -70,6 +70,10 @@ msgstr "" msgid "No alignment" msgstr "" +#: blocks/library/image/index.js:65 +msgid "Wide width" +msgstr "" + #: blocks/library/list/index.js:11 msgid "List" msgstr ""