From 5ffad9a659ba25163e026deff572c7011d6cdee3 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 31 Jul 2024 12:56:53 +0700 Subject: [PATCH] [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 --- .../block.json | 2 +- .../index.tsx | 5 ++- .../assets/js/icons/index.js | 7 +-- .../js/icons/library/close-square-shadow.tsx | 45 +++++++++++++++++++ ...ers-overlay-navigation.block_theme.spec.ts | 2 +- ...-overlay-template-part.block_theme.spec.ts | 4 -- .../fix-49980-overlay-navigation-title-icon | 3 ++ 7 files changed, 57 insertions(+), 11 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/icons/library/close-square-shadow.tsx create mode 100644 plugins/woocommerce/changelog/fix-49980-overlay-navigation-title-icon diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters-overlay-navigation/block.json b/plugins/woocommerce-blocks/assets/js/blocks/product-filters-overlay-navigation/block.json index 5ed551dfca9..007f8a3179f 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters-overlay-navigation/block.json +++ b/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" ], diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters-overlay-navigation/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filters-overlay-navigation/index.tsx index 04526b52289..01efbe5906f 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters-overlay-navigation/index.tsx +++ b/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: , } ); } diff --git a/plugins/woocommerce-blocks/assets/js/icons/index.js b/plugins/woocommerce-blocks/assets/js/icons/index.js index 6f9f6c81582..446bbadcebb 100644 --- a/plugins/woocommerce-blocks/assets/js/icons/index.js +++ b/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'; diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/close-square-shadow.tsx b/plugins/woocommerce-blocks/assets/js/icons/library/close-square-shadow.tsx new file mode 100644 index 00000000000..ac6ad85afcf --- /dev/null +++ b/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 = ( + + + + + + +); + +export default closeSquareShadow; diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-navigation.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-navigation.block_theme.spec.ts index 431aa08255f..9693641793d 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-navigation.block_theme.spec.ts +++ b/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: { diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-template-part.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-template-part.block_theme.spec.ts index e35bfa1e471..9601e004dea 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters-overlay/product-filters-overlay-template-part.block_theme.spec.ts +++ b/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(); } ); } ); diff --git a/plugins/woocommerce/changelog/fix-49980-overlay-navigation-title-icon b/plugins/woocommerce/changelog/fix-49980-overlay-navigation-title-icon new file mode 100644 index 00000000000..22e9c27ed8d --- /dev/null +++ b/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