Product Editor API: Add tooltip attribute to woocommerce/product-select-field block (#46447)

packages/js/product-editor/changelog/add-product-editor-select-block-tooltip

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Product Editor: Add support for tooltip attribute for woocommerce/product-select-field block

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

@@ -25,6 +25,13 @@ Property in which the value is stored.
 
 Help text that appears below the field.
 
+### tooltip
+
+- **Type:** `String`
+- **Required:** `No`
+
+If provided, shows a tooltip next to the label with additional information.
+
 ### multiple
 
 -   **Type:** `Boolean`

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

@@ -21,6 +21,9 @@
 		"help": {
 			"type": "string"
 		},
+		"tooltip": {
+			"type": "string"
+		},
 		"disabled": {
 			"type": "boolean"
 		},

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

@@ -12,6 +12,7 @@ import useProductEntityProp from '../../../hooks/use-product-entity-prop';
 import { sanitizeHTML } from '../../../utils/sanitize-html';
 import type { ProductEditorBlockEditProps } from '../../../types';
 import type { SelectBlockAttributes } from './types';
+import { Label } from '../../../components/label/label';
 
 export function Edit( {
 	attributes,
@@ -19,8 +20,17 @@ export function Edit( {
 }: ProductEditorBlockEditProps< SelectBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 
-	const { property, label, placeholder, help, disabled, options, multiple } =
-		attributes;
+	const {
+		property,
+		label,
+		note,
+		placeholder,
+		help,
+		tooltip,
+		disabled,
+		options,
+		multiple,
+	} = attributes;
 
 	const [ value, setValue ] = useProductEntityProp< string | string[] >(
 		property,
@@ -41,7 +51,9 @@ export function Edit( {
 			<SelectControl
 				value={ value }
 				disabled={ disabled }
-				label={ label }
+				label={
+					<Label label={ label } note={ note } tooltip={ tooltip } />
+				}
 				onChange={ setValue }
 				help={ renderHelp() }
 				placeholder={ placeholder }

packages/js/product-editor/src/blocks/generic/select/types.ts

@@ -7,7 +7,9 @@ import { SelectControl } from '@wordpress/components';
 export interface SelectBlockAttributes extends BlockAttributes {
 	property: string;
 	label: string;
+	note?: string;
 	help?: string;
+	tooltip?: string;
 	placeholder?: string;
 	disabled?: boolean;
 	multiple?: boolean;