generator-chisel 2.0.0-alpha.9 → 2.1.0

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';

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

@@ -1,7 +1,7 @@
 @use '~design' as *;
 @use '../../design/settings';
 
-$_buttons-icons: settings.$buttons-icons;
+$_static-icons: settings.$static-icons;
 
 .wp-block-button {
   .wp-block-button__link {
@@ -86,6 +86,15 @@ $_buttons-icons: settings.$buttons-icons;
     @include button-large;
   }
 
+  @each $icon in $_static-icons {
+    &.has-icon-#{$icon} .wp-block-button__link {
+      &::after,
+      &::before {
+        @include icon-svg($icon);
+      }
+    }
+  }
+
   &.has-icon {
     .wp-block-button__link {
       @include button-icon;
@@ -103,7 +112,8 @@ $_buttons-icons: settings.$buttons-icons;
         display: block;
         width: px-rem(24);
         height: px-rem(24);
-        margin-left: px-rem(8);
+        margin-right: px-rem(-6);
+        margin-left: px-rem(6);
         content: '';
       }
 
@@ -115,8 +125,8 @@ $_buttons-icons: settings.$buttons-icons;
     &.has-icon-left .wp-block-button__link {
       &::before {
         display: block;
-        margin-right: px-rem(8);
-        margin-left: 0;
+        margin-right: px-rem(6);
+        margin-left: px-rem(-6);
       }
 
       &::after {
@@ -124,13 +134,4 @@ $_buttons-icons: settings.$buttons-icons;
       }
     }
   }
-
-  @each $button-icon in $_buttons-icons {
-    &.has-icon-#{$button-icon} .wp-block-button__link {
-      &::after,
-      &::before {
-        @include get-icon($button-icon);
-      }
-    }
-  }
 }

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

@@ -1,7 +1,7 @@
 @use '~design' as *;
 @use '../../design/settings';
 
-$_buttons-icons: settings.$buttons-icons;
+$_static-icons: settings.$static-icons;
 
 .c-btn {
   @include button;
@@ -84,6 +84,15 @@ $_buttons-icons: settings.$buttons-icons;
   @include button-large;
 }
 
+@each $icon in $_static-icons {
+  .c-btn.has-icon-#{$icon} {
+    &::after,
+    &::before {
+      @include icon-svg($icon);
+    }
+  }
+}
+
 .c-btn.has-icon {
   @include button-icon;
 
@@ -100,7 +109,8 @@ $_buttons-icons: settings.$buttons-icons;
     display: block;
     width: px-rem(24);
     height: px-rem(24);
-    margin-left: px-rem(8);
+    margin-right: px-rem(-6);
+    margin-left: px-rem(6);
     content: '';
   }
 
@@ -111,8 +121,8 @@ $_buttons-icons: settings.$buttons-icons;
   &.has-icon-left {
     &::before {
       display: block;
-      margin-right: px-rem(8);
-      margin-left: 0;
+      margin-right: px-rem(6);
+      margin-left: px-rem(-6);
     }
 
     &::after {
@@ -120,12 +130,3 @@ $_buttons-icons: settings.$buttons-icons;
     }
   }
 }
-
-@each $button-icon in $_buttons-icons {
-  .c-btn.has-icon-#{$button-icon} {
-    &::after,
-    &::before {
-      @include get-icon($button-icon);
-    }
-  }
-}

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

