generator-chisel 2.2.0 → 2.2.2

package/lib/commands/create/creators/app/chisel-starter-theme/src/design/tools/_buttons.scss

@@ -1,19 +1,20 @@
 @use 'theme' as *;
 @use 'icon' as *;
 @use 'px-to-rem' as *;
+@use 'colors' as *;
 
 @mixin button() {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  padding: get-padding('small') get-padding('medium');
+  padding: px-rem(14) px-rem(24);
   font-size: get-font-size('normal');
   font-weight: 400;
-  line-height: get-line-height('normal');
+  line-height: px-rem(24);
   text-decoration: none;
   appearance: none;
   cursor: pointer;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
   border-radius: get-border-radius('little');
   transition: get-transition('normal');
 
@@ -28,21 +29,6 @@
   opacity: 0.5;
 }
 
-@mixin button-icon() {
-  padding-top: px-rem(10);
-  padding-bottom: px-rem(10);
-}
-
-@mixin button-icon-small() {
-  padding-top: px-rem(6);
-  padding-bottom: px-rem(6);
-}
-
-@mixin button-icon-large() {
-  padding-top: px-rem(14);
-  padding-bottom: px-rem(14);
-}
-
 @mixin button-primary() {
   color: get-color('white');
   background-color: get-color('primary');
@@ -51,8 +37,12 @@
 
 @mixin button-primary-hover() {
   color: get-color('white');
-  background-color: get-color('secondary');
-  border-color: get-color('secondary');
+  background-color: get-color('primary-300');
+  border-color: get-color('primary-300');
+}
+
+@mixin button-primary-focus() {
+  outline: 4px solid rgba-color('primary', 50%);
 }
 
 @mixin button-primary-icon() {
@@ -73,6 +63,10 @@
   border-color: get-color('primary');
 }
 
+@mixin button-primary-outline-focus() {
+  outline: 4px solid rgba-color('primary', 50%);
+}
+
 @mixin button-primary-outline-icon() {
   &::after {
     background-color: get-color('primary');
@@ -87,8 +81,8 @@
 
 @mixin button-secondary() {
   color: get-color('white');
-  background-color: get-color('secondary');
-  border-color: get-color('secondary');
+  background-color: get-color('foreground');
+  border-color: get-color('foreground');
 }
 
 @mixin button-secondary-hover() {
@@ -97,74 +91,45 @@
   border-color: get-color('primary');
 }
 
+@mixin button-secondary-focus() {
+  outline: 4px solid rgba-color('primary', 50%);
+}
+
 @mixin button-secondary-outline() {
-  color: get-color('secondary');
+  color: get-color('foreground');
   background-color: transparent;
-  border-color: get-color('secondary');
+  border-color: get-color('foreground');
 }
 
 @mixin button-secondary-outline-hover() {
   color: get-color('white');
-  background-color: get-color('secondary');
-  border-color: get-color('secondary');
+  background-color: get-color('foreground');
+  border-color: get-color('foreground');
 }
 
-@mixin button-secondary-outline-icon() {
-  &::after {
-    background-color: get-color('secondary');
-  }
+@mixin button-secondary-outline-focus() {
+  outline: 4px solid rgba-color('foreground', 50%);
 }
 
-@mixin button-secondary-outline-icon-hover() {
-  &::after {
-    background-color: get-color('white');
-  }
-}
-
-@mixin button-tertiary() {
-  color: get-color('white');
-  background-color: get-color('black');
-  border-color: get-color('black');
-}
-
-@mixin button-tertiary-hover() {
-  color: get-color('white');
-  background-color: get-color('grey');
-  border-color: get-color('grey');
-}
-
-@mixin button-tertiary-outline() {
-  color: get-color('black');
-  background-color: transparent;
-  border-color: get-color('black');
-}
-
-@mixin button-tertiary-outline-hover() {
-  color: get-color('white');
-  background-color: get-color('black');
-  border-color: get-color('black');
-}
-
-@mixin button-tertiary-outline-icon() {
+@mixin button-secondary-outline-icon() {
   &::after {
-    background-color: get-color('black');
+    background-color: get-color('foreground');
   }
 }
 
-@mixin button-tertiary-outline-icon-hover() {
+@mixin button-secondary-outline-icon-hover() {
   &::after {
     background-color: get-color('white');
   }
 }
 
 @mixin button-small() {
-  padding: get-padding('little') get-padding('normal');
+  padding: px-rem(10) px-rem(20);
   font-size: get-font-size('small');
-  line-height: get-line-height('normal');
 }
 
 @mixin button-large() {
-  padding: get-padding('normal') get-padding('large');
+  padding: px-rem(16) px-rem(28);
 }
 
 @mixin button-loading($color: currentColor) {

package/lib/commands/create/creators/app/chisel-starter-theme/src/design/tools/_colors.scss

@@ -0,0 +1,5 @@
+@use 'theme' as *;
+
+@function rgba-color($color, $alpha: 50%) {
+  @return rgb(from get-color($color) r g b / $alpha);
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/design/tools/_icon.scss

@@ -22,6 +22,7 @@
     }
 
     mask-repeat: no-repeat;
+    mask-position: center;
     mask-size: contain;
   }
 

package/lib/commands/create/creators/app/chisel-starter-theme/src/design/tools/_index.scss

@@ -1,5 +1,6 @@
 @forward 'breakpoints';
 @forward 'buttons';
+@forward 'colors';
 @forward 'icon';
 @forward 'link';
 @forward 'media';

package/lib/commands/create/creators/app/chisel-starter-theme/src/design/tools/_link.scss

@@ -1,5 +1,6 @@
 @mixin link() {
   text-decoration: underline;
+  text-underline-offset: 4px;
 
   &:hover {
     text-decoration: none;

package/lib/commands/create/creators/app/chisel-starter-theme/src/scripts/admin/acf.js

@@ -34,8 +34,7 @@ class ACF {
   }
 
   megaMenuFields() {
-    jQuery(document).on('menu-item-added', (event) => {
-      console.log('menu-item-added', event);
+    jQuery(document).on('menu-item-added', () => {
       this.megaMenuData.submenuFields = document.querySelectorAll(
         this.megaMenuData.submenuFieldsSelector,
       );

package/lib/commands/create/creators/app/chisel-starter-theme/src/scripts/editor/blocks-mods.js

@@ -1,3 +1,4 @@
+import './mods/core';
 import './mods/core-button';
 import './mods/core-spacer';
 import './mods/blocks-alignment';

package/lib/commands/create/creators/app/chisel-starter-theme/src/scripts/editor/mods/core.js

@@ -0,0 +1,57 @@
+import { __ } from '@wordpress/i18n';
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { InspectorControls } from '@wordpress/blockEditor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+
+addFilter('blocks.registerBlockType', 'chisel/add-no-margin-attribute', (settings) => {
+  if (typeof settings.attributes !== 'undefined') {
+    settings.attributes = {
+      ...settings.attributes,
+      disableBottomMargin: {
+        type: 'boolean',
+        default: false,
+      },
+    };
+  }
+  return settings;
+});
+
+const addNoMarginToggle = createHigherOrderComponent((BlockEdit) => {
+  return (props) => {
+    const { attributes, setAttributes, isSelected } = props;
+    const { disableBottomMargin = false, className = '' } = attributes;
+
+    const onToggle = (checked) => {
+      let newClassName = className.replace(/\bu-no-margin-bottom\b/, '').trim();
+      if (checked) {
+        newClassName = `${newClassName} u-no-margin-bottom`.trim();
+      }
+      setAttributes({
+        disableBottomMargin: checked,
+        className: newClassName,
+      });
+    };
+
+    return (
+      <Fragment>
+        <BlockEdit {...props} />
+        {isSelected && (
+          <InspectorControls>
+            <PanelBody title={__('Spacing', 'chisel')}>
+              <ToggleControl
+                label={__('Disable bottom spacing', 'chisel')}
+                help={__('Removes the bottom spacing', 'chisel')}
+                checked={!!disableBottomMargin}
+                onChange={onToggle}
+              />
+            </PanelBody>
+          </InspectorControls>
+        )}
+      </Fragment>
+    );
+  };
+}, 'addNoMarginToggle');
+
+addFilter('editor.BlockEdit', 'chisel/add-no-margin-toggle', addNoMarginToggle);

package/lib/commands/create/creators/app/chisel-starter-theme/src/scripts/modules/utils.js

@@ -6,11 +6,21 @@ class Utils {
       ajax: { url, nonce },
     } = chiselScripts;
 
-    const formData = new FormData();
-
-    Object.entries(ajaxData).forEach(([key, value]) => {
-      formData.append(key, value);
-    });
+    let formData;
+
+    if (ajaxData instanceof FormData) {
+      formData = ajaxData;
+    } else {
+      formData = new FormData();
+
+      Object.entries(ajaxData).forEach(([key, value]) => {
+        if (typeof value === 'object' && value !== null && !['file', 'files'].includes(key)) {
+          formData.append(key, JSON.stringify(value));
+        } else {
+          formData.append(key, value);
+        }
+      });
+    }
 
     const params = {
       method: 'POST',

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-button.scss

@@ -25,6 +25,10 @@ $_static-icons: settings.$static-icons;
     &:focus {
       @include button-primary-hover;
     }
+
+    &:focus {
+      @include button-primary-focus;
+    }
   }
 
   &.is-style-primary-outline .wp-block-button__link {
@@ -36,6 +40,10 @@ $_static-icons: settings.$static-icons;
       @include button-primary-outline-hover;
       @include button-primary-outline-icon-hover;
     }
+
+    &:focus {
+      @include button-primary-outline-focus;
+    }
   }
 
   &.is-style-secondary .wp-block-button__link {
@@ -45,6 +53,10 @@ $_static-icons: settings.$static-icons;
     &:focus {
       @include button-secondary-hover;
     }
+
+    &:focus {
+      @include button-secondary-focus;
+    }
   }
 
   &.is-style-secondary-outline .wp-block-button__link {
@@ -56,25 +68,9 @@ $_static-icons: settings.$static-icons;
       @include button-secondary-outline-hover;
       @include button-secondary-outline-icon-hover;
     }
-  }
-
-  &.is-style-tertiary .wp-block-button__link {
-    @include button-tertiary;
 
-    &:hover,
     &:focus {
-      @include button-tertiary-hover;
-    }
-  }
-
-  &.is-style-tertiary-outline .wp-block-button__link {
-    @include button-tertiary-outline;
-    @include button-tertiary-outline-icon;
-
-    &:hover,
-    &:focus {
-      @include button-tertiary-outline-hover;
-      @include button-tertiary-outline-icon-hover;
+      @include button-secondary-outline-focus;
     }
   }
 
@@ -97,16 +93,6 @@ $_static-icons: settings.$static-icons;
 
   &.has-icon {
     .wp-block-button__link {
-      @include button-icon;
-
-      &.is-size-small .wp-block-button__link {
-        @include button-icon-small;
-      }
-
-      &.is-size-large .wp-block-button__link {
-        @include button-icon-large;
-      }
-
       &::after,
       &::before {
         display: block;

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-group.scss

@@ -0,0 +1,14 @@
+@use '~design' as *;
+
+.wp-block-group-is-layout-constrained {
+  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
+    max-width: get-layout-size('content');
+    margin-left: auto !important;
+    margin-right: auto !important;
+    padding-inline: get-padding('normal');
+  }
+}
+
+:where(.wp-block-group.has-background.alignfull) {
+  padding: get-padding('small') 0;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-latest-posts.scss

@@ -9,7 +9,7 @@
     padding: get-padding('normal');
     overflow: hidden;
     background-color: get-color('white');
-    border: 1px solid get-color('light-grey');
+    border: 1px solid get-color('grey-100');
     border-radius: get-border-radius('small');
   }
 

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-media-text.scss

@@ -15,9 +15,15 @@
     }
   }
 
+  &.has-background {
+    > .wp-block-media-text__content {
+      padding: 0 get-padding('big');
+    }
+  }
+
   @include bp-down(medium) {
     &.is-stacked-on-mobile {
-      grid-template-columns: 100%;
+      grid-template-columns: 100% !important;
 
       > .wp-block-media-text__media {
         grid-row: 1;

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-query.scss

@@ -40,7 +40,7 @@
     text-decoration: none;
 
     &.current {
-      color: get-color('secondary');
+      color: get-color('foreground');
       text-decoration: underline;
     }
   }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core.scss

@@ -53,6 +53,10 @@
   &--separator {
     margin: 0 auto get-margin('medium');
   }
+
+  .alignwide {
+    max-width: get-layout-size('wide');
+  }
 }
 
 .wp-element-caption {

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_badge.scss

@@ -8,7 +8,7 @@
   color: get-color('white');
   text-decoration: none;
   text-transform: uppercase;
-  background-color: get-color('secondary');
+  background-color: get-color('foreground');
   border-radius: get-border-radius('little');
   transition: get-transition('normal');
 
@@ -18,7 +18,7 @@
   }
 
   .is-disabled & {
-    color: get-color('grey');
-    background-color: get-color('light-grey');
+    color: get-color('grey-900');
+    background-color: get-color('grey-100');
   }
 }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_buttons.scss

@@ -25,6 +25,10 @@ $_static-icons: settings.$static-icons;
   @include button-primary-hover;
 }
 
+.c-btn--primary:focus {
+  @include button-primary-focus;
+}
+
 .c-btn--primary-outline {
   @include button-primary-outline;
   @include button-primary-outline-icon;
@@ -36,6 +40,10 @@ $_static-icons: settings.$static-icons;
   @include button-primary-outline-icon-hover;
 }
 
+.c-btn--primary-outline:focus {
+  @include button-primary-outline-focus;
+}
+
 .c-btn--secondary {
   @include button-secondary;
 }
@@ -45,6 +53,10 @@ $_static-icons: settings.$static-icons;
   @include button-secondary-hover;
 }
 
+.c-btn--secondary:focus {
+  @include button-secondary-focus;
+}
+
 .c-btn--secondary-outline {
   @include button-secondary-outline;
   @include button-secondary-outline-icon;
@@ -56,24 +68,8 @@ $_static-icons: settings.$static-icons;
   @include button-secondary-outline-icon-hover;
 }
 
-.c-btn--tertiary {
-  @include button-tertiary;
-}
-
-.c-btn--tertiary:hover,
-.c-btn--tertiary:focus {
-  @include button-tertiary-hover;
-}
-
-.c-btn--tertiary-outline {
-  @include button-tertiary-outline;
-  @include button-tertiary-outline-icon;
-}
-
-.c-btn--tertiary-outline:hover,
-.c-btn--tertiary-outline:focus {
-  @include button-tertiary-outline-hover;
-  @include button-tertiary-outline-icon-hover;
+.c-btn--secondary-outline:focus {
+  @include button-secondary-outline-focus;
 }
 
 .c-btn--small {
@@ -94,16 +90,6 @@ $_static-icons: settings.$static-icons;
 }
 
 .c-btn.has-icon {
-  @include button-icon;
-
-  &.c-btn--small {
-    @include button-icon-small;
-  }
-
-  &.c-btn--large {
-    @include button-icon-large;
-  }
-
   &::after,
   &::before {
     display: block;

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_footer.scss

@@ -1,7 +1,7 @@
 @use '~design' as *;
 
 .c-footer {
-  background-color: get-color('light-grey');
+  background-color: get-color('grey-100');
 }
 
 .c-footer__inner {
@@ -16,3 +16,8 @@
     }
   }
 }
+
+.c-footer__copyright {
+  padding: 0 0 get-padding('normal') 0;
+  font-size: get-font-size('small');
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_header.scss

@@ -1,7 +1,7 @@
 @use '~design' as *;
 
 .c-header {
-  background-color: get-color('light-grey');
+  background-color: get-color('grey-100');
 
   .c-logo {
     max-width: px-rem(200);

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_main-nav.scss

@@ -108,11 +108,11 @@
   &:focus,
   .current-menu-item > &,
   .current-menu-parent > & {
-    color: get-color('secondary');
+    color: get-color('foreground');
     text-decoration: none;
 
     .c-main-nav__caret::before {
-      border-top-color: get-color('secondary');
+      border-top-color: get-color('foreground');
     }
   }
 }
@@ -210,15 +210,15 @@
   &:hover,
   &:focus,
   .current-menu-item > & {
-    color: get-color('secondary');
+    color: get-color('foreground');
     text-decoration: none;
 
     @include bp(large) {
-      background-color: get-color('light-grey');
+      background-color: get-color('grey-100');
     }
 
     .c-main-nav__caret::before {
-      border-top-color: get-color('secondary');
+      border-top-color: get-color('foreground');
     }
   }
 }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_pagination.scss

@@ -26,7 +26,7 @@
       text-decoration: none;
 
       &.current {
-        color: get-color('secondary');
+        color: get-color('foreground');
         text-decoration: underline;
       }
     }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_post-card.scss

@@ -7,6 +7,6 @@
   width: 100%;
   padding: get-padding('normal');
   background-color: get-color('white');
-  border: 1px solid get-color('light-grey');
+  border: 1px solid get-color('grey-100');
   border-radius: get-border-radius('small');
 }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_post.scss

@@ -6,7 +6,9 @@
 }
 
 .c-post__inner {
-  margin-bottom: get-margin('medium');
+  .single & {
+    margin-bottom: get-margin('medium');
+  }
 }
 
 .c-post__meta {

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_posts-items.scss

@@ -11,7 +11,7 @@
   width: 100%;
   padding: get-padding('normal');
   background-color: get-color('white');
-  border: 1px solid get-color('light-grey');
+  border: 1px solid get-color('grey-100');
   border-radius: get-border-radius('small');
 
   @include bp(msmall) {

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_sidebar.scss

@@ -15,6 +15,6 @@
 .c-sidebar__inner {
   padding: get-padding('normal');
   background-color: get-color('white');
-  border: 1px solid get-color('light-grey');
+  border: 1px solid get-color('grey-100');
   border-radius: get-border-radius('small');
 }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_slider.scss

@@ -51,7 +51,7 @@
       background-color: rgba(255, 255, 255, 100%);
 
       &::after {
-        color: get-color('secondary');
+        color: get-color('foreground');
       }
     }
   }
@@ -100,7 +100,7 @@
 
 .swiper-pagination-bullet-active-main,
 .swiper-pagination:not(.swiper-pagination-dots-dynamic) .swiper-pagination-bullet-active {
-  background-color: get-color('secondary');
+  background-color: get-color('foreground');
   opacity: 1;
 }
 
@@ -120,7 +120,7 @@
     }
 
     &.swiper-slide-thumb-active img {
-      border: 2px solid get-color('secondary');
+      border: 2px solid get-color('foreground');
       opacity: 1;
     }
   }