Polish the warning message.

WordPress · Jul 9, 2018 · 8e03e07 · 8e03e07
1 parent 7217002
commit 8e03e07
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 54 deletions.
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -10,7 +10,6 @@ $z-layers: (
 	'.editor-block-list__block {core/image aligned wide or fullwide}': 20,
 	'.freeform-toolbar': 10,
 	'.editor-block-list__breadcrumb': 1,
-	'.editor-warning': 1,
 	'.components-form-toggle__input': 1,
 	'.editor-inserter__tabs': 1,
 	'.editor-inserter__tab.is-active': 1,
@@ -21,6 +20,7 @@ $z-layers: (
 	'.components-popover__close': 5,
 	'.editor-block-list__insertion-point': 5,
 	'.editor-inserter-with-shortcuts': 5,
+	'.editor-warning': 6,
 	'.core-blocks-gallery-item__inline-menu': 20,
 	'.editor-url-input__suggestions': 30,
 	'.edit-post-header': 30,

diff --git a/editor/components/block-list/block-invalid-warning.js b/editor/components/block-list/block-invalid-warning.js
@@ -35,7 +35,7 @@ function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) {
 				{ onClick: convertToHTML, title: __( 'Keep as HTML' ) },
 			] }
 		>
-			{ __( 'This block appears to have been modified externally.' ) }
+			{ __( 'This block has been modified externally.' ) }
 		</Warning>
 	);
 }

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -40,7 +40,7 @@
 		left: 0;
 		visibility: hidden;
 
-		// use opacity to work in various editor styles
+		// Use opacity to work in various editor styles.
 		background-color: $dark-opacity-light-200;
 
 		.is-dark-theme & {
@@ -223,7 +223,7 @@
 	// Selected style
 	&.is-selected-parent > .editor-block-list__block-edit:before,
 	&.is-selected > .editor-block-list__block-edit:before {
-		// use opacity to work in various editor styles
+		// Use opacity to work in various editor styles.
 		outline: $border-width solid $dark-opacity-light-500;
 
 		.is-dark-theme & {
@@ -259,7 +259,7 @@
 	&.is-multi-selected .editor-block-list__block-edit:before {
 		background: $blue-medium-highlight;
 
-		// use opacity to work in various editor styles
+		// Use opacity to work in various editor styles.
 		mix-blend-mode: multiply;
 
 		// Collapse extra vertical padding on selection
@@ -281,30 +281,36 @@
 
 	// Warnings
 	 &.has-warning .editor-block-list__block-edit {
-		min-height: 250px;
-
 		> :not( .editor-warning ) {
 			pointer-events: none;
 			user-select: none;
 		}
 	}
 
-	&.has-warning .editor-block-list__block-edit > div {
-		border: 1px solid $light-gray-500;
-	}
+	&.has-warning:not( .is-hovered ) .editor-block-list__block-edit:before {
+		// Use opacity to work in various editor styles.
+		outline-color: $dark-opacity-light-500;
 
-	&.has-warning .editor-block-list__block-edit > div:first-child {
-		padding: 10px;
+		.is-dark-theme & {
+			outline-color: $light-opacity-light-500;
+		}
 	}
 
 	&.has-warning .editor-block-list__block-edit:after {
 		content: '';
 		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background-image: linear-gradient( rgba( $light-gray-500, 0.6 ), rgba( $light-gray-500, 0.6 ) );
+		background-color: rgba( $light-gray-100, .8 );
+
+		top: -$block-padding;
+		bottom: -$block-padding;
+		right: -$parent-block-padding;
+		left: -$parent-block-padding;
+
+		// Position for nested blocks
+		.editor-block-list__block & {
+			right: -$block-padding;
+			left: -$block-padding;
+		}
 	}
 
 	// Appender
@@ -321,7 +327,7 @@
 
 	// Shared blocks
 	&.is-shared > .editor-block-list__block-edit:before {
-		// use opacity to work in various editor styles
+		// Use opacity to work in various editor styles.
 		outline: $border-width dashed $dark-opacity-light-500;
 
 		.is-dark-theme & {

diff --git a/editor/components/warning/index.js b/editor/components/warning/index.js
@@ -14,7 +14,7 @@ function Warning( { primaryActions, children, hiddenActions } ) {
 	return (
 		<div className="editor-warning">
 			<div className="editor-warning__contents">
-				<div className="editor-warning__message">{ children }</div>
+				<p className="editor-warning__message">{ children }</p>
 
 				{ Children.count( primaryActions ) > 0 && (
 					<div className="editor-warning__actions">

diff --git a/editor/components/warning/style.scss b/editor/components/warning/style.scss
@@ -1,59 +1,48 @@
-.editor-warning {
+.editor-block-list__block .editor-warning {
 	z-index: z-index( '.editor-warning' );
 	position: absolute;
-	top: 0;
+	top: -$block-padding - $border-width;
+	right: -$parent-block-padding - $border-width;
+	left: -$parent-block-padding - $border-width;
+
+	// Position for nested blocks
+	.editor-block-list__block & {
+		right: -$block-padding - $border-width;
+		left: -$block-padding - $border-width;
+	}
+
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	flex-wrap: nowrap;
-	left: 50%;
-	transform: translateX( -50% );
-	width: 100%;
-	max-width: 780px;
-	padding: 20px;
-	padding-bottom: 10px;
+
+	padding: $block-padding;
 	background-color: $white;
 	border: 1px solid $light-gray-500;
 	text-align: left;
-	line-height: $default-line-height;
-	font-family: $default-font;
-	font-size: $default-font-size;
+
+	.editor-warning__message {
+		line-height: $default-line-height;
+		font-family: $default-font;
+		font-size: $default-font-size;
+		margin: 0;
+	}
 }
 
+
 .editor-warning__contents {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	flex-wrap: wrap;
+	align-items: center;
 	width: 100%;
 }
-
-.editor-warning__message {
-	padding-bottom: 15px;
-	padding-top: 5px;
-	padding-right: 20px;
-}
-
 .editor-warning__actions {
 	display: flex;
 }
 
 .editor-warning__action {
-	margin: 0 #{ $item-spacing / 2 } 5px;
+	margin: 0 6px 0 0;
 	margin-left: 0;
-}
-
-.editor-warning__hidden-menu {
-	padding: 5px;
-}
-
-.editor-warning__hidden-menu .components-dropdown-menu__menu-item {
-	margin-left: 20px;
-	width: calc( 100% - 20px );
-}
-
-.editor-warning__hidden-label {
-	color: $dark-gray-500;
-	padding: 5px;
-	margin: 0;
-}
+}