Merge pull request #26 from peiche/v1.1.0

V1.1.0
peiche · Jun 4, 2024 · 2bbf270 · 2bbf270
2 parents ac1d413 + e42f8d4
commit 2bbf270
Show file tree

Hide file tree

Showing 28 changed files with 82 additions and 134 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.1.0
+
+- Now using v3 of theme.json schema.
+- Removed defined spacing sizes in favor of spacing scale generated ones.
+- Replaced spacing class names with equivalents.
+
 ## 1.0.4
 
 - Fixed responsive font sizes to improve readability. 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ankur",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "WordPress block theme supporting full site editing",
   "scripts": {
     "lint:css": "wp-scripts lint-style \"src/**/*.scss\"",

diff --git a/parts/header.html b/parts/header.html
@@ -2,9 +2,9 @@
 <div
   class="wp-block-group"
   style="
-    padding-top: var(--wp--preset--spacing--unit);
+    padding-top: var(--wp--preset--spacing--40);
     padding-right: 1rem;
-    padding-bottom: var(--wp--preset--spacing--unit);
+    padding-bottom: var(--wp--preset--spacing--40);
     padding-left: 1rem;
   "
 >

diff --git a/patterns/footer-default.php b/patterns/footer-default.php
@@ -11,7 +11,7 @@
 ?>
 
 <!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"var:preset|spacing|component-padding","bottom":"var:preset|spacing|component-padding"}}},"layout":{"type":"constrained"}} -->
-<footer class="wp-block-group" style="padding-top:var(--wp--preset--spacing--component-padding);padding-bottom:var(--wp--preset--spacing--component-padding)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<footer class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
 <div class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:site-title /-->
 

diff --git a/patterns/footer-simple.php b/patterns/footer-simple.php
@@ -11,7 +11,7 @@
 ?>
 
 <!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"var:preset|spacing|component-padding","bottom":"var:preset|spacing|component-padding"}}},"layout":{"type":"constrained"}} -->
