FSE: Fix editor frame styles after Gutenberg update. (#37694)

Automattic · Nov 19, 2019 · fec8a34 · fec8a34
1 parent 25b1e96
commit fec8a34
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 34 deletions.
diff --git a/...ll-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss b/...ll-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss
@@ -1,11 +1,3 @@
-.post-content-block.alignfull {
-	padding: 0 12px;
-
-	@media ( max-width: 768px ) {
-		overflow-x: hidden;
-	}
-}
-
 .post-content-block__selector {
 	width: 300px;
 	a {
@@ -38,25 +30,6 @@
 	}
 }
 
-// Fix the size and positioning full-width blocks inside the Post Content block
-// TODO: Replace the magic numbers!
-.post-content-block .block-editor-block-list__layout .block-editor-block-list__block[data-align=full] {
-	@media ( max-width: 768px ) {
-		max-width: 768px;
-		margin-left: 0;
-		margin-right: 0;
-
-		.block-editor-block-mover {
-			left: 60px;
-		}
-	}
-	@media ( min-width: 768px ) {
-		max-width: calc( 100vw - 81px );
-		margin-left: 3px;
-		margin-right: 3px;
-	}
-}
-
 /**
  * Hide the content slot block UI
  *

diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss
@@ -5,6 +5,12 @@
 	position: relative;
 }
 
+// Override some very specific theme styles.
+.post-type-page .editor-styles-wrapper .template-block .fse-template-part {
+	padding-left: 0;
+	padding-right: 0;
+}
+
 .template__block-container {
 	&.is-hovered {
 		cursor: pointer;
@@ -38,13 +44,6 @@
 	.block-editor-block-list__block-edit::before {
 		display: none;
 	}
-
-	@media ( min-width: 600px ) {
-		.block-editor-block-list__layout .block-editor-block-list__block[data-align='full'] {
-			margin-left: 14px;
-			margin-right: 14px;
-		}
-	}
 }
 
 .template-block__overlay {

diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/style.scss b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/style.scss
@@ -33,6 +33,32 @@
 		}
 	}
 
+	.block-editor-block-list__layout {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	.block-editor-block-list__block[data-align=full] > .block-editor-block-list__block-edit {
+		margin-right: 0;
+		margin-left: 0;
+	}
+
+	.block-editor-block-list__block[data-align=wide] > .block-editor-block-list__block-edit {
+		margin-right: 14px;
+		margin-left: 14px;
+	}
+
+	@media( max-width: 1200px ) {
+		// Try to ensure that normally-aligned blocks work properly.
+		.wp-block:not( [data-align=full] ):not( [data-align=wide] ) {
+			max-width: 580px;
+
+		}
+		.is-sidebar-opened .wp-block:not( [data-align=full] ):not( [data-align=wide] ) {
+			max-width: 400px;
+		}
+	}
+
 	// Remove the 50vh bottom padding that looks off with the FSE frame.
 	.editor-writing-flow__click-redirect {
 		display: none;