Add local site setting to hide taxonomies

Because it was easy.

includes/functions/_setup-theme.php

@@ -1828,7 +1828,7 @@ if ( get_option( 'fictioneer_enable_anti_flicker' ) ) {
 
 function fictioneer_output_head_critical_scripts() {
   // Start HTML ---> ?>
-  <script id="fictioneer-critical-scripts" data-jetpack-boost="ignore" data-no-optimize="1" data-no-defer="1" data-no-minify="1">!function(){if("undefined"!=typeof localStorage){const e=localStorage.getItem("fcnLightmode"),t=document.documentElement;let a,o=localStorage.getItem("fcnSiteSettings");if(o&&(o=JSON.parse(o))&&null!==o&&"object"==typeof o){Object.entries(o).forEach((([e,s])=>{switch(e){case"minimal":t.classList.toggle("minimal",s);break;case"darken":a=s>=0?1+s**2:1-s**2,t.style.setProperty("--darken",`(${a} + var(--lightness-offset))`);break;case"saturation":case"font-lightness":case"font-saturation":a=s>=0?1+s**2:1-s**2,t.style.setProperty(`--${e}`,`(${a} + var(--${e}-offset))`);break;case"hue-rotate":a=Number.isInteger(o["hue-rotate"])?o["hue-rotate"]:0,t.style.setProperty("--hue-rotate",`(${a}deg + var(--hue-offset))`);break;default:t.classList.toggle(`no-${e}`,!s)}})),t.dataset.fontWeight=o["font-weight"]?o["font-weight"]:"default",t.dataset.theme=o["site-theme"]&&!t.dataset.forceChildTheme?o["site-theme"]:"default";let e=getComputedStyle(document.documentElement).getPropertyValue("--theme-color-base").trim().split(" ");const s=o.darken?o.darken:0,r=o.saturation?o.saturation:0,n=o["hue-rotate"]?o["hue-rotate"]:0,l=s>=0?1+s**2:1-s**2;o=r>=0?1+r**2:1-r**2,e=`hsl(${(parseInt(e[0])+n)%360}deg ${(parseInt(e[1])*o).toFixed(2)}% ${(parseInt(e[2])*l).toFixed(2)}%)`,document.querySelector("meta[name=theme-color]").setAttribute("content",e)}e&&(t.dataset.mode="true"==e?"light":"dark")}}(),document.documentElement.classList.remove("no-js");</script>
+  <script id="fictioneer-critical-scripts" data-jetpack-boost="ignore" data-no-optimize="1" data-no-defer="1" data-no-minify="1">!function(){if("undefined"!=typeof localStorage){const e=localStorage.getItem("fcnLightmode"),t=document.documentElement;let a,o=localStorage.getItem("fcnSiteSettings");if(o&&(o=JSON.parse(o))&&null!==o&&"object"==typeof o){Object.entries(o).forEach((([e,s])=>{switch(e){case"minimal":t.classList.toggle("minimal",s);break;case"taxonomies":t.classList.toggle("no-taxonomies",!s);break;case"darken":a=s>=0?1+s**2:1-s**2,t.style.setProperty("--darken",`(${a} + var(--lightness-offset))`);break;case"saturation":case"font-lightness":case"font-saturation":a=s>=0?1+s**2:1-s**2,t.style.setProperty(`--${e}`,`(${a} + var(--${e}-offset))`);break;case"hue-rotate":a=Number.isInteger(o["hue-rotate"])?o["hue-rotate"]:0,t.style.setProperty("--hue-rotate",`(${a}deg + var(--hue-offset))`);break;default:t.classList.toggle(`no-${e}`,!s)}})),t.dataset.fontWeight=o["font-weight"]?o["font-weight"]:"default",t.dataset.theme=o["site-theme"]&&!t.dataset.forceChildTheme?o["site-theme"]:"default";let e=getComputedStyle(document.documentElement).getPropertyValue("--theme-color-base").trim().split(" ");const s=o.darken?o.darken:0,r=o.saturation?o.saturation:0,n=o["hue-rotate"]?o["hue-rotate"]:0,l=s>=0?1+s**2:1-s**2;o=r>=0?1+r**2:1-r**2,e=`hsl(${(parseInt(e[0])+n)%360}deg ${(parseInt(e[1])*o).toFixed(2)}% ${(parseInt(e[2])*l).toFixed(2)}%)`,document.querySelector("meta[name=theme-color]").setAttribute("content",e)}e&&(t.dataset.mode="true"==e?"light":"dark")}}(),document.documentElement.classList.remove("no-js");</script>
   <?php // <--- End HTML
 }
 add_action( 'wp_head', 'fictioneer_output_head_critical_scripts', 9999 );

js/head-inline.min.js

@@ -1 +1 @@
-!function(){if("undefined"!=typeof localStorage){const e=localStorage.getItem("fcnLightmode"),t=document.documentElement;let a,o=localStorage.getItem("fcnSiteSettings");if(o&&(o=JSON.parse(o))&&null!==o&&"object"==typeof o){Object.entries(o).forEach((([e,s])=>{switch(e){case"minimal":t.classList.toggle("minimal",s);break;case"darken":a=s>=0?1+s**2:1-s**2,t.style.setProperty("--darken",`(${a} + var(--lightness-offset))`);break;case"saturation":case"font-lightness":case"font-saturation":a=s>=0?1+s**2:1-s**2,t.style.setProperty(`--${e}`,`(${a} + var(--${e}-offset))`);break;case"hue-rotate":a=Number.isInteger(o["hue-rotate"])?o["hue-rotate"]:0,t.style.setProperty("--hue-rotate",`(${a}deg + var(--hue-offset))`);break;default:t.classList.toggle(`no-${e}`,!s)}})),t.dataset.fontWeight=o["font-weight"]?o["font-weight"]:"default",t.dataset.theme=o["site-theme"]&&!t.dataset.forceChildTheme?o["site-theme"]:"default";let e=getComputedStyle(document.documentElement).getPropertyValue("--theme-color-base").trim().split(" ");const s=o.darken?o.darken:0,r=o.saturation?o.saturation:0,n=o["hue-rotate"]?o["hue-rotate"]:0,l=s>=0?1+s**2:1-s**2;o=r>=0?1+r**2:1-r**2,e=`hsl(${(parseInt(e[0])+n)%360}deg ${(parseInt(e[1])*o).toFixed(2)}% ${(parseInt(e[2])*l).toFixed(2)}%)`,document.querySelector("meta[name=theme-color]").setAttribute("content",e)}e&&(t.dataset.mode="true"==e?"light":"dark")}}(),document.documentElement.classList.remove("no-js");
+!function(){if("undefined"!=typeof localStorage){const e=localStorage.getItem("fcnLightmode"),t=document.documentElement;let a,o=localStorage.getItem("fcnSiteSettings");if(o&&(o=JSON.parse(o))&&null!==o&&"object"==typeof o){Object.entries(o).forEach((([e,s])=>{switch(e){case"minimal":t.classList.toggle("minimal",s);break;case"taxonomies":t.classList.toggle("no-taxonomies",!s);break;case"darken":a=s>=0?1+s**2:1-s**2,t.style.setProperty("--darken",`(${a} + var(--lightness-offset))`);break;case"saturation":case"font-lightness":case"font-saturation":a=s>=0?1+s**2:1-s**2,t.style.setProperty(`--${e}`,`(${a} + var(--${e}-offset))`);break;case"hue-rotate":a=Number.isInteger(o["hue-rotate"])?o["hue-rotate"]:0,t.style.setProperty("--hue-rotate",`(${a}deg + var(--hue-offset))`);break;default:t.classList.toggle(`no-${e}`,!s)}})),t.dataset.fontWeight=o["font-weight"]?o["font-weight"]:"default",t.dataset.theme=o["site-theme"]&&!t.dataset.forceChildTheme?o["site-theme"]:"default";let e=getComputedStyle(document.documentElement).getPropertyValue("--theme-color-base").trim().split(" ");const s=o.darken?o.darken:0,r=o.saturation?o.saturation:0,n=o["hue-rotate"]?o["hue-rotate"]:0,l=s>=0?1+s**2:1-s**2;o=r>=0?1+r**2:1-r**2,e=`hsl(${(parseInt(e[0])+n)%360}deg ${(parseInt(e[1])*o).toFixed(2)}% ${(parseInt(e[2])*l).toFixed(2)}%)`,document.querySelector("meta[name=theme-color]").setAttribute("content",e)}e&&(t.dataset.mode="true"==e?"light":"dark")}}(),document.documentElement.classList.remove("no-js");

partials/_modal-site-settings.php

@@ -45,6 +45,10 @@ defined( 'ABSPATH' ) OR exit;
         <input type="checkbox" id="site-setting-covers" checked>
         <label for="site-setting-covers" class="modal__setting-toggle"><?php _e( 'Cover images (chapters and stories)', 'fictioneer' ); ?></label>
       </div>
+      <div class="site-settings__covers modal__horizontal-input-group _with-checkbox">
+        <input type="checkbox" id="site-setting-taxonomies" checked>
+        <label for="site-setting-taxonomies" class="modal__setting-toggle"><?php _e( 'Taxonomies', 'fictioneer' ); ?></label>
+      </div>
       <div class="site-settings__text-shadows modal__horizontal-input-group _with-checkbox">
         <input type="checkbox" id="site-setting-text-shadows">
         <label for="site-setting-text-shadows" class="modal__setting-toggle"><?php _e( 'Text shadows', 'fictioneer' ); ?></label>

src/js/application.js

@@ -782,6 +782,7 @@ const /** @const {String[]} */ fcn_settingEvents = [
   'background-textures',
   'polygons',
   'covers',
+  'taxonomies',
   'text-shadows',
   'minimal',
   'chapter-progress-bar'
@@ -1214,6 +1215,7 @@ function fcn_defaultSiteSettings() {
     'background-textures': true,
     'polygons': true,
     'covers': true,
+    'taxonomies': true,
     'text-shadows': false,
     'minimal': false,
     'chapter-progress-bar': true,

src/js/head-inline.js

@@ -12,6 +12,9 @@
             case 'minimal':
               root.classList.toggle('minimal', value);
               break;
+            case 'taxonomies':
+              root.classList.toggle('no-taxonomies', !value);
+              break;
             case 'darken':
               modifier = value >= 0 ? 1 + value ** 2 : 1 - value ** 2;
               root.style.setProperty('--darken', `(${modifier} + var(--lightness-offset))`); // Beware darken and lightness!

src/scss/_card.scss

@@ -1029,6 +1029,26 @@
   }
 }
 
+:root.no-taxonomies :is(.cell-tax, .story__taxonomies-space),
+:root.no-taxonomies .card__tag-list > .tag-pill {
+  display: none;
+  content-visibility: hidden;
+}
+
+:root.no-taxonomies .card._recommendation:not(._seamless) .cell-tax {
+  display: block;
+  content-visibility: visible;
+  margin-top: 0;
+  margin-bottom: var(--this-spacing);
+  height: 0;
+  overflow: hidden;
+
+  > :is(span, a, div) {
+    display: none;
+    content-visibility: hidden;
+  }
+}
+
 :root:not(.no-covers) .card._vertical:not(._seamless) .card__info-toggle:not(.last-clicked) {
   padding-top: calc(2 * var(--this-spacing));
   padding-right: calc(2 * var(--this-spacing));

src/scss/_story.scss

@@ -100,20 +100,6 @@ $header_breakpoint: 640px;
       }
     }
 
