CYS: add pattern category in the block toolbar (#48501)

* WIP

* CYS: Refactor routing approach

* fix type

* Add changefile(s) from automation for the following project(s): woocommerce

* remove focus logic

* remove routekey prop

* fix scroll after insert pattern

* pass onNavigateBackClick callback as prop

* fix scroll

* Add changefile(s) from automation for the following project(s): woocommerce

* fix back arrow click

* fix css

* fix tooltip position

* create dedicated CSS class

* lint css

* restore change

* improve css class name

* remove not necessary class

* add github link to the todo

* lint css

* add want more pattern section

* remove not used import

* CYS: set new default patterns

* Add changefile(s) from automation for the following project(s): woocommerce

* fix logic after merge trunk

* CYS: fix tooltip position

* Add changefile(s) from automation for the following project(s): woocommerce

* trigger CI

* CYS: add pattern category in the block toolbar

* remove not necessary import

* improve style

* Add changefile(s) from automation for the following project(s): woocommerce

* improve CSS

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/shuffle.tsx

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-
+import { capitalize } from 'lodash';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -22,6 +22,7 @@ import {
  * Internal dependencies
  */
 import { PatternWithBlocks } from '~/customize-store/types/pattern';
+import { PATTERN_CATEGORIES } from '../sidebar/pattern-screen/categories';
 
 // This is the icon that is used in the Shuffle button. Currently we are using an outdated version of @wordpress/icons.
 // import { shuffle } from '@wordpress/icons';
@@ -33,6 +34,16 @@ const shuffleIcon = (
 	</SVG>
 );
 
+const getCategoryLabelFromCategories = ( categories: string[] ) => {
+	for ( const category in PATTERN_CATEGORIES ) {
+		if ( categories.includes( category ) ) {
+			return PATTERN_CATEGORIES[
+				category as keyof typeof PATTERN_CATEGORIES
+			].label;
+		}
+	}
+};
+
 export default function Shuffle( { clientId }: { clientId: string } ) {
 	const {
 		categories,
@@ -100,8 +111,10 @@ export default function Shuffle( { clientId }: { clientId: string } ) {
 		return sameCategoryPatternsWithSingleWrapper[ nextPatternIndex ];
 	}
 
+	const categoryLabel = getCategoryLabelFromCategories( categories );
+
 	return (
-		<ToolbarGroup>
+		<ToolbarGroup className="woocommerce-customize-your-store-toolbar-shuffle-container">
 			<ToolbarButton
 				label={ __( 'Shuffle', 'woocommerce' ) }
 				icon={ shuffleIcon }
@@ -118,6 +131,7 @@ export default function Shuffle( { clientId }: { clientId: string } ) {
 					replaceBlocks( clientId, nextPattern.blocks );
 				} }
 			/>
+			{ categoryLabel && <span>{ capitalize( categoryLabel ) }</span> }
 		</ToolbarGroup>
 	);
 }

plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/style.scss

@@ -7,3 +7,16 @@
 		padding: 0;
 	}
 }
+
+.woocommerce-customize-your-store-toolbar-shuffle-container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	user-select: none;
+
+	span {
+		max-width: fit-content;
+		padding-left: 6px;
+		padding-right: 6px;
+	}
+}

plugins/woocommerce/changelog/48501-47454-cys-full-composability-add-pattern-category-in-the-block-toolbar

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+CYS: add pattern category in the block toolbar.  </details>  <details>  <summary>Changelog Entry Comment</summary>