Modern business Full Site Editing - add site logo placeholder to header template (#1197)

Add a site logo placeholder to the FSE header template along with relevant editor and front end styles

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

@@ -24,6 +24,14 @@
 			margin-bottom: 2rem;
 		}
 	}
+
+	.fse-site-logo {
+		margin-bottom: 0;
+		img {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
 }
 
 // Site branding

modern-business/style-editor.css

@@ -39,6 +39,15 @@ Modern Business Editor Styles
   }
 }
 
+.site-header .fse-site-logo {
+  margin-bottom: 0;
+}
+
+.site-header .fse-site-logo img {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .site-branding {
   color: #686868;
   display: flex;
@@ -1846,6 +1855,13 @@ ul.wp-block-archives li ul,
   line-height: 0.8em;
 }
 
+/** === Site Logo Block === */
+.template__site-logo .components-placeholder.block-editor-media-placeholder {
+  width: 380px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 /** === Classic Editor === */
 /* Properly center-align captions in the classic-editor block */
 .wp-caption dd {

modern-business/style-editor.scss

@@ -919,6 +919,15 @@ ul.wp-block-archives,
 	}
 }
 
+/** === Site Logo Block === */
+.template__site-logo {
+	.components-placeholder.block-editor-media-placeholder {
+		width: 380px;
+		margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 /** === Classic Editor === */
 
 /* Properly center-align captions in the classic-editor block */

modern-business/style-rtl.css

@@ -1942,6 +1942,15 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
   }
 }
 
+.site-header .fse-site-logo {
+  margin-bottom: 0;
+}
+
+.site-header .fse-site-logo img {
+  margin-right: auto;
+  margin-left: auto;
+}
+
 .site-branding {
   color: #686868;
   display: flex;

modern-business/style.css

@@ -1948,6 +1948,15 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
   }
 }
 
+.site-header .fse-site-logo {
+  margin-bottom: 0;
+}
+
+.site-header .fse-site-logo img {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .site-branding {
   color: #686868;
   display: flex;