1 |
|
2 |
|
3 |
|
4 | import { RichText } from '@wordpress/block-editor';
|
5 | import { __ } from '@wordpress/i18n';
|
6 |
|
7 | export 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 |
|
25 |
|
26 |
|
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 | }
|