@@ -0,0 +1,97 @@
+@use '~design' as *;
+
+.c-icons-preview {
+  display: block;
+  width: 100%;
+}
+
+.c-icons-preview__h4 {
+  font-size: 1.5rem;
+}
+
+.c-icons-preview__article {
+  margin: 2rem 0;
+  background: rgba(0,0,0, 2%);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.c-icons-preview__section {
+  margin: 1rem 0;
+}
+
+
+
+// CSS Usage of icons
+// -----------------------------------------------------------------------------
+
+// Mono
+.c-icons-preview__css-icon1{
+  @include icon('chisel-logo');
+  display: block;
+}
+
+.c-icons-preview__css-icon2 {
+  @include icon('x-logo');
+}
+
+.c-icons-preview__css-icon3 {
+  @include icon('color-pallet');
+}
+
+.c-icons-preview__css-icon4 {
+  @include icon('chisel-icon');
+}
+
+.c-icons-preview__css-icon5 {
+  @include icon('chisel-icon');
+  font-size: 4rem;
+}
+
+.c-icons-preview__css-icon6 {
+  @include icon('chisel-icon');
+  background: rgba(0, 0, 255, 20%);
+  width: auto;
+  height: auto;
+  padding: 1rem;
+}
+
+.c-icons-preview__css-icon7 {
+  @include icon('chisel-icon');
+  color: green;
+}
+
+.c-icons-preview__css-icon8 {
+  @include icon('chisel-icon');
+  color: blue;
+  --o-icon-color: red;
+  --o-icon-size: 2rem;
+
+}
+
+// Color
+.c-icons-preview__css-color-icon1 {
+  @include icon('color-chisel-logo', true);
+}
+
+.c-icons-preview__css-color-icon2 {
+  @include icon('color-facebook-logo', true);
+}
+
+.c-icons-preview__css-color-icon3 {
+  @include icon('color-chisel-icon', true);
+}
+
+.c-icons-preview__css-color-icon4 {
+  @include icon('color-chisel-icon', true);
+  font-size: 4rem;
+}
+
+.c-icons-preview__css-color-icon5 {
+  @include icon('color-chisel-icon', true);
+  background: rgba(0, 0, 255, 20%);
+  width: auto;
+  height: auto;
+  padding: 1rem;
+}
+

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

@@ -90,12 +90,6 @@
       display: none;
     }
   }
-
-  .c-main-nav--columns & {
-    @include bp(large) {
-      display: none;
-    }
-  }
 }
 
 .c-main-nav__link {
@@ -290,15 +284,31 @@
       }
     }
 
-    &.has-2-columns .is-level-2 > .c-main-nav__subitem {
+    &.has-1-columns
+      .c-main-nav__item:not(.is-default)
+      .c-main-nav__subitems.is-level-2
+      > .c-main-nav__subitem {
+      width: get-flex-col-width(12, get-gap('normal'));
+    }
+
+    &.has-2-columns
+      .c-main-nav__item:not(.is-default)
+      .c-main-nav__subitems.is-level-2
+      > .c-main-nav__subitem {
       width: get-flex-col-width(6, get-gap('normal'));
     }
 
-    &.has-3-columns .is-level-2 > .c-main-nav__subitem {
+    &.has-3-columns
+      .c-main-nav__item:not(.is-default)
+      .c-main-nav__subitems.is-level-2
+      > .c-main-nav__subitem {
       width: get-flex-col-width(4, get-gap('normal'));
     }
 
-    &.has-4-columns .is-level-2 > .c-main-nav__subitem {
+    &.has-4-columns
+      .c-main-nav__item:not(.is-default)
+      .c-main-nav__subitems.is-level-2
+      > .c-main-nav__subitem {
       width: get-flex-col-width(3, get-gap('normal'));
     }
   }

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

@@ -13,6 +13,12 @@
   background-color: get-color('white');
   border: 1px solid get-color('light-grey');
   border-radius: get-border-radius('small');
+
+  @include bp(msmall) {
+    .c-posts-items--list & {
+      flex-direction: row;
+    }
+  }
 }
 
 .c-post-item__content {

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

@@ -0,0 +1,51 @@
+@use 'sass:math';
+@use 'sass:map';
+@use '~design' as *;
+@use '../../design/settings';
+@use '../../design/settings/icon-settings' as *;
+
+$_static-icons: settings.$static-icons;
+$_animated-icons: settings.$animated-icons;
+
+.o-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  font-size: var(--o-icon-size, 1em);
+  line-height: 1em;
+
+  &--color {
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  &--mono {
+    background-color: var(--o-icon-color, currentcolor);
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+
+  &--inline {
+    display: inline-flex;
+  }
+
+  @each $icon, $width-ratio in $o-icon-icons {
+    &--#{$icon} {
+      width: $width-ratio * 1em;
+    }
+  }
+
+  @each $static-icon in $_static-icons {
+    &--icon-#{$static-icon}.is-css {
+      @include icon($static-icon);
+    }
+  }
+
+  @each $animated-icon in $_animated-icons {
+    &--icon-#{$animated-icon}.is-css {
+      @include icon($animated-icon, false, true);
+    }
+  }
+}

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

@@ -7,17 +7,6 @@ $_layout-columns-no: settings.$layout-columns-no;
 $_breakpoints: settings.$breakpoints;
 $_gaps: settings.$gaps;
 
