WordPressのブロックエディタの`TextControl`をカスタマイズする

デザインガイドラインとか的にグレーな気はしますが、やり方だけ記録しておきます。

つくりたかったもの

「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の入力を受け付ける形にしてみています。