Update the modern business theme to support footer styles and base footer blocks for full site editing.

modern-business/inc/fse-template-data.php

@@ -108,7 +108,16 @@ class A8C_WP_Template_Data_Inserter {
 	 * @return string
 	 */
 	public function get_footer_content() {
-		return '<!-- wp:a8c/navigation-menu {\"themeLocation\":"footer"} /-->';
+		return '<!-- wp:group {"align":"full","className":"site-footer"} -->' .
+			   '<div class="wp-block-group alignfull site-footer">' .
+			   '<div class="wp-block-group__inner-container">' .
+			   '<!-- wp:separator {"className":"is-style-default"} -->' .
+			   '<hr class="wp-block-separator is-style-default"/>' .
+			   '<!-- /wp:separator -->' .
+			   '<!-- wp:a8c/navigation-menu /-->' .
+			   '</div>' .
+			   '</div>' .
+			   '<!-- /wp:group -->';
 	}
 
 	/**

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

@@ -1,5 +1,25 @@
 /* Site footer */
 
+.site-footer {
+	padding: 1em 0;
+
+	color: $color__text-light;
+	display: flex;
+	flex-direction: column;
+	text-align: left;
+
+	@include media(tablet) {
+		margin: 0 $size__site-margins 2em;
+	}
+
+	.wp-block-separator {
+		margin: 0 0 1em;
+		background-color: $color__text-light;
+		border: 0;
+		height: 1px;
+	}
+}
+
 #colophon {
 
 	.widget-area,

modern-business/style-editor.css

@@ -139,6 +139,95 @@ Modern Business Editor Styles
   display: block;
 }
 
+/* Site footer */
+.site-footer {
+  padding: 1em 0;
+  color: #686868;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-footer {
+    margin: 0 calc(10% + 60px) 2em;
+  }
+}
+
+.site-footer .wp-block-separator {
+  margin: 0 0 1em;
+  background-color: #686868;
+  border: 0;
+  height: 1px;
+}
+
+#colophon .widget-area,
+#colophon .site-info {
+  margin: calc(2 * 1rem) 1rem;
+}
+
+@media only screen and (min-width: 768px) {
+  #colophon .widget-area,
+  #colophon .site-info {
+    margin: calc(3 * 1rem) auto;
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  #colophon .widget-area,
+  #colophon .site-info {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
+#colophon .widget-column {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#colophon .widget-column .widget {
+  width: 100%;
+}
+
+@media only screen and (min-width: 1168px) {
+  #colophon .widget-column .widget {
+    margin-right: calc(3 * 1rem);
+    width: calc(50% - (3 * 1rem));
+  }
+}
+
+#colophon .site-info {
+  color: #686868;
+  font-weight: 300;
+}
+
+@media only screen and (min-width: 768px) {
+  #colophon .site-info {
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  #colophon .site-info {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
+#colophon .site-info a {
+  color: inherit;
+}
+
+#colophon .site-info a:hover {
+  text-decoration: none;
+  color: #c43d80;
+}
+
+#colophon .site-info .imprint,
+#colophon .site-info .privacy-policy-link {
+  margin-right: 1rem;
+}
+
 /** === Main menu === */
 .main-navigation {
   display: block;

modern-business/style-editor.scss

@@ -7,6 +7,7 @@ Modern Business Editor Styles
 @import "sass/variables-site/variables-site";
 @import "sass/mixins/mixins-master";
 @import "sass/site/header/site-header";
+@import "sass/site/footer/site-footer";
 @import "sass/navigation/menu-main-navigation";
 @import "sass/typography/headings";
 

modern-business/style-rtl.css

@@ -3197,6 +3197,27 @@ body.page .main-navigation {
 ## Footer
 --------------------------------------------------------------*/
 /* Site footer */
+.site-footer {
+  padding: 1em 0;
+  color: #686868;
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-footer {
+    margin: 1em calc(10% + 60px);
+  }
+}
+
+.site-footer .wp-block-separator {
+  margin: 0 0 1em;
+  background-color: #686868;
+  border: 0;
+  height: 1px;
+}
+
 #colophon .widget-area,
 #colophon .site-info {
   margin: calc(2 * 1rem) 1rem;

modern-business/style.css

@@ -3203,6 +3203,27 @@ body.page .main-navigation {
 ## Footer
 --------------------------------------------------------------*/
 /* Site footer */
+.site-footer {
+  padding: 1em 0;
+  color: #686868;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-footer {
+    margin: 0 calc(10% + 60px) 2em;
+  }
+}
+
+.site-footer .wp-block-separator {
+  margin: 0 0 1em;
+  background-color: #686868;
+  border: 0;
+  height: 1px;
+}
+
 #colophon .widget-area,
 #colophon .site-info {
   margin: calc(2 * 1rem) 1rem;