Merge branch 'woocommerce:trunk' into trunk

.github/project-community-pr-assigner.yml

@@ -13,22 +13,22 @@
   - team: developer-advocacy
 
 "packages/js/api/**/*":
-  - team: solaris
+  - team: vortex
 
 "packages/js/e2e-utils/**/*":
-  - team: solaris
+  - team: vortex
 
 "packages/js/e2e-environment/**/*":
-  - team: solaris
+  - team: vortex
 
 "packages/js/api-core-tests/**/*":
-  - team: solaris
+  - team: vortex
 
 "packages/js/e2e-core-tests/**/*":
-  - team: solaris
+  - team: vortex
 
 "packages/js/admin-e2e-tests/**/*":
-  - team: solaris
+  - team: vortex
 
 "packages/js/components/**/*":
   - team: mothra
@@ -51,10 +51,10 @@
   - team: mothra
 
 "packages/js/dependency-extraction-webpack-plugin/**/*":
-  - team: mothra
+  - team: vortex
 
 "packages/js/eslint-plugin/**/*":
-  - team: mothra
+  - team: vortex
 
 "packages/js/experimental/**/*":
   - team: mothra

.github/workflows/pr-lint-markdown.yml

@@ -15,7 +15,7 @@ jobs:
 
             - name: Get repo changed files
               id: repo-changed-files
-              uses: tj-actions/changed-files@v37
+              uses: tj-actions/changed-files@v41
               with:
                   files: |
                       **/*.md
@@ -24,14 +24,14 @@ jobs:
 
             - name: Get docs changed files
               id: docs-changed-files
-              uses: tj-actions/changed-files@v37
+              uses: tj-actions/changed-files@v41
               with:
                 files: |
                   docs/**/*.md
 
             - name: Get docs manifest
               id: docs-manifest
-              uses: tj-actions/changed-files@v37
+              uses: tj-actions/changed-files@v41
               with:
                 files: |
                   docs/docs-manifest.json

packages/js/experimental/changelog/47207-dev-fix-experimental-tsconfig

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: Fix a persistent build bug where TS would try compile files outside of src and typings in packages/js/experimental
+

packages/js/experimental/tsconfig.json

@@ -1,15 +1,13 @@
 {
 	"extends": "../tsconfig",
+	"include": [ "src/", "typings/" ],
 	"compilerOptions": {
 		"rootDir": "src",
 		"outDir": "build-module",
 		"target": "es2019",
 		"declaration": true,
 		"declarationMap": true,
 		"declarationDir": "./build-types",
-		"typeRoots": [
-			"./typings",
-			"./node_modules/@types"
-		]
+		"typeRoots": [ "./typings", "./node_modules/@types" ]
 	}
 }

packages/js/product-editor/changelog/update-replace-with-combobox

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Product Block Editor: replace custom select with the combobox control core component in the product attributes

