diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss index e7291f13602e99..f35c8f90fae3fb 100644 --- a/blocks/library/embed/style.scss +++ b/blocks/library/embed/style.scss @@ -1,6 +1,8 @@ .blocks-embed, .blocks-embed-video { margin: 0; + clear: both; // necessary because we use responsive trickery to set width/height, and therefore the video doesn't intrinsically clear floats like an img does + &.is-loading { display: flex; flex-direction: column; @@ -31,44 +33,3 @@ width: 100%; height: 100%; } - -div[data-type="core/embed"] { - &[data-align="left"], - &[data-align="right"] { - // Without z-index, won't be clickable as "above" adjacent content - z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' ); - width: 370px; - } - - &[data-align="left"] { - float: left; - margin-right: $block-padding; - } - - &[data-align="right"] { - float: right; - margin-left: $block-padding; - } - - &[data-align="wide"] { - padding-left: 0; - padding-right: 0; - margin-right: -#{ $block-padding + $block-mover-margin }; /* Compensate for .editor-visual-editor centering padding */ - - &:before { - left: 0; - border-left-width: 0; - border-right-width: 0; - } - - .editor-block-mover { - display: none; - } - - .editor-visual-editor__block-controls { - max-width: #{ $visual-editor-max-width - $block-padding - ( $block-padding * 2 + $block-mover-margin ) }; - margin-left: auto; - margin-right: auto; - } - } -} diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js index 2b7d06ab90810a..1bdfe5ac0dbbed 100644 --- a/blocks/library/image/index.js +++ b/blocks/library/image/index.js @@ -60,16 +60,22 @@ registerBlockType( 'core/image', { onClick: toggleAlignment( 'right' ), }, { - icon: 'align-full-width', + icon: 'align-wide', title: wp.i18n.__( 'Wide width' ), isActive: ( { align } ) => 'wide' === align, onClick: toggleAlignment( 'wide' ), }, + { + icon: 'align-full-width', + title: wp.i18n.__( 'Full width' ), + isActive: ( { align } ) => 'full' === align, + onClick: toggleAlignment( 'full' ), + }, ], getEditWrapperProps( attributes ) { const { align } = attributes; - if ( 'left' === align || 'right' === align || 'wide' === align ) { + if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) { return { 'data-align': align }; } }, diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index f91f979a4d5bf2..b45d7085c0885c 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -1,45 +1,3 @@ -.editor-visual-editor__block[data-type="core/image"] { - &[data-align="left"], - &[data-align="right"] { - // Without z-index, won't be clickable as "above" adjacent content - z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' ); - max-width: 370px; - } - - &[data-align="left"] { - float: left; - margin-right: $block-padding; - } - - &[data-align="right"] { - float: right; - margin-left: $block-padding; - } - - &[data-align="wide"] { - padding-left: 0; - padding-right: 0; - margin-right: -#{ $block-padding + $block-mover-margin }; /* Compensate for .editor-visual-editor centering padding */ - - &:before { - left: 0; - border-left-width: 0; - border-right-width: 0; - } - - .editor-block-mover { - display: none; - } - - .editor-visual-editor__block-controls { - max-width: #{ $visual-editor-max-width - $block-padding - ( $block-padding * 2 + $block-mover-margin ) }; - margin-left: auto; - margin-right: auto; - } - - } -} - .blocks-image { margin: 0; diff --git a/editor/assets/stylesheets/_mixins.scss b/editor/assets/stylesheets/_mixins.scss index 79084dc57dc1cf..425d35f749296b 100644 --- a/editor/assets/stylesheets/_mixins.scss +++ b/editor/assets/stylesheets/_mixins.scss @@ -34,12 +34,13 @@ } } -// ========================================================================== -// Long content fade mixin -// -// Creates a fading overlay to signify that the content is longer -// than the space allows. -// ========================================================================== +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ + @mixin long-content-fade( $direction: right, $size: 20%, $color: #fff, $edge: 0px, $z-index: false) { content: ''; display: block; @@ -94,3 +95,16 @@ height: auto; } } + +/** + * Editor Width mixin + * + * This mixin seeks to take the vinegar out of the responsive alignments in the editor. + */ + +@mixin editor-width( $width ) { + @media ( min-width: #{ ( $width ) } ) { + @content; + } +} +$float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } ); diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss index cc4093fa55d14d..d75bf0cb0a7e6f 100644 --- a/editor/assets/stylesheets/_variables.scss +++ b/editor/assets/stylesheets/_variables.scss @@ -65,6 +65,8 @@ $icon-button-size: 36px; /* Blocks */ $block-padding: 14px; $block-mover-margin: 18px; +$block-mover-padding-hidden: 10px; +$block-mover-padding-visible: 32px; /* Media Queries */ diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss index fc05da1d3fceb9..08ccb61f7635dd 100644 --- a/editor/block-mover/style.scss +++ b/editor/block-mover/style.scss @@ -1,7 +1,7 @@ .editor-block-mover { position: absolute; top: 10px; - left: 0; + left: -$block-mover-padding-visible; } .editor-block-mover__control { diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index a72c49a0fdd0d0..13cb60ff05fab2 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -1,6 +1,6 @@ .editor-visual-editor { margin: 0 auto; - padding: 50px 10px; /* Floating up/down arrows invisible */ + padding: 50px 0; // Floating up/down arrows invisible &, & p { @@ -10,26 +10,25 @@ } @include break-small() { - padding: 50px 0 50px #{ $block-padding + $block-mover-margin }; /* Floating up/down appear, also compensate for mover */ + padding: 50px 0; } @include break-large() { - padding: 60px 0 60px #{ $block-padding + $block-mover-margin }; /* Compensate for mover on the left side */ + padding: 60px 0; } } -/* "Hassle-free full bleed" from CSS Tricks */ -.editor-visual-editor > *:not( [data-align="wide"] ) { - max-width: $visual-editor-max-width; +.editor-visual-editor { margin-left: auto; margin-right: auto; } .editor-visual-editor__block { + margin-left: auto; + margin-right: auto; + max-width: $visual-editor-max-width; position: relative; - left: -#{ $block-padding + $block-mover-margin }; /* Make room for the mover */ - padding: $block-padding $block-padding $block-padding #{ $block-padding * 2 + $block-mover-margin }; /* Compensate for mover */ - margin-right: #{ $block-padding + $block-mover-margin }; + padding: $block-padding; transition: 0.2s border-color; &:before { @@ -38,7 +37,7 @@ position: absolute; top: 0; bottom: 0; - left: #{ $block-padding + $block-mover-margin }; /* Compensate for mover */ + left: 0; right: 0; border: 2px solid transparent; transition: 0.2s border-color; @@ -78,6 +77,103 @@ &.is-selected .iframe-overlay:before { display: none; } + + // Alignments + &[data-align="left"], + &[data-align="right"] { + // Without z-index, won't be clickable as "above" adjacent content + z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' ); + max-width: 370px; + + .editor-block-mover { + display: none; + } + } + + &[data-align="left"] { + float: left; + + // mobile, and no sidebars + margin-right: $block-padding; + + // sidebar (folded) + .auto-fold .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) { + margin-left: $float-margin; + } + } + + // sidebar (sticky) + .sticky-menu .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) { + margin-left: $float-margin; + } + } + + // sidebar and post settings + .auto-fold .is-sidebar-opened & { + @include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width ) { + margin-left: $float-margin; + } + } + } + + &[data-align="right"] { + float: right; + + // mobile, and no sidebars + margin-right: $block-padding; + + // sidebar (folded) + .auto-fold .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) { + margin-right: $float-margin; + } + } + + // sidebar (sticky) + .sticky-menu .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) { + margin-right: $float-margin; + } + } + + // sidebar and post settings + .auto-fold .is-sidebar-opened & { + @include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width ) { + margin-right: $float-margin; + } + } + } + + &[data-align="wide"] { + max-width: 1100px; + } + + &[data-align="full"] { + max-width: 100%; + padding-left: 0; + padding-right: 0; + + &:before { + left: 0; + border-left-width: 0; + border-right-width: 0; + } + + .editor-block-mover { + display: none; + } + } + + &[data-align="full"], + &[data-align="wide"] { + .editor-visual-editor__block-controls { + width: $visual-editor-max-width - $block-padding - $block-padding; + margin-left: auto; + margin-right: auto; + } + } } .editor-visual-editor__block-controls { @@ -105,16 +201,12 @@ } } +$sticky-bottom-offset: 20px; .editor-visual-editor__block-controls + div { - margin-top: -20px; - - // prevent collapsing margins between the block and the toolbar - &:before { - content: ""; - display: table; - clear: both; - } -} + // prevent collapsing margins between block and toolbar, matches the 20px bottom offset + margin-top: -$sticky-bottom-offset - 1px; + padding-top: 1px; + } .editor-visual-editor__block-controls .components-toolbar { display: inline-flex; diff --git a/editor/post-title/style.scss b/editor/post-title/style.scss index f992bc8ed1c370..b2656ab2666fe4 100644 --- a/editor/post-title/style.scss +++ b/editor/post-title/style.scss @@ -1,5 +1,8 @@ .editor-visual-editor > .editor-post-title:not( [ data-align="wide" ] ), .editor-post-title { + margin-left: auto; + margin-right: auto; + max-width: $visual-editor-max-width; position: relative; padding-right: 2 * ( $block-mover-margin + $block-padding ); margin-bottom: 10px;