Local navigation block: Hide page title before collapsing menu

mu-plugins/blocks/local-navigation-bar/postcss/style.pcss

@@ -185,7 +185,7 @@
 		}
 	}
 
-	@media ( max-width: 550px ) {
+	@media ( max-width: 599px ) {
 		& .wp-block-group p:not(.wp-block-site-title) {
 			display: none;
 		}
@@ -341,6 +341,12 @@
 		display: none;
 	}
 
+	&.wporg-hide-page-title {
+		& .wp-block-group p:not(.wp-block-site-title) {
+			display: none;
+		}
+	}
+
 	&.wporg-show-collapsed-nav {
 		& .wp-block-navigation {
 			display: none;

mu-plugins/blocks/local-navigation-bar/src/view.js

@@ -46,7 +46,7 @@ function init() {
 
 			// Bail early on small screens, the visible nav block is already mobile.
 			if ( window.innerWidth < 600 ) {
-				container.classList.remove( 'wporg-show-collapsed-nav' );
+				container.classList.remove( 'wporg-hide-page-title', 'wporg-show-collapsed-nav' );
 				navElement.classList.add( 'wporg-is-mobile-nav' );
 				return;
 			}
@@ -72,6 +72,26 @@ function init() {
 				container.dataset.navWidth = Math.ceil( navWidth );
 			}
 
+			const titleElement = container.querySelector( '.wp-block-site-title, div.wp-block-group' );
+			if ( ! titleElement ) {
+				return;
+			}
+
+			// Get the initial full width, before any elements are hidden.
+			let fullTitleWidth = titleElement.dataset.fullWidth;
+			if ( ! fullTitleWidth ) {
+				// Like navWidth, get this by the individual items to get the
+				// non-wrapped width.
+				fullTitleWidth =
+					[ ...titleElement.children ].reduce(
+						( acc, current ) => ( acc += current.getBoundingClientRect().width ),
+						0
+					) +
+					10 * ( titleElement.children.length - 1 ); // 10px margin between items.
+
+				titleElement.dataset.fullWidth = Math.ceil( fullTitleWidth );
+			}
+
 			const {
 				paddingInlineStart = '0px',
 				paddingInlineEnd = '0px',
@@ -85,18 +105,26 @@ function init() {
 				parseInt( gap, 10 ) -
 				20; // 20px right padding is added when the collapsed nav is hidden.
 
-			const titleElement = container.querySelector( '.wp-block-site-title, div.wp-block-group' );
-			if ( ! titleElement ) {
-				return;
+			// If the title area is not a group block, use the same width for
+			// short and full (as there is no page title to hide).
+			let soloTitleWidth = fullTitleWidth;
+			if ( titleElement.classList.contains( 'wp-block-group' ) ) {
+				soloTitleWidth = titleElement.children[ 0 ].getBoundingClientRect().width;
 			}
-			const { width: titleWidth } = titleElement.getBoundingClientRect();
 
-			const usedWidth = Math.ceil( titleWidth ) + Math.ceil( navWidth );
+			const usedFullWidth = Math.ceil( fullTitleWidth ) + Math.ceil( navWidth );
+			const usedShortWidth = Math.ceil( soloTitleWidth ) + Math.ceil( navWidth );
 
-			if ( usedWidth > availableWidth ) {
-				container.classList.add( 'wporg-show-collapsed-nav' );
-			} else {
+			if ( availableWidth > usedFullWidth ) {
+				// Screen is large enough for everything, show all.
+				container.classList.remove( 'wporg-show-collapsed-nav', 'wporg-hide-page-title' );
+			} else if ( availableWidth > usedShortWidth ) {
+				// Menu and title will collide, hide page title.
+				container.classList.add( 'wporg-hide-page-title' );
 				container.classList.remove( 'wporg-show-collapsed-nav' );
+			} else {
+				// Menu and title will collide even with only site title, use collapsed nav.
+				container.classList.add( 'wporg-hide-page-title', 'wporg-show-collapsed-nav' );
 			}
 		};