Rainfall: Try spacing presets (#6293)

* Rainfall: Try spacing presets

* Rainfall: use spacing presets in patterns

* Use spacing preset for h4 font size

Co-authored-by: Sarah Norris <sarah@sekai.co.uk>

rainfall/patterns/contacts.php

@@ -5,8 +5,8 @@
  * Categories: featured
  */
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}},"backgroundColor":"orange"} -->
-<div class="wp-block-group alignwide has-orange-background-color has-background" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:heading {"level":1} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var(--wp--preset--spacing--70)","right":"var(--wp--preset--spacing--70)","bottom":"var(--wp--preset--spacing--70)","left":"var(--wp--preset--spacing--70)"}}},"backgroundColor":"orange"} -->
+<div class="wp-block-group alignwide has-orange-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)"><!-- wp:heading {"level":1} -->
 <h1><?php echo esc_html__( 'Contacts', 'rainfall' ); ?></h1>
 <!-- /wp:heading -->
 
@@ -15,8 +15,8 @@
 <div class="wp-block-column"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {"style":{"spacing":{"padding":{"top":"1rem"}},"border":{"top":{"color":"var:preset|color|black","width":"1px"}}}} -->
-<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:1rem"><!-- wp:heading -->
+<!-- wp:column {"style":{"spacing":{"padding":{"top":"var(--wp--preset--spacing--30)"}},"border":{"top":{"color":"var:preset|color|black","width":"1px"}}}} -->
+<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:heading -->
 <h2><?php echo esc_html__( 'EDITORIAL &amp; SUBMISSIONS', 'rainfall' ); ?></h2>
 <!-- /wp:heading -->
 
@@ -25,8 +25,8 @@
 <!-- /wp:paragraph --></div>
 <!-- /wp:column -->
 
-<!-- wp:column {"style":{"border":{"top":{"color":"var:preset|color|black","width":"1px"}},"spacing":{"padding":{"top":"1rem"}}}} -->
-<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:1rem"><!-- wp:heading -->
+<!-- wp:column {"style":{"border":{"top":{"color":"var:preset|color|black","width":"1px"}},"spacing":{"padding":{"top":"var(--wp--preset--spacing--30)"}}}} -->
+<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:heading -->
 <h2><?php echo esc_html__( 'Advertising', 'rainfall' ); ?></h2>
 <!-- /wp:heading -->
 
@@ -41,8 +41,8 @@
 <div class="wp-block-column"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {"style":{"spacing":{"padding":{"top":"1rem"}},"border":{"top":{"color":"var:preset|color|black","width":"1px"}}}} -->
-<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:1rem"><!-- wp:heading -->
+<!-- wp:column {"style":{"spacing":{"padding":{"top":"var(--wp--preset--spacing--30)"}},"border":{"top":{"color":"var:preset|color|black","width":"1px"}}}} -->
+<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:heading -->
 <h2><?php echo esc_html__( 'Mailing Address', 'rainfall' ); ?></h2>
 <!-- /wp:heading -->
 
@@ -51,8 +51,8 @@
 <!-- /wp:paragraph --></div>
 <!-- /wp:column -->
 
-<!-- wp:column {"style":{"border":{"top":{"color":"var:preset|color|black","width":"1px"}},"spacing":{"padding":{"top":"1rem"}}}} -->
-<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:1rem"><!-- wp:heading -->
+<!-- wp:column {"style":{"border":{"top":{"color":"var:preset|color|black","width":"1px"}},"spacing":{"padding":{"top":"var(--wp--preset--spacing--30)"}}}} -->
+<div class="wp-block-column" style="border-top-color:var(--wp--preset--color--black);border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:heading -->
 <h2><?php echo esc_html__( 'Social Media', 'rainfall' ); ?></h2>
 <!-- /wp:heading -->
 

rainfall/patterns/cta.php

@@ -18,8 +18,8 @@
 <!-- /wp:paragraph --></div>
 <!-- /wp:column -->
 
