Add wide header style

ACTIONS.md

@@ -717,17 +717,43 @@ Fires within the `#full-navigation` container in the `_navigation.php` partial,
 * $story_id (int|null) – Current story ID (if chapter). Unsafe.
 * $header_image_url (string|boolean) – URL of the filtered header image or false.
 * $header_args (array) – Arguments passed to the header.php partial.
+* $tag (string|null) – Override wrapping tag of the navigation row. Unsafe.
 
 ---
 
 ### `do_action( 'fictioneer_navigation_top', $args )`
-Fires within the `#full-navigation` container in the `_navigation.php` partial, right after the header background and before the main navigation wrapper is rendered.
+Fires within the `#full-navigation` container in the `_navigation.php` partial, right after the navigation background and before the main navigation wrapper is rendered.
 
 **$args:**
 * $post_id (int|null) – Current post ID. Unsafe.
 * $story_id (int|null) – Current story ID (if chapter). Unsafe.
 * $header_image_url (string|boolean) – URL of the filtered header image or false.
 * $header_args (array) – Arguments passed to the header.php partial.
+* $tag (string|null) – Override wrapping tag of the navigation row. Unsafe.
+
+---
+
+### `do_action( 'fictioneer_navigation_wrapper_end', $args )`
+Fires before closing the `.main-navigation__wrapper` container in the `_navigation.php` partial, right after the navigation items (menu, icons, etc.) have been rendered.
+
+**$args:**
+* $post_id (int|null) – Current post ID. Unsafe.
+* $story_id (int|null) – Current story ID (if chapter). Unsafe.
+* $header_image_url (string|boolean) – URL of the filtered header image or false.
+* $header_args (array) – Arguments passed to the header.php partial.
+* $tag (string|null) – Override wrapping tag of the navigation row. Unsafe.
+
+---
+
+### `do_action( 'fictioneer_navigation_wrapper_start', $args )`
+Fires after opening the `.main-navigation__wrapper` container in the `_navigation.php` partial, right before the navigation items (menu, icons, etc.) are rendered.
+
+**$args:**
+* $post_id (int|null) – Current post ID. Unsafe.
+* $story_id (int|null) – Current story ID (if chapter). Unsafe.
+* $header_image_url (string|boolean) – URL of the filtered header image or false.
+* $header_args (array) – Arguments passed to the header.php partial.
+* $tag (string|null) – Override wrapping tag of the navigation row. Unsafe.
 
 ---
 

css/customize/header-style-wide.css

@@ -0,0 +1 @@
+.main-navigation{margin:0 auto}.main-navigation__wrapper{--v: var(--header-wide-vertical-padding, 20px);align-items:center;justify-content:space-between;padding:var(--v) 4px var(--v) clamp(10px,18.1818181818vw - 48.1818181818px,20px);width:100%;max-width:max(var(--site-width),1440px)}@media only screen and (min-width: 1024px){.main-navigation__wrapper{padding:var(--v) 40px}}.wide-header-logo{margin-right:1.5rem}.wide-header-logo .custom-logo{display:block;height:var(--header-logo-height);max-height:var(--header-logo-height);width:fit-content;object-fit:contain}.wide-header-identity{flex:0 1 auto;margin-right:1.5rem}.wide-header-identity:not(._no-text-shadow){text-shadow:var(--site-title-text-shadow)}.wide-header-identity__title{color:var(--site-title-heading-color);font:900 var(--site-title-font-size)/1 var(--ff-site-title)}.wide-header-identity__tagline{color:var(--site-title-tagline-color);font:500 var(--site-title-tagline-font-size)/1 var(--ff-site-title);white-space:nowrap;margin-top:.5em}

includes/functions/_customizer-settings.php

@@ -1368,10 +1368,11 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
   );
 
   $header_styles = array(
-    'default' => _x( 'Default', 'Customizer header style option.', 'fictioneer' ),
+    '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' ),
     'top' => _x( 'Top', 'Customizer header style option.', 'fictioneer' ),
-    'split' => _x( 'Split', 'Customizer header style option.', 'fictioneer' ),
-    'overlay' => _x( 'Overlay', 'Customizer header style option.', 'fictioneer' ),
+    'wide' => _x( 'Wide', 'Customizer header style option.', 'fictioneer' ),
     'none' => _x( 'None', 'Customizer header style option.', 'fictioneer' )
   );
 
@@ -1382,7 +1383,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
       'priority' => 10,
       'section' => 'layout',
       'label' => __( 'Header Style', 'fictioneer' ),
-      'description' => __( 'Choose the style for your header. This may affect or disable other settings.', 'fictioneer' ),
+      'description' => __( 'Choose the style for your header. This can affect or disable other settings.', 'fictioneer' ),
       'choices' => apply_filters( 'fictioneer_filter_customizer_header_style', $header_styles )
     )
   );

includes/functions/_customizer.php

