[Experimental]: Update: new title and icon for the Overlay Navigation block (#50011)

* update: rename Navigation block to Overlay Navigation with new icon

* chore: changelog

* chore: use comment instead of update

* reset lock file

* test: update block title

* test: update overlay navigation test

plugins/woocommerce-blocks/assets/js/blocks/product-filters-overlay-navigation/block.json

@@ -1,6 +1,6 @@
 {
 	"name": "woocommerce/product-filters-overlay-navigation",
-	"title": "Navigation (Experimental)",
+	"title": "Overlay Navigation (Experimental)",
 	"description": "Display overlay navigation controls.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],

plugins/woocommerce-blocks/assets/js/blocks/product-filters-overlay-navigation/index.tsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { Icon, navigation } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import { closeSquareShadow } from '@woocommerce/icons';
 import { isExperimentalBlocksEnabled } from '@woocommerce/block-settings';
 
 /**
@@ -17,6 +18,6 @@ if ( isExperimentalBlocksEnabled() ) {
 	registerBlockType( metadata, {
 		edit: Edit,
 		save: Save,
-		icon: <Icon icon={ navigation } />,
+		icon: <Icon icon={ closeSquareShadow } />,
 	} );
 }

plugins/woocommerce-blocks/assets/js/icons/index.js

@@ -5,6 +5,7 @@ export { default as barcode } from './library/barcode';
 export { default as cart } from './library/cart';
 export { default as cartOutline } from './library/cart-outline';
 export { default as checkPayment } from './library/check-payment';
+export { default as closeSquareShadow } from './library/close-square-shadow';
 export { default as customerAccount } from './library/customer-account';
 export { default as customerAccountStyle } from './library/customer-account-style';
 export { default as customerAccountStyleAlt } from './library/customer-account-style-alt';
@@ -12,6 +13,8 @@ export { default as customerAccountStyleLine } from './library/customer-account-
 export { default as eye } from './library/eye';
 export { default as fields } from './library/fields';
 export { default as filledCart } from './library/filled-cart';
+export { default as filter } from './library/filter';
+export { default as filterThreeLines } from './library/filter-three-lines';
 export { default as folderStarred } from './library/folder-starred';
 export { default as miniCart } from './library/mini-cart';
 export { default as miniCartAlt } from './library/mini-cart-alt';
@@ -26,12 +29,10 @@ export { default as productMeta } from './library/product-meta';
 export { default as removeCart } from './library/remove-cart';
 export { default as sparkles } from './library/sparkles';
 export { default as stacks } from './library/stacks';
+export { default as thumbUp } from './library/thumb-up';
 export { default as thumbnailsPositionBottom } from './library/thumbnails-position-bottom';
 export { default as thumbnailsPositionLeft } from './library/thumbnails-position-left';
 export { default as thumbnailsPositionRight } from './library/thumbnails-position-right';
-export { default as thumbUp } from './library/thumb-up';
 export { default as toggle } from './library/toggle';
 export { default as totals } from './library/totals';
 export { default as woo } from './library/woo';
-export { default as filter } from './library/filter';
-export { default as filterThreeLines } from './library/filter-three-lines';

plugins/woocommerce-blocks/assets/js/icons/library/close-square-shadow.tsx

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const closeSquareShadow = (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path
+			d="M19.05 16.25L8.45 16.25C8.0634 16.25 7.75 15.9366 7.75 15.55L7.75 4.95C7.75 4.5634 8.0634 4.25 8.45 4.25L19.05 4.25C19.4366 4.25 19.75 4.5634 19.75 4.95L19.75 15.55C19.75 15.9366 19.4366 16.25 19.05 16.25Z"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			fill="none"
+		/>
+		<Path
+			d="M15.25 19.75L5.25 19.75C4.69772 19.75 4.25 19.3023 4.25 18.75L4.25 8.75"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			fill="none"
+		/>
+		<line
+			y1="-0.75"
+			x2="7"
+			y2="-0.75"
+			transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 15.6946 13.1497)"
+			stroke="currentColor"
+			strokeWidth="1.5"
+		/>
+		<line
+			y1="-0.75"
+			x2="7"
+			y2="-0.75"
+			transform="matrix(-0.707107 0.707107 0.707107 0.707107 16.7551 8.19995)"
+			stroke="currentColor"
+			strokeWidth="1.5"
+		/>
+	</SVG>
+);
+
+export default closeSquareShadow;

plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-navigation.block_theme.spec.ts

@@ -5,7 +5,7 @@ import { test, expect } from '@woocommerce/e2e-utils';
 
 const blockData = {
 	name: 'woocommerce/product-filters-overlay-navigation',
-	title: 'Navigation (Experimental)',
+	title: 'Overlay Navigation (Experimental)',
 	selectors: {
 		frontend: {},
 		editor: {

plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-template-part.block_theme.spec.ts

@@ -30,9 +30,6 @@ test.describe( 'Filters Overlay Template Part', () => {
 	} );
 
 	test( 'should render the correct inner blocks', async ( { editor } ) => {
-		const navigationBlock = editor.canvas.getByLabel(
-			'Block: Navigation (Experimental)'
-		);
 		const productFiltersTemplatePart = editor.canvas
 			.locator( '[data-type="core/template-part"]' )
 			.filter( {
@@ -41,7 +38,6 @@ test.describe( 'Filters Overlay Template Part', () => {
 				),
 			} );
 
-		await expect( navigationBlock ).toBeVisible();
 		await expect( productFiltersTemplatePart ).toBeVisible();
 	} );
 } );

plugins/woocommerce/changelog/fix-49980-overlay-navigation-title-icon

@@ -0,0 +1,3 @@
+Significance: patch
+Type: update
+Comment: New title and icon for Overlay Navigation block