Design mode: draw grid lines (hardcoded for gutenberg-theme)

WordPress · Jul 22, 2019 · 8cfb1e4 · 8cfb1e4
1 parent 44838bb
commit 8cfb1e4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 29 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -7,21 +7,6 @@
 	}
 }
 
-// TODO: move to edit-post//components/layout along with the other modes
-.block-editor-block-list__layout .block-editor-block-list__block.is-disabled {
-	background-color: rgba(200, 200, 200, 0.2);
-	> .block-editor-block-list__block-edit {
-		// opacity: 0.5;
-	}
-	// &::before {
-	// 	content: 'h';
-	// }
-
-	.editor-rich-text {
-		background: #ccc !important;
-	}
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block.is-selected { // Needs specificity to override inherited styles.
 	// While block is being dragged, dim the slot dragged from, and hide some UI.
 	&.is-dragging {

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -235,25 +235,25 @@
 
 /* Settings */
 :root {
-	--offset: 2rem;
-	--max_width: 72rem;
-	--columns: 5;
-	--gutter: 1rem;
-	--color: hsla(204, 80%, 72%, 0.15);
-}
-
-/* Helper variables */
-:root {
-	--repeating-width: calc(100% / var(--columns));
-	--column-width: calc((100% / var(--columns)) - var(--gutter));
-	--background-width: calc(100% + var(--gutter));
-	--background-columns: repeating-linear-gradient(to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width));
+	--color: #000;
+	/* The following is hard-coded for `gutenberg-theme` */
+	--background-columns: linear-gradient(to right, var(--color), var(--color) 1px, transparent 1px, transparent 245px, var(--color) 245px, var(--color) 246px, transparent 246px, transparent 854px, var(--color) 854px, var(--color) 855px, transparent 855px, transparent 1099px, var(--color) 1099px, var(--color) 1100px, transparent 1100px);
 }
 
 .edit-post-layout.is-mode-design {
 	background-image: var(--background-columns);
-	background-size: var(--background-width) 100%;
+	background-size: 1100px 100%;
+	background-repeat: no-repeat;
+	background-position-x: center;
 	z-index: 1000;
+
+	.block-editor-block-list__block {
+		background-color: rgba(200, 200, 200, 0.2);
+	}
+
+	.editor-rich-text {
+		background: #ccc !important;
+	}
 }
 
 .is-mode-template-part {