-<!-- wp:column {"verticalAlignment":"center","width":"2rem"} -->
-<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:2rem"></div>
+<!-- wp:column {"verticalAlignment":"center","width":"var(--wp--preset--spacing--70)"} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:var(--wp--preset--spacing--70)"></div>
 <!-- /wp:column -->
 
 <!-- wp:column {"verticalAlignment":"center"} -->

rainfall/templates/single.html

@@ -53,8 +53,8 @@
 <div class="wp-block-comments-query-loop"><!-- wp:comments-title /-->
 
 <!-- wp:comment-template -->
-<!-- wp:columns {"style":{"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"color":"var:preset|color|white","width":"1px"},"left":{"width":"0px","style":"none"}},"spacing":{"margin":{"top":"0px","bottom":"0px"},"padding":{"top":"2.5rem","bottom":"2.5rem"}}}} -->
-<div class="wp-block-columns" style="border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-color:var(--wp--preset--color--white);border-bottom-width:1px;border-left-style:none;border-left-width:0px;margin-top:0px;margin-bottom:0px;padding-top:2.5rem;padding-bottom:2.5rem"><!-- wp:column -->
+<!-- wp:columns {"style":{"border":{"top":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"bottom":{"color":"var:preset|color|white","width":"1px"},"left":{"width":"0px","style":"none"}},"spacing":{"margin":{"top":"0px","bottom":"0px"},"padding":{"top":"var(--wp--preset--spacing--90)","bottom":"var(--wp--preset--spacing--90)"}}}} -->
+<div class="wp-block-columns" style="border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-color:var(--wp--preset--color--white);border-bottom-width:1px;border-left-style:none;border-left-width:0px;margin-top:0px;margin-bottom:0px;padding-top:var(--wp--preset--spacing--90);padding-bottom:var(--wp--preset--spacing--90)"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:comment-author-name {"fontSize":"small"} /-->
 
 <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
@@ -98,4 +98,4 @@
 <div class="wp-block-column"><!-- wp:template-part {"slug":"footer"} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>
-<!-- /wp:group -->
+<!-- /wp:group -->

rainfall/theme.json

@@ -59,6 +59,13 @@
 			"wideSize": "1280px"
 		},
 		"spacing": {
+			"spacingScale": {
+				"operator": "+",
+				"increment": 0.25,
+				"steps": 9,
+				"mediumStep": 1.5,
+				"unit": "rem"
+			},
 			"units": [
 				"%",
 				"px",
@@ -69,6 +76,7 @@
 			]
 		},
 		"typography": {
+			"fluid": true,
 			"fontFamilies": [
 				{
 					"fontFamily": "'Helvetica Neue', Arial, sans-serif",
@@ -79,22 +87,22 @@
 			"fontSizes": [
 				{
 					"name": "Small",
-					"size": "1rem",
+					"size": "var(--wp--preset--spacing--30)",
 					"slug": "small"
 				},
 				{
 					"name": "Medium",
-					"size": "1.5rem",
+					"size": "var(--wp--preset--spacing--50)",
 					"slug": "medium"
 				},
 				{
 					"name": "Large",
-					"size": "1.75rem",
+					"size": "var(--wp--preset--spacing--60)",
 					"slug": "large"
 				},
 				{
 					"name": "Extra large",
-					"size": "2rem",
+					"size": "var(--wp--preset--spacing--70)",
 					"slug": "x-large"
 				},
 				{
@@ -282,14 +290,14 @@
 			},
 			"h4": {
 				"typography": {
-					"fontSize": "1.75rem",
+					"fontSize": "var(--wp--preset--spacing--60)",
 					"fontWeight": "700",
 					"lineHeight": "1.1"
 				}
 			},
 			"h5": {
 				"typography": {
-					"fontSize": "1.5rem",
+					"fontSize": "var(--wp--preset--spacing--50)",
 					"fontWeight": "700",
 					"lineHeight": "1.2"
 				}
@@ -331,7 +339,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "2.5rem"
+			"blockGap": "var(--wp--preset--spacing--90)"
 		},
 		"typography": {
 			"fontFamily": "var(--wp--preset--font-family--helvetica-neue)",