generator-chisel 2.3.3 → 2.4.0

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

@@ -0,0 +1,47 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Squeeze effect
+// ==================================================
+.c-main-nav__toggle--squeeze {
+  .c-main-nav__toggle-inner {
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    transition-duration: 0.075s;
+
+    &::before {
+      transition:
+        top 0.075s 0.12s ease,
+        opacity 0.075s ease;
+    }
+
+    &::after {
+      transition:
+        bottom 0.075s 0.12s ease,
+        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transition-delay: 0.12s;
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      transform: rotate(45deg);
+
+      &::before {
+        top: 0;
+        opacity: 0;
+        transition:
+          top 0.075s ease,
+          opacity 0.075s 0.12s ease;
+      }
+
+      &::after {
+        bottom: 0;
+        transition:
+          bottom 0.075s ease,
+          transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Stand effect
+// ==================================================
+.c-main-nav__toggle--stand,
+.c-main-nav__toggle--stand-r {
+  .c-main-nav__toggle-inner {
+    transition:
+      transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
+      background-color 0s 0.075s linear;
+
+    &::before {
+      transition:
+        top 0.075s 0.075s ease-in,
+        transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    &::after {
+      transition:
+        bottom 0.075s 0.075s ease-in,
+        transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      background-color: transparent !important;
+      transition:
+        transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
+        background-color 0s 0.15s linear;
+      transform: rotate(90deg);
+
+      &::before {
+        top: 0;
+        transition:
+          top 0.075s 0.1s ease-out,
+          transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: rotate(-45deg);
+      }
+
+      &::after {
+        bottom: 0;
+        transition:
+          bottom 0.075s 0.1s ease-out,
+          transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: rotate(45deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--stand-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transform: rotate(-90deg);
+    }
+  }
+}

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

@@ -0,0 +1,139 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// 3dx effect
+// ==================================================
+.c-main-nav__toggle--three-dx,
+.c-main-nav__toggle--three-dx-r {
+  .c-main-nav__toggle-box {
+    perspective: $hamburger-layer-width * 2;
+  }
+
+  .c-main-nav__toggle-inner {
+    transition:
+      transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+      background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &::before,
+    &::after {
+      transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      background-color: transparent !important;
+      transform: rotateY(180deg);
+
+      &::before {
+        transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0)
+          rotate(45deg);
+      }
+
+      &::after {
+        transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0)
+          rotate(-45deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--three-dx-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transform: rotateY(-180deg);
+    }
+  }
+}
+
+// ==================================================
+// 3dy effect
+// ==================================================
+.c-main-nav__toggle--three-dy,
+.c-main-nav__toggle--three-dy-r {
+  .c-main-nav__toggle-box {
+    perspective: $hamburger-layer-width * 2;
+  }
+
+  .c-main-nav__toggle-inner {
+    transition:
+      transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+      background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &::before,
+    &::after {
+      transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      background-color: transparent !important;
+      transform: rotateX(-180deg);
+
+      &::before {
+        transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0)
+          rotate(45deg);
+      }
+
+      &::after {
+        transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0)
+          rotate(-45deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--three-dy-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transform: rotateX(180deg);
+    }
+  }
+}
+
+// ==================================================
+// 3dxy effect
+// ==================================================
+.c-main-nav__toggle--three-dxy,
+.c-main-nav__toggle--three-dxy-r {
+  .c-main-nav__toggle-box {
+    perspective: $hamburger-layer-width * 2;
+  }
+
+  .c-main-nav__toggle-inner {
+    transition:
+      transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+      background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &::before,
+    &::after {
+      transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      background-color: transparent !important;
+      transform: rotateX(180deg) rotateY(180deg);
+
+      &::before {
+        transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0)
+          rotate(45deg);
+      }
+
+      &::after {
+        transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0)
+          rotate(-45deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--three-dxy-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Vortex effect
+// ==================================================
+.c-main-nav__toggle--vortex,
+.c-main-nav__toggle--vortex-r {
+  .c-main-nav__toggle-inner {
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    transition-duration: 0.2s;
+
+    &::before,
+    &::after {
+      transition-delay: 0.1s;
+      transition-timing-function: linear;
+      transition-duration: 0s;
+    }
+
+    &::before {
+      transition-property: top, opacity;
+    }
+
+    &::after {
+      transition-property: bottom, transform;
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+      transform: rotate(765deg);
+
+      &::before,
+      &::after {
+        transition-delay: 0s;
+      }
+
+      &::before {
+        top: 0;
+        opacity: 0;
+      }
+
+      &::after {
+        bottom: 0;
+        transform: rotate(90deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--vortex-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transform: rotate(-765deg);
+
+      &::after {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}

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

@@ -65,7 +65,7 @@
   .gform_validation_errors {
     padding: get-padding('normal');
     background: none;
-    border: calc($form-field-border-width * 2) solid $form-field-error-color;
+    border: $form-field-border-width solid $form-field-error-color;
     border-radius: $form-field-border-radius;
     box-shadow: none;
 
@@ -83,6 +83,22 @@
         display: none;
       }
     }
+
+    > ol,
+    > ul {
+      padding-inline-start: 0;
+      list-style-type: none;
+
+      li {
+        list-style-type: none !important;
+      }
+
+      a {
+        font-size: px-rem(14);
+        color: $form-field-error-color;
+        text-decoration: none;
+      }
+    }
   }
 
   // Styled select

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: 2.2.2
+ * Version: 2.4.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/theme.json

@@ -193,7 +193,7 @@
         {
           "slug": "tiny",
           "size": "0.75rem",
-          "name": "tiny"
+          "name": "Tiny"
         },
         {
           "slug": "small",

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

@@ -4,13 +4,15 @@ declare(strict_types=1);
 use FriendsOfTwig\Twigcs;
 
 $finder_1 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/views' );
-$finder_2 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/src/blocks' );
-$finder_3 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/src/blocks-acf' );
+$finder_2 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/custom/views' );
+$finder_3 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/src/blocks' );
+$finder_4 = Twigcs\Finder\TemplateFinder::create()->in( __DIR__ . '/src/blocks-acf' );
 
 return Twigcs\Config\Config::create()
 	->addFinder( $finder_1 )
 	->addFinder( $finder_2 )
 	->addFinder( $finder_3 )
+	->addFinder( $finder_4 )
 	->setName( 'chisel' )
 	->setSeverity( 'warning' )
 	->setDisplay( Twigcs\Config\ConfigInterface::DISPLAY_BLOCKING )

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

@@ -1,10 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html {{ fn('language_attributes') }}>
 <head>
   <meta charset="{{ site.charset }}">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="pingback" href="{{ site.pingback_url }}" />
-  <title>{{ wp_title }}</title>
 
   {{ function('wp_head') }}
 

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

@@ -1,17 +1,25 @@
 <footer id="footer" class="o-wrapper c-footer">
+  {% block footer_start %}{% endblock %}
+
   <div class="c-footer__inner o-layout is-flex has-gap-medium o-wrapper__inner">
-    {% for column in footer_sidebars.columns %}
-      <div class="o-layout__item {{ footer_sidebars.column_class }} c-footer__column">
-        {{ column }}
-      </div>
-    {% endfor %}
+    {% block footer_columns %}
+      {% for column in footer_sidebars.columns %}
+        <div class="o-layout__item {{ footer_sidebars.column_class }} c-footer__column">
+          {{ column }}
+        </div>
+      {% endfor %}
+    {% endblock %}
   </div>
 
-  {% if copyright is not empty %}
-    <div class="c-footer__copyright">
-      <div class="o-wrapper__inner">
-        {{ copyright.content }}
+  {% block footer_copyright %}
+    {% if copyright is not empty %}
+      <div class="c-footer__copyright">
+        <div class="o-wrapper__inner">
+          {{ copyright.content }}
+        </div>
       </div>
-    </div>
-  {% endif %}
+    {% endif %}
+  {% endblock %}
+
+  {% block footer_end %}{% endblock %}
 </footer>

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

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

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

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

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

@@ -14,7 +14,7 @@ Two variants of submenus are available:
   {% set has_mega_menu = main_nav.meta('mega_menu_enable') %}
   {% set mega_menu_columns = has_mega_menu ? main_nav.meta('mega_menu_columns') : '' %}
 
-  <nav id="navigation" class="c-main-nav js-main-nav{% if has_mega_menu == 'yes' %} c-main-nav--columns has-{{ mega_menu_columns }}-columns{% endif %}" aria-label="{{ __('Main menu', 'chisel') }}">
+  <nav id="navigation" class="{{ bem('c-main-nav', has_mega_menu == 'yes' ? 'columns' : '') }} js-main-nav{% if has_mega_menu == 'yes' %} has-{{ mega_menu_columns }}-columns{% endif %}" aria-label="{{ __('Main menu', 'chisel') }}">
     <button class="{{ bem('c-main-nav__toggle', 'slider') }} js-main-nav-toggle" aria-expanded="false" aria-controls="main-menu" aria-label="{{ __('Toggle main menu', 'chisel') }}">
       <span class="c-main-nav__toggle-box">
         <span class="c-main-nav__toggle-inner"></span>

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

@@ -1,26 +1,44 @@
-<article id="post-{{ post.ID }}" class="{{ post_classes(post.class) }} c-post-item">
+<article id="post-{{ post.ID }}" class="c-post-item {{ post_classes(post.class) }}">
+  {% block item_content %}
   <div class="c-post-item__content">
-    <h2 class="c-post-item__title"><a href="{{ post.link }}">{{ post.title }}</a></h2>
+    {% block item_title %}
+      <h2 class="c-post-item__title"><a href="{{ post.link }}">{{ post.title }}</a></h2>
+    {% endblock %}
 
-    {% if post.category and post.category.id != 1 %}
-      <span class="c-post-item__category"><a class="c-badge" href="{{ post.category.link }}">{{ post.category }}</a></span>
-    {% endif %}
-    <span class="c-post-item__meta">
-      <span class="c-post-item__author"><a href="{{ post.author.link }}">{{ __('By', 'chisel') }} {{ post.author.name }}</a></span> •
-      <time datetime="{{ post.date }}">{{ post.date }}</time></span>
-      <p class="c-post-item__excerpt">{{ post.excerpt({words: 20, read_more: __('Keep reading', 'chisel'), end: '...', force: true}) }}</p>
+    {% block item_category %}
+      {% if post.category and post.category.id != 1 %}
+        <span class="c-post-item__category"><a class="c-badge" href="{{ post.category.link }}">{{ post.category }}</a></span>
+      {% endif %}
+    {% endblock %}
 
-    {% if post.tags %}
-      <span class="c-post-item__tags">
-        {% for tag in post.tags %}
-          <a class="c-post-item__tag" href="{{ tag.link }}">#{{ tag }}</a>
-        {% endfor %}
+    {% block item_meta %}
+      <span class="c-post-item__meta">
+        <span class="c-post-item__author"><a href="{{ post.author.link }}">{{ __('By', 'chisel') }} {{ post.author.name }}</a></span> •
+        <time datetime="{{ post.date }}">{{ post.date }}</time>
       </span>
-    {% endif %}
+    {% endblock %}
+
+    {% block item_excerpt %}
+      <p class="c-post-item__excerpt">{{ post.excerpt({words: 20, read_more: __('Keep reading', 'chisel'), end: '...', force: true}) }}</p>
+    {% endblock %}
+
+    {% block item_tags %}
+      {% if post.tags %}
+        <span class="c-post-item__tags">
+          {% for tag in post.tags %}
+            <a class="c-post-item__tag" href="{{ tag.link }}">#{{ tag }}</a>
+          {% endfor %}
+        </span>
+      {% endif %}
+    {% endblock %}
   </div>
-  {% if post.get_thumbnail() %}
-    <div class="c-post-item__image">
-      <a href="{{ post.link }}" tabindex="-1">{{ post.get_thumbnail() }}</a>
-    </div>
-  {% endif %}
+  {% endblock %}
+
+  {% block item_image %}
+    {% if post.get_thumbnail() %}
+      <div class="c-post-item__image">
+        <a href="{{ post.link }}" tabindex="-1">{{ post.get_thumbnail() }}</a>
+      </div>
+    {% endif %}
+  {% endblock %}
 </article>

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

@@ -0,0 +1,8 @@
+<form role="search" method="get" class="c-search-form" action="{{ site.url }}">
+	<label class="screen-reader-text" for="search-form-field">{{ label ?: __('Search for:', 'chisel') }}</label>
+	<input type="text" id="search-form-field" class="c-search-form__field" placeholder="{{ placeholder ?: __('Search...', 'chisel') }}" value="{{ search_query }}" name="s">
+	<button type="submit" value="Search" class="c-search-form__btn {{ bem('c-btn', 'primary', 'small') }} has-icon has-icon-search has-icon-only" aria-label="{{ __('Search', 'chisel') }}"></button>
+	{% if post_type %}
+		<input type="hidden" name="post_type" value="{{ post_type }}">
+	{% endif %}
+</form>

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

@@ -7,28 +7,37 @@ In order to covert back to a grid, add the following classes to the c-posts-item
 
 {% block content %}
   <section class="o-wrapper__inner c-blog">
-    {% include 'components/the-title.twig' %}
+    {% block the_title %}
+      {% include 'components/the-title.twig' %}
+    {% endblock %}
 
     {% block before_loop %}
+
     {% endblock %}
 
     <div class="o-layout">
       <div class="{{ bem('o-layout__item', (sidebar.content ? '8' : '12') ~ '-large') }}">
         <div class="c-posts-items {{ bem('o-grid', 'cols-1', 'cols-2-small', (sidebar.content ? 'cols-2' : 'cols-3') ~ '-medium') }} js-load-more-container">
-          {% if posts is not empty %}
-            {% for post in posts %}
-              {% include ['components/' ~ post.post_type ~ '-item.twig', 'components/post-item.twig'] with {post: post} only %}
-            {% endfor %}
-          {% else %}
-            {% include 'components/no-results.twig' %}
-          {% endif %}
+          {% block posts %}
+            {% if posts is not empty %}
+              {% for post in posts %}
+                {% include ['components/' ~ post.post_type ~ '-item.twig', 'components/post-item.twig'] with {post: post} only %}
+              {% endfor %}
+            {% else %}
+              {% include 'components/no-results.twig' %}
+            {% endif %}
+          {% endblock %}
         </div>
 
-        {% include 'components/pagination.twig' with {type: 'load-more'} %}
+        {% block pagination %}
+          {% include 'components/pagination.twig' with {type: 'load-more'} %}
+        {% endblock %}
       </div>
 
       {% if sidebar.content %}
-        {% include 'sidebar-blog.twig' %}
+        {% block sidebar %}
+          {% include 'sidebar-blog.twig' %}
+        {% endblock %}
       {% endif %}
     </div>
 

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

@@ -1,10 +1,9 @@
 {% extends "index.twig" %}
 
 {% block before_loop %}
-
+  <div class="c-search-results-header">
+    {% include "components/search-form.twig" with {
+      placeholder: __('Search for something else...', 'chisel')
+    } %}
+  </div>
 {% endblock %}
-
-{% block after_loop %}
-
-{% endblock %}
-