Modern Business: Refactor the Full Site Editing styles (#1262)

Refactor and move all the Template block styles into a new `_template-block.scss` file.

modern-business/sass/blocks/_template-block.scss

@@ -0,0 +1,73 @@
+.a8c-template-editor, .template-block {
+	&.site-branding, &.site-footer {
+		margin: 0;
+	}
+
+	.wp-block[data-align='full'] {
+		left: calc( -12.5% - 12px );
+		max-width: calc( 125% + 114px );
+		width: calc( 125% + 114px );
+	}
+
+	.template__site-logo .components-placeholder.block-editor-media-placeholder {
+		margin: 0 auto;
+		max-width: 380px;
+	}
+
+	.wp-block-a8c-site-description {
+		color: $color__text-main;
+		font-size: $font__size-xs;
+		font-weight: 300;
+		// Line height rounded up from the description text-size set in style.css.
+		// It needs to be a bit larger to prevent text from getting cropped on top.
+		line-height: 0.8em;
+		margin: 0;
+		order: 1;
+		text-align: center;
+	}
+	[data-type='a8c/site-description'] [data-block] {
+		margin-bottom: 32px;
+	}
+
+	.wp-block-a8c-site-title {
+		text-align: center;
+	}
+
+	[data-type='a8c/site-title'] [data-block] {
+		margin: 32px 0;
+	}
+
+	.wp-block-a8c-navigation-menu {
+		a {
+			text-decoration: none;
+		}
+	}
+	&.site-header .wp-block-a8c-navigation-menu {
+		text-align: center;
+	}
+	&.site-footer .wp-block-a8c-navigation-menu {
+		text-align: left;
+	}
+
+	&.site-footer {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			text-align: left;
+		}
+
+		.wp-block-separator {
+			margin: 16px 0;
+		}
+		.wp-block-a8c-navigation-menu {
+			margin-top: 0.6rem;
+		}
+	}
+}
+
+.template-block .site-header {
+	margin-bottom: 2rem;
+}

modern-business/sass/navigation/_menu-footer-navigation.scss

@@ -20,15 +20,3 @@
 	}
 
 }
-
-footer {
-
-	.wp-block-a8c-navigation-menu {
-
-		.sub-menu {
-			visibility: hidden;
-		}
-
-	}
-
-}

modern-business/sass/site/header/_site-header.scss

@@ -80,9 +80,7 @@
 
 // Site title
 
