Merge branch 'master' of github.com:Mill3/mill3-wp-theme-boilerplate

Author: thetoine

.postcssrc.mjs

@@ -63,6 +63,7 @@ if( !DEV ) {
           // add more here if needed
         ],
         deep: [
+          /^body/,
           /^wysiwyg/,
           /^btn/,
           /^gform/,

archive.php

@@ -29,8 +29,11 @@
     $context['title'] = single_cat_title('', false);
     array_unshift($templates, 'archive-' . get_query_var('cat') . '.twig');
 } elseif (is_post_type_archive()) {
+    $post_type = get_post_type();
+    if( empty($post_type) ) $post_type = get_query_var('post_type');
+
     $context['title'] = post_type_archive_title('', false);
-    array_unshift($templates, 'archive-' . get_post_type() . '.twig');
+    array_unshift($templates, 'archive-' . $post_type . '.twig');
 }
 
 Timber::render($templates, $context);

functions.php

@@ -257,6 +257,8 @@ public function add_functions($functions)
         $functions['get_options'] = ['callable' => function () { return get_fields('options'); }];
         $functions['is_menu_item'] = ['callable' => function ($item) { return ($item instanceof Timber\MenuItem); }];
         $functions['get_table_of_contents'] = ['callable' => 'Mill3\Twig\get_table_of_contents'];
+        $functions['get_term_by'] = ['callable' => [Timber::class, 'get_term_by']];
+        $functions['get_post_by'] = ['callable' => [Timber::class, 'get_post_by']];
 
         return $functions;
     }

lib/post-type.php