packages/js/product-editor/src/components/attribute-combobox-field/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
 import {
 	BaseControl,
 	ComboboxControl as CoreComboboxControl,
@@ -15,18 +14,11 @@ import {
 	useRef,
 	useState,
 } from '@wordpress/element';
-import {
-	EXPERIMENTAL_PRODUCT_ATTRIBUTES_STORE_NAME,
-	type ProductAttributesActions,
-	WPDataActions,
-} from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
 import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
-import { TRACKS_SOURCE } from '../../constants';
 import type {
 	AttributesComboboxControlItem,
 	AttributesComboboxControlComponent,
@@ -101,22 +93,13 @@ const AttributesComboboxControl: React.FC<
 	help,
 	current = null,
 	items = [],
-	createNewAttributesAsGlobal = false,
 	instanceNumber = 0,
 	isLoading = false,
 	onChange,
 } ) => {
-	const createErrorNotice = useDispatch( 'core/notices' )?.createErrorNotice;
-	const { createProductAttribute } = useDispatch(
-		EXPERIMENTAL_PRODUCT_ATTRIBUTES_STORE_NAME
-	) as unknown as ProductAttributesActions & WPDataActions;
-
 	const [ createNewAttributeOption, updateCreateNewAttributeOption ] =
 		useState< ComboboxControlOption >( createNewAttributeOptionDefault );
 
-	const clearCreateNewAttributeItem = () =>
-		updateCreateNewAttributeOption( createNewAttributeOptionDefault );
-
 	/**
 	 * Map the items to the Combobox options.
 	 * Each option is an object with a label and value.
@@ -155,48 +138,6 @@ const AttributesComboboxControl: React.FC<
 		currentValue = 'create-attribute';
 	}
 
-	const addNewAttribute = ( name: string ) => {
-		recordEvent( 'product_attribute_add_custom_attribute', {
-			source: TRACKS_SOURCE,
-		} );
-		if ( createNewAttributesAsGlobal ) {
-			createProductAttribute(
-				{
-					name,
-					generate_slug: true,
-				},
-				{
-					optimisticQueryUpdate: {
-						order_by: 'name',
-					},
-				}
-			).then(
-				( newAttr ) => {
-					onChange( newAttr );
-					clearCreateNewAttributeItem();
-					setAttributeSelected( true );
-				},
-				( error ) => {
-					let message = __(
-						'Failed to create new attribute.',
-						'woocommerce'
-					);
-					if ( error.code === 'woocommerce_rest_cannot_create' ) {
-						message = error.message;
-					}
-
-					createErrorNotice?.( message, {
-						explicitDismiss: true,
-					} );
-
-					clearCreateNewAttributeItem();
-				}
-			);
-		} else {
-			onChange( items.find( ( i ) => i.name === name ) );
-		}
-	};
-
 	const comboRef = useRef< HTMLDivElement | null >( null );
 
 	// Label to link the input with the label.
@@ -292,8 +233,11 @@ const AttributesComboboxControl: React.FC<
 								...createNewAttributeOption,
 								state: 'creating',
 							} );
-							addNewAttribute( createNewAttributeOption.label );
-							return;
+
+							return onChange( {
+								id: -99,
+								name: createNewAttributeOption.label,
+							} );
 						}
 
 						setAttributeSelected( true );

packages/js/product-editor/src/components/attribute-combobox-field/stories/index.tsx

@@ -3,111 +3,123 @@
  */
 import { __ } from '@wordpress/i18n';
 import React, { useState } from 'react';
+import type { ProductAttribute } from '@woocommerce/data';
 import '@wordpress/interface/src/style.scss';
-import { ProductAttribute } from '@woocommerce/data';
 
 /**
  * Internal dependencies
  */
 import AttributesComboboxControl from '../';
-import type { AttributesComboboxControlComponent } from '../types';
+import type {
+	AttributesComboboxControlComponent,
+	AttributesComboboxControlItem,
+} from '../types';
 
 export default {
 	title: 'Product Editor/components/AttributesComboboxControl',
 	component: AttributesComboboxControl,
 };
 
-const items = [
+const items: AttributesComboboxControlItem[] = [
 	{
 		id: 1,
 		name: 'Color',
-		slug: 'pa_color',
-		takenBy: 1,
 	},
 	{
 		id: 2,
 		name: 'Size',
-		slug: 'pa_size',
-		takenBy: 1,
 	},
 	{
 		id: 3,
 		name: 'Material',
-		slug: 'pa_material',
-		takenBy: 1,
+		isDisabled: true,
 	},
 	{
 		id: 4,
 		name: 'Style',
-		slug: 'pa_style',
-		takenBy: 1,
 	},
 	{
 		id: 5,
 		name: 'Brand',
-		slug: 'pa_brand',
-		takenBy: 1,
 	},
 	{
 		id: 6,
 		name: 'Pattern',
-		slug: 'pa_pattern',
-		takenBy: 1,
 	},
 	{
 		id: 7,
 		name: 'Theme',
-		slug: 'pa_theme',
-		takenBy: 1,
+		isDisabled: true,
 	},
 	{
 		id: 8,
 		name: 'Collection',
-		slug: 'pa_collection',
-		takenBy: 1,
+		isDisabled: true,
 	},
 	{
 		id: 9,
 		name: 'Occasion',
-		slug: 'pa_occasion',
-		takenBy: 1,
 	},
 	{
 		id: 10,
 		name: 'Season',
-		slug: 'pa_season',
-		takenBy: 1,
 	},
 ];
 
 export const Default = ( args: AttributesComboboxControlComponent ) => {
-	const [ selectedAttribute, setSelectedAttribute ] = useState<
-		ProductAttribute | undefined
-	>();
+	const [ selectedAttribute, setSelectedAttribute ] =
+		useState< AttributesComboboxControlItem | null >( null );
 
-	function selectAttribute( item: ProductAttribute | string | undefined ) {
+	function selectAttribute( item: AttributesComboboxControlItem ) {
 		if ( typeof item === 'string' ) {
 			return;
 		}
 
 		setSelectedAttribute( item );
+		args.onChange( item );
 	}
 
 	return (
 		<AttributesComboboxControl
 			{ ...args }
+			label={ __( 'Attributes', 'woocommerce' ) }
+			items={ items }
+			help={ __(
+				'Select or create attributes for this product.',
+				'woocommerce'
+			) }
 			onChange={ selectAttribute }
 			current={ selectedAttribute }
 		/>
 	);
 };
 
 Default.args = {
-	label: __( 'Attributes', 'woocommerce' ),
-	items,
-	help: __( 'Select or create attributes for this product.', 'woocommerce' ),
-
 	onChange: ( newValue: ProductAttribute ) => {
 		console.log( '(onChange) newValue:', newValue ); // eslint-disable-line no-console
 	},
 };
+
+export const MultipleInstances = (
+	args: AttributesComboboxControlComponent
+) => {
+	return (
+		<>
+			<AttributesComboboxControl
+				{ ...args }
+				label={ __( 'Attributes 1', 'woocommerce' ) }
+				items={ items }
+				instanceNumber={ 1 }
+			/>
+
+			<AttributesComboboxControl
+				{ ...args }
+				label={ __( 'Attributes 2', 'woocommerce' ) }
+				items={ items }
+				instanceNumber={ 2 }
+			/>
+		</>
+	);
+};
+
+MultipleInstances.args = Default.args;

packages/js/product-editor/src/components/attribute-combobox-field/styles.scss

@@ -12,24 +12,21 @@
 		background-color: white;
 
 		> .components-flex {
-			height: 32px;
+			height: 34px;
 		}
 	}
 
-	.components-combobox-control__suggestions-container {
-		margin: 0px;
-		padding: 0px;
-		max-height: 128px;
-	}
-
 	.components-form-token-field__suggestion {
 		padding: 0;
 		min-height: 32px;
 		display: flex;
 		align-items: center;
 
 		.item-wrapper {
-			padding: 8px 12px;
+			padding: 0 12px;
+			height: 36px;
+			line-height: 36px;
+			width: 100%;
 
 			&.is-disabled {
 				background-color: #fafafa;