Add support for Elementor

DOCUMENTATION.md

@@ -393,6 +393,9 @@ Pages work the same as always in WordPress, just with some additional fields and
 * **Index (Advanced):** The same as the Index page template, but with additional meta data.
 * **Taxonomies:** Shows details about all taxonomies used on the site, with count and definition (if provided).
 * **User Profile:** Frontend account profile to keep users out of the admin. Must never be cached!
+* **Canvas (Main):** Renders the main container without page or bounds. Meant to be used with the Elementor plugin.
+* **Canvas (Page):** Renders the page container without bounds or comments. Meant to be used with the Elementor plugin.
+* **Canvas (Site):** Renders a completely blank site. Meant to be used with the Elementor plugin.
 
 ### Meta Fields
 

README.md

@@ -23,7 +23,7 @@ Fictioneer is open source and completely free. However, maintaining and developi
 
 ## Key Features
 
-stories, chapters, collections, and recommendations • customizable web reader • shortcodes • text-to-speech • bookmarks • progress tracker • lightbox • dark/light mode • ePUB converter • advanced search form • OAuth 2.0 logins (Discord, Google, Twitch, and Patreon) • Patreon content gate • post password expiration • gate content for users and roles • role manager • responsive layout • cache aware • custom comment system • AJAX comments • private comments • comment reply subscriptions • send notifications to Discord • search engine optimization • GDPR compliant • hue, saturation, and lightness sliders • translation ready
+stories, chapters, collections, and recommendations • customizable web reader • shortcodes • text-to-speech • bookmarks • progress tracker • lightbox • dark/light mode • ePUB converter • advanced search form • OAuth 2.0 logins (Discord, Google, Twitch, and Patreon) • Patreon content gate • post password expiration • gate content for users and roles • role manager • responsive layout • cache aware • custom comment system • AJAX comments • private comments • comment reply subscriptions • send notifications to Discord • search engine optimization • GDPR compliant • hue, saturation, and lightness sliders • translation ready • compatible with Elementor
 
 ## Customization & Child Themes
 

config.codekit3

@@ -220,6 +220,18 @@
       "oF" : 1,
       "pg" : 0
     },
+    "\/css\/customize\/card-frame-battered.css" : {
+      "aP" : 1,
+      "bl" : 0,
+      "ci" : 0,
+      "co" : 0,
+      "ft" : 16,
+      "ma" : 0,
+      "oA" : 0,
+      "oAP" : "\/css\/customize\/card-frame-battered-min.css",
+      "oF" : 0,
+      "pg" : 0
+    },
     "\/css\/customize\/card-frame-chamfered.css" : {
       "aP" : 1,
       "bl" : 0,
@@ -2027,6 +2039,30 @@
       "oAP" : "\/singular-bookshelf.php",
       "oF" : 1
     },
+    "\/singular-canvas-main.php" : {
+      "cB" : 0,
+      "ft" : 8192,
+      "hM" : 0,
+      "oA" : 1,
+      "oAP" : "\/singular-canvas-main.php",
+      "oF" : 1
+    },
+    "\/singular-canvas-page.php" : {
+      "cB" : 0,
+      "ft" : 8192,
+      "hM" : 0,
+      "oA" : 1,
+      "oAP" : "\/singular-canvas-page.php",
+      "oF" : 1
+    },
+    "\/singular-canvas-site.php" : {
+      "cB" : 0,
+      "ft" : 8192,
+      "hM" : 0,
+      "oA" : 1,
+      "oAP" : "\/singular-canvas-site.php",
+      "oF" : 1
+    },
     "\/singular-index-advanced.php" : {
       "cB" : 0,
       "ft" : 8192,

footer.php

@@ -49,11 +49,15 @@ do_action( 'fictioneer_after_main', $args );
 
 ?>
 
+      <?php if ( ! ( $args['blank'] ?? 0 ) ) :
+        if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'footer' ) ) :
+      ?>
         <footer class="footer layout-links <?php echo implode( ' ', $extra_classes ); ?>">
           <div class="footer__wrapper">
             <?php do_action( 'fictioneer_site_footer', $args ); ?>
           </div>
         </footer>
+      <?php endif; endif; ?>
     </div> <!-- #site -->
 
     <?php

includes/functions/_setup-theme.php

@@ -1718,3 +1718,120 @@ function fictioneer_adminbar_add_theme_settings_link( $wp_admin_bar ) {
   $wp_admin_bar->add_node( $args );
 }
 add_action( 'admin_bar_menu', 'fictioneer_adminbar_add_theme_settings_link', 999 );
+
+// =============================================================================
+// ELEMENTOR (IF YOU ABSOLUTELY HAVE TO)
+// =============================================================================
+
+/**
+ * Register Elementor locations
+ *
+ * @since 5.20.0
+ *
+ * @param object $elementor_theme_manager  The Elementor manager object.
+ */
+
+function fictioneer_register_elementor_locations( $elementor_theme_manager ) {
+	$elementor_theme_manager->register_location( 'header' );
+	$elementor_theme_manager->register_location( 'footer' );
+}
+
+function fictioneer_override_elementor_styles() {
+  // Dummy style
+  wp_register_style( 'fictioneer-elementor-override', false );
+  wp_enqueue_style( 'fictioneer-elementor-override', false );
+
+  // Setup
+  $kit_id = get_option( 'elementor_active_kit' );
+  $css = ".elementor-kit-{$kit_id} {
+    --e-global-color-primary: var(--primary-500);
+    --e-global-color-secondary: var(--fg-300);
+    --e-global-color-text: var(--fg-500);
+    --e-global-color-accent: var(--fg-700);
+  }";
+
+  // Output
+  wp_add_inline_style( 'fictioneer-elementor-override', fictioneer_minify_css( $css ) );
+}
+
+add_action(
+  'wp',
+  function() {
+    if ( is_plugin_active( 'elementor/elementor.php' ) ) {
+      add_action( 'elementor/theme/register_locations', 'fictioneer_register_elementor_locations' );
+      add_action( 'wp_enqueue_scripts', 'fictioneer_override_elementor_styles', 9999 );
+    }
+  }
+);
+
+function fictioneer_override_elementor_editor_styles() {
+  // Dummy style
+  wp_register_style( 'fictioneer-elementor-editor-override', false );
+  wp_enqueue_style( 'fictioneer-elementor-editor-override', false );
+
+  // Setup
+  $css = '
+    body {
+      --primary-500: ' . fictioneer_get_theme_color( 'light_primary_500' ) . ';
+      --fg-300: ' . fictioneer_get_theme_color( 'light_fg_300' ) . ';
+      --fg-500: ' . fictioneer_get_theme_color( 'light_fg_500' ) . ';
+      --fg-700: ' . fictioneer_get_theme_color( 'light_fg_700' ) . ';
+    }
+
+    .e-global__color[data-global-id="primary"] .e-global__color-preview-color {
+      background-color: var(--primary-500) !important;
+    }
+
+    .e-global__color[data-global-id="primary"] .e-global__color-title::after {
+      content: " ' . _x( '(--primary-500)', 'Elementor color override hint.', 'fictioneer' ) . '";
+    }
+
+    .e-global__popover-toggle--active + .pickr .pcr-button[style="--pcr-color: rgba(110, 193, 228, 1);"]::after {
+      background: var(--primary-500) !important;
+    }
+
+    .e-global__color[data-global-id="secondary"] .e-global__color-preview-color {
+      background-color: var(--fg-300) !important;
+    }
+
+    .e-global__color[data-global-id="secondary"] .e-global__color-title::after {
+      content: " ' . _x( '(--fg-300)', 'Elementor color override hint.', 'fictioneer' ) . '";
+    }
+
+    .e-global__popover-toggle--active + .pickr .pcr-button[style="--pcr-color: rgba(84, 89, 95, 1);"]::after {
+      background: var(--fg-300) !important;
+    }
+
+    .e-global__color[data-global-id="text"] .e-global__color-preview-color {
+      background-color: var(--fg-500) !important;
+    }
+
+    .e-global__color[data-global-id="text"] .e-global__color-title::after {
+      content: " ' . _x( '(--fg-500)', 'Elementor color override hint.', 'fictioneer' ) . '";
+    }
+
+    .e-global__popover-toggle--active + .pickr .pcr-button[style="--pcr-color: rgba(122, 122, 122, 1);"]::after {
+      background: var(--fg-500) !important;
+    }
+
+    .e-global__color[data-global-id="accent"] .e-global__color-preview-color {
+      background-color: var(--fg-700) !important;
+    }
+
+    .e-global__color[data-global-id="accent"] .e-global__color-title::after {
+      content: " ' . _x( '(--fg-700)', 'Elementor color override hint.', 'fictioneer' ) . '";
+    }
+
+    .e-global__popover-toggle--active + .pickr .pcr-button[style="--pcr-color: rgba(97, 206, 112, 1);"]::after {
+      background: var(--fg-700) !important;
+    }
+
+    .e-global__color .e-global__color-hex {
+      display: none;
+    }
+  ';
+
+  // Output
+  wp_add_inline_style( 'fictioneer-elementor-editor-override', fictioneer_minify_css( $css ) );
+}
+add_action( 'elementor/editor/after_enqueue_styles', 'fictioneer_override_elementor_editor_styles', 9999 );

