diff --git a/packages/js/components/changelog/add-placeholder-taxonomy b/packages/js/components/changelog/add-placeholder-taxonomy
new file mode 100644
index 00000000000..be97472596e
--- /dev/null
+++ b/packages/js/components/changelog/add-placeholder-taxonomy
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Show 'placeholder' in SelectTree only when nothing is selected
diff --git a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx b/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
index e0f950428d1..5d4fac8ddef 100644
--- a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
+++ b/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`,
diff --git a/packages/js/components/src/experimental-select-tree-control/test/select-tree.test.tsx b/packages/js/components/src/experimental-select-tree-control/test/select-tree.test.tsx
index efb87059c6c..b6f9dd266fb 100644
--- a/packages/js/components/src/experimental-select-tree-control/test/select-tree.test.tsx
+++ b/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(
);
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(
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(
);
- 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( );
- 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(
);
- 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 "" button', () => {
- const { queryByPlaceholderText, queryByText } = render(
+ const { queryByText, queryByRole } = render(
true }
/>
);
- queryByPlaceholderText( 'Type here' )?.focus();
+ queryByRole( 'textbox' )?.focus();
expect( queryByText( 'Create "new item"' ) ).toBeInTheDocument();
} );
it( 'should call onCreateNew when Create "" button is clicked', () => {
const mockFn = jest.fn();
- const { queryByPlaceholderText, queryByText } = render(
+ const { queryByRole, queryByText } = render(
{
onCreateNew={ mockFn }
/>
);
- queryByPlaceholderText( 'Type here' )?.focus();
+ queryByRole( 'textbox' )?.focus();
queryByText( 'Create "new item"' )?.click();
expect( mockFn ).toBeCalledTimes( 1 );
} );
diff --git a/packages/js/product-editor/changelog/add-placeholder-taxonomy b/packages/js/product-editor/changelog/add-placeholder-taxonomy
new file mode 100644
index 00000000000..a2051572298
--- /dev/null
+++ b/packages/js/product-editor/changelog/add-placeholder-taxonomy
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add 'placeholder' attribute to taxonomy block
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/README.md b/packages/js/product-editor/src/blocks/generic/taxonomy/README.md
index 7b19e17a2b1..d96aa74ad62 100644
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/README.md
+++ b/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
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/block.json b/packages/js/product-editor/src/blocks/generic/taxonomy/block.json
index 68c10d07c19..9b58f1d3a25 100644
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/block.json
+++ b/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": {
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx b/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx
index 305e18303e8..3143101c111 100644
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx
+++ b/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 ||
diff --git a/plugins/woocommerce/changelog/add-category-placeholder b/plugins/woocommerce/changelog/add-category-placeholder
new file mode 100644
index 00000000000..6f15ef257e2
--- /dev/null
+++ b/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
diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
index 51e0db5dd55..fd7297ad69c 100644
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
+++ b/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' ),
),
)
);