diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js index 7682e7ee157e8d..e110286976b1a6 100644 --- a/packages/block-editor/src/components/duotone-control/index.js +++ b/packages/block-editor/src/components/duotone-control/index.js @@ -12,8 +12,10 @@ import { import { __ } from '@wordpress/i18n'; import { DOWN } from '@wordpress/keycodes'; import { Icon, filter } from '@wordpress/icons'; +import { useInstanceId } from '@wordpress/compose'; function DuotoneControl( { + id: idProp, colorPalette, duotonePalette, disableCustomColors, @@ -31,6 +33,11 @@ function DuotoneControl( { } else { toolbarIcon = ; } + + const actionLabel = __( 'Apply duotone filter' ); + const id = useInstanceId( DuotoneControl, 'duotone-control', idProp ); + const descriptionId = `${ id }__description`; + return ( ); } } renderContent={ () => ( -
+
{ __( 'Create a two-tone color effect without losing your original image.' ) }
getDefaultColors( colorPalette ), @@ -74,13 +75,15 @@ function DuotonePicker( { ); const isUnset = value === 'unset'; + const unsetOptionLabel = __( 'Unset' ); const unsetOption = ( { onChange( isUnset ? undefined : 'unset' ); @@ -154,6 +157,7 @@ function DuotonePicker( { return (