-    &._no-tax {
-      grid-template-rows: var(--page-inset-top, 0px) auto auto;
-
-      .story__identity {
-        grid-area: 2 / 2 / 4 / 3;
-        margin-top: 0;
-      }
-
-      @include bp($header_breakpoint) {
-        --this-img-height: #{get_clamp(145, 165, 400, $full-width)};
-        --this-img-width: #{get_clamp(96, 110, 400, $full-width)};
-      }
-    }
-
     &._no-thumbnail {
       .story__taxonomies {
         margin-bottom: 1.5rem;
@@ -545,6 +531,30 @@ $header_breakpoint: 640px;
   }
 }
 
+:is(.story__header._no-tax, :root.no-taxonomies .story__header) {
+  grid-template-rows: var(--page-inset-top, 0px) auto auto;
+
+  .story__identity {
+    grid-area: 2 / 2 / 4 / 3;
+    margin-top: 0;
+  }
+
+  .story__taxonomies {
+    display: none;
+  }
+
+  @include bp($header_breakpoint) {
+    --this-img-height: #{get_clamp(145, 165, 400, $full-width)};
+    --this-img-width: #{get_clamp(96, 110, 400, $full-width)};
+  }
+}
+
+:root.no-taxonomies {
+  .story__tags-and-warnings {
+    display: none;
+  }
+}
+
 .story__chapters[data-view="grid"] {
   margin-top: -24px; // Compensate groups