-<footer class="wp-block-group" style="padding-top:var(--wp--preset--spacing--component-padding);padding-bottom:var(--wp--preset--spacing--component-padding)"><!-- wp:paragraph {"align":"center"} -->
+<footer class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"align":"center"} -->
 <p class="has-text-align-center">
 	<?php
 		printf(

diff --git a/patterns/header-centered.php b/patterns/header-centered.php
@@ -11,7 +11,7 @@
 ?>
 
 <!-- wp:group {"tagName":"header","align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|component-padding","left":"var:preset|spacing|component-padding"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
-<header class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--component-padding);padding-left:var(--wp--preset--spacing--component-padding)"><!-- wp:social-links -->
+<header class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:social-links -->
 <ul class="wp-block-social-links"></ul>
 <!-- /wp:social-links -->
 

diff --git a/patterns/header-default.php b/patterns/header-default.php
@@ -11,7 +11,7 @@
 ?>
 
 <!-- wp:group {"tagName":"header","align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|component-padding","left":"var:preset|spacing|component-padding"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
-<header class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--component-padding);padding-left:var(--wp--preset--spacing--component-padding)"><!-- wp:site-title /-->
+<header class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:site-title /-->
 
 <!-- wp:navigation {} /--></header>
 <!-- /wp:group -->
diff --git a/patterns/post-card.php b/patterns/post-card.php
@@ -11,10 +11,10 @@
 ?>
 
 <!-- wp:group {"style":{"border":{"radius":"4px"},"spacing":{"padding":{"bottom":"var:preset|spacing|component-padding","left":"0","right":"0","top":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast-high"}}}},"backgroundColor":"bg","textColor":"contrast-high","layout":{"type":"default"}} -->
-<div class="wp-block-group has-contrast-high-color has-bg-background-color has-text-color has-background has-link-color" style="border-radius:4px;padding-top:0;padding-right:0;padding-bottom:var(--wp--preset--spacing--component-padding);padding-left:0"><!-- wp:post-featured-image {"isLink":true,"height":"14rem","style":{"border":{"radius":"0px"}}} /-->
+<div class="wp-block-group has-contrast-high-color has-bg-background-color has-text-color has-background has-link-color" style="border-radius:4px;padding-top:0;padding-right:0;padding-bottom:var(--wp--preset--spacing--40);padding-left:0"><!-- wp:post-featured-image {"isLink":true,"height":"14rem","style":{"border":{"radius":"0px"}}} /-->
 
 <!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|component-padding","left":"var:preset|spacing|component-padding"}}},"layout":{"type":"default"}} -->
-<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--component-padding);padding-left:var(--wp--preset--spacing--component-padding)"><!-- wp:post-title {"isLink":true,"fontSize":"lg"} /-->
+<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-title {"isLink":true,"fontSize":"lg"} /-->
 
 <!-- wp:post-excerpt {"moreText":""} /-->
 

diff --git a/patterns/quote-full-width.php b/patterns/quote-full-width.php
@@ -11,7 +11,7 @@
 ?>
 
 <!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|unit","left":"1rem","top":"8rem","bottom":"8rem"}}},"backgroundColor":"contrast-lower"} -->
-<div class="wp-block-group has-contrast-lower-background-color has-background" style="padding-top:8rem;padding-right:var(--wp--preset--spacing--unit);padding-bottom:8rem;padding-left:1rem"><!-- wp:group {"textColor":"contrast-low","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"},"fontSize":"xxxxl"} -->
+<div class="wp-block-group has-contrast-lower-background-color has-background" style="padding-top:8rem;padding-right:var(--wp--preset--spacing--40);padding-bottom:8rem;padding-left:1rem"><!-- wp:group {"textColor":"contrast-low","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"},"fontSize":"xxxxl"} -->
 <div class="wp-block-group has-contrast-low-color has-text-color has-xxxxl-font-size"><!-- wp:html -->
 <svg class="icon" aria-hidden="true" viewBox="0 0 64 64"><polygon fill="currentColor" points="2 36 17 2 26 2 15 36 26 36 26 62 2 62 2 36"></polygon><polygon fill="currentColor" points="38 36 53 2 62 2 51 36 62 36 62 62 38 62 38 36"></polygon></svg>
 <!-- /wp:html --></div>

diff --git a/src/scss/blocks/embed/_editor.scss b/src/scss/blocks/embed/_editor.scss
@@ -1,7 +1,7 @@
 @use "./base" as *;
 
 .wp-block-embed {
-  margin-top: var(--wp--preset--spacing--component-padding);
+  margin-top: var(--wp--preset--spacing--40);
 
   &.is-loading {
     flex-direction: column;

diff --git a/src/scss/blocks/gallery/_base.scss b/src/scss/blocks/gallery/_base.scss
@@ -1,4 +1,8 @@
 .wp-block-gallery {
+  &:not(.has-nested-images) {
+    margin-top: var(--wp--preset--spacing--40);
+  }
+
   &.has-nested-images {
     figure.wp-block-image figcaption,
     figure.wp-block-image.is-style-rounded figcaption.wp-element-caption {

diff --git a/src/scss/blocks/image/_editor.scss b/src/scss/blocks/image/_editor.scss
@@ -1,5 +1,5 @@
 @use "./base" as *;
 
 .wp-block-image {
-  margin-block-start: var(--wp--preset--spacing--component-padding);
+  margin-block-start: var(--wp--preset--spacing--40);
 }
diff --git a/src/scss/blocks/pagination/_base.scss b/src/scss/blocks/pagination/_base.scss
@@ -7,7 +7,7 @@
       color: var(--wp--preset--color--contrast-high);
       text-decoration: none;
       border-radius: var(--wp--custom--radius-lg);
-      padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs);
+      padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
       display: inline-block;
       margin: 0;
     }

diff --git a/src/scss/blocks/post-comments-form/_theme.scss b/src/scss/blocks/post-comments-form/_theme.scss
@@ -7,7 +7,7 @@
   .comment-form-comment {
     label {
       display: block;
-      margin-bottom: var(--wp--preset--spacing--xxs);
+      margin-bottom: var(--wp--preset--spacing--30);
       font-size: var(--wp--preset--font-size--sm);
     }
   }
@@ -21,7 +21,7 @@
       var(--wp--custom--line-height-body) *
         var(--wp--custom--line-height-multiplier, 1)
     );
-    padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
+    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
     border-radius: var(--wp--custom--radius-md);
     box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast-lower);
   }

diff --git a/src/scss/blocks/post-navigation/_theme.scss b/src/scss/blocks/post-navigation/_theme.scss
@@ -3,14 +3,14 @@
 .post-nav-links {
   display: flex;
   align-items: center;
-  gap: var(--wp--preset--spacing--xxxs);
+  gap: var(--wp--preset--spacing--20);
 
   .post-page-numbers {
     background-color: var(--wp--preset--color--contrast-lower);
     color: var(--wp--preset--color--contrast-high);
     text-decoration: none;
     border-radius: var(--wp--custom--radius-lg);
-    padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs);
+    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
     display: inline-block;
     margin: 0;
 

diff --git a/src/scss/blocks/post-terms/_editor.scss b/src/scss/blocks/post-terms/_editor.scss
@@ -7,7 +7,7 @@
     color: var(--wp--preset--color--contrast-high);
     text-decoration: none;
     border-radius: 9999px;
-    padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs);
+    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
 
     &::after {
       content: "";
@@ -19,6 +19,6 @@
     background-color: transparent;
     color: var(--wp--preset--color--contrast-high);
     border: 2px solid var(--wp--preset--color--contrast-low);
-    padding: var(--wp--preset--spacing--xxxxs) var(--wp--preset--spacing--xxs);
+    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
   }
 }
diff --git a/src/scss/blocks/post-terms/_theme.scss b/src/scss/blocks/post-terms/_theme.scss
@@ -3,13 +3,13 @@
 .wp-block-post-terms {
   &.is-style-buttons a {
     background-color: var(--wp--preset--color--contrast-lower);
-    padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs);
+    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
   }
 
   &.is-style-outline a {
     background-color: transparent;
     border: 2px solid var(--wp--preset--color--contrast-low);
-    padding: var(--wp--preset--spacing--xxxxs) var(--wp--preset--spacing--xxs);
+    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
   }
 
   &.is-style-buttons,

diff --git a/src/scss/blocks/quote/_base.scss b/src/scss/blocks/quote/_base.scss
@@ -1,5 +1,5 @@
 .wp-block-quote {
-  margin-block-start: var(--wp--preset--spacing--component-padding);
+  margin-block-start: var(--wp--preset--spacing--40);
 
   &.wp-block-quote.is-style-large {
     padding-left: 0;

diff --git a/src/scss/blocks/search/_theme.scss b/src/scss/blocks/search/_theme.scss
@@ -9,20 +9,19 @@
     &.has-icon {
       margin: 0;
       border: 0;
-      padding: var(--wp--preset--spacing--xxxxs);
+      padding: var(--wp--preset--spacing--10);
     }
   }
 
   &__inside-wrapper {
     background-color: var(--wp--preset--color--white);
     margin-top: 0;
-    padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xxxs)
-      var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xxs);
+    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20)
+      var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
 
     @media (min-width: 64rem) {
-      padding: var(--wp--preset--spacing--xxxxs)
-        var(--wp--preset--spacing--xxxxs) var(--wp--preset--spacing--xxxxs)
-        var(--wp--preset--spacing--xxxs);
+      padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10)
+        var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
     }
   }
 

