Use a light wrapper for the image block (#20576)

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com> Co-authored-by: Ella van Durpe <ella@automattic.com>
WordPress · Mar 5, 2020 · 81d8afc · 81d8afc
1 parent e69f2ab
commit 81d8afc
Show file tree

Hide file tree

Showing 9 changed files with 301 additions and 283 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -219,7 +219,19 @@ const BlockComponent = forwardRef(
 	}
 );
 
-const elements = [ 'p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ol', 'ul' ];
+const elements = [
+	'p',
+	'div',
+	'h1',
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6',
+	'ol',
+	'ul',
+	'figure',
+];
 
 const ExtendedBlockComponent = elements.reduce( ( acc, element ) => {
 	acc[ element ] = forwardRef( ( props, ref ) => {

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -83,23 +83,27 @@
 	// Navigate mode & Focused wrapper.
 	// We're using a pseudo element to overflow placeholder borders
 	// and any border inside the block itself.
-	&:not([contenteditable]):focus::after {
-		position: absolute;
-		z-index: 1;
-		pointer-events: none;
-		content: "";
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
+	&:not([contenteditable]):focus {
+		outline: none;
 
-		// 2px outside.
-		box-shadow: 0 0 0 2px $blue-medium-focus;
-		border-radius: $radius-block-ui;
+		&::after {
+			position: absolute;
+			z-index: 1;
+			pointer-events: none;
+			content: "";
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
 
-		// Show a light color for dark themes.
-		.is-dark-theme & {
-			box-shadow: 0 0 0 2px $blue-medium-focus-dark;
+			// 2px outside.
+			box-shadow: 0 0 0 2px $blue-medium-focus;
+			border-radius: $radius-block-ui;
+
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 2px $blue-medium-focus-dark;
+			}
 		}
 	}
 
@@ -243,6 +247,12 @@
 		cursor: default;
 	}
 
+	.alignleft,
+	.alignright {
+		// Without z-index, won't be clickable as "above" adjacent content.
+		z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}");
+	}
+
 	// Alignments.
 	&[data-align="left"],
 	&[data-align="right"] {
@@ -278,12 +288,15 @@
 
 	// Wide and full-wide.
 	&[data-align="full"],
-	&[data-align="wide"] {
+	&[data-align="wide"],
+	&.alignfull,
+	&.alignwide {
 		clear: both;
 	}
 
 	// Full-wide.
-	&[data-align="full"] {
+	&[data-align="full"],
+	&.alignfull {
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
 
@@ -388,11 +401,6 @@
 		left: $block-padding;
 		right: $block-padding;
 	}
-
-	&[data-align="full"] > .block-editor-block-list__insertion-point {
-		left: 0;
-		right: 0;
-	}
 }
 
 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {