Merge pull request #3951 from WordPress/try/is-editing-focus

Try adding focus outline for blocks that don't have input fields
WordPress · Dec 13, 2017 · a9fcdfd · a9fcdfd
2 parents b0fbe03 + 6234907
commit a9fcdfd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;