diff --git a/src/scss/blocks/social-links/_theme.scss b/src/scss/blocks/social-links/_theme.scss
@@ -1,5 +1,5 @@
 @use "./base" as *;
 
 .wp-block-social-links {
-  gap: var(--wp--preset--spacing--xs);
+  gap: var(--wp--preset--spacing--40);
 }
diff --git a/src/scss/blocks/term-description/_theme.scss b/src/scss/blocks/term-description/_theme.scss
@@ -5,6 +5,6 @@
   margin-block-end: 0;
 
   + * {
-    margin-block-start: var(--wp--preset--spacing--component-padding);
+    margin-block-start: var(--wp--preset--spacing--40);
   }
 }
diff --git a/src/scss/editor/_media.scss b/src/scss/editor/_media.scss
@@ -1,5 +1,5 @@
 .wp-block-gallery figcaption {
   margin-top: calc(
-    (-1 * var(--wp--style--block-gap)) + var(--wp--preset--spacing--xxs)
+    (-1 * var(--wp--style--block-gap)) + var(--wp--preset--spacing--30)
   );
 }
diff --git a/src/scss/editor/_spacing.scss b/src/scss/editor/_spacing.scss
@@ -1,11 +1,11 @@
 .is-root-container,
 .edit-post-visual-editor__post-title-wrapper {
   margin-bottom: 1rem;
-  padding-left: var(--wp--preset--spacing--component-padding);
-  padding-right: var(--wp--preset--spacing--component-padding);
+  padding-left: var(--wp--preset--spacing--40);
+  padding-right: var(--wp--preset--spacing--40);
 
   > .alignfull {
-    margin-left: calc(-1 * var(--wp--preset--spacing--component-padding));
-    margin-right: calc(-1 * var(--wp--preset--spacing--component-padding));
+    margin-left: calc(-1 * var(--wp--preset--spacing--40));
+    margin-right: calc(-1 * var(--wp--preset--spacing--40));
   }
 }
diff --git a/src/scss/theme/_media.scss b/src/scss/theme/_media.scss
@@ -43,11 +43,11 @@
 .wp-block-image figcaption,
 .wp-block-table figcaption,
 .wp-block-video figcaption {
-  margin-top: var(--wp--preset--spacing--xxs);
+  margin-top: var(--wp--preset--spacing--30);
 }
 
 .wp-block-gallery figcaption {
   margin-top: calc(
-    (-1 * var(--wp--style--block-gap)) + var(--wp--preset--spacing--xxs)
+    (-1 * var(--wp--style--block-gap)) + var(--wp--preset--spacing--30)
   );
 }
diff --git a/src/scss/theme/_typography.scss b/src/scss/theme/_typography.scss
@@ -12,14 +12,13 @@
 
 @media (min-width: 64rem) {
   body {
-    --wp--preset--spacing--unit: 1.25rem;
-    --wp--custom--text-scale-ratio: 1.25;
+    --wp--preset--spacing--40: 1.25rem;
   }
 }
 
 .entry-content :not(.wp-block-code) > code {
   background-color: var(--wp--preset--color--contrast-lower);
-  padding: var(--wp--preset--spacing--xxxxs) var(--wp--preset--spacing--xxxxs);
+  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
   border-radius: var(--wp--custom--radius-sm);
 }
 

diff --git a/style.css b/style.css
@@ -2,7 +2,7 @@
 Theme Name: Ankur
 Author: Paul Eiche
 Description: WordPress block theme with support for color variations and custom patterns.
-Version: 1.0.4
+Version: 1.1.0
 Requires at least: 5.9
 Tested up to: 6.0
 Requires PHP: 7.4