Pixel: update layout settings (#6494)

* Pixel: update layout settings

* enable the setting useRootPaddingAwareAlignments

* fix spaces and tabs

pixel/parts/header.html

@@ -1,11 +1,9 @@
-<!-- wp:group {"layout":{"inherit":"true","type":"constrained"},"style":{"spacing":{"blockGap":"0","padding":{"top":"1.25rem","right":"1.25rem","bottom":"1.25rem","left":"1.25rem"}}}} -->
-<div class="wp-block-group" style="padding-top:1.25rem;padding-right:1.25rem;padding-bottom:1.25rem;padding-left:1.25rem"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"},"align":"full","style":{"spacing":{"padding":{"bottom":"0.5rem","top":"0.5rem","right":"1rem","left":"1rem"},"blockGap":"0"},"border":{"width":"2px"}},"className":"pixel-shadow"} -->
-<div class="wp-block-group alignfull pixel-shadow" style="border-width:2px;padding-top:0.5rem;padding-right:1rem;padding-bottom:0.5rem;padding-left:1rem"><!-- wp:group {"layout":{"type":"flex"}} -->
-<div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
+<!-- wp:group {"layout":{"inherit":"true","type":"constrained"},"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"calc(2 * var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002douter))","bottom":"0","left":"calc(2 * var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002douter))"}}}} -->
+<div class="wp-block-group" style="padding-top:0;padding-right:calc(2 * var(--wp--custom--spacing--outer));padding-bottom:0;padding-left:calc(2 * var(--wp--custom--spacing--outer))"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"},"align":"full","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30","top":"var:preset|spacing|30","right":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"0"},"border":{"width":"2px"}},"className":"pixel-shadow"} -->
+<div class="wp-block-group alignfull pixel-shadow" style="border-width:2px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"layout":{"type":"flex"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|20","bottom":"0","left":"var:preset|spacing|20"}}}} -->
+<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)"><!-- wp:site-logo {"width":64} /-->
 
-<!-- wp:group -->
-<div class="wp-block-group"><!-- wp:site-title /--></div>
-<!-- /wp:group --></div>
+<!-- wp:site-title /--></div>
 <!-- /wp:group -->
 
 <!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /--></div>

pixel/style.css

@@ -20,5 +20,5 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
  * Need this until box shadow support added to Gutenberg here: https://github.com/WordPress/gutenberg/pull/43184 
  */
 .pixel-shadow {
-    box-shadow: 5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground);
+    box-shadow: var(--wp--custom--shadow);
 }

pixel/templates/page.html

@@ -20,7 +20,7 @@
     <!-- wp:spacer {"height":60} -->
     <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
     <!-- /wp:spacer -->
-    <!-- wp:pattern {"slug":"pixel/comments"} -->
+    <!-- wp:pattern {"slug":"pixel/comments"} /-->
 </div>
 <!-- /wp:group -->
 

pixel/templates/single.html

@@ -21,7 +21,7 @@
     <!-- wp:spacer {"height":60} -->
     <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
     <!-- /wp:spacer -->
-    <!-- wp:pattern {"slug":"pixel/comments"} -->
+    <!-- wp:pattern {"slug":"pixel/comments"} /-->
 </div>
 <!-- /wp:group -->
 

pixel/theme.json

@@ -57,11 +57,14 @@
                 "horizontal": "min(30px, 5vw)",
                 "vertical": "min(30px, 5vw)"
             },
+            "spacing": {
+                "outer": "clamp(0.625rem, calc(0.625rem + ((1vw - 0.48rem) * 1.2019)), 1.25rem)"
+            },
             "shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
         },
         "layout": {
             "contentSize": "620px",
-            "wideSize": "1000px"
+            "wideSize": "1200px"
         },
         "spacing": {
             "units": [
@@ -173,7 +176,8 @@
                     "slug": "x-large"
                 }
             ]
-        }
+        },
+        "useRootPaddingAwareAlignments": true
     },
     "styles": {
         "blocks": {
@@ -339,9 +343,9 @@
         },
         "elements": {
             "button": {
-				"border": {
+                "border": {
                     "color": "var(--wp--preset--color--primary)",
-					"radius": "0",
+                    "radius": "0",
                     "style": "solid",
                     "width": "2px"
                 },
@@ -430,7 +434,13 @@
             }
         },
         "spacing": {
-            "blockGap": "30px"
+            "blockGap": "30px",
+            "padding": {
+                "bottom": "var(--wp--custom--spacing--outer)",
+                "left": "var(--wp--custom--spacing--outer)",
+                "right": "var(--wp--custom--spacing--outer)",
+                "top": "var(--wp--custom--spacing--outer)"
+            }
         },
         "typography": {
             "fontFamily": "var(--wp--preset--font-family--dm-mono)",