Merge pull request #287 from material-components/fse/footer-style

Allow padding and margin; Fix footer margin

theme/block-template-parts/footer.html

@@ -1,13 +1,13 @@
-<!-- wp:group {"className":"site-footer","layout":{"wideSize":"100vw","contentSize":"960px"}} -->
-<div class="wp-block-group site-footer"><!-- wp:columns -->
-	<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
-		<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph -->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"1rem","bottom":"1rem","left":"1rem"}}},"className":"site-footer","layout":{"wideSize":"100vw","contentSize":"960px"}} -->
+<div class="wp-block-group site-footer" style="padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"}}}} -->
+	<div class="wp-block-columns" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"width":"66.66%","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+		<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;flex-basis:66.66%"><!-- wp:paragraph -->
 			<p><small>Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.</small></p>
 			<!-- /wp:paragraph --></div>
 		<!-- /wp:column -->
 
-		<!-- wp:column {"width":"33.33%"} -->
-		<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:material/back-to-top {"align":"right"} -->
+		<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
+		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:material/back-to-top {"align":"right"} -->
 			<button class="wp-block-material-back-to-top alignright back-to-top mdc-button" aria-label="Back to top" id="back-to-top"><div class="mdc-button__ripple"></div><i class="material-icons mdc-icon-button__icon">expand_less</i></button>
 			<!-- /wp:material/back-to-top --></div>
 		<!-- /wp:column --></div>

theme/theme.json

@@ -103,6 +103,18 @@
         "footer": "var(--wp--preset--color--footer)",
         "on-footer": "var(--wp--preset--color--on-footer)"
       }
+    },
+    "spacing": {
+      "margin": true,
+      "padding": true,
+      "units": [
+        "%",
+        "px",
+        "em",
+        "rem",
+        "vh",
+        "vw"
+      ]
     }
   }
 }