Add dedicated navigation-overlay icon (#75249)

backport-changelog/7.0/10908.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/10908
+
+* https://github.com/WordPress/gutenberg/pull/75426

lib/compat/wordpress-7.0/rest-api.php

@@ -59,7 +59,7 @@ function gutenberg_register_overlay_template_part_area( $areas ) {
 		'area'        => 'navigation-overlay',
 		'label'       => __( 'Navigation Overlay', 'gutenberg' ),
 		'description' => __( 'Custom overlay area for navigation overlays.', 'gutenberg' ),
-		'icon'        => 'overlay',
+		'icon'        => 'navigation-overlay',
 		'area_tag'    => 'div',
 	);
 

packages/block-library/src/template-part/edit/utils/get-template-part-icon.js

@@ -5,35 +5,26 @@ import {
 	header as headerIcon,
 	footer as footerIcon,
 	sidebar as sidebarIcon,
-	tableColumnAfter as overlayIcon,
+	navigationOverlay as navigationOverlayIcon,
 	symbolFilled as symbolFilledIcon,
 } from '@wordpress/icons';
 
 /**
- * Helper function to retrieve the corresponding icon by area name or icon name.
+ * Helper function to retrieve the corresponding icon by area name.
  *
- * @param {string} areaOrIconName The area name (e.g., 'header', 'navigation-overlay') or icon name (e.g., 'menu').
+ * @param {string} areaOrIconName The area name (e.g., 'header', 'navigation-overlay').
  *
  * @return {Object} The corresponding icon.
  */
 export const getTemplatePartIcon = ( areaOrIconName ) => {
-	// Handle area names first
 	if ( 'header' === areaOrIconName ) {
 		return headerIcon;
 	} else if ( 'footer' === areaOrIconName ) {
 		return footerIcon;
 	} else if ( 'sidebar' === areaOrIconName ) {
 		return sidebarIcon;
-	} else if ( 'overlay' === areaOrIconName ) {
-		// TODO: Replace with a proper overlay icon when available.
-		// Using tableColumnAfter as a placeholder.
-		return overlayIcon;
-	}
-	// Handle icon names for backwards compatibility
-	if ( 'menu' === areaOrIconName ) {
-		// TODO: Replace with a proper overlay icon when available.
-		// Using tableColumnAfter as a placeholder.
-		return overlayIcon;
+	} else if ( 'navigation-overlay' === areaOrIconName ) {
+		return navigationOverlayIcon;
 	}
 	return symbolFilledIcon;
 };

packages/editor/README.md

@@ -442,11 +442,11 @@ getDerivedStateFromError is used to render a fallback UI after an error has been
 
 ### getTemplatePartIcon
 
-Helper function to retrieve the corresponding icon by area name or icon name.
+Helper function to retrieve the corresponding icon by area name.
 
 _Parameters_
 
--   _areaOrIconName_ `string`: The area name (e.g., 'header', 'navigation-overlay') or icon name (e.g., 'menu').
+-   _areaOrIconName_ `string`: The area name (e.g., 'header', 'navigation-overlay').
 
 _Returns_
 

packages/editor/src/utils/get-template-part-icon.js

@@ -5,35 +5,26 @@ import {
 	header as headerIcon,
 	footer as footerIcon,
 	sidebar as sidebarIcon,
-	tableColumnAfter as overlayIcon,
+	navigationOverlay as navigationOverlayIcon,
 	symbolFilled as symbolFilledIcon,
 } from '@wordpress/icons';
 
 /**
- * Helper function to retrieve the corresponding icon by area name or icon name.
+ * Helper function to retrieve the corresponding icon by area name.
  *
- * @param {string} areaOrIconName The area name (e.g., 'header', 'navigation-overlay') or icon name (e.g., 'menu').
+ * @param {string} areaOrIconName The area name (e.g., 'header', 'navigation-overlay').
  *
  * @return {Object} The corresponding icon.
  */
 export function getTemplatePartIcon( areaOrIconName ) {
-	// Handle area names first
 	if ( 'header' === areaOrIconName ) {
 		return headerIcon;
 	} else if ( 'footer' === areaOrIconName ) {
 		return footerIcon;
 	} else if ( 'sidebar' === areaOrIconName ) {
 		return sidebarIcon;
-	} else if ( 'overlay' === areaOrIconName ) {
-		// TODO: Replace with a proper overlay icon when available.
-		// Using tableColumnAfter as a placeholder.
-		return overlayIcon;
-	}
-	// Handle icon names for backwards compatibility
-	if ( 'menu' === areaOrIconName ) {
-		// TODO: Replace with a proper overlay icon when available.
-		// Using tableColumnAfter as a placeholder.
-		return overlayIcon;
+	} else if ( 'navigation-overlay' === areaOrIconName ) {
+		return navigationOverlayIcon;
 	}
 	return symbolFilledIcon;
 }

packages/fields/src/components/create-template-part-modal/index.tsx

@@ -21,7 +21,7 @@ import {
 	footer as footerIcon,
 	header as headerIcon,
 	sidebar as sidebarIcon,
-	tableColumnAfter as overlayIcon,
+	navigationOverlay as navigationOverlayIcon,
 	symbolFilled as symbolFilledIcon,
 } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -86,30 +86,21 @@ export default function CreateTemplatePartModal( {
 }
 
 /**
- * Helper function to retrieve the corresponding icon by area name or icon name.
+ * Helper function to retrieve the corresponding icon by area name.
  *
- * @param {string} areaOrIconName The area name (e.g., 'header', 'navigation-overlay') or icon name (e.g., 'menu').
+ * @param {string} areaOrIconName The area name (e.g., 'header', 'navigation-overlay').
  *
  * @return {Object} The corresponding icon.
  */
 const getTemplatePartIcon = ( areaOrIconName: string ) => {
-	// Handle area names first
 	if ( 'header' === areaOrIconName ) {
 		return headerIcon;
 	} else if ( 'footer' === areaOrIconName ) {
 		return footerIcon;
 	} else if ( 'sidebar' === areaOrIconName ) {
 		return sidebarIcon;
-	} else if ( 'overlay' === areaOrIconName ) {
-		// TODO: Replace with a proper overlay icon when available.
-		// Using tableColumnAfter as a placeholder.
-		return overlayIcon;
-	}
-	// Handle icon names for backwards compatibility
-	if ( 'menu' === areaOrIconName ) {
-		// TODO: Replace with a proper overlay icon when available.
-		// Using tableColumnAfter as a placeholder.
-		return overlayIcon;
+	} else if ( 'navigation-overlay' === areaOrIconName ) {
+		return navigationOverlayIcon;
 	}
 	return symbolFilledIcon;
 };

packages/icons/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Add new `navigation-overlay` icon. ([#75249](https://github.com/WordPress/gutenberg/issues/75249))
+
 ## 11.6.0 (2026-01-29)
 
 ## 11.5.0 (2026-01-16)
@@ -10,7 +14,7 @@
 
 ### Enhancements
 
-- Add new `cart` icon. ([#73509](https://github.com/WordPress/gutenberg/pull/73509))
+-   Add new `cart` icon. ([#73509](https://github.com/WordPress/gutenberg/pull/73509))
 
 ## 11.2.0 (2025-11-12)
 
@@ -20,13 +24,13 @@
 
 ### Breaking Changes
 
-- Remove `edit` and `warning` icons, which were aliases to `pencil` and `cautionFilled`, respectively. Switch to SVG icons as canonical source format, letting the system auto-generate the React elements and index. ([#71878](https://github.com/WordPress/gutenberg/pull/71878)).
-- Ensure both SVG and generated TSX code in `src/` are included in the published package. ([#72299](https://github.com/WordPress/gutenberg/pull/72299))
+-   Remove `edit` and `warning` icons, which were aliases to `pencil` and `cautionFilled`, respectively. Switch to SVG icons as canonical source format, letting the system auto-generate the React elements and index. ([#71878](https://github.com/WordPress/gutenberg/pull/71878)).
+-   Ensure both SVG and generated TSX code in `src/` are included in the published package. ([#72299](https://github.com/WordPress/gutenberg/pull/72299))
 
 ### Enhancements
 
-- Update `check` to be more optically balanced. ([#72101](https://github.com/WordPress/gutenberg/pull/72101))
-- Add new `timeToRead` and `wordCount` icons. ([#72240](https://github.com/WordPress/gutenberg/pull/72240))
+-   Update `check` to be more optically balanced. ([#72101](https://github.com/WordPress/gutenberg/pull/72101))
+-   Add new `timeToRead` and `wordCount` icons. ([#72240](https://github.com/WordPress/gutenberg/pull/72240))
 
 ## 10.32.0 (2025-10-01)
 
@@ -36,17 +40,17 @@
 
 ## 10.29.0 (2025-08-20)
 
--  Breaking change: deprecate `moreHorizontalMobile` icon. This was added in error, and `moreHorizontal` should be used instead. ([#71172](https://github.com/WordPress/gutenberg/pull/71172))
+-   Breaking change: deprecate `moreHorizontalMobile` icon. This was added in error, and `moreHorizontal` should be used instead. ([#71172](https://github.com/WordPress/gutenberg/pull/71172))
 
 ## 10.28.0 (2025-08-07)
 
 -   Add new `dashboard` icon ([#70300](https://github.com/WordPress/gutenberg/pull/70300)).
 
 ## 10.27.0 (2025-07-23)
 
--  Update `cancelCircleFilled`, `currencyDollar`, `currencyPound`, `currencyEuro`, `globe`, `helpFilled`, `siteLogo`, `swatch`, to have unified circular size footprints. ([https://github.com/WordPress/gutenberg/pull/70581](#70581)).
--  Update `help`, `plusCircle`, and `typography` icons to have a unified circular footprint that matches other circle icons. ([#70299](https://github.com/WordPress/gutenberg/pull/70299)).
--  Update `plusCircleFilled` to have unified circular size footprints. ([https://github.com/WordPress/gutenberg/pull/70650](#70650)).
+-   Update `cancelCircleFilled`, `currencyDollar`, `currencyPound`, `currencyEuro`, `globe`, `helpFilled`, `siteLogo`, `swatch`, to have unified circular size footprints. ([https://github.com/WordPress/gutenberg/pull/70581](#70581)).
+-   Update `help`, `plusCircle`, and `typography` icons to have a unified circular footprint that matches other circle icons. ([#70299](https://github.com/WordPress/gutenberg/pull/70299)).
+-   Update `plusCircleFilled` to have unified circular size footprints. ([https://github.com/WordPress/gutenberg/pull/70650](#70650)).
 
 ## 10.26.0 (2025-06-25)
 

packages/icons/src/manifest.php

@@ -769,6 +769,10 @@
 		'label'    => _x( 'Navigation', 'icon label', 'gutenberg' ),
 		'filePath' => 'library/navigation.svg',
 	),
+	'navigation-overlay'             => array(
+		'label'    => _x( 'Navigation Overlay', 'icon label', 'gutenberg' ),
+		'filePath' => 'library/navigation-overlay.svg',
+	),
 	'next'                           => array(
 		'label'    => _x( 'Next', 'icon label', 'gutenberg' ),
 		'filePath' => 'library/next.svg',