| 1 |
import { useBlockProps, RichText } from '@wordpress/block-editor'; |
| 2 |
import { __ } from '@wordpress/i18n'; |
| 3 |
|
| 4 |
const Save = ( { attributes } ) => { |
| 5 |
const blockProps = useBlockProps.save(); |
| 6 |
const { id, name, options, defaultValue, label, showLabel, multiple, required } = attributes; |
| 7 |
const normalizedDefaultValue = options.includes( defaultValue ) ? defaultValue : ( options[0] || '' ); |
| 8 |
|
| 9 |
return <> |
| 10 |
{ showLabel && <label htmlFor={ id }> |
| 11 |
<RichText.Content |
| 12 |
tagName="span" |
| 13 |
value={ label } |
| 14 |
/> |
| 15 |
{ required && <sup className="wp-block-wpzoom-forms-required">{ __( '*', 'wpzoom-forms' ) }</sup> } |
| 16 |
</label> } |
| 17 |
|
| 18 |
<select |
| 19 |
name={ multiple ? `${id}[]` : id } |
| 20 |
id={ id } |
| 21 |
required={ !! required } |
| 22 |
multiple={ !! multiple } |
| 23 |
defaultValue={ normalizedDefaultValue } |
| 24 |
{ ...blockProps } |
| 25 |
> |
| 26 |
{ options.map( ( option, index ) => <option key={ index } value={ option }>{ option }</option> ) } |
| 27 |
</select> |
| 28 |
</>; |
| 29 |
}; |
| 30 |
|
| 31 |
export default Save; |
| 32 |
|
