From c541c16d816af8d2911c53688483e028e8a6f112 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@users.noreply.github.com>
Date: Thu, 11 May 2017 16:30:38 +0100
Subject: [PATCH] Store z-index values with sass, fixes overlapping issues
 (#637)

---
 blocks/library/image/style.scss         |  2 +-
 editor/assets/stylesheets/_z-index.scss | 14 ++++++++++++++
 editor/header/mode-switcher/style.scss  |  2 +-
 editor/header/style.scss                |  2 +-
 editor/inserter/style.scss              |  4 ++--
 editor/modes/visual-editor/style.scss   |  4 ++--
 webpack.config.js                       |  2 +-
 7 files changed, 22 insertions(+), 8 deletions(-)
 create mode 100644 editor/assets/stylesheets/_z-index.scss

diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
index 1fe31f9c20fe6..f91f979a4d5bf 100644
--- a/blocks/library/image/style.scss
+++ b/blocks/library/image/style.scss
@@ -2,7 +2,7 @@
 	&[data-align="left"],
 	&[data-align="right"] {
 		// Without z-index, won't be clickable as "above" adjacent content
-		z-index: 10;
+		z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' );
 		max-width: 370px;
 	}
 
diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
new file mode 100644
index 0000000000000..f0be51d1b9e8d
--- /dev/null
+++ b/editor/assets/stylesheets/_z-index.scss
@@ -0,0 +1,14 @@
+$z-layers: (
+    '.editor-mode-switcher .dashicon': -1,
+    '.editor-block-switcher__arrow': 1,
+    '.editor-inserter__arrow': 1,
+    '.editor-inserter': 1,
+    '.editor-visual-editor__block:before': -1,
+    '.editor-visual-editor__block {core/image aligned left or right}': 10,
+    '.editor-visual-editor__block-controls': 1,
+    '.editor-header': 20,
+);
+
+@function z-index( $key ) {
+	@return map-get( $z-layers, $key );
+}
diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
index 4d9cc62dde7f9..349db6582b47a 100644
--- a/editor/header/mode-switcher/style.scss
+++ b/editor/header/mode-switcher/style.scss
@@ -30,7 +30,7 @@
 
 	.dashicon {
 		position: relative;
-		z-index: -1;
+		z-index: z-index( '.editor-mode-switcher .dashicon' );
 		margin-left: -24px;
 		margin-top: -1px;
 	}
diff --git a/editor/header/style.scss b/editor/header/style.scss
index a2419337c371b..9db80f395b3e5 100644
--- a/editor/header/style.scss
+++ b/editor/header/style.scss
@@ -6,7 +6,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	z-index: 2;
+	z-index: z-index( '.editor-header' );
 	top: $admin-bar-height-big;
 	left: 0;
 	right: 0;
diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
index 58c21ae257cbc..d8885503ccb59 100644
--- a/editor/inserter/style.scss
+++ b/editor/inserter/style.scss
@@ -7,7 +7,7 @@
 	font-family: $default-font;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
-	z-index: 1;
+	z-index: z-index( '.editor-inserter' );
 }
 
 .editor-inserter__toggle {
@@ -96,7 +96,7 @@
 	line-height: 0;
 	position: absolute;
 	width: 0;
-	z-index: 1;
+	z-index: z-index( '.editor-inserter__arrow' );
 }
 
 .editor-inserter__content {
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index 07180ac45ffdd..5e4793d7ec90b 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -33,7 +33,7 @@
 	transition: 0.2s border-color;
 
 	&:before {
-		z-index: -1;
+		z-index: z-index( '.editor-visual-editor__block:before' );
 		content: '';
 		position: absolute;
 		top: 0;
@@ -75,7 +75,7 @@
 	@include animate_fade;
 	display: flex;
 	position: sticky;
-	z-index: 1;
+	z-index: z-index( '.editor-visual-editor__block-controls' );
 	margin-top: -$block-controls-height - $item-spacing;
 	margin-bottom: $item-spacing + 20px;	// 20px is the offset from the bottom of the selected block where it stops sticking
 	height: $block-controls-height;
diff --git a/webpack.config.js b/webpack.config.js
index 80654973dbf51..7faef3ccdc1cb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -57,7 +57,7 @@ const config = {
 							loader: 'sass-loader',
 							query: {
 								includePaths: [ 'editor/assets/stylesheets' ],
-								data: '@import "variables"; @import "mixins"; @import "animations";',
+								data: '@import "variables"; @import "mixins"; @import "animations";@import "z-index";',
 								outputStyle: 'production' === process.env.NODE_ENV ?
 									'compressed' : 'nested'
 							}