diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss index af0897ec53ca80..108693c6457ca5 100644 --- a/blocks/library/embed/style.scss +++ b/blocks/library/embed/style.scss @@ -1,5 +1,6 @@ .blocks-embed { 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 } .blocks-embed .iframe-overlay { diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index f91f979a4d5bf2..2f57b348e948b5 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -9,11 +9,19 @@ &[data-align="left"] { float: left; margin-right: $block-padding; + + @include break-medium() { + margin-left: calc( 50% - #{ $visual-editor-max-width / 2 } ); + } } &[data-align="right"] { float: right; margin-left: $block-padding; + + @include break-medium() { + margin-right: calc( 50% - #{ $visual-editor-max-width / 2 } ); + } } &[data-align="wide"] { diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 5e4793d7ec90b1..42c25aa396e239 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -71,13 +71,14 @@ } } +$sticky-bottom-offset: 20px; .editor-visual-editor__block-controls { @include animate_fade; display: flex; position: sticky; z-index: z-index( '.editor-visual-editor__block-controls' ); margin-top: -$block-controls-height - $item-spacing; - margin-bottom: $item-spacing + 20px; // 20px is the offset from the bottom of the selected block where it stops sticking + margin-bottom: $item-spacing + $sticky-bottom-offset; height: $block-controls-height; top: $header-height + $admin-bar-height-big + $item-spacing; @@ -88,14 +89,9 @@ } .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 {