[Customize Your Store] Hide color panel and fix nav links on WooExpress site (#40326)

plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx

@@ -4,7 +4,10 @@
  * External dependencies
  */
 // @ts-ignore No types for this exist yet.
+import { store as blockEditorStore } from '@wordpress/block-editor';
+// @ts-ignore No types for this exist yet.
 import { useEntityRecords } from '@wordpress/core-data';
+import { select } from '@wordpress/data';
 // @ts-ignore No types for this exist yet.
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 // @ts-ignore No types for this exist yet.
@@ -29,6 +32,31 @@ type Page = {
 	[ key: string ]: unknown;
 };
 
+const findPageIdByLinkOrTitle = ( event: MouseEvent, _pages: Page[] ) => {
+	const target = event.target as HTMLAnchorElement;
+	const clickedPage =
+		_pages.find( ( page ) => page.link === target.href ) ||
+		_pages.find( ( page ) => page.title.rendered === target.innerText );
+	return clickedPage ? clickedPage.id : null;
+};
+
+const findPageIdByBlockClientId = ( event: MouseEvent ) => {
+	const navLink = ( event.target as HTMLAnchorElement ).closest(
+		'.wp-block-navigation-link'
+	);
+	if ( navLink ) {
+		const blockClientId = navLink.getAttribute( 'data-block' );
+		const navLinkBlocks =
+			// @ts-ignore No types for this exist yet.
+			select( blockEditorStore ).getBlocksByClientId( blockClientId );
+
+		if ( navLinkBlocks && navLinkBlocks.length ) {
+			return navLinkBlocks[ 0 ].attributes.id;
+		}
+	}
+	return null;
+};
+
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
@@ -62,31 +90,28 @@ export const BlockEditor = ( {} ) => {
 
 	const onClickNavigationItem = useCallback(
 		( event: MouseEvent ) => {
-			const clickedPage =
+			// If the user clicks on a navigation item, we want to update the URL to reflect the page they are on.
-				pages.find(
+			// Because of bug in the block library (See https://github.com/woocommerce/team-ghidorah/issues/253#issuecomment-1665106817), we're not able to use href link to find the page ID. Instead, we'll use the link/title first, and if that doesn't work, we'll use the block client ID. It depends on the header block type to determine which one to use.
-					( page: Page ) =>
+			// This is a temporary solution until the block library is fixed.
-						page.link === ( event.target as HTMLAnchorElement ).href
+
-				) ||
+			const pageId =
-				// Fallback to page title if the link is not found. This is needed for a bug in the block library
+				findPageIdByLinkOrTitle( event, pages ) ||
-				// See https://github.com/woocommerce/team-ghidorah/issues/253#issuecomment-1665106817
+				findPageIdByBlockClientId( event );
-				pages.find(
+
-					( page: Page ) =>
+			if ( pageId ) {
-						page.title.rendered ===
-						( event.target as HTMLAnchorElement ).innerText
-				);
-			if ( clickedPage ) {
 				history.push( {
 					...urlParams,
-					postId: clickedPage.id,
+					postId: pageId,
 					postType: 'page',
 				} );
-			} else {
+				return;
-				// Home page
-				const { postId, postType, ...params } = urlParams;
-				history.push( {
-					...params,
-				} );
 			}
+
+			// Home page
+			const { postId, postType, ...params } = urlParams;
+			history.push( {
+				...params,
+			} );
 		},
 		[ history, urlParams, pages ]
 	);

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/global-styles-variation-iframe/style.scss

@@ -73,10 +73,17 @@
 			}
 		}
 	}
+}
 
-	.block-editor-color-gradient-control__panel {
+// Hide "theme" and "default" sections
-		> .components-flex > .components-h-stack.components-v-stack {
+.block-editor-color-gradient-control__panel {
-			display: none;
+	// Text or Background tab
-		}
+	> .components-flex > .components-h-stack.components-v-stack {
+		display: none;
+	}
+
+	// Gradient tab
+	> .components-spacer > .components-flex > .components-h-stack.components-v-stack:not(.components-custom-gradient-picker) {
+		display: none;
 	}
 }

plugins/woocommerce/changelog/fix-color-panel-and-nav-links

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+CYS: Hide color panel and fix nav links on WooExpress site