Store z-index values with sass, fixes overlapping issues (#637)

WordPress · May 11, 2017 · c541c16 · c541c16
1 parent ca6bd50
commit c541c16
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
 							}