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

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark