Add page_background Elementor location

DOCUMENTATION.md

@@ -1149,9 +1149,26 @@ Renders the theme sidebar (not displayed anywhere by default). Requires the "Dis
 
 ## Elementor
 
-If you have the Elementor plugin installed, consider using the [Fictioneer 002 Elementor Control](https://github.com/Tetrakern/fictioneer/blob/main/INSTALLATION.md#recommended-must-use-plugins) plugin if you only need it for the Canvas page templates. If you have the Pro version and want to use the theme builder, this may not be an option, but you can customize the following locations: `header`, `footer`, `nav_bar`, `nav_menu`, `mobile_nav_menu`, and `story_header`.
+If you have the Elementor plugin installed, consider using the [Fictioneer 002 Elementor Control](https://github.com/Tetrakern/fictioneer/blob/main/INSTALLATION.md#recommended-must-use-plugins) plugin if you only need it for the Canvas page templates. If you have the Pro version and want to use the theme builder, this may not be an option, but you can customize the following locations: `header`, `footer`, `nav_bar`, `nav_menu`, `mobile_nav_menu`, `story_header`, and `page_background`.
 
-**Notes:**
+**Page Background**
+
+This location can be confusing. The page background is actually a separate element in the theme, positioned under the content container and made inaccessible. This allows for various styling shenanigans without ever affecting the content, such as clip-paths and masks applied to an inner `::before` pseudo-element. The page styles from the Customizer make heavy use of this. If you overwrite this location, you must ensure to properly move it to the background. The base default CSS is as follows:
+
+```css
+.main__background {
+  pointer-events: none;
+  user-select: none;
+  position: absolute;
+  inset: var(--page-inset-top) 0 0 0;
+  z-index: 0;
+  background-color: var(--page-bg-color);
+  box-shadow: var(--page-box-shadow);
+  contain: layout style;
+}
+```
+
+**Hints:**
 
 * The `nav_bar` location also overwrites the `nav_menu` location.
 * Trying to overwrite the default navigation is generally a poor life choice, but you do you.

includes/functions/_helpers-templates.php

@@ -2078,10 +2078,13 @@ add_action( 'fictioneer_main', 'fictioneer_main_observer', 1 );
  */
 
 function fictioneer_page_background( $context = null ) {
-  // Setup
-  $background = '<div class="main__background polygon polygon--main background-texture"></div>';
+  // Elementor?
+  if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'page_background' ) ) {
+    // Setup
+    $background = '<div class="main__background polygon polygon--main background-texture"></div>';
 
-  // Render
-  echo apply_filters( 'fictioneer_filter_page_background', $background );
+    // Render
+    echo apply_filters( 'fictioneer_filter_page_background', $background );
+  }
 }
 add_action( 'fictioneer_main', 'fictioneer_page_background' );

includes/functions/_setup-theme.php

@@ -1800,6 +1800,15 @@ function fictioneer_elementor_register_locations( $elementor_theme_manager ) {
       'edit_in_content' => true
     )
   );
+
+  $elementor_theme_manager->register_location(
+    'page_background',
+    array(
+      'label' => esc_html__( 'Page Background', 'fictioneer' ),
+      'multiple' => false,
+      'edit_in_content' => false
+    )
+  );
 }
 
 /**

src/scss/common/_base.scss

@@ -47,6 +47,8 @@
 
   // Allows for semi-transparent and clipped backgrounds without affecting the content
   &__background {
+    pointer-events: none;
+    user-select: none;
     position: absolute;
     inset: var(--page-inset-top) 0 0 0;
     z-index: 0;