diff --git a/assets/css/deprecate-style.css b/assets/css/deprecate-style.css
index 8baec96e..c3a125e8 100644
--- a/assets/css/deprecate-style.css
+++ b/assets/css/deprecate-style.css
@@ -1,100 +1,129 @@
-/* stylelint-disable */
/*
- * Alignment styles.
- * These rules are temporary, and should not be relied on or
- * modified too heavily by themes or plugins that build on
- * Twenty Twenty-Two. These are meant to be a precursor to
- * a global solution provided by the Block Editor.
- *
- * Relevant issues:
- * https://github.com/WordPress/gutenberg/issues/35607
- * https://github.com/WordPress/gutenberg/issues/35884
+ * Navigation Block
*/
-.wp-site-blocks,
-body > .is-root-container,
-.edit-post-visual-editor__post-title-wrapper,
-.wp-block-group.alignfull,
-.wp-block-group.has-background,
-.wp-block-cover.alignfull,
-.is-root-container .wp-block[data-align="full"] > .wp-block-group,
-.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
- padding-left: clamp(1.5rem, 5vw, 2rem);
- padding-right: clamp(1.5rem, 5vw, 2rem);
-}
-
-.block-editor-block-list__layout.is-root-container > .alignfull,
-.block-editor-block-list__layout.is-root-container > .alignfull > .alignfull,
-.is-root-container > .wp-block-group.has-background,
-.wp-site-blocks .alignfull,
-.wp-site-blocks > .wp-block-group.has-background,
-.wp-site-blocks > .wp-block-cover,
-.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
-.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
-body > .is-root-container > .wp-block-cover,
-body
- > .is-root-container
- > .wp-block-template-part
- > .wp-block-group.has-background,
-body > .is-root-container > .wp-block-template-part > .wp-block-cover,
-.is-root-container .wp-block[data-align="full"] {
- margin-right: calc(clamp(1.5rem, 5vw, 2rem) * -1) !important;
- margin-left: calc(clamp(1.5rem, 5vw, 2rem) * -1) !important;
- width: unset;
-}
-
-/* Blocks inside columns don't have negative margins. */
-.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
-.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
-/* We also want to avoid stacking negative margins. */
-.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
-.is-root-container .wp-block[data-align="full"]>*:not(.wp-block-group) .wp-block[data-align="full"] {
- margin-left: auto !important;
- margin-right: auto !important;
- width: inherit;
+
+ @media (min-width: 600px) {
+ .site-logo-title {
+ display:none
+ }
+
+ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
+ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
+ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
+ align-items: flex-start !important;
+ }
}
-/*
- * Search and File Block button styles.
- * Necessary until the following issues are resolved in Gutenberg:
- * https://github.com/WordPress/gutenberg/issues/36444
- * https://github.com/WordPress/gutenberg/issues/27760
- */
+ @media (max-width: 600px) {
+ .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
+ .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
+ .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
+ align-items: flex-start !important;
+ }
+}
+
+.wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title {
+ display: flex;
+ flex-wrap: nowrap;
+ max-width: 100%;
+ align-items: center;
+ gap: 0.5rem;
+ padding-bottom: var(--wp--preset--spacing--30);
+ position: relative;
+ padding-inline-end: 52px;
+}
+
+.wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title::after {
+ content: "";
+ position: absolute;
+ left: calc(-1 * var(--wp--preset--spacing--30));
+ right: calc(-1 * var(--wp--preset--spacing--30));
+ bottom: 0;
+ height: 1px;
+ background: #8080801d;
+}
+
+.wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title img {
+ max-height: 42px !important;
+ height: auto !important;
+ width: auto !important;
+
+}
+
+.wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title .site-title {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--wp--preset--color--foreground);
+ text-transform: uppercase;
+ letter-spacing: -0.02em;
+ box-sizing: border-box;
+ line-height: 1.15;
+}
+
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
+ padding-top: var(--wp--preset--spacing--30);
+}
-.wp-block-search__button,
-.wp-block-file .wp-block-file__button {
- background-color: var(--wp--preset--color--primary);
- border-radius: 0;
- border: none;
- color: var(--wp--preset--color--background);
- padding: calc(0.667em + 2px) calc(1.333em + 2px);
+.has-modal-open .wp-block-navigation__responsive-container-close {
+ background-color:var(--wp--preset--color--tertiary);
+ padding: 0.625rem;
+ border-radius: 100%;
+ top: -2.5px !important;
+}
+
+.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
+ gap: 0 !important;
+ width: 100%;
+}
+
+.has-modal-open .wp-block-navrigation__containe, .has-modal-open .wp-block-navigation__container ul {
+ row-gap: 0.75rem !important;
+ width: -webkit-fill-available;
+ max-width: 100%;
+}
+
+.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation__submenu-container) {
+ border-bottom: 1px solid #8080801d;
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+ width: -webkit-fill-available;
+ max-width: 100%;
+}
+
+.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
+ padding: 0.75rem 0.75rem 0 0.75rem !important;
+ gap: 0.75rem !important;
+ }
+
+.has-modal-open .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container > li:not(.wp-block-navigation__submenu-container) > a.wp-block-navigation-item__content {
+ font-size: 1.25rem;
+ font-weight: 600;
+}
+
+.has-modal-open .wp-block-navigation__submenu-container {
+ padding-top: 0.75rem !important;
+}
+
+.has-modal-open .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-item a {
+ font-size: 1rem !important;
+}
+
+.wp-block-navigation .wp-block-navigation-item a:hover,
+.wp-block-navigation .wp-block-navigation-item a:focus {
+ text-decoration: underline;
+ text-decoration-style: solid;
}
/*
- * Button hover styles.
- * Necessary until the following issue is resolved in Gutenberg:
- * https://github.com/WordPress/gutenberg/issues/27075
- */
-
-.wp-block-search__button:hover,
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-button__link:hover {
- opacity: 0.9;
-}
-
-/* Responsive menu animation and customization.
-----------------------------------------------------------*/
-@media (max-width: 599px) {
- .wp-block-navigation__responsive-container {
- display: block !important;
- opacity: 0;
- transform: translateX(200px);
- transition: transform 170ms ease-in-out, opacity 150ms ease-in-out;
- visibility: hidden;
- }
+ * Responsive menu container padding.
+ * This ensures the responsive container inherits the same
+ * spacing defined above. This behavior may be built into
+ * the Block Editor in the future.
+ */
- .wp-block-navigation__responsive-container[aria-hidden="false"] {
- opacity: 1;
- transform: translateX(0);
- visibility: visible;
- }
+.wp-block-navigation__responsive-container.is-menu-open {
+ padding-top: var(--wp--preset--spacing--30);
+ padding-bottom: var(--wp--preset--spacing--30);
+ padding-right: var(--wp--preset--spacing--30);
+ padding-left: var(--wp--preset--spacing--30);
}
diff --git a/assets/js/navigation-customization.js b/assets/js/navigation-customization.js
index 6d3b49ba..c0b0ae1a 100644
--- a/assets/js/navigation-customization.js
+++ b/assets/js/navigation-customization.js
@@ -1,6 +1,23 @@
(function () {
'use strict';
+ function hasDisableOverlay() {
+ const header = document.querySelector('header.wp-block-template-part');
+ if (!header) return false;
+ return !!header.querySelector('.disable-default-overlay');
+ }
+
+ function loadDeprecateStyles() {
+ if (!window.ExtendableNavData?.deprecateStyleUrl) return;
+ if (document.querySelector('link[data-extendable-deprecate-style]')) return;
+
+ const link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = window.ExtendableNavData.deprecateStyleUrl;
+ link.setAttribute('data-extendable-deprecate-style', 'true');
+ document.head.appendChild(link);
+ }
+
function injectSiteLogoTitle() {
const container = document.querySelector('.wp-block-navigation__responsive-dialog');
if (!container) return;
@@ -21,9 +38,16 @@
container.prepend(wrapper);
}
+ function init() {
+ if (hasDisableOverlay()) return;
+
+ loadDeprecateStyles();
+ injectSiteLogoTitle();
+ }
+
if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', injectSiteLogoTitle);
+ document.addEventListener('DOMContentLoaded', init);
} else {
- injectSiteLogoTitle();
+ init();
}
})();
diff --git a/functions.php b/functions.php
index 41f2a795..a7dae194 100644
--- a/functions.php
+++ b/functions.php
@@ -28,18 +28,8 @@ function extendable_support() {
// Add support for block styles.
add_theme_support( 'wp-block-styles' );
- global $wp_version;
- // Add style for WordPress older versions.
- if ( version_compare( $wp_version, '6.0.2', '<=' ) ) {
- $editor_style = array(
- 'style.css',
- '/assets/css/deprecate-style.css',
- );
- } else {
- $editor_style = 'style.css';
- }
// Enqueue editor styles.
- add_editor_style( $editor_style );
+ add_editor_style( 'style.css' );
}
endif;
@@ -67,19 +57,6 @@ function extendable_styles() {
// Enqueue theme stylesheet.
wp_enqueue_style( 'extendable-style' );
-
- global $wp_version;
- if ( version_compare( $wp_version, '6.0.2', '<=' ) ) {
- // Register deprecate stylesheet.
- wp_register_style(
- 'extendable-deprecate-style',
- get_template_directory_uri() . '/assets/css/deprecate-style.css',
- array(),
- EXTENDABLE_THEME_VERSION
- );
- // Enqueue deprecate stylesheet.
- wp_enqueue_style( 'extendable-deprecate-style' );
- }
}
endif;
@@ -248,15 +225,16 @@ function extendable_enqueue_navigation_customizations() {
wp_enqueue_script(
'extendable-navigation_customizations',
get_template_directory_uri() . '/assets/js/navigation-customization.js',
- array(), // no dependencies; add 'wp-interactivity' if you switch back to that version
- null,
- true // load in footer
+ array(),
+ EXTENDABLE_THEME_VERSION,
+ true
);
wp_localize_script( 'extendable-navigation_customizations', 'ExtendableNavData',
array(
- 'logoUrl' => $logo_url,
- 'siteTitle' => $site_title,
+ 'logoUrl' => $logo_url,
+ 'siteTitle' => $site_title,
+ 'deprecateStyleUrl' => get_template_directory_uri() . '/assets/css/deprecate-style.css?ver=' . EXTENDABLE_THEME_VERSION,
)
);
}
diff --git a/parts/header-with-center-nav-and-social.html b/parts/header-with-center-nav-and-social.html
index c7474059..a0cf7e92 100644
--- a/parts/header-with-center-nav-and-social.html
+++ b/parts/header-with-center-nav-and-social.html
@@ -13,7 +13,7 @@
-
+
diff --git a/parts/header.html b/parts/header.html
index 97f855e7..07be8b36 100644
--- a/parts/header.html
+++ b/parts/header.html
@@ -14,7 +14,7 @@
-
+
diff --git a/parts/navigation-overlay-align-start.html b/parts/navigation-overlay-align-start.html
new file mode 100644
index 00000000..2c6d84b9
--- /dev/null
+++ b/parts/navigation-overlay-align-start.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+