-.site-title, 
-.wp-block-a8c-site-title,
-.wp-block-a8c-site-title:focus {
+.site-title {
 	color: $color__text-main;
 	margin: 0;
 	order: 2;
@@ -120,18 +118,10 @@
 
 // Site description
 
-.site-description, 
-.wp-block-a8c-site-description,
-.wp-block-a8c-site-description:focus {
+.site-description {
 	color: $color__text-main;
 	font-size: $font__size-xs;
 	font-weight: 300;
 	margin: 0 0 calc(0.5 * #{$size__spacing-unit});
 	order: 1;
 }
-
-// Site Image Logo
-
-.wp-block-image.is-resized {
-	display: block;
-}

modern-business/style-editor.css

@@ -91,56 +91,38 @@ Modern Business Editor Styles
   margin-top: 0.5rem;
 }
 
-.site-title,
-.wp-block-a8c-site-title,
-.wp-block-a8c-site-title:focus {
+.site-title {
   color: #181818;
   margin: 0;
   order: 2;
   /* When there is no description set, make sure navigation appears below title. */
 }
 
-.site-title a,
-.wp-block-a8c-site-title a,
-.wp-block-a8c-site-title:focus a {
+.site-title a {
   color: #181818;
 }
 
-.site-title a:link, .site-title a:visited,
-.wp-block-a8c-site-title a:link,
-.wp-block-a8c-site-title a:visited,
-.wp-block-a8c-site-title:focus a:link,
-.wp-block-a8c-site-title:focus a:visited {
+.site-title a:link, .site-title a:visited {
   color: #181818;
 }
 
-.site-title a:hover,
-.wp-block-a8c-site-title a:hover,
-.wp-block-a8c-site-title:focus a:hover {
+.site-title a:hover {
   color: #4a4a4a;
 }
 
-.featured-image .site-title, .featured-image
-.wp-block-a8c-site-title, .featured-image
-.wp-block-a8c-site-title:focus {
+.featured-image .site-title {
   margin: 0;
 }
 
-.site-title + .main-navigation,
-.wp-block-a8c-site-title + .main-navigation,
-.wp-block-a8c-site-title:focus + .main-navigation {
+.site-title + .main-navigation {
   display: block;
 }
 
-.site-title:not(:empty) + .site-description:not(:empty):before,
-.wp-block-a8c-site-title:not(:empty) + .site-description:not(:empty):before,
-.wp-block-a8c-site-title:focus:not(:empty) + .site-description:not(:empty):before {
+.site-title:not(:empty) + .site-description:not(:empty):before {
   margin: 0 0.2em;
 }
 
-.site-description,
-.wp-block-a8c-site-description,
-.wp-block-a8c-site-description:focus {
+.site-description {
   color: #181818;
   font-size: 0.71111em;
   font-weight: 300;
@@ -148,10 +130,6 @@ Modern Business Editor Styles
   order: 1;
 }
 
-.wp-block-image.is-resized {
-  display: block;
-}
-
 /* Site footer */
 .site-footer {
   padding: 1em 0;
@@ -916,6 +894,81 @@ blockquote {
   }
 }
 
+.a8c-template-editor.site-branding, .a8c-template-editor.site-footer, .template-block.site-branding, .template-block.site-footer {
+  margin: 0;
+}
+
+.a8c-template-editor .wp-block[data-align='full'], .template-block .wp-block[data-align='full'] {
+  left: calc( -12.5% - 12px);
+  max-width: calc( 125% + 114px);
+  width: calc( 125% + 114px);
+}
+
+.a8c-template-editor .template__site-logo .components-placeholder.block-editor-media-placeholder, .template-block .template__site-logo .components-placeholder.block-editor-media-placeholder {
+  margin: 0 auto;
+  max-width: 380px;
+}
+
+.a8c-template-editor .wp-block-a8c-site-description, .template-block .wp-block-a8c-site-description {
+  color: #181818;
+  font-size: 0.71111em;
+  font-weight: 300;
+  line-height: 0.8em;
+  margin: 0;
+  order: 1;
+  text-align: center;
+}
+
+.a8c-template-editor [data-type='a8c/site-description'] [data-block], .template-block [data-type='a8c/site-description'] [data-block] {
+  margin-bottom: 32px;
+}
+
+.a8c-template-editor .wp-block-a8c-site-title, .template-block .wp-block-a8c-site-title {
+  text-align: center;
+}
+
+.a8c-template-editor [data-type='a8c/site-title'] [data-block], .template-block [data-type='a8c/site-title'] [data-block] {
+  margin: 32px 0;
+}
+
+.a8c-template-editor .wp-block-a8c-navigation-menu a, .template-block .wp-block-a8c-navigation-menu a {
+  text-decoration: none;
+}
+
+.a8c-template-editor.site-header .wp-block-a8c-navigation-menu, .template-block.site-header .wp-block-a8c-navigation-menu {
+  text-align: center;
+}
+
+.a8c-template-editor.site-footer .wp-block-a8c-navigation-menu, .template-block.site-footer .wp-block-a8c-navigation-menu {
+  text-align: left;
+}
+
+.a8c-template-editor.site-footer h1,
+.a8c-template-editor.site-footer h2,
+.a8c-template-editor.site-footer h3,
+.a8c-template-editor.site-footer h4,
+.a8c-template-editor.site-footer h5,
+.a8c-template-editor.site-footer h6, .template-block.site-footer h1,
+.template-block.site-footer h2,
+.template-block.site-footer h3,
+.template-block.site-footer h4,
+.template-block.site-footer h5,
+.template-block.site-footer h6 {
+  text-align: left;
+}
+
+.a8c-template-editor.site-footer .wp-block-separator, .template-block.site-footer .wp-block-separator {
+  margin: 16px 0;
+}
+
+.a8c-template-editor.site-footer .wp-block-a8c-navigation-menu, .template-block.site-footer .wp-block-a8c-navigation-menu {
+  margin-top: 0.6rem;
+}
+
+.template-block .site-header {
+  margin-bottom: 2rem;
+}
+
 /** === Helper Functions === */
 /**
  Given a string, $alignment, returns the nested FSE block selectors
@@ -936,9 +989,7 @@ body .wp-block[data-align="full"] {
 }
 
 @media only screen and (min-width: 600px) {
-  
-  body .wp-block[data-align="full"],
-  body .wp-block.post-content__block .wp-block[data-align="full"] {
+  body .wp-block[data-align="full"], body .wp-block.post-content__block .wp-block[data-align="full"] {
     width: calc( 100% + 90px);
     max-width: calc( 100% + 90px);
   }
@@ -949,53 +1000,39 @@ body .wp-block[data-align="full"] {
     max-width: 80%;
     margin: 0 10%;
   }
-  
-  body .wp-block[data-align="wide"],
-  body .wp-block.post-content__block .wp-block[data-align="wide"] {
+  body .wp-block[data-align="wide"], body .wp-block.post-content__block .wp-block[data-align="wide"] {
     width: 100%;
   }
-  
-  body .wp-block[data-align="full"],
-  body .wp-block.post-content__block .wp-block[data-align="full"] {
+  body .wp-block[data-align="full"], body .wp-block.post-content__block .wp-block[data-align="full"] {
     position: relative;
     left: calc( -12.5% - 14px);
     width: calc( 125% + 116px);
     max-width: calc( 125% + 115px);
   }
-  
-  body .wp-block[data-align="right"],
-  body .wp-block.post-content__block .wp-block[data-align="right"] {
+  body .wp-block[data-align="right"], body .wp-block.post-content__block .wp-block[data-align="right"] {
     max-width: 125%;
   }
 }
 
 /** === Content Width === */
-
-.wp-block,
-.wp-block.post-content__block .wp-block {
+.wp-block, .wp-block.post-content__block .wp-block {
   width: calc(100vw - (2 * 1rem));
   max-width: 100%;
 }
 
 @media only screen and (min-width: 768px) {
-  
-  .wp-block,
-  .wp-block.post-content__block .wp-block {
+  .wp-block, .wp-block.post-content__block .wp-block {
     width: calc(8 * (100vw / 12));
   }
 }
 
 @media only screen and (min-width: 1168px) {
-  
-  .wp-block,
-  .wp-block.post-content__block .wp-block {
+  .wp-block, .wp-block.post-content__block .wp-block {
     width: calc(6 * (100vw / 12 ));
   }
 }
 
-
-.wp-block .wp-block,
-.wp-block.post-content__block .wp-block .wp-block {
+.wp-block .wp-block, .wp-block.post-content__block .wp-block .wp-block {
   width: 100%;
 }
 
@@ -1897,55 +1934,6 @@ ul.wp-block-archives li ul,
   font-size: 0.71111em;
 }
 
-/** === Site Title Block === */
-.wp-block-a8c-site-title {
-  text-align: center;
-}
-
-/** === Site Description Block === */
-.wp-block-a8c-site-description, .wp-block-a8c-site-description:focus {
-  text-align: center;
-  margin: 0;
-  line-height: 0.8em;
-}
-
-/** === Site Logo Block === */
-.template__site-logo .components-placeholder.block-editor-media-placeholder {
-  width: 380px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* Remove 100% width on figure to center align logo in editor on smaller screens */
-.block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit figure.fse-site-logo {
-  width: inherit;
-}
-
-.site-header .wp-block[data-align="full"] {
-  left: calc( -12.5% - 12px);
-  max-width: calc( 125% + 114px);
-  width: calc( 125% + 114px);
-}
-
-.template-block.site-header .wp-block[data-align="full"] {
-  left: calc( -12.5% - 9px);
-  max-width: calc( 125% + 111px);
-  width: calc( 125% + 111px);
-}
-
-.site-footer h1,
-.site-footer h2,
-.site-footer h3,
-.site-footer h4,
-.site-footer h5,
-.site-footer h6 {
-  text-align: left;
-}
-
-.site-footer .wp-block-separator {
-  margin: 16px 0;
-}
-
 /** === Classic Editor === */
 /* Properly center-align captions in the classic-editor block */
 .wp-caption dd {

modern-business/style-editor.scss

@@ -10,6 +10,7 @@ Modern Business Editor Styles
 @import "sass/site/footer/site-footer";
 @import "sass/navigation/menu-main-navigation";
 @import "sass/typography/headings";
+@import "sass/blocks/template-block";
 
 /** === Helper Functions === */
 
@@ -27,9 +28,7 @@ Modern Business Editor Styles
 		$main-block-selector: ".wp-block[data-align=\"#{$alignment}\"]";
 	}
 
-	@return "
-	  #{$main-block-selector},
-	  .wp-block.post-content__block #{$main-block-selector}";
+	@return "#{$main-block-selector}, .wp-block.post-content__block #{$main-block-selector}";
 }
 
 /** === Editor Frame === */
@@ -914,69 +913,6 @@ ul.wp-block-archives,
 	}
 }
 
-
-/** === Site Title Block === */
-
-.wp-block-a8c-site-title {
-	text-align: center;
-}
-
-/** === Site Description Block === */
-
-.wp-block-a8c-site-description {
-	&,&:focus {
-		text-align: center;
-		margin: 0;
-		// Line height rounded up from the description text-size set in style.css.
-		// It needs to be a bit larger to prevent text from getting cropped on top.
-		line-height: 0.8em;
-	}
-}
-
-/** === Site Logo Block === */
-.template__site-logo {
-	.components-placeholder.block-editor-media-placeholder {
-		width: 380px;
-		margin-left: auto;
-        margin-right: auto;
-    }
-}
-
-/* Remove 100% width on figure to center align logo in editor on smaller screens */
-.block-editor-block-list__layout  {
-	.block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit  {
-		figure.fse-site-logo {
-			width: inherit;
-		}
-	}
-}
-
-.site-header .wp-block[data-align="full"] {
-	left: calc( -12.5% - 12px );
-	max-width: calc( 125% + 114px );
-	width: calc( 125% + 114px );
-}
-
-.template-block.site-header .wp-block[data-align="full"] {
-	left: calc( -12.5% - 9px );
-	max-width: calc( 125% + 111px );
-	width: calc( 125% + 111px );
-}
-
-.site-footer {
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		text-align: left;
-	}
-	.wp-block-separator {
-		margin: 16px 0;
-	}
-}
-
 /** === Classic Editor === */
 
 /* Properly center-align captions in the classic-editor block */

modern-business/style-rtl.css

@@ -1600,10 +1600,6 @@ body.page .main-navigation {
   margin-left: 1rem;
 }
 
-footer .wp-block-a8c-navigation-menu .sub-menu {
-  visibility: hidden;
-}
-
 /*--------------------------------------------------------------
 ## Next / Previous
 --------------------------------------------------------------*/
@@ -1998,56 +1994,38 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
   margin-top: 0.5rem;
 }
 
-.site-title,
-.wp-block-a8c-site-title,
-.wp-block-a8c-site-title:focus {
+.site-title {
   color: #181818;
   margin: 0;
   order: 2;
   /* When there is no description set, make sure navigation appears below title. */
 }
 
-.site-title a,
-.wp-block-a8c-site-title a,
-.wp-block-a8c-site-title:focus a {
+.site-title a {
   color: #181818;
 }
 
-.site-title a:link, .site-title a:visited,
-.wp-block-a8c-site-title a:link,
-.wp-block-a8c-site-title a:visited,
-.wp-block-a8c-site-title:focus a:link,
-.wp-block-a8c-site-title:focus a:visited {
+.site-title a:link, .site-title a:visited {
   color: #181818;
 }
 
-.site-title a:hover,
-.wp-block-a8c-site-title a:hover,
-.wp-block-a8c-site-title:focus a:hover {
+.site-title a:hover {
   color: #4a4a4a;
 }
 
-.featured-image .site-title, .featured-image
-.wp-block-a8c-site-title, .featured-image
-.wp-block-a8c-site-title:focus {
+.featured-image .site-title {
   margin: 0;
 }
 
-.site-title + .main-navigation,
-.wp-block-a8c-site-title + .main-navigation,
-.wp-block-a8c-site-title:focus + .main-navigation {
+.site-title + .main-navigation {
   display: block;
 }
 
-.site-title:not(:empty) + .site-description:not(:empty):before,
-.wp-block-a8c-site-title:not(:empty) + .site-description:not(:empty):before,
-.wp-block-a8c-site-title:focus:not(:empty) + .site-description:not(:empty):before {
+.site-title:not(:empty) + .site-description:not(:empty):before {
   margin: 0 0.2em;
 }
 
-.site-description,
-.wp-block-a8c-site-description,
-.wp-block-a8c-site-description:focus {
+.site-description {
   color: #181818;
   font-size: 0.71111em;
   font-weight: 300;
@@ -2055,10 +2033,6 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
   order: 1;
 }
 
-.wp-block-image.is-resized {
-  display: block;
-}
-
 .site-header.featured-image {
   /* Hide overflow for overflowing featured image */
   overflow: hidden;

modern-business/style.css

@@ -1600,10 +1600,6 @@ body.page .main-navigation {
   margin-right: 1rem;
 }
 
-footer .wp-block-a8c-navigation-menu .sub-menu {
-  visibility: hidden;
-}
-
 /*--------------------------------------------------------------
 ## Next / Previous
 --------------------------------------------------------------*/
@@ -2004,56 +2000,38 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
   margin-top: 0.5rem;
 }
 
-.site-title,
-.wp-block-a8c-site-title,
-.wp-block-a8c-site-title:focus {
+.site-title {
   color: #181818;
   margin: 0;
   order: 2;
   /* When there is no description set, make sure navigation appears below title. */
 }
 
-.site-title a,
-.wp-block-a8c-site-title a,
-.wp-block-a8c-site-title:focus a {
+.site-title a {
   color: #181818;
 }
 
-.site-title a:link, .site-title a:visited,
-.wp-block-a8c-site-title a:link,
-.wp-block-a8c-site-title a:visited,
-.wp-block-a8c-site-title:focus a:link,
-.wp-block-a8c-site-title:focus a:visited {
+.site-title a:link, .site-title a:visited {
   color: #181818;
 }
 
-.site-title a:hover,
-.wp-block-a8c-site-title a:hover,
-.wp-block-a8c-site-title:focus a:hover {
+.site-title a:hover {
   color: #4a4a4a;
 }
 
-.featured-image .site-title, .featured-image
-.wp-block-a8c-site-title, .featured-image
-.wp-block-a8c-site-title:focus {
+.featured-image .site-title {
   margin: 0;
 }
 
-.site-title + .main-navigation,
-.wp-block-a8c-site-title + .main-navigation,
-.wp-block-a8c-site-title:focus + .main-navigation {
+.site-title + .main-navigation {
   display: block;
 }
 
-.site-title:not(:empty) + .site-description:not(:empty):before,
-.wp-block-a8c-site-title:not(:empty) + .site-description:not(:empty):before,
-.wp-block-a8c-site-title:focus:not(:empty) + .site-description:not(:empty):before {
+.site-title:not(:empty) + .site-description:not(:empty):before {
   margin: 0 0.2em;
 }
 
-.site-description,
-.wp-block-a8c-site-description,
-.wp-block-a8c-site-description:focus {
+.site-description {
   color: #181818;
   font-size: 0.71111em;
   font-weight: 300;
@@ -2061,10 +2039,6 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
   order: 1;
 }
 
-.wp-block-image.is-resized {
-  display: block;
-}
-
 .site-header.featured-image {
   /* Hide overflow for overflowing featured image */
   overflow: hidden;