generator-chisel 2.0.0-alpha.9 → 2.0.0

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

@@ -5,10 +5,9 @@
  * @package Chisel
  */
 
-use Chisel\ChiselCache;
+use Chisel\Helper\CacheHelpers;
 use Timber\Timber;
 
-$context          = Timber::context();
-$context['posts'] = Timber::get_posts();
+$context = Timber::context();
 
-Timber::render( array( 'search.twig', 'archive.twig', 'index.twig' ), $context, ChiselCache::expiry() );
+Timber::render( array( 'search.twig', 'archive.twig', 'index.twig' ), $context, CacheHelpers::expiry() );

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

@@ -5,7 +5,7 @@
  * @package Chisel
  */
 
-use Chisel\ChiselCache;
+use Chisel\Helper\CacheHelpers;
 use Timber\Timber;
 
 $context = Timber::context();
@@ -13,7 +13,7 @@ $context = Timber::context();
 $timber_post = Timber::get_post();
 
 if ( post_password_required( $timber_post->ID ) ) {
-	Timber::render( 'single-password.twig', $context, ChiselCache::expiry() );
+	Timber::render( 'single-password.twig', $context, CacheHelpers::expiry() );
 } else {
-	Timber::render( array( 'single-' . $timber_post->ID . '.twig', 'single-' . $timber_post->post_type . '.twig', 'single.twig' ), $context, ChiselCache::expiry() );
+	Timber::render( array( 'single-' . $timber_post->ID . '.twig', 'single-' . $timber_post->post_type . '.twig', 'single.twig' ), $context, CacheHelpers::expiry() );
 }

package/lib/commands/create/creators/app/chisel-starter-theme/src/blocks/accordion/accordion-item.js

