generator-chisel 2.3.2 → 2.4.0

package/lib/commands/create/creators/app/chisel-starter-theme/functions.php

@@ -6,24 +6,40 @@ require_once get_template_directory() . '/vendor/autoload.php';
 
 spl_autoload_register(
 	function ( $class_name ) {
-		$base_directory = get_template_directory() . '/inc/';
+		$base_directories = array(
+			get_template_directory() . '/core/',
+			get_template_directory() . '/custom/app/',
+		);
 
 		$namespace_prefix_length = strlen( CHISEL_NAMESPACE );
 
 		if ( strncmp( CHISEL_NAMESPACE, $class_name, $namespace_prefix_length ) !== 0 ) {
-			return;
+				return;
 		}
 
 		$relative_class_name = substr( $class_name, $namespace_prefix_length );
+		$relative_path       = str_replace( '\\', '/', $relative_class_name ) . '.php';
 
-		$class_filename = $base_directory . str_replace( '\\', '/', $relative_class_name ) . '.php';
+		foreach ( $base_directories as $base_directory ) {
+			if ( strpos( $base_directory, 'custom/app' ) !== false ) {
+				$relative_path = preg_replace( '/\/Custom\//', '/', $relative_path, 1 );
+			}
 
-		if ( file_exists( $class_filename ) ) {
-			require $class_filename;
+			$class_filename = $base_directory . $relative_path;
+
+			if ( file_exists( $class_filename ) ) {
+				require $class_filename;
+				return;
+			}
 		}
 	}
 );
 
+// Icons module. Also requires packacke.json and scss configuration.
+if ( ! defined( 'CHISEL_USE_ICONS_MODULE' ) ) {
+	define( 'CHISEL_USE_ICONS_MODULE', false );
+}
+
 Timber\Timber::init();
 
 \Chisel\Controllers\AjaxController::get_instance();
@@ -31,7 +47,6 @@ Timber\Timber::init();
 \Chisel\WP\Acf::get_instance();
 \Chisel\WP\AcfBlocks::get_instance();
 \Chisel\WP\Assets::get_instance();
-\Chisel\WP\Cache::get_instance();
 \Chisel\WP\Comments::get_instance();
 \Chisel\WP\Site::get_instance();
 \Chisel\WP\Sidebars::get_instance();
@@ -39,6 +54,13 @@ Timber\Timber::init();
 \Chisel\WP\CustomPostTypes::get_instance();
 \Chisel\WP\CustomTaxonomies::get_instance();
 \Chisel\WP\Twig::get_instance();
-\Chisel\Plugins\GravityForms::get_instance();
-\Chisel\Plugins\Woocommerce::get_instance();
-\Chisel\Plugins\Yoast::get_instance();
+\Chisel\Plugins\GravityForms\GravityForms::get_instance();
+\Chisel\Plugins\Woocommerce\Woocommerce::get_instance();
+\Chisel\Plugins\Yoast\Yoast::get_instance();
+\Chisel\Timber\Cache::get_instance();
+
+$custom_functions_php = get_template_directory() . '/custom/functions.php';
+
+if ( is_file( $custom_functions_php ) ) {
+	require_once $custom_functions_php;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/package.chisel-tpl.json

@@ -10,28 +10,33 @@
     "devcontainer:up": "npm run --silent devcontainer -- up --workspace-folder ../../..",
     "devcontainer:enter": "/usr/bin/env bash ../../../.devcontainer/exec bash",
     "devcontainer:start": "/usr/bin/env bash ../../../.devcontainer/exec npm run --silent start",
-    "//icons-module": "Add --use-icons-module to start and build-scripts jobs to enable icons module. Also requires scss and wp-config configuration.",
+    "//icons-module": "Add --use-icons-module to start and build-scripts jobs to enable icons module. Also requires scss and functions.php configuration.",
     "start": "chisel-scripts start --experimental-modules",
     "dev": "npm run --silent start",
     "build-scripts": "chisel-scripts build --experimental-modules",
-    "build": "npm run build-scripts && npm run lint && npm run phpcs && npm run twigcs",
+    "build": "npm run build-scripts && npm run lint && npm run phpcs && npm run twigcs && npm run check-update",
     "add-page": "chisel-scripts add-page",
     "create-block": "chisel-scripts create-block --category=chisel-blocks --namespace=chisel",
     "create-dynamic-block": "npm run create-block --variant=dynamic",
     "wp": "chisel-scripts wp",
     "composer": "chisel-scripts composer",
     "wp-config": "chisel-scripts wp-config",
-    "phpcs": "cross-env vendor/bin/phpcs --extensions=php",
-    "twigcs": "cross-env vendor/bin/twigcs --config=twig_cs.php"
+    "phpcs": "cross-env vendor/bin/phpcs --extensions=php --exclude=Generic.PHP.Syntax",
+    "twigcs": "cross-env vendor/bin/twigcs --config=twig_cs.php",
+    "check-update": "chisel-scripts check-chisel-update",
+    "update-chisel": "chisel-scripts chisel-update",
+    "update": "npm run check-update && npm run update-chisel",
+    "prepare": "chisel-scripts husky-init || node -e \"\""
   },
   "dependencies": {
     "swiper": "^11.1.10",
     "@wordpress/interactivity": "^6.36.0"
   },
   "devDependencies": {
-    "@wordpress/scripts": "^31.1.0",
+    "@wordpress/scripts": "^31.2.0",
     "chisel-scripts": "*",
-    "cross-env": "^7.0.3"
+    "cross-env": "^7.0.3",
+    "husky": "^9.1.7"
   },
   "overrides": {
     "@wordpress/scripts": {

package/lib/commands/create/creators/app/chisel-starter-theme/phpcs.xml

@@ -63,4 +63,14 @@
     <severity>0</severity>
   </rule>
 
+  <!-- Disable unused function parameter warning - WordPress hooks often require specific signatures -->
+  <rule ref="Generic.CodeAnalysis.UnusedFunctionParameter">
+    <severity>0</severity>
+  </rule>
+
+  <!-- Disable Generic.PHP.Syntax - causes internal errors with PHP 8.2+ due to null to trim() deprecation -->
+  <rule ref="Generic.PHP.Syntax">
+    <severity>0</severity>
+  </rule>
+
 </ruleset>

package/lib/commands/create/creators/app/chisel-starter-theme/src/blocks/accordion/block.json

@@ -2,7 +2,7 @@
   "$schema": "https://schemas.wp.org/trunk/block.json",
   "apiVersion": 3,
   "name": "chisel/accordion",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "title": "Accordion",
   "category": "chisel-blocks",
   "icon": "editor-justify",

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

@@ -33,9 +33,9 @@ $gaps: (
 /*
  * Icons
  */
-$static-icons: ('minus', 'plus', 'arrow-right', 'arrow-left');
+$static-icons: ('minus', 'plus', 'arrow-right', 'arrow-left', 'search');
 $animated-icons: ('loader');
 $multicolor-icons: ();
 
-// Icons module. Also requires packacke.json and wp-config configuration.
+// Icons module. Also requires packacke.json and functions.php configuration.
 $use-icons-module: false;

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

@@ -1,5 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
+@use 'sass:list'; 
 @use '../settings';
 
 $_breakpoints: settings.$breakpoints;

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

@@ -5,7 +5,11 @@ 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) => {
+addFilter('blocks.registerBlockType', 'chisel/add-no-margin-attribute', (settings, name) => {
+  if (!name.includes('core/') && !name.includes('chisel/')) {
+    return settings;
+  }
+
   if (typeof settings.attributes !== 'undefined') {
     settings.attributes = {
       ...settings.attributes,
@@ -20,7 +24,12 @@ addFilter('blocks.registerBlockType', 'chisel/add-no-margin-attribute', (setting
 
 const addNoMarginToggle = createHigherOrderComponent((BlockEdit) => {
   return (props) => {
-    const { attributes, setAttributes, isSelected } = props;
+    const { attributes, setAttributes, isSelected, name } = props;
+
+    if (!name.includes('core/') && !name.includes('chisel/')) {
+      return <BlockEdit {...props} />;
+    }
+
     const { disableBottomMargin = false, className = '' } = attributes;
 
     const onToggle = (checked) => {

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

@@ -1,4 +1,16 @@
 class MainNav {
+  /**
+   * Delay before adding the 'open' class after 'active'.
+   * This small delay ensures CSS transitions trigger properly.
+   */
+  static ANIMATION_START_DELAY = 10;
+
+  /**
+   * Duration to wait before cleanup after closing.
+   * Should match the CSS transition duration for the nav items.
+   */
+  static TRANSITION_DURATION = 300;
+
   constructor() {
     this.initSelectors();
     this.initElements();
@@ -71,7 +83,7 @@ class MainNav {
 
       setTimeout(() => {
         this.elements.navItems.classList.add(this.classnames.open);
-      }, 10);
+      }, MainNav.ANIMATION_START_DELAY);
 
       const coords = this.elements.navToggle.getBoundingClientRect();
 
@@ -91,7 +103,7 @@ class MainNav {
           right: 'auto',
           position: 'relative',
         });
-      }, 300);
+      }, MainNav.TRANSITION_DURATION);
     }
   }
 }

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

@@ -20,6 +20,8 @@ class Slider {
 
     const swiperInstance = new this.swiper(this.elements.slider, this.params);
     this.swipers.push(swiperInstance);
+
+    this.initAccessibility();
   }
 
   /*
@@ -369,6 +371,40 @@ class Slider {
 
     this.params.thumbs = moduleParams;
   }
+
+  /**
+   * Initialize accessibility features for screen readers.
+   * Creates an aria-live region that announces slide changes.
+   */
+  initAccessibility() {
+    if (this.swipers.length === 0) {
+      return;
+    }
+
+    const mainSwiper = this.swipers[0];
+    this.elements.liveRegion = this.createLiveRegion();
+
+    mainSwiper.on('slideChange', () => {
+      const currentSlide = mainSwiper.realIndex + 1;
+      const totalSlides = mainSwiper.slides.length;
+      this.elements.liveRegion.textContent = __('Slide %1$d of %2$d', 'chisel')
+        .replace('%1$d', currentSlide)
+        .replace('%2$d', totalSlides);
+    });
+  }
+
+  /**
+   * Create an aria-live region for announcing slide changes.
+   */
+  createLiveRegion() {
+    const liveRegion = document.createElement('div');
+    liveRegion.setAttribute('aria-live', 'polite');
+    liveRegion.setAttribute('aria-atomic', 'true');
+    liveRegion.className = 'u-sr-only';
+    this.elements.sliderContainer.appendChild(liveRegion);
+
+    return liveRegion;
+  }
 }
 
 export default () => {
@@ -392,9 +428,14 @@ export default () => {
     };
   };
 
-  loadModules().then(({ swiper, swiperModules }) => {
-    sliders.forEach((slider) => {
-      new Slider(slider, swiper, swiperModules);
+  loadModules()
+    .then(({ swiper, swiperModules }) => {
+      sliders.forEach((slider) => {
+        new Slider(slider, swiper, swiperModules);
+      });
+    })
+    .catch((error) => {
+      // eslint-disable-next-line no-console
+      console.error('Failed to load Swiper modules:', error);
     });
-  });
 };

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

@@ -81,7 +81,8 @@ $_static-icons: settings.$static-icons;
 }
 
 @each $icon in $_static-icons {
-  .c-btn.has-icon-#{$icon} {
+  .c-btn.has-icon-#{$icon},
+  span.has-icon-#{$icon} {
     &::after,
     &::before {
       @include icon-svg($icon);
@@ -89,7 +90,8 @@ $_static-icons: settings.$static-icons;
   }
 }
 
-.c-btn.has-icon {
+.c-btn.has-icon,
+span.has-icon {
   &::after,
   &::before {
     display: block;
@@ -115,4 +117,11 @@ $_static-icons: settings.$static-icons;
       display: none;
     }
   }
+
+  &.has-icon-only {
+    &::after,
+    &::before {
+      margin: 0;
+    }
+  }
 }

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

@@ -0,0 +1,17 @@
+@use '~design' as *;
+
+.c-search-form {
+  display: flex;
+  gap: get-gap('small');
+  align-items: center;
+  margin-bottom: get-margin('large');
+}
+
+.c-search-form__btn,
+.c-search-form__field {
+  margin: 0 !important;
+}
+
+.c-search-form__btn {
+  flex-shrink: 0;
+}

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

@@ -114,13 +114,13 @@
     img {
       @include object-fit-cover;
 
-      border: 2px solid get-color('primary');
-      opacity: 0.7;
+      border: 2px solid get-color('foreground');
+      opacity: 0.75;
       transition: get-transition('normal');
     }
 
     &.swiper-slide-thumb-active img {
-      border: 2px solid get-color('foreground');
+      border: 2px solid get-color('primary');
       opacity: 1;
     }
   }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-base.scss

@@ -0,0 +1,117 @@
+@use '~design' as *;
+@use 'mnt-settings' as *;
+
+// Main Nav Toggle - Hamburger Menu Component
+// Based on Hamburgers by Jonathan Suh (https://github.com/jonsuh/hamburgers)
+
+// This component has been split into modular subfiles for better organization.
+// Enable additional animation effects by uncommenting the @use statements below.
+
+// Available effects:
+// - slider (default) - Sliding bars animation
+// - squeeze - Squeeze bars together
+// - spin - Spinning animation
+// - elastic - Elastic bounce animation
+// - emphatic - Dramatic expansion
+// - collapse - Collapsing bars
+// - vortex - Spinning vortex effect
+// - stand - Stand up animation
+// - spring - Spring bounce effect
+// - 3d - 3D rotation effects (3dx, 3dy, 3dxy)
+
+// Required - Base styles and settings
+// 'main-nav-toggle/base';
+
+// Default animation effect
+// 'main-nav-toggle/slider';
+
+// To enable another effect rename the files with the desired effect by removing .disabled from the file name.
+// For example: _mnt-squeeze.scss.disabled -> _mnt-squeeze.scss
+
+// ==================================================
+// Hamburger Base Styles
+// ==================================================
+
+.c-main-nav__toggle {
+  right: px-rem(16);
+  display: inline-block;
+  display: block;
+  padding: $hamburger-padding-y $hamburger-padding-x;
+  margin: 0;
+  overflow: visible;
+
+  // Normalize (<button>)
+  font: inherit;
+  line-height: 1;
+  color: inherit;
+  text-transform: none;
+  appearance: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  transition-timing-function: linear;
+  transition-duration: 0.15s;
+  transition-property: opacity;
+
+  @include bp(large) {
+    display: none;
+  }
+
+  &:hover {
+    opacity: $hamburger-hover-opacity;
+  }
+
+  &.is-active {
+    z-index: 999;
+
+    &:hover {
+      opacity: $hamburger-active-hover-opacity;
+    }
+
+    .c-main-nav__toggle-inner,
+    .c-main-nav__toggle-inner::before,
+    .c-main-nav__toggle-inner::after {
+      background-color: $hamburger-active-layer-color;
+    }
+  }
+}
+
+.c-main-nav__toggle-box {
+  position: relative;
+  display: inline-block;
+  width: $hamburger-layer-width;
+  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+}
+
+.c-main-nav__toggle-inner {
+  top: 50%;
+  display: block;
+  margin-top: calc($hamburger-layer-height / -2);
+
+  &,
+  &::before,
+  &::after {
+    position: absolute;
+    width: $hamburger-layer-width;
+    height: $hamburger-layer-height;
+    background-color: $hamburger-layer-color;
+    border-radius: $hamburger-layer-border-radius;
+    transition-timing-function: ease;
+    transition-duration: 0.15s;
+    transition-property: transform;
+  }
+
+  &::before,
+  &::after {
+    display: block;
+    content: '';
+  }
+
+  &::before {
+    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+
+  &::after {
+    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-collapse.scss.disabled

@@ -0,0 +1,66 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Collapse effect
+// ==================================================
+.c-main-nav__toggle--collapse,
+.c-main-nav__toggle--collapse-r {
+  .c-main-nav__toggle-inner {
+    top: auto;
+    bottom: 0;
+    transition-delay: 0.13s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    transition-duration: 0.13s;
+
+    &::after {
+      top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
+      transition:
+        top 0.2s 0.2s cubic-bezier(0.3333, 0.6667, 0.6667, 1),
+        opacity 0.1s linear;
+    }
+
+    &::before {
+      transition:
+        top 0.12s 0.2s cubic-bezier(0.3333, 0.6667, 0.6667, 1),
+        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transition-delay: 0.22s;
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0)
+        rotate(-45deg);
+
+      &::after {
+        top: 0;
+        opacity: 0;
+        transition:
+          top 0.2s cubic-bezier(0.3333, 0, 0.6667, 0.3333),
+          opacity 0.1s 0.22s linear;
+      }
+
+      &::before {
+        top: 0;
+        transition:
+          top 0.1s 0.16s cubic-bezier(0.3333, 0, 0.6667, 0.3333),
+          transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--collapse-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0)
+        rotate(45deg);
+
+      &::before {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-elastic.scss.disabled

@@ -0,0 +1,56 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Elastic effect
+// ==================================================
+.c-main-nav__toggle--elastic,
+.c-main-nav__toggle--elastic-r {
+  .c-main-nav__toggle-inner {
+    top: calc($hamburger-layer-height / 2);
+    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    transition-duration: 0.275s;
+
+    &::before {
+      top: $hamburger-layer-height + $hamburger-layer-spacing;
+      transition: opacity 0.125s 0.275s ease;
+    }
+
+    &::after {
+      top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
+      transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+      transition-delay: 0.075s;
+      transform: translate3d(0, $y-offset, 0) rotate(135deg);
+
+      &::before {
+        opacity: 0;
+        transition-delay: 0s;
+      }
+
+      &::after {
+        transition-delay: 0.075s;
+        transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--elastic-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+      transform: translate3d(0, $y-offset, 0) rotate(-135deg);
+
+      &::after {
+        transform: translate3d(0, $y-offset * -2, 0) rotate(270deg);
+      }
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-emphatic.scss.disabled

@@ -0,0 +1,59 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Emphatic effect
+// ==================================================
+.c-main-nav__toggle--emphatic {
+  overflow: hidden;
+
+  .c-main-nav__toggle-inner {
+    transition: background-color 0.125s 0.175s ease-in;
+
+    &::before {
+      left: 0;
+      transition:
+        transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
+        top 0.05s 0.125s linear,
+        left 0.125s 0.175s ease-in;
+    }
+
+    &::after {
+      top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
+      right: 0;
+      transition:
+        transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
+        top 0.05s 0.125s linear,
+        right 0.125s 0.175s ease-in;
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      background-color: transparent !important;
+      transition-delay: 0s;
+      transition-timing-function: ease-out;
+
+      &::before {
+        top: $hamburger-layer-width * -2;
+        left: $hamburger-layer-width * -2;
+        transition:
+          left 0.125s ease-out,
+          top 0.05s 0.125s linear,
+          transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
+        transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * 2, 0)
+          rotate(45deg);
+      }
+
+      &::after {
+        top: $hamburger-layer-width * -2;
+        right: $hamburger-layer-width * -2;
+        transition:
+          right 0.125s ease-out,
+          top 0.05s 0.125s linear,
+          transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
+        transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * 2, 0)
+          rotate(-45deg);
+      }
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-settings.scss

@@ -0,0 +1,22 @@
+/*!
+ * Hamburgers
+ * @description Tasty CSS-animated hamburgers
+ * @author Jonathan Suh @jonsuh
+ * @site https://jonsuh.com/hamburgers
+ * @link https://github.com/jonsuh/hamburgers
+ */
+
+@use '~design' as *;
+
+// Settings
+// ==================================================
+$hamburger-padding-x: get-padding('normal') !default;
+$hamburger-padding-y: get-padding('normal') !default;
+$hamburger-layer-width: px-rem(36) !default;
+$hamburger-layer-height: px-rem(4) !default;
+$hamburger-layer-spacing: px-rem(6) !default;
+$hamburger-layer-color: get-color('primary') !default;
+$hamburger-layer-border-radius: get-border-radius('little') !default;
+$hamburger-hover-opacity: 0.7 !default;
+$hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;