UNPKG

1.43 kBJavaScriptView Raw
1/**
2 * WordPress dependencies
3 */
4import { RichText } from '@wordpress/block-editor';
5import { __ } from '@wordpress/i18n';
6
7export default function SearchEdit( { className, attributes, setAttributes } ) {
8 const { label, placeholder, buttonText } = attributes;
9
10 return (
11 <div className={ className }>
12 <RichText
13 wrapperClassName="wp-block-search__label"
14 aria-label={ __( 'Label text' ) }
15 placeholder={ __( 'Add label…' ) }
16 keepPlaceholderOnFocus
17 formattingControls={ [] }
18 value={ label }
19 onChange={ ( html ) => setAttributes( { label: html } ) }
20 />
21 <input
22 className="wp-block-search__input"
23 aria-label={ __( 'Optional placeholder text' ) }
24 // We hide the placeholder field's placeholder when there is a value. This
25 // stops screen readers from reading the placeholder field's placeholder
26 // which is confusing.
27 placeholder={ placeholder ? undefined : __( 'Optional placeholder…' ) }
28 value={ placeholder }
29 onChange={ ( event ) => setAttributes( { placeholder: event.target.value } ) }
30 />
31 <RichText
32 wrapperClassName="wp-block-search__button"
33 className="wp-block-search__button-rich-text"
34 aria-label={ __( 'Button text' ) }
35 placeholder={ __( 'Add button text…' ) }
36 keepPlaceholderOnFocus
37 formattingControls={ [] }
38 value={ buttonText }
39 onChange={ ( html ) => setAttributes( { buttonText: html } ) }
40 />
41 </div>
42 );
43}