WordPressのブロックエディタの`TextControl`をカスタマイズする
デザインガイドラインとか的にグレーな気はしますが、やり方だけ記録しておきます。 つくりたかったもの 「inputタグ + buttonタグ」を組み合わせたフィールドを作ろうとしていました。 使ったもの BaseContr […]
広告ここから
広告ここまで
目次
デザインガイドラインとか的にグレーな気はしますが、やり方だけ記録しておきます。
つくりたかったもの
「inputタグ + buttonタグ」を組み合わせたフィールドを作ろうとしていました。
使ったもの
BaseControl
というコンポーネントを使って再実装しました。
コード
import React, { useCallback, useState } from 'react'
import { Icon, Button, BaseControl } from '@wordpress/components'
const { useInstanceId } = require('@wordpress/compose')
export const SearchOption = ({attributes, setAttributes}) => {
const { indexName } = attributes
// inputタグないの挙動系
const [tmpIndexName, changeIndexName] = useState(indexName)
const instanceId = useInstanceId( TextControl );
const id = `inspector-text-control-${ instanceId }`;
const onChangeValue = useCallback(( event ) => changeIndexName( event.target.value ), [changeIndexName])
// Submit的動作の挙動
const handleChangeIndexName = useCallback(() => {
setAttributes({indexName: tmpIndexName})
}, [setAttributes, tmpIndexName])
return (
<PanelBody title={__('Search Option')}>
<BaseControl
label={ __( 'Index name' ) }
id={ id }
>
<div style={{
display: 'flex',
flexDirection: 'row',
}}>
<input
className="components-text-control__input"
type="text"
id={ id }
value={ tmpIndexName }
onChange={ onChangeValue }
onKeyDown={e => {
if (e.key !== 'Enter') return;
handleChangeIndexName()
}}
/>
<Button onClick={handleChangeIndexName} isSecondary>
<Icon icon="search" />{ __( 'Search' ) }
</Button>
</div>
</BaseControl>
form
タグでsubmitではなくonKeyDown
でEnterの入力を受け付ける形にしてみています。