-@function get-flex-col-width($column_no, $layout-gutter) {
-  $layout-col-width: calc(((100 / 12) * $column_no) * 1%);
-  $layout-gutter-width: calc($layout-gutter - ($layout-gutter / $column_no));
-
-  @if $column_no == 12 {
-    $layout-gutter-width: 0%;
-  }
-
-  @return calc($layout-col-width - $layout-gutter-width);
-}
-
 .o-layout {
   display: flex;
   flex-flow: row wrap;
@@ -28,8 +17,6 @@ $_gaps: settings.$gaps;
 @each $gap-size in map.keys($map: $_gaps) {
   .has-gap-#{$gap-size} {
     gap: get-gap($gap-size);
-
-    $layout-gutter: get-gap($gap-size);
   }
 }
 

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

@@ -0,0 +1,29 @@
+@use '~design' as *;
+
+.acf-color-picker {
+  .iris-picker {
+    padding-bottom: px-rem(40) !important; // Increase if needed, i.e. when you have more colors.
+  }
+
+  .iris-palette-container {
+    display: flex;
+    flex-wrap: wrap;
+    width: 75%;
+
+    .iris-palette {
+      display: block;
+      width: 16px !important;
+      height: 16px !important;
+      float: none !important;
+      margin: 0 2px 2px 0 !important;
+    }
+  }
+}
+
+.menu-item {
+  &:not(.menu-item-depth-0) {
+    .acf-field[data-name='mega_menu_default_dropdown'] {
+      display: none !important;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+// stylelint-disable
+// This file is auto generated. Do not edit directly.
+
+@use '_acf.scss';

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

@@ -3,7 +3,7 @@
  * Theme URI: https://www.getchisel.co/
  * Author: <%= app.author %>
  * Description: Chisel Wordpress Starter Theme based on Timber library.
- * Version: 1.0.0
+ * Version: 2.0.0
  * License: GNU General Public License v2 or later
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
  * Tags: chisel, custom, starter, theme, WordPress

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

@@ -4,8 +4,8 @@ declare(strict_types=1);
 use FriendsOfTwig\Twigcs;
 
 $finder_1 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/views' );
-$finder_2 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/build/blocks' );
-$finder_3 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/build/blocks-acf' );
+$finder_2 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/src/blocks' );
+$finder_3 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/src/blocks-acf' );
 
 return Twigcs\Config\Config::create()
 	->addFinder( $finder_1 )

package/lib/commands/create/creators/app/chisel-starter-theme/views/base.twig

@@ -4,7 +4,7 @@
   <meta charset="{{ site.charset }}">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="pingback" href="{{ site.pingback_url }}" />
-  <title>{{ site.title }}</title>
+  <title>{{ wp_title }}</title>
 
   {{ function('wp_head') }}
 

package/lib/commands/create/creators/app/chisel-starter-theme/views/components/header.twig

@@ -1,6 +1,6 @@
 <header id="header" class="c-header o-wrapper">
   <div class="c-header__inner o-wrapper__inner">
-    {{ logo }}
+    {% include 'components/logo.twig' %}
 
     {% include 'components/main-nav.twig' %}
   </div>

package/lib/commands/create/creators/app/chisel-starter-theme/views/{partials → components}/logo.twig

@@ -1,8 +1,8 @@
 <div class="c-logo">
   <a href="{{ site.link }}" class="c-logo__link">
     <span class="u-sr-only">{{ site.title }}</span>
-    {% if logo_image %}
-      {{ logo_image }}
+    {% if logo %}
+      {{ logo }}
     {% else %}
       <span class="c-logo__text">{{ site.title }}</span>
     {% endif %}

package/lib/commands/create/creators/app/chisel-starter-theme/views/components/main-nav-item.twig

@@ -5,8 +5,9 @@
 {% set has_submenu = item.children is not empty and main_nav_level < main_nav_level_max %}
 {% set caret = has_submenu ? '<button class="c-main-nav__caret is-caret" aria-label="' ~ __('Toggle submenu', 'chisel') ~ '"></button>' : '' %}
 {% set is_active = 'current-menu-parent' in item.classes %}
+{% set has_default_submenu = item.meta('mega_menu_default_dropdown') %}
 
-<li class="c-main-nav__{{ sub }}item {{ item.classes|join(' ') }} js-main-nav-item{{ is_active ? ' is-active' : '' }}">
+<li class="c-main-nav__{{ sub }}item {{ item.classes|join(' ') }} js-main-nav-item{{ is_active ? ' is-active' : '' }}{% if has_default_submenu == 'yes' %} is-default{% endif %}">
   <a href="{{ item.url }}" class="c-main-nav__{{ sub }}link js-main-nav-link" {{ item_target }} {{ item_title }} {{ item_aria_current }}>{{ item.title }}{{ caret }}</a>
 
   {% if has_submenu %}