@@ -66,8 +66,8 @@ registerBlockType('chisel/accordion-item', {
           <RichText.Content tagName={titleTag} className="b-accordion__item-title" value={title} />
 
           <span className="b-accordion__icons" aria-hidden="true">
-            <i className="c-icon c-icon--plus"></i>
-            <i className="c-icon c-icon--minus"></i>
+            <i className="o-icon is-css o-icon--icon-plus"></i>
+            <i className="o-icon is-css o-icon--icon-minus"></i>
           </span>
         </summary>
         <div className="b-accordion__item-content js-accordion-content">

package/lib/commands/create/creators/app/chisel-starter-theme/src/blocks/accordion/style.scss

@@ -57,24 +57,31 @@
   height: px-rem(24);
   margin-left: get-margin('small');
 
-  .c-icon {
+  .o-icon {
+    width: 100%;
+    height: 100%;
     color: get-color('black');
+
+    &::before {
+      width: 100%;
+      height: 100%;
+    }
   }
 
-  .c-icon--plus {
+  .o-icon--icon-plus {
     display: block;
   }
 
-  .c-icon--minus {
+  .o-icon--icon-minus {
     display: none;
   }
 
   .b-accordion__item[open] & {
-    .c-icon--plus {
+    .o-icon--icon-plus {
       display: none;
     }
 
-    .c-icon--minus {
+    .o-icon--icon-minus {
       display: block;
     }
   }

package/lib/commands/create/creators/app/chisel-starter-theme/src/blocks-acf/slider/acf-json/group_66462c70b851f.json

@@ -2,121 +2,123 @@
   "key": "group_66462c70b851f",
   "title": "ACF Block: Slider",
   "fields": [
-    {
-      "key": "field_66d5a59049a33",
-      "label": "Slides",
-      "name": "",
-      "aria-label": "",
-      "type": "tab",
-      "instructions": "",
-      "required": 0,
-      "conditional_logic": 0,
-      "wrapper": {
-        "width": "",
-        "class": "",
-        "id": ""
-      },
-      "placement": "top",
-      "endpoint": 0,
-      "selected": 0
-    },
-    {
-      "key": "field_66d59458044f8",
-      "label": "Slides",
-      "name": "acf_block_slider_slides",
-      "aria-label": "",
-      "type": "repeater",
-      "instructions": "",
-      "required": 0,
-      "conditional_logic": 0,
-      "wrapper": {
-        "width": "",
-        "class": "",
-        "id": ""
+      {
+          "key": "field_66d5a59049a33",
+          "label": "Slides",
+          "name": "",
+          "aria-label": "",
+          "type": "accordion",
+          "instructions": "",
+          "required": 0,
+          "conditional_logic": 0,
+          "wrapper": {
+              "width": "",
+              "class": "",
+              "id": ""
+          },
+          "open": 1,
+          "multi_expand": 1,
+          "endpoint": 0
       },
-      "layout": "table",
-      "pagination": 0,
-      "min": 0,
-      "max": 0,
-      "collapsed": "",
-      "button_label": "Add a new slide",
-      "rows_per_page": 20,
-      "sub_fields": [
-        {
-          "key": "field_66d5946c044f9",
-          "label": "Image",
-          "name": "acf_bs_image",
+      {
+          "key": "field_66d59458044f8",
+          "label": "Slides",
+          "name": "acf_block_slider_slides",
           "aria-label": "",
-          "type": "image",
+          "type": "repeater",
           "instructions": "",
           "required": 0,
           "conditional_logic": 0,
           "wrapper": {
-            "width": "",
-            "class": "",
-            "id": ""
+              "width": "",
+              "class": "",
+              "id": ""
           },
-          "return_format": "id",
-          "library": "all",
-          "min_width": "",
-          "min_height": "",
-          "min_size": "",
-          "max_width": "",
-          "max_height": "",
-          "max_size": "",
-          "mime_types": "",
-          "preview_size": "medium",
-          "parent_repeater": "field_66d59458044f8"
-        }
-      ]
-    },
-    {
-      "key": "field_66d5a7c561dab",
-      "label": "Settings",
-      "name": "",
-      "aria-label": "",
-      "type": "tab",
-      "instructions": "",
-      "required": 0,
-      "conditional_logic": 0,
-      "wrapper": {
-        "width": "",
-        "class": "",
-        "id": ""
+          "layout": "block",
+          "pagination": 0,
+          "min": 0,
+          "max": 0,
+          "collapsed": "",
+          "button_label": "Add a new slide",
+          "rows_per_page": 20,
+          "sub_fields": [
+              {
+                  "key": "field_66d5946c044f9",
+                  "label": "Image",
+                  "name": "acf_bs_image",
+                  "aria-label": "",
+                  "type": "image",
+                  "instructions": "",
+                  "required": 0,
+                  "conditional_logic": 0,
+                  "wrapper": {
+                      "width": "",
+                      "class": "",
+                      "id": ""
+                  },
+                  "return_format": "id",
+                  "library": "all",
+                  "min_width": "",
+                  "min_height": "",
+                  "min_size": "",
+                  "max_width": "",
+                  "max_height": "",
+                  "max_size": "",
+                  "mime_types": "",
+                  "preview_size": "medium",
+                  "parent_repeater": "field_66d59458044f8"
+              }
+          ]
       },
-      "placement": "top",
-      "endpoint": 0,
-      "selected": 0
-    },
-    {
-      "key": "field_66d5a56e49a32",
-      "label": "Settings",
-      "name": "slider_options",
-      "aria-label": "",
-      "type": "clone",
-      "instructions": "",
-      "required": 0,
-      "conditional_logic": 0,
-      "wrapper": {
-        "width": "",
-        "class": "",
-        "id": ""
+      {
+          "key": "field_66d5a7c561dab",
+          "label": "Settings",
+          "name": "",
+          "aria-label": "",
+          "type": "accordion",
+          "instructions": "",
+          "required": 0,
+          "conditional_logic": 0,
+          "wrapper": {
+              "width": "",
+              "class": "",
+              "id": ""
+          },
+          "open": 1,
+          "multi_expand": 1,
+          "endpoint": 0
       },
-      "clone": ["group_66d5a4ebb41cd"],
-      "display": "seamless",
-      "layout": "block",
-      "prefix_label": 0,
-      "prefix_name": 1
-    }
-  ],
-  "location": [
-    [
       {
-        "param": "block",
-        "operator": "==",
-        "value": "chisel/slider"
+          "key": "field_66d5a56e49a32",
+          "label": "Settings",
+          "name": "slider_options",
+          "aria-label": "",
+          "type": "clone",
+          "instructions": "",
+          "required": 0,
+          "conditional_logic": 0,
+          "wrapper": {
+              "width": "",
+              "class": "",
+              "id": ""
+          },
+          "clone": [
+              "group_66d5a4ebb41cd"
+          ],
+          "display": "seamless",
+          "layout": "block",
+          "prefix_label": 0,
+          "prefix_name": 1
       }
-    ]
+  ],
+  "location": [
+      [
+          {
+              "param": "block",
+              "operator": "==",
+              "value": "chisel\/slider"
+          }
+      ]
   ],
   "menu_order": 0,
   "position": "normal",
@@ -127,5 +129,5 @@
   "active": true,
   "description": "",
   "show_in_rest": 0,
-  "modified": 1725978564
+  "modified": 1735547820
 }

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

@@ -10,7 +10,7 @@
   "acf": {
     "mode": "preview",
     "usePostMeta": false,
-    "renderCallback": "\\Chisel\\AcfBlocks::acf_block_render"
+    "renderCallback": "\\Chisel\\Helper\\BlocksHelpers::acf_block_render"
   },
   "supports": {
     "anchor": true,

package/lib/commands/create/creators/app/chisel-starter-theme/src/blocks-acf/slider/slider.twig

@@ -1,4 +1,5 @@
 {% set slides_html = '' %}
+{% set has_thumbnails_nav = 'thumbnails' in fields.slider_options.slider_settings %}
 
 <div {{ wrapper_attributes }} data-block-id="{{ block.id }}">
   <div class="b-slider__inner alignfull">
@@ -7,8 +8,9 @@
         {% if slide.acf_bs_image %}
           {% set slides_html %}
             {{ slides_html }}
-            <div class="b-slider__slide swiper-slide" data-thumbnail-url="{{ get_image(slide.acf_bs_image).src('medium') }}">
-              {{ get_responsive_image(slide.acf_bs_image, 'large') }}
+
+            <div class="b-slider__slide swiper-slide" {% if has_thumbnails_nav %}data-thumbnail-url="{{ get_image(slide.acf_bs_image).src('medium') }}"{% endif %}>
+              {{ get_responsive_image(slide.acf_bs_image, 'large', {fetchpriority: loop.first ? 'high' : 'auto'}) }}
             </div>
           {% endset %}
         {% endif %}

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

@@ -21,4 +21,5 @@ $gaps: (
   'xlarge': get-gap('xlarge'),
   'big': get-gap('big'),
 );
-$buttons-icons: ('minus', 'plus');
+$static-icons: ('minus', 'plus', 'arrow-right', 'arrow-left');
+$animated-icons: ('loader');

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

@@ -174,6 +174,6 @@
     margin-left: px-rem(8);
     content: '';
     background-color: $color;
-    @include get-icon('loader');
+    @include icon-svg('loader', false, true);
   }
 }

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

@@ -1,11 +1,43 @@
-@mixin get-icon($name, $extension: 'svg', $is-block: false) {
-  $path: '../../';
+@use 'sass:map';
+@use '../settings/icon-settings' as *;
 
-  @if $is-block {
-    $path: '../../../';
+@mixin icon-svg($name, $multicolor: false, $animated: false) {
+  display: block;
+  height: 1em;
+  line-height: 1em;
+  content: '';
+
+  $icons-path: '../../assets/icons';
+
+  @if $multicolor {
+    background-image: url('#{$icons-path}/icons.svg#icon-#{$name}-view');
+    background-repeat: no-repeat;
+    background-size: contain;
+  } @else {
+    background-color: var(--o-icon-color, currentcolor);
+    @if $animated {
+      mask: url('#{$icons-path}/animated/#{$name}.svg');
+    } @else {
+      mask: url('#{$icons-path}/icons.svg#icon-#{$name}-view');
+    }
+
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+
+  @if map.has-key($o-icon-icons, 'icon-#{$name}') {
+    width: map.get($o-icon-icons, 'icon-#{$name}') * 1em;
+  } @else {
+    width: 1em;
   }
+}
 
-  mask: url('#{$path}assets/icons/#{$name}.#{$extension}');
-  mask-repeat: no-repeat;
-  mask-size: contain;
+@mixin icon($name, $multicolor: false, $animated: false) {
+  height: 1em;
+  font-size: var(--o-icon-size, 1em);
+  line-height: 1em;
+
+  &::before {
+    @include icon-svg($name, $multicolor, $animated);
+  }
 }

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

@@ -7,3 +7,4 @@
 @forward 'screen-readers';
 @forward 'theme';
 @forward 'width';
+@forward 'layout';

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

@@ -0,0 +1,11 @@
+@function get-flex-col-width($column_no, $layout-gutter) {
+  $layout-col-width: calc(((100 / 12) * $column_no) * 1%);
+  $layout-gap-divider: calc(12 / $column_no);
+  $layout-gutter-width: calc($layout-gutter - ($layout-gutter / $layout-gap-divider));
+
+  @if $column_no == 12 {
+    $layout-gutter-width: 0%;
+  }
+
+  @return calc($layout-col-width - $layout-gutter-width);
+}

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

@@ -1,4 +1,4 @@
-/* global acf, chiselAdminScripts */
+/* global acf, chiselAdminScripts, jQuery */
 
 class ACF {
   constructor() {
@@ -8,6 +8,16 @@ class ACF {
 
     this.acf = acf;
 
+    this.megaMenuData = {
+      field: null,
+      radios: [],
+      submenuFields: [],
+      submenuFieldsSelector:
+        '.menu-item-depth-0 .acf-field[data-name="mega_menu_default_dropdown"]',
+    };
+
+    this.megaMenuFields();
+
     this.acf.addAction('ready', () => {
       this.customColorsPalette();
     });
@@ -22,6 +32,60 @@ class ACF {
       return newArgs;
     });
   }
+
+  megaMenuFields() {
+    jQuery(document).on('menu-item-added', (event) => {
+      console.log('menu-item-added', event);
+      this.megaMenuData.submenuFields = document.querySelectorAll(
+        this.megaMenuData.submenuFieldsSelector,
+      );
+
+      this.setupMegaMenuSubmenuFields();
+    });
+
+    this.acf.addAction('ready_field/name=mega_menu_enable', (field) => {
+      this.megaMenuData = {
+        ...this.megaMenuData,
+        field: field.$el[0],
+        submenuFields: document.querySelectorAll(this.megaMenuData.submenuFieldsSelector),
+      };
+
+      this.megaMenuData.radios = this.megaMenuData.field.querySelectorAll('input[type="radio"]');
+
+      this.setupMegaMenuSubmenuFields(true);
+    });
+  }
+
+  setupMegaMenuSubmenuFields(registerChangeEvent = false) {
+    let isYes = false;
+
+    this.megaMenuData.radios.forEach((radio) => {
+      const value = radio.checked ? radio.value : 'no';
+
+      if (value === 'yes') {
+        isYes = true;
+      }
+
+      if (registerChangeEvent) {
+        radio.addEventListener('change', () => {
+          const value = radio.checked ? radio.value : 'no';
+          this.toggleMegaMenuSubmenuFields(value);
+        });
+      }
+    });
+
+    this.toggleMegaMenuSubmenuFields(isYes ? 'yes' : 'no');
+  }
+
+  toggleMegaMenuSubmenuFields(value) {
+    this.megaMenuData.submenuFields.forEach((field) => {
+      if (value === 'yes') {
+        field.classList.remove('acf-hidden');
+      } else {
+        field.classList.add('acf-hidden');
+      }
+    });
+  }
 }
 
 export default new ACF();

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

@@ -1,8 +1,10 @@
+import loaded from './modules/loaded';
 import scrollbarWidth from './modules/scrollbar-width';
 import MainNav from './modules/main-nav';
 import LoadMore from './modules/load-more';
 import Slider from './modules/slider';
 
+loaded();
 scrollbarWidth();
 new MainNav();
 new LoadMore();

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

@@ -13,10 +13,16 @@ class Blocks {
 
           if (blockInspector) {
             const blockNameClassName = selectedBlock.name.replace('/', '-');
-            blockInspector.classList.add(
-              'e-block-sidebar',
-              `e-block-sidebar--${blockNameClassName}`,
-            );
+            const currentClassNames = blockInspector.classList;
+            const blockClassName = `e-block-sidebar--${blockNameClassName}`;
+
+            currentClassNames.forEach((className) => {
+              if (className.includes('e-block-sidebar')) {
+                blockInspector.classList.remove(className);
+              }
+            });
+
+            blockInspector.classList.add('e-block-sidebar', blockClassName);
           }
         }
       });

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

@@ -19,8 +19,6 @@ const buttonIcons = [
   },
   ...Utils.generateIconsChoices(),
 ];
-const buttonSizesClassNamesRegex = Utils.generateClassNamesRegex(buttonSizes, 'is-size');
-const buttonIconsClassNamesRegex = Utils.generateClassNamesRegex(buttonIcons, 'has-icon');
 
 // Add Custom Attributes
 const chiselButtonBlockAttributes = (settings, name) => {
@@ -62,6 +60,11 @@ const chiselButtonCustomControls = createHigherOrderComponent((BlockEdit) => {
       buttonIconPosition = false,
     } = attributes;
 
+    const prev = {
+      buttonSize,
+      buttonIcon,
+    };
+
     useEffect(() => {
       if (isSelected && className !== '') {
         const attrs = {};
@@ -69,11 +72,11 @@ const chiselButtonCustomControls = createHigherOrderComponent((BlockEdit) => {
         const icon = className.match(/has-icon-(\w*)/);
         const iconLeft = className.match('has-icon-left');
 
-        if (icon.length) {
+        if (icon &&icon.length) {
           attrs.buttonIcon = icon[1];
         }
 
-        if (size.length) {
+        if (size && size.length) {
           attrs.buttonSize = size[1];
         }
 
@@ -97,10 +100,11 @@ const chiselButtonCustomControls = createHigherOrderComponent((BlockEdit) => {
                 options={buttonSizes}
                 value={buttonSize}
                 onChange={(value) => {
-                  className = Utils.prepareClassName(className, buttonSizesClassNamesRegex);
+                  const prevClassname = `is-size-${prev.buttonSize}`;
+                  className = className.replace(prevClassname, '').trim();
 
                   if (value) {
-                    className += ` ${`is-size-${value}`}`;
+                    className += ` is-size-${value}`;
                   }
 
                   setAttributes({
@@ -116,11 +120,11 @@ const chiselButtonCustomControls = createHigherOrderComponent((BlockEdit) => {
                 options={buttonIcons}
                 value={buttonIcon}
                 onChange={(value) => {
-                  className = Utils.prepareClassName(className, buttonIconsClassNamesRegex);
-                  className = className.replace('has-icon', '').trim();
+                  const prevClassname = `has-icon has-icon-${prev.buttonIcon}`;
+                  className = className.replace(prevClassname, '').trim();
 
                   if (value) {
-                    className += ` has-icon ${`has-icon-${value}`}`;
+                    className += ` has-icon has-icon-${value}`;
                   }
 
                   setAttributes({

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

@@ -1,18 +1,6 @@
 /* global chiselEditorScripts */
 
 class Utils {
-  generateClassNamesRegex = (options, classPrefix) => {
-    const classNames = options
-      .map((option) => option.value)
-      .filter((className) => className !== '');
-
-    return new RegExp(`${classPrefix}-(${classNames.join('|')})`, 'gi');
-  };
-
-  prepareClassName = (className, classNames) => {
-    return className.replace(classNames, '').trim().replace('/[ ]{2,}/g', ' ');
-  };
-
   generateIconsChoices = () => {
     const icons = chiselEditorScripts?.icons || null;
 

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

@@ -0,0 +1,7 @@
+const loaded = () => {
+  document.addEventListener('DOMContentLoaded', () => {
+    document.body.classList.add('has-loaded');
+  });
+};
+
+export default loaded;

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

@@ -1 +1,3 @@
 /* Admin area custom styles */
+
+@use 'wp-admin';