Skip to content

Adopt wordpress 7 nav overlay template and deprecate custom css #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
amjadr360 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Adopt wordpress 7 nav overlay template and deprecate custom css #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cfcb490
Add nav overlay template
amjadr360 Mar 24, 2026
5b9f10d
Update nav overlay
amjadr360 Mar 25, 2026
df22c1f
Remove consolelog
amjadr360 Mar 26, 2026
baa2b9a
update selector for landing page
amjadr360 Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 119 additions & 90 deletions assets/css/deprecate-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
28 changes: 26 additions & 2 deletions assets/js/navigation-customization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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();
}
})();
36 changes: 7 additions & 29 deletions functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
)
);
}
Expand Down
2 changes: 1 addition & 1 deletion parts/header-with-center-nav-and-social.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<!-- wp:group {"className":"ext-animate\u002d\u002don","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group ext-animate--on">
<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
<!-- wp:navigation {"overlay":"navigation-overlay-align-start","icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
<!-- /wp:navigation -->
</div>
Expand Down
2 changes: 1 addition & 1 deletion parts/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<!-- /wp:group -->
<!-- wp:group {"className":"ext-animate\u002d\u002don","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group ext-animate--on">
<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
<!-- wp:navigation {"overlay":"navigation-overlay-align-start","icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
<!-- /wp:navigation -->
</div>
Expand Down
Loading