Add 'placeholder' attribute to taxonomy block and add 'placeholder' a… (#46938)

* Add 'placeholder' attribute to taxonomy block and add 'placeholder' attribute to category field in Simple Product Template

* Only show placeholder when nothing is selected

* Remove suffix from function parameters

* Add changelog for component

* fix unit tests

packages/js/components/changelog/add-placeholder-taxonomy

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Show 'placeholder' in SelectTree only when nothing is selected

packages/js/components/src/experimental-select-tree-control/select-tree.tsx

@@ -33,7 +33,6 @@ interface SelectTreeProps extends TreeControlProps {
 export const SelectTree = function SelectTree( {
 	items,
 	treeRef: ref,
-	placeholder,
 	isLoading,
 	disabled,
 	initialInputValue,
@@ -92,6 +91,13 @@ export const SelectTree = function SelectTree( {
 		}
 	}, [ isFocused ] );
 
+	let placeholder: string | undefined = '';
+	if ( Array.isArray( props.selected ) ) {
+		placeholder = props.selected.length === 0 ? props.placeholder : '';
+	} else if ( props.selected ) {
+		placeholder = props.placeholder;
+	}
+
 	const inputProps: React.InputHTMLAttributes< HTMLInputElement > = {
 		className: 'woocommerce-experimental-select-control__input',
 		id: `${ props.id }-input`,

packages/js/components/src/experimental-select-tree-control/test/select-tree.test.tsx

@@ -32,35 +32,35 @@ describe( 'SelectTree', () => {
 	} );
 
 	it( 'should show the popover only when focused', () => {
-		const { queryByPlaceholderText, queryByText } = render(
+		const { queryByRole, queryByText } = render(
 			<SelectTree { ...DEFAULT_PROPS } />
 		);
 		expect( queryByText( 'Item 1' ) ).not.toBeInTheDocument();
-		queryByPlaceholderText( 'Type here' )?.focus();
+		queryByRole( 'textbox' )?.focus();
 		expect( queryByText( 'Item 1' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should show create button when callback is true ', () => {
-		const { queryByText, queryByPlaceholderText } = render(
+		const { queryByText, queryByRole } = render(
 			<SelectTree
 				{ ...DEFAULT_PROPS }
 				shouldShowCreateButton={ () => true }
 			/>
 		);
-		queryByPlaceholderText( 'Type here' )?.focus();
+		queryByRole( 'textbox' )?.focus();
 		expect( queryByText( 'Create new' ) ).toBeInTheDocument();
 	} );
 	it( 'should not show create button when callback is false or no callback', () => {
-		const { queryByText, queryByPlaceholderText } = render(
+		const { queryByText, queryByRole } = render(
 			<SelectTree { ...DEFAULT_PROPS } />
 		);
-		queryByPlaceholderText( 'Type here' )?.focus();
+		queryByRole( 'textbox' )?.focus();
 		expect( queryByText( 'Create new' ) ).not.toBeInTheDocument();
 	} );
 	it( 'should show a root item when focused and child when expand button is clicked', () => {
-		const { queryByText, queryByLabelText, queryByPlaceholderText } =
+		const { queryByText, queryByLabelText, queryByRole } =
 			render( <SelectTree { ...DEFAULT_PROPS } /> );
-		queryByPlaceholderText( 'Type here' )?.focus();
+		queryByRole( 'textbox' )?.focus();
 		expect( queryByText( 'Item 1' ) ).toBeInTheDocument();
 
 		expect( queryByText( 'Item 2' ) ).not.toBeInTheDocument();
@@ -69,10 +69,10 @@ describe( 'SelectTree', () => {
 	} );
 
 	it( 'should show selected items', () => {
-		const { queryAllByRole, queryByPlaceholderText } = render(
+		const { queryAllByRole, queryByRole } = render(
 			<SelectTree { ...DEFAULT_PROPS } selected={ [ mockItems[ 0 ] ] } />
 		);
-		queryByPlaceholderText( 'Type here' )?.focus();
+		queryByRole( 'textbox' )?.focus();
 		expect( queryAllByRole( 'treeitem' )[ 0 ] ).toHaveAttribute(
 			'aria-selected',
 			'true'
@@ -80,19 +80,19 @@ describe( 'SelectTree', () => {
 	} );
 
 	it( 'should show Create "<createValue>" button', () => {
-		const { queryByPlaceholderText, queryByText } = render(
+		const { queryByText, queryByRole } = render(
 			<SelectTree
 				{ ...DEFAULT_PROPS }
 				createValue="new item"
 				shouldShowCreateButton={ () => true }
 			/>
 		);
-		queryByPlaceholderText( 'Type here' )?.focus();
+		queryByRole( 'textbox' )?.focus();
 		expect( queryByText( 'Create "new item"' ) ).toBeInTheDocument();
 	} );
 	it( 'should call onCreateNew when Create "<createValue>" button is clicked', () => {
 		const mockFn = jest.fn();
-		const { queryByPlaceholderText, queryByText } = render(
+		const { queryByRole, queryByText } = render(
 			<SelectTree
 				{ ...DEFAULT_PROPS }
 				createValue="new item"
@@ -100,7 +100,7 @@ describe( 'SelectTree', () => {
 				onCreateNew={ mockFn }
 			/>
 		);
-		queryByPlaceholderText( 'Type here' )?.focus();
+		queryByRole( 'textbox' )?.focus();
 		queryByText( 'Create "new item"' )?.click();
 		expect( mockFn ).toBeCalledTimes( 1 );
 	} );

packages/js/product-editor/changelog/add-placeholder-taxonomy

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add 'placeholder' attribute to taxonomy block

packages/js/product-editor/src/blocks/generic/taxonomy/README.md

@@ -48,6 +48,13 @@ Help text that appears for the name field in the dialog that appears when creati
 
 Label for the parent taxonomy field in the dialog that appears when creating a new taxonomy.
 
+### placeholder
+
+- **Type:** `String`
+- **Required:** `No`
+
+Placeholder for when the input field is empty.
+
 
 ## Usage
 

packages/js/product-editor/src/blocks/generic/taxonomy/block.json

@@ -31,6 +31,10 @@
 		"parentTaxonomyText": {
 			"type": "string",
 			"__experimentalRole": "content"
+		},
+		"placeholder": {
+			"type": "string",
+			"__experimentalRole": "content"
 		}
 	},
 	"supports": {

packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx

@@ -34,6 +34,7 @@ interface TaxonomyBlockAttributes extends BlockAttributes {
 	createTitle: string;
 	dialogNameHelpText?: string;
 	parentTaxonomyText?: string;
+	placeholder?: string;
 }
 
 export function Edit( {
@@ -56,6 +57,7 @@ export function Edit( {
 		dialogNameHelpText,
 		parentTaxonomyText,
 		disabled,
+		placeholder,
 	} = attributes;
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const [ allEntries, setAllEntries ] = useState< Taxonomy[] >( [] );
@@ -114,6 +116,7 @@ export function Edit( {
 					multiple
 					createValue={ searchValue }
 					onInputChange={ searchDelayed }
+					placeholder={ placeholder }
 					shouldNotRecursivelySelect
 					shouldShowCreateButton={ ( typedValue ) =>
 						! typedValue ||

plugins/woocommerce/changelog/add-category-placeholder

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+New product editor: Add 'placeholder' attribute to category field in Simple Product Template

plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php

@@ -439,6 +439,7 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 					'createTitle'        => __( 'Create new category', 'woocommerce' ),
 					'dialogNameHelpText' => __( 'Shown to customers on the product page.', 'woocommerce' ),
 					'parentTaxonomyText' => __( 'Parent category', 'woocommerce' ),
+					'placeholder'        => __( 'Search or create categories…', 'woocommerce' ),
 				),
 			)
 		);