includes/functions/hooks/_general_hooks.php

@@ -218,6 +218,7 @@ add_action( 'fictioneer_footer', 'fictioneer_output_modals' );
  */
 
 function fictioneer_browser_notes() {
+  // Setup
   $notes = [];
 
   // Catch IE and other garbage!
@@ -276,6 +277,11 @@ if ( FICTIONEER_ENABLE_BROWSER_NOTES ) {
  */
 
 function fictioneer_navigation_bar( $args ) {
+  // Return early if...
+  if ( $args['header_args']['blank'] ?? 0 ) {
+    return;
+  }
+
   // Change tag if header style 'wide'
   if ( get_theme_mod( 'header_style', 'default' ) === 'wide' ) {
     $args['tag'] = 'header';
@@ -352,13 +358,21 @@ add_action( 'fictioneer_navigation_wrapper_start', 'fictioneer_wide_header_ident
  */
 
 function fictioneer_top_header( $args ) {
+  // Return early if...
+  if ( $args['header_args']['blank'] ?? 0 ) {
+    return;
+  }
+
   // Abort if...
   if ( ! in_array( get_theme_mod( 'header_style', 'default' ), ['top', 'split'] ) ) {
     return;
   }
 
+  // Render Elementor or theme template
+  if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) {
     get_template_part( 'partials/_header-top', null, $args );
   }
+}
 add_action( 'fictioneer_site', 'fictioneer_top_header', 9 );
 
 // =============================================================================
@@ -377,18 +391,27 @@ add_action( 'fictioneer_site', 'fictioneer_top_header', 9 );
  */
 
 function fictioneer_inner_header( $args ) {
-  $theme_mod = get_theme_mod( 'header_style', 'default' );
-
-  // Abort if...
-  if ( ! in_array( $theme_mod, ['default', 'split', 'overlay'] ) ) {
+  // Return early if...
+  if ( $args['header_args']['blank'] ?? 0 ) {
     return;
   }
 
+  // Setup
+  $theme_mod = get_theme_mod( 'header_style', 'default' );
+
+  // Abort if...
+  if ( ! in_array( $theme_mod, ['default', 'split', 'overlay'] ) || ( $args['header_args']['no_header'] ?? 0 ) ) {
+    return;
+  }
+
+  // Render Elementor or theme template
+  if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) {
     switch ( $theme_mod ) {
       default:
         get_template_part( 'partials/_header-inner', null, $args );
     }
   }
+}
 add_action( 'fictioneer_site', 'fictioneer_inner_header', 20 );
 
 // =============================================================================
@@ -408,7 +431,7 @@ add_action( 'fictioneer_site', 'fictioneer_inner_header', 20 );
 
 function fictioneer_inner_header_background( $args ) {
   // Abort if...
-  if ( ! ( $args['header_image_url'] ?? 0 ) ) {
+  if ( ! ( $args['header_image_url'] ?? 0 ) || ( $args['header_args']['no_header'] ?? 0 ) ) {
     return;
   }
 
@@ -888,6 +911,11 @@ if ( get_option( 'fictioneer_show_wp_login_link' ) ) {
  */
 
 function fictioneer_mu_registration_start( $args ) {
+  // Return early if...
+  if ( $args['header_args']['blank'] ?? 0 ) {
+    return;
+  }
+
   // Start HTML ---> ?>
   <main id="main" class="main singular wp-registration">
     <div class="observer main-observer"></div>

singular-canvas-main.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Template Name: Canvas (Main)
+ *
+ * @package WordPress
+ * @subpackage Fictioneer
+ * @since 5.20.0
+ */
+
+
+// Setup
+$post_id = get_the_ID();
+
+// Header
+get_header();
+
+?>
+
+<main id="main" class="canvas">
+
+  <div class="observer main-observer"></div>
+
+  <?php
+    while ( have_posts() ) {
+      the_post();
+
+      // Setup
+      $title = fictioneer_get_safe_title( $post_id, 'singular-canvas' );
+      $this_breadcrumb = [ $title, get_the_permalink() ];
+
+      the_content();
+    }
+  ?>
+
+</main>
+
+<?php
+  // Footer arguments
+  $footer_args = array(
+    'post_type' => 'page',
+    'post_id' => $post_id,
+    'breadcrumbs' => array(
+      [fcntr( 'frontpage' ), get_home_url()]
+    )
+  );
+
+  // Add current breadcrumb
+  $footer_args['breadcrumbs'][] = $this_breadcrumb;
+
+  // Get footer with breadcrumbs
+  get_footer( null, $footer_args );
+?>

singular-canvas-page.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * Template Name: Canvas (Page)
+ *
+ * @package WordPress
+ * @subpackage Fictioneer
+ * @since 5.20.0
+ */
+
+
+// Setup
+$post_id = get_the_ID();
+
+// Header
+get_header();
+
+?>
+
+<main id="main" class="main canvas">
+
+  <div class="observer main-observer"></div>
+
+  <?php do_action( 'fictioneer_main' ); ?>
+
+  <div class="main__background polygon polygon--main background-texture"></div>
+
+  <div class="main__wrapper">
+
+    <?php do_action( 'fictioneer_main_wrapper' ); ?>
+
+    <?php while ( have_posts() ) : the_post(); ?>
+
+      <?php
+        // Setup
+        $title = fictioneer_get_safe_title( $post_id, 'singular-titleless' );
+        $this_breadcrumb = [ $title, get_the_permalink() ];
+      ?>
+
+      <article id="singular-<?php echo $post_id; ?>" class="singular__article">
+
+        <section class="singular__content content-section"><?php the_content(); ?></section>
+
+        <footer class="singular__footer"><?php do_action( 'fictioneer_singular_footer' ); ?></footer>
+
+      </article>
+
+    <?php endwhile; ?>
+
+  </div>
+
+</main>
+
+<?php
+  // Footer arguments
+  $footer_args = array(
+    'post_type' => 'page',
+    'post_id' => $post_id,
+    'breadcrumbs' => array(
+      [fcntr( 'frontpage' ), get_home_url()]
+    )
+  );
+
+  // Add current breadcrumb
+  $footer_args['breadcrumbs'][] = $this_breadcrumb;
+
+  // Get footer with breadcrumbs
+  get_footer( null, $footer_args );
+?>

singular-canvas-site.php

@@ -0,0 +1,53 @@
+<?php
+/**
+ * Template Name: Canvas (Site)
+ *
+ * @package WordPress
+ * @subpackage Fictioneer
+ * @since 5.20.0
+ */
+
+
+// Setup
+$post_id = get_the_ID();
+
+// Header
+get_header( null, array( 'blank' => 1 ) );
+
+?>
+
+<main id="main" class="canvas">
+
+  <div class="observer main-observer"></div>
+
+  <?php
+    while ( have_posts() ) {
+      the_post();
+
+      // Setup
+      $title = fictioneer_get_safe_title( $post_id, 'singular-canvas' );
+      $this_breadcrumb = [ $title, get_the_permalink() ];
+
+      the_content();
+    }
+  ?>
+
+</main>
+
+<?php
+  // Footer arguments
+  $footer_args = array(
+    'blank' => 1,
+    'post_type' => 'page',
+    'post_id' => $post_id,
+    'breadcrumbs' => array(
+      [fcntr( 'frontpage' ), get_home_url()]
+    )
+  );
+
+  // Add current breadcrumb
+  $footer_args['breadcrumbs'][] = $this_breadcrumb;
+
+  // Get footer with breadcrumbs
+  get_footer( null, $footer_args );
+?>

src/scss/common/_base.scss

@@ -33,13 +33,17 @@
   flex: 0 0 auto;
 }
 
-.main {
+.main,
+.canvas {
   position: relative;
   flex: 1 1 auto;
   color: var(--fg-500);
+  width: 100%;
+}
+
+.main {
   margin-top: var(--main-offset, 0);
   max-width: var(--site-width);
-  width: 100%;
 
   // Allows for semi-transparent and clipped backgrounds without affecting the content
   &__background {

stubs.php

@@ -59,3 +59,11 @@ function random_bytes( int $length ) {}
  */
 
 function wp_admin_notice( string $message, array $args = array() ) {}
+
+/**
+ * Render Elementor template
+ *
+ * @param string $location  Template location.
+ */
+
+function elementor_theme_do_location( $location ) {}