diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss index 151c856d1d81c..1ebaa3c228ac2 100644 --- a/blocks/library/gallery/editor.scss +++ b/blocks/library/gallery/editor.scss @@ -1,8 +1,3 @@ -.wp-block-gallery:not( .components-placeholder ) { - margin-right: -16px; - margin-bottom: -16px; -} - .editor-block-list__block[data-type="core/gallery"] .editor-block-list__block-edit { overflow: hidden; } diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss index 9f68ece762cad..bf020b84fdc31 100644 --- a/blocks/library/gallery/style.scss +++ b/blocks/library/gallery/style.scss @@ -1,3 +1,7 @@ +.wp-block-gallery:not( .components-placeholder ) { + margin: -8px; +} + .wp-block-gallery, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, @@ -6,7 +10,7 @@ flex-wrap: wrap; .blocks-gallery-image { - margin: 0 16px 16px 0; + margin: 8px; display: flex; flex-grow: 1; flex-direction: column; diff --git a/editor/edit-post/modes/visual-editor/style.scss b/editor/edit-post/modes/visual-editor/style.scss index a1597bc79915c..39fffa9b60465 100644 --- a/editor/edit-post/modes/visual-editor/style.scss +++ b/editor/edit-post/modes/visual-editor/style.scss @@ -39,6 +39,17 @@ } } +// This is a focus style shown for blocks that need an indicator even when in an isEditing state +// like for example an image block that receives arrowkey focus. +.editor-visual-editor .editor-block-list__block:not( .is-selected ) .editor-block-list__block-edit { + box-shadow: 0 0 0 0 $white, 0 0 0 0 $dark-gray-900; + transition: .1s box-shadow; + + &:focus { + box-shadow: 0 0 0 1px $white, 0 0 0 3px $dark-gray-900; + } +} + .editor-visual-editor__inserter { display: flex; align-items: baseline;