diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss index e7291f13602e99..d7d5d4458f1800 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; diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index a72c49a0fdd0d0..74446168b3f784 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -18,8 +18,7 @@ } } -/* "Hassle-free full bleed" from CSS Tricks */ -.editor-visual-editor > *:not( [data-align="wide"] ) { +.editor-visual-editor { max-width: $visual-editor-max-width; margin-left: auto; margin-right: auto; @@ -105,16 +104,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;