@@ -126,6 +126,7 @@ public function dummy() {
             'show_in_menu'        => true,
             'show_in_nav_menus'   => true,
             'show_in_admin_bar'   => true,
+            'show_in_rest'        => true, // required for enabling block editor
             'menu_position'       => $this->incrementMenuPosition(),
             'can_export'          => true,
             'has_archive'         => true,
@@ -167,8 +168,7 @@ public function page_section()
             'show_in_menu'        => true,
             'show_in_nav_menus'   => false,
             'show_in_admin_bar'   => true,
-            // need this for enabling gutenberg editor
-            'show_in_rest'        => true,
+            'show_in_rest'        => true, // required for enabling block editor
             'menu_position'       => $this->incrementMenuPosition(),
             'can_export'          => true,
             'has_archive'         => false,

lib/taxonomies.php

@@ -103,14 +103,16 @@ public function dummy()
             $taxonomy_name,
             array('post'),
             array(
+                'labels' => $labels,
+                'public' => true,
+                'publicly_queryable' => true,
                 'hierarchical' => true,
-                'query_var' => true,
                 'show_ui' => true,
                 'show_in_menu' => true,
                 'show_in_nav_menus' => true,
+                'show_in_rest' => true, // required for editing in block editor
                 'show_in_quick_edit' => true,
                 'show_admin_column' => true,
-                'labels' => $labels,
                 // Control the slugs used for this taxonomy
                 'rewrite' => array(
                     'slug' => $slug, // This controls the base slug that will display before each term

src/js/ACF-Preview.js

@@ -27,7 +27,7 @@ domready(() => {
 
   const resize = () => {
     const max = Math.ceil(parent.innerHeight * 2 >> 0);
-    const height = document.body.querySelector('.pb-row-wrapper').getBoundingClientRect().height;
+    const height = document.body.querySelector('[class*="-row-wrapper"]').getBoundingClientRect().height;
 
     window.frameElement.height = Math.max(25, Math.min(max, height));
   };

src/js/core/windmill.scroll.js

@@ -2,7 +2,6 @@ import EMITTER from "@core/emitter";
 import { SCROLLBAR_HIDDEN_CLASSNAME, SCROLL_TO_OPTIONS } from "@scroll/constants";
 import Scroll from "@scroll/scroll";
 import ScrollDirection from "@scroll/scroll-direction";
-//import ScrollIntersection from "@scroll/scroll-intersection";
 import ScrollIO from "@scroll/scroll-io";
 import ScrollMinimum from "@scroll/scroll-minimum";
 import ScrollParallax from "@scroll/scroll-parallax";
@@ -63,6 +62,7 @@ export class WindmillScroll {
     windmill.on('exit', this._onPageExit, this);
 
     if( this._async ) {
+      windmill.on('added', this._onAsyncPageAdded, this);
       windmill.on('entering', this._resetScrollModules, this);
       windmill.on('enter', this._onAsyncPageEnter, this);
       windmill.on('entered', this._onAsyncPageEntered, this);
@@ -78,7 +78,6 @@ export class WindmillScroll {
   _onInit() {
     this.scroll = new Scroll();
     this.direction = new ScrollDirection(this.scroll);
-    //this.intersection = new ScrollIntersection(this.scroll);
     this.io = new ScrollIO(this.scroll);
     this.minimum = new ScrollMinimum(this.scroll);
     if( !mobile ) this.parallax = new ScrollParallax(this.scroll);
@@ -93,7 +92,6 @@ export class WindmillScroll {
     }
 
     this.scroll.raf(delta);
-    //this.intersection?.raf(delta);
     this.parallax?.raf(delta);
     //this.timeline?.raf();
     //this.webgl?.raf(delta);
@@ -103,7 +101,6 @@ export class WindmillScroll {
 
     this.scroll?.resize();
     this.io?.resize();
-    //this.intersection?.resize();
     this.parallax?.resize();
     //this.webgl?.resize();
   }
@@ -112,7 +109,6 @@ export class WindmillScroll {
     this.scroll?.init();
     //this.webgl?.init();
     this.io?.init();
-    //this.intersection?.init();
     this.parallax?.init();
 
     this._startModules();
@@ -124,27 +120,27 @@ export class WindmillScroll {
   }
   _onPageExit() {
     this.io?.exit();
-    //this.intersection?.exit();
   }
   _onPageDone() {
     this.scroll?.resize();
     //this.webgl?.resize();
     this.io?.resize();
-    //this.intersection?.resize();
     this.parallax?.resize();
   }
 
-  _onAsyncPageEnter({ next }) {
+  _onAsyncPageAdded() {
     this._unbindEvents();
     this._stopModules();
-
+    this._resetScrollModules();
+  }
+  _onAsyncPageEnter({ next }) {
     html.classList.remove(SCROLLBAR_HIDDEN_CLASSNAME);
 
     this.scroll?.init();
     //this.webgl?.init(next.container);
     this.io?.init(next.container);
-    //this.intersection?.init(next.container);
     this.parallax?.init(next.container);
+    this.io?.start();
   }
   _onAsyncPageEntered() {
     this._startModules();
@@ -155,7 +151,6 @@ export class WindmillScroll {
   _onSyncPageEnter({ next }) {
     this.scroll?.init();
     this.io?.init(next.container);
-    //this.intersection?.init(next.container);
     this.parallax?.init(next.container);
     //this.webgl?.init();
 
@@ -185,7 +180,6 @@ export class WindmillScroll {
     this.scroll?.resize();
     //this.webgl?.update();
     this.io?.update();
-    //this.intersection?.update();
     this.parallax?.update();
 
     // trigger event that scroll update is completed
@@ -221,7 +215,6 @@ export class WindmillScroll {
 
     this.direction?.start();
     this.io?.start();
-    //this.intersection?.start();
     this.parallax?.start();
     this.minimum?.start();
     //this.timeline?.start();
@@ -235,7 +228,6 @@ export class WindmillScroll {
     this.scroll?.stop();
     this.direction?.stop();
     this.io?.stop();
-    //this.intersection?.stop();
     this.parallax?.stop();
     this.minimum?.stop();
     //this.timeline?.stop();
@@ -247,7 +239,6 @@ export class WindmillScroll {
   _resetScrollModules() {
     this.scroll?.reset();
     this.io?.reset();
-    //this.intersection?.reset();
     this.parallax?.reset();
     this.minimum?.reset();
     //this.timeline?.reset();

src/js/modules/filtered-posts-list/index.js

@@ -3,27 +3,33 @@
  *
  * How to use in your template :
  *
- * 1. attach JS module to the container containing : SELECT element, all posts, pagination
+ * 1. attach JS module to the container containing : SELECT element, filter links, all posts, pagination
  *
- * <section data-module="filtered-posts-list" data-filtered-posts-list></section>
+ * <section data-module="filtered-posts-list"></section>
  *
- * 2. attach data-selector to SELECT element
+ * 2. attach data-selector to SELECT element AND filter links
  *
- * <select class="my-ctp-archive__filter" data-filtered-posts-list-filters >
+ * <select class="my-ctp-archive__filter" data-filtered-posts-list-filters>
  *   <option value="{{ my-ctp_archive_link }}">{{ __('Filter by', 'mill3wp') }}</option>
  *   <option value="{{ term.link }}">{{ term.name }}</option>
+ * 
+ * <nav class="my-cpt-archive__links" data-filtered-posts-list-links>
+ *   <a href="#">All</a>
+ *   <a href="#">Filter 1</a>
+ *   <a href="#">Filter 2</a>
+ * </nav>
  *
  * 3. attach data-selector to posts container
  *
- * <ol data-filtered-posts-list-results >
+ * <ol data-filtered-posts-list-results>
  * {% for post in posts %}
  * ...
  * </ol>
  *
  * 4. attach data-selector to pagination element
  *
  * <div data-filtered-posts-list-pagination>
- *   {% include 'partial/pagination.twig' }
+ *   {% include 'partial/pagination.twig' %}
  * </div>
  *
 */
@@ -36,6 +42,7 @@ import { on, off } from "@utils/listener";
 
 const LOCKED_CLASSNAME = "--js-filtered-posts-list-locked";
 const FILTERS_SELECTOR = "[data-filtered-posts-list-filters]";
+const LINKS_SELECTOR = "[data-filtered-posts-list-links]";
 const PAGINATION_SELECTOR = "[data-filtered-posts-list-pagination]";
 const RESULTS_SELECTOR = "[data-filtered-posts-list-results]";
 
@@ -45,6 +52,7 @@ class FilteredPostsList {
     this.emitter = emitter;
 
     this.filters = $(FILTERS_SELECTOR, this.el);
+    this.links = $(LINKS_SELECTOR, this.el);
     this.pagination = $(PAGINATION_SELECTOR, this.el);
     this.results = $(RESULTS_SELECTOR, this.el);
 
@@ -54,6 +62,7 @@ class FilteredPostsList {
     this._newResultsHTML = null;
 
     this._onTypeChange = this._onTypeChange.bind(this);
+    this._onLinkClick = this._onLinkClick.bind(this);
     this._onAjaxCallback = this._onAjaxCallback.bind(this);
     this._onAjaxResponse = this._onAjaxResponse.bind(this);
     this._onAjaxError = this._onAjaxError.bind(this);
@@ -70,6 +79,7 @@ class FilteredPostsList {
     this.el = null;
     this.emitter = null;
     this.filters = null;
+    this.links = null;
     this.pagination = null;
     this.results = null;
 
@@ -79,6 +89,7 @@ class FilteredPostsList {
     this._newResultsHTML = null;
 
     this._onTypeChange = null;
+    this._onLinkClick = null;
     this._onAjaxCallback = null;
     this._onAjaxResponse = null;
     this._onAjaxError = null;
@@ -88,9 +99,11 @@ class FilteredPostsList {
 
   _bindEvents() {
     if(this.filters) on(this.filters, 'change', this._onTypeChange);
+    if(this.links) on(this.links, 'click', this._onLinkClick);
   }
   _unbindEvents() {
     if(this.filters) off(this.filters, 'change', this._onTypeChange);
+    if(this.links) off(this.links, 'click', this._onLinkClick);
   }
 
   _onTypeChange() {
@@ -108,6 +121,39 @@ class FilteredPostsList {
       .then(this._onAjaxResponse)
       .catch(this._onAjaxError);
   }
+  _onLinkClick(event) {
+    if( event ) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+
+
+    let href, target = event.target;
+
+    // check all parent elements until we reach [data-filtered-posts-list-links]
+    while( target && target !== this.links ) {
+      if( target.tagName.toString().toUpperCase() === 'A' ) {
+        href = target.href;
+        break;
+      }
+
+      target = target.parentElement;
+    }
+
+    if( !href ) return;
+
+    // replace current history state
+    windmill.replace(href);
+
+    // block UI
+    if( this.el ) this.el.classList.add(LOCKED_CLASSNAME);
+
+    // fetch HTML
+    fetch(href)
+      .then(this._onAjaxCallback)
+      .then(this._onAjaxResponse)
+      .catch(this._onAjaxError);
+  }
   _onAjaxCallback(response) {
     // stop here if module has been destroyed during Fetch request
     if( !this.el ) return;
@@ -125,6 +171,8 @@ class FilteredPostsList {
 
     const doc = this._parser.parseFromString(html, "text/html");
     const title = $('html title', doc);
+    const filters = $(FILTERS_SELECTOR, doc);
+    const links = $(LINKS_SELECTOR, doc);
     const results = $(RESULTS_SELECTOR, doc);
     const pagination = $(PAGINATION_SELECTOR, doc);
 
@@ -134,6 +182,10 @@ class FilteredPostsList {
       return;
     }
 
+    // update filters and links immediately
+    if( filters && this.filters ) this.filters.innerHTML = filters.innerHTML;
+    if( links && this.links ) this.links.innerHTML = links.innerHTML;
+
     // save new content
     this._newPageTitle = title.innerText;
     this._newResultsHTML = results.innerHTML;

src/js/modules/pb-row-oembed/index.js

@@ -7,6 +7,7 @@ class PbRowOEmbed {
     this.emitter = emitter;
     this.wrapper = $('.pb-row-oembed__wrapper', this.el);
     this.preview = $('.pb-row-oembed__preview', this.el);
+    this.videoPreview = $('.pb-row-oembed__videoPreview', this.el);
     this.script = $('script', this.el);
 
     this._onClick = this._onClick.bind(this);
@@ -42,8 +43,13 @@ class PbRowOEmbed {
 
     this._unbindEvents();
 
+    if( this.videoPreview ) this.emitter.emit('Video.destroy', this.videoPreview);
+
     this.preview = null;
+    this.videoPreview = null;
     this.wrapper.innerHTML = this.script.innerHTML;
+
+    this.emitter.emit('SiteScroll.update');
     this.emitter.emit('oEmbed.add', $('iframe', this.wrapper));
   }
 }

src/js/scroll/scroll.js

@@ -4,6 +4,7 @@ import EMITTER from "@core/emitter";
 import { DIRECTION_DOWN, DIRECTION_UP, SCROLL_TO_OPTIONS } from "@scroll/constants";
 import { firefox } from "@utils/browser";
 import { $, $$, html, body, rect } from "@utils/dom";
+import { isCSSSelectorValid } from "@utils/is";
 import { on, off } from "@utils/listener";
 import { lerp2, limit } from "@utils/math";
 import { mobile, motion_reduced } from "@utils/mobile";
@@ -64,10 +65,13 @@ class Scroll {
     if( window.location.hash ) {
       // Get the hash without the '#' and find the matching element
       const id = window.location.hash.slice(1, window.location.hash.length);
-      let target = $(`#${id}`);
 
-      // If found, scroll to the element
-      if (target) this.scrollTo(target);
+      if( isCSSSelectorValid(id) ) {
+        let target = $(`#${id}`);
+
+        // If found, scroll to the element
+        if (target) this.scrollTo(target);
+      }
     }
   }
   raf(delta = 1) {