@@ -939,6 +939,10 @@ function fictioneer_build_customize_css( $context = null ) {
     $css .= fictioneer_get_customizer_css_snippet( 'header-style-top-split' );
   }
 
+  if ( $header_style === 'wide' ) {
+    $css .= fictioneer_get_customizer_css_snippet( 'header-style-wide' );
+  }
+
   // --- Page styles -----------------------------------------------------------
 
   if ( $page_style === 'polygon-mask-image-battered-ringbook' || $page_style === 'polygon-battered' ) {

includes/functions/hooks/_general_hooks.php

@@ -276,10 +276,66 @@ if ( FICTIONEER_ENABLE_BROWSER_NOTES ) {
  */
 
 function fictioneer_navigation_bar( $args ) {
+  // Change tag if header style 'wide'
+  if ( get_theme_mod( 'header_style', 'default' ) === 'wide' ) {
+    $args['tag'] = 'header';
+  }
+
+  // Render partial
   get_template_part( 'partials/_navigation', null, $args );
 }
 add_action( 'fictioneer_site', 'fictioneer_navigation_bar', 10 );
 
+// =============================================================================
+// OUTPUT WIDE HEADER
+// =============================================================================
+
+/**
+ * Outputs site identity HTML for wide header
+ *
+ * @since 5.12.5
+ *
+ * @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_wide_header_identity( $args ) {
+  // Abort if...
+  if ( get_theme_mod( 'header_style', 'default' ) !== 'wide' ) {
+    return;
+  }
+
+  // Setup
+  $title_tag = is_front_page() ? 'h1' : 'div';
+  $logo_tag = ( display_header_text() || ! is_front_page() ) ? 'div' : 'h1';
+
+  // Logo
+  if ( has_custom_logo() ) {
+    echo '<' . $logo_tag . ' class="wide-header-logo">' . get_custom_logo() . '</' . $logo_tag . '>';
+  }
+
+  // Title and tagline (if any)
+  if ( ! display_header_text() ) {
+    return;
+  }
+
+  $text_shadow = get_theme_mod( 'title_text_shadow', false ) ? '' : '_no-text-shadow';
+  $url = esc_url( home_url() );
+  $name = get_bloginfo( 'name' );
+  $tagline = get_bloginfo( 'description' );
+
+  echo "<div class='wide-header-identity {$text_shadow}'><{$title_tag} class='wide-header-identity__title'><a href='{$url}' class='wide-header-identity__title-link' rel='home'>{$name}</{$title_tag}></a>";
+
+  if ( $tagline ) {
+    echo "<div class='wide-header-identity__tagline'>{$tagline}</div>";
+  }
+
+  echo "</div>";
+}
+add_action( 'fictioneer_navigation_wrapper_start', 'fictioneer_wide_header_identity' );
+
 // =============================================================================
 // OUTPUT TOP HEADER
 // =============================================================================

partials/_icon-menu.php

@@ -142,7 +142,7 @@ if ( ! empty( $profile_page_id ) && $profile_page_id > 0 ) {
   <?php endif; ?>
 
   <?php if ( fictioneer_show_auth_content() ) : ?>
-    <div class="menu-item menu-item-icon hide-if-logged-out">
+    <div class="menu-item menu-item-icon hide-if-logged-out hide-outside-mobile-menu">
       <a
         href="<?php echo fictioneer_get_logout_url(); ?>"
         title="<?php esc_attr_e( 'Logout', 'fictioneer' ); ?>"

partials/_navigation.php

@@ -7,11 +7,13 @@
  * @package WordPress
  * @subpackage Fictioneer
  * @since 5.0.0
+ * @since 5.12.5 - Added wrapper actions and support for wide header.
  *
  * @internal $args['post_id']           Optional. Current post ID.
  * @internal $args['story_id']          Optional. Current story ID (if chapter).
  * @internal $args['header_image_url']  URL of the filtered header image or false.
  * @internal $args['header_args']       Arguments passed to the header.php partial.
+ * @internal $args['tag']               Optional. Wrapping tag.
  */
 ?>
 
@@ -21,22 +23,33 @@
 defined( 'ABSPATH' ) OR exit;
 
 // Setup
+$header_style = get_theme_mod( 'header_style', 'default' );
+$mobile_nav_style = get_theme_mod( 'mobile_nav_style', 'overflow' );
+$tag = $args['tag'] ?? 'div';
 $classes = [];
 
-if ( get_theme_mod( 'mobile_nav_style', 'overflow' ) === 'collapse' ) {
+if ( $mobile_nav_style === 'overflow' || $header_style === 'wide' ) {
   $classes[] = '_collapse-on-mobile';
 }
 
+if ( $header_style === 'wide' ) {
+  $classes[] = '_wide';
+}
+
 ?>
 
-<nav id="full-navigation" class="main-navigation <?php echo implode( ' ', $classes ); ?>" aria-label="<?php echo esc_attr__( 'Main Navigation', 'fictioneer' ); ?>">
+<<?php echo $tag; ?> id="full-navigation" class="main-navigation <?php echo implode( ' ', $classes ); ?>">
+
   <div id="nav-observer-sticky" class="observer nav-observer"></div>
+
   <div class="main-navigation__background"></div>
 
   <?php do_action( 'fictioneer_navigation_top', $args ); ?>
 
   <div class="main-navigation__wrapper">
 
+    <?php do_action( 'fictioneer_navigation_wrapper_start', $args ); ?>
+
     <label for="mobile-menu-toggle" class="mobile-menu-button follows-alert-number">
       <?php
         fictioneer_icon( 'fa-bars', 'off' );
@@ -45,7 +58,7 @@ if ( get_theme_mod( 'mobile_nav_style', 'overflow' ) === 'collapse' ) {
       <span class="mobile-menu-button__label"><?php _ex( 'Menu' , 'Mobile menu label', 'fictioneer'); ?></span>
     </label>
 
-    <div class="main-navigation__left">
+    <nav class="main-navigation__left" aria-label="<?php echo esc_attr__( 'Main Navigation', 'fictioneer' ); ?>">
       <?php
         if ( has_nav_menu( 'nav_menu' ) ) {
           $menu = null;
@@ -80,14 +93,16 @@ if ( get_theme_mod( 'mobile_nav_style', 'overflow' ) === 'collapse' ) {
           echo $menu;
         }
       ?>
-    </div>
+    </nav>
 
     <div class="main-navigation__right">
       <?php get_template_part( 'partials/_icon-menu', null, array( 'location' => 'in-navigation' ) ); ?>
     </div>
 
+    <?php do_action( 'fictioneer_navigation_wrapper_end', $args ); ?>
+
   </div>
 
   <?php do_action( 'fictioneer_navigation_bottom', $args ); ?>
 
-</nav>
+</<?php echo $tag; ?>>

src/scss/_navigation.scss

@@ -55,7 +55,7 @@
 }
 
 // Case below 1024px
-:root:not(.no-nav-sticky, .header-style-overlay) .main-navigation.is-sticky {
+:root:not(.no-nav-sticky, .header-style-overlay, .header-style-wide) .main-navigation.is-sticky {
   .main-navigation__background {
     @media only screen and (max-width: 1023px) {
       opacity: var(--navigation-background-end-opacity);
@@ -151,7 +151,7 @@
       }
     }
 
-    .mobile-menu-button {
+    &:not(._wide) .mobile-menu-button {
       &__label {
         display: block;
 
@@ -162,6 +162,16 @@
     }
   }
 
+  // Customizer: Wide header
+  &._wide {
+    @media only screen and (max-width: 1023px) {
+      :is(.main-navigation__left, .main-navigation__right) {
+        display: none;
+        content-visibility: visible;
+      }
+    }
+  }
+
   &__right {
     flex-shrink: 0;
   }

src/scss/common/_utility.scss

@@ -320,6 +320,7 @@ body:not(.is-editor):not(.is-admin) {
 html:not(.logged-in) body.logged-in .hide-if-logged-in,
 html:not(.logged-in) body:not(.logged-in) .hide-if-logged-out,
 .mobile-menu .hide-in-mobile-menu,
+.site .hide-outside-mobile-menu,
 .hidden,
 .inside-epub {
   display: none !important;

src/scss/customize/header-style-wide.scss

@@ -0,0 +1,52 @@
+@import '../common/_functions';
+@import '../common/_mixins';
+
+.main-navigation {
+  margin: 0 auto;
+
+  &__wrapper {
+    --v: var(--header-wide-vertical-padding, 20px);
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--v) 4px var(--v) get_clamp(10, 20, 320, 375);
+    width: 100%;
+    max-width: max(var(--site-width), 1440px);
+
+    @include bp(1024px) {
+      padding: var(--v) 40px;
+    }
+  }
+}
+
+.wide-header-logo {
+  margin-right: 1.5rem;
+
+  .custom-logo {
+    display: block;
+    height: var(--header-logo-height);
+    max-height: var(--header-logo-height);
+    width: fit-content;
+    object-fit: contain;
+  }
+}
+
+.wide-header-identity {
+  flex: 0 1 auto;
+  margin-right: 1.5rem;
+
+  &:not(._no-text-shadow) {
+    text-shadow: var(--site-title-text-shadow);
+  }
+
+  &__title {
+    color: var(--site-title-heading-color);
+    font: 900 var(--site-title-font-size)/1 var(--ff-site-title);
+  }
+
+  &__tagline {
+    color: var(--site-title-tagline-color);
+    font: 500 var(--site-title-tagline-font-size)/1 var(--ff-site-title);
+    white-space: nowrap;
+    margin-top: .5em;
+  }
+}