Add header style post_content

config.codekit3

@@ -376,6 +376,18 @@
       "oF" : 1,
       "pg" : 0
     },
+    "\/css\/customize\/header-style-text-center.css" : {
+      "aP" : 1,
+      "bl" : 0,
+      "ci" : 0,
+      "co" : 0,
+      "ft" : 16,
+      "ma" : 0,
+      "oA" : 0,
+      "oAP" : "\/css\/customize\/header-style-text-center-min.css",
+      "oF" : 0,
+      "pg" : 0
+    },
     "\/css\/customize\/header-style-top-split.css" : {
       "aP" : 1,
       "bl" : 0,
@@ -3512,6 +3524,21 @@
       "pg" : 0,
       "sct" : 0
     },
+    "\/src\/scss\/customize\/header-style-post-content.scss" : {
+      "aP" : 0,
+      "bl" : 0,
+      "co" : 0,
+      "dP" : 10,
+      "ec" : 1,
+      "ft" : 4,
+      "ma" : 0,
+      "oA" : 0,
+      "oAP" : "\/css\/customize\/header-style-post-content.css",
+      "oF" : 2,
+      "oS" : 3,
+      "pg" : 0,
+      "sct" : 0
+    },
     "\/src\/scss\/customize\/header-style-text-center.scss" : {
       "aP" : 0,
       "bl" : 0,

css/customize/header-style-post-content.css

@@ -0,0 +1 @@
+.post-content-header{flex:1 1 100%;width:100%}.post-content-header>:not(.alignfull){margin-left:auto;margin-right:auto;max-width:var(--site-width)}.post-content-header>*{width:var(--site-width)}.post-content-header>.alignfull{width:100%}

includes/functions/_customizer-settings.php

@@ -1428,9 +1428,10 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
     'default' => _x( 'Default (Image)', 'Customizer header style option.', 'fictioneer' ),
     'split' => _x( 'Split (Image)', 'Customizer header style option.', 'fictioneer' ),
     'overlay' => _x( 'Overlay (Image)', 'Customizer header style option.', 'fictioneer' ),
+    'text_center' => _x( 'Text (Center)', 'Customizer header style option.', 'fictioneer' ),
+    'post_content' => _x( 'Post Content (ID)', 'Customizer header style option.', 'fictioneer' ),
     'top' => _x( 'Top', 'Customizer header style option.', 'fictioneer' ),
     'wide' => _x( 'Wide', 'Customizer header style option.', 'fictioneer' ),
-    'text_center' => _x( 'Text (Center)', 'Customizer header style option.', 'fictioneer' ),
     'none' => _x( 'None', 'Customizer header style option.', 'fictioneer' )
   );
 
@@ -1469,6 +1470,31 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
     )
   );
 
+  // Post content header iD
+  $manager->add_setting(
+    'header_post_content_id',
+    array(
+      'capability' => 'edit_theme_options',
+      'sanitize_callback' => 'absint',
+      'default' => ''
+    )
+  );
+
+  $manager->add_control(
+    'header_post_content_id',
+    array(
+      'type' => 'number',
+      'priority' => 10,
+      'section' => 'layout',
+      'label' => __( 'Post Content Header ID', 'fictioneer' ),
+      'description' => __( 'Only used by the Post Content header style. Enter the ID of the post or page you want to render as header.', 'fictioneer' ),
+      'input_attrs' => array(
+        'style' => 'width: 80px',
+        'min' => 0
+      )
+    )
+  );
+
   // Clamp minimum for header height
   $manager->add_setting(
     'header_height_min',

includes/functions/_customizer.php

@@ -960,6 +960,10 @@ function fictioneer_build_customize_css( $context = null ) {
     $css .= fictioneer_get_customizer_css_snippet( 'header-style-text-center' );
   }
 
+  if ( $header_style === 'post_content' ) {
+    $css .= fictioneer_get_customizer_css_snippet( 'header-style-post-content' );
+  }
+
   // --- Page styles -----------------------------------------------------------
 
   if ( $page_style === 'polygon-mask-image-battered-ringbook' || $page_style === 'polygon-battered' ) {

includes/functions/hooks/_general_hooks.php

@@ -418,6 +418,60 @@ function fictioneer_text_center_header( $args ) {
 }
 add_action( 'fictioneer_site', 'fictioneer_text_center_header', 20 );
 
+// =============================================================================
+// OUTPUT POST CONTENT HEADER
+// =============================================================================
+
+/**
+ * Outputs the HTML for the post content header
+ *
+ * @since 5.21.0
+ *
+ * @param int|null       $args['post_id']           Optional. Current post ID.
+ * @param int|null       $args['story_id']          Optional. Current story ID (if chapter).
+ * @param string|boolean $args['header_image_url']  URL of the filtered header image or false.
+ * @param array          $args['header_args']       Arguments passed to the header.php partial.
+ */
+
+function fictioneer_post_content_header( $args ) {
+  // Return early if...
+  if ( ( $args['header_args']['blank'] ?? 0 ) ) {
+    return;
+  }
+
+  // Setup
+  $post_id = get_theme_mod( 'header_post_content_id', 0 );
+  $theme_mod = get_theme_mod( 'header_style', 'default' );
+
+  // Abort if...
+  if ( $theme_mod !== 'post_content' || ! $post_id || ( $args['header_args']['no_header'] ?? 0 ) ) {
+    return;
+  }
+
+  // Get post
+  global $post;
+
+  $original_post = $post;
+  $post = get_post( $post_id );
+
+  if ( ! $post ) {
+    $post = $original_post;
+    return;
+  }
+
+  // Render Elementor or theme template
+  if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) {
+    setup_postdata( $post );
+    $content = apply_filters( 'get_the_content', $post->post_content );
+    $content = apply_filters( 'the_content', $content );
+    wp_reset_postdata();
+    $post = $original_post;
+
+    echo '<header class="post-content-header content-section hide-on-fullscreen">' . $content . '</header>';
+  }
+}
+add_action( 'fictioneer_site', 'fictioneer_post_content_header', 20 );
+
 // =============================================================================
 // OUTPUT HEADER BACKGROUND
 // =============================================================================

src/scss/customize/header-style-post-content.scss

@@ -0,0 +1,18 @@
+.post-content-header {
+  flex: 1 1 100%;
+  width: 100%;
+
+  > :not(.alignfull) {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: var(--site-width);
+  }
+
+  > * {
+    width: var(--site-width);
+  }
+
+  > .alignfull {
+    width: 100%;
+  }
+}