サイドバーに設定できるフォームのタイプ（カスタムブロック）

| その他 ホームページ制作手帳

TextControl

テキストを入力するためのシンプルなテキストボックス。文字列のデータ入力に使用します。

<TextControl
    label="テキスト入力"
    value={textValue}
    onChange={(value) => setAttributes({ textValue: value })}
/>

TextareaControl

複数行のテキストを入力できるテキストエリア。長文の説明や詳細な情報入力に適しています。

<TextareaControl
    label="詳細な説明"
    value={textAreaValue}
    onChange={(value) => setAttributes({ textAreaValue: value })}
/>

ToggleControl

オン/オフを切り替えるためのスイッチ。設定の有効/無効の制御に使われます。

<ToggleControl
    label="有効にする"
    checked={isEnabled}
    onChange={() => setAttributes({ isEnabled: !isEnabled })}
/>

CheckboxControl

チェックボックスで1つの選択肢を選ぶために使用。簡単な選択肢の有無に最適です。

<CheckboxControl
    label="同意する"
    checked={isChecked}
    onChange={(value) => setAttributes({ isChecked: value })}
/>

RadioControl

複数の選択肢の中から1つを選ぶためのラジオボタン。選択肢が複数ある場合に使用します。

<RadioControl
    label="選択肢"
    selected={selectedOption}
    options={[
        { label: 'オプション1', value: 'option1' },
        { label: 'オプション2', value: 'option2' }
    ]}
    onChange={(value) => setAttributes({ selectedOption: value })}
/>

SelectControl

ドロップダウンリストで1つの選択肢を選ぶために使用。シンプルな選択に最適です。

<SelectControl
    label="選択肢を選ぶ"
    value={selectedOption}
    options={[
        { label: 'オプション1', value: 'option1' },
        { label: 'オプション2', value: 'option2' }
    ]}
    onChange={(value) => setAttributes({ selectedOption: value })}
/>

RangeControl

スライダーで数値を設定できるフォーム。数値の範囲を調整する際に使用します。

<RangeControl
    label="サイズ"
    value={sizeValue}
    onChange={(value) => setAttributes({ sizeValue: value })}
    min={0}
    max={100}
/>

ColorPicker

カラーピッカーを使用して色を選ぶフォーム。背景色やテキスト色の設定に適しています。

<ColorPicker
    color={selectedColor}
    onChangeComplete={(color) => setAttributes({ selectedColor: color.hex })}
/>

DateTimePicker

日付や時間を選択するためのフォーム。イベントの日付や期限の設定に使用します。

<DateTimePicker
    currentDate={dateValue}
    onChange={(newDate) => setAttributes({ dateValue: newDate })}
/>

FormTokenField

タグのように複数の値を入力できるフォーム。キーワードやタグを入力する際に使用します。

<FormTokenField
    label="タグ"
    value={tags}
    suggestions={['タグ1', 'タグ2']}
    onChange={(newTags) => setAttributes({ tags: newTags })}
/>

BaseControl

他のフォームコントロールにラベルや説明を追加するためのベースコンポーネント。特定の要素にラベルを付ける際に使われます。

<BaseControl
    id="example-control"
    label="ベースコントロール"
    help="追加の説明テキスト"
>
    {/* 子要素として他のコントロールを配置 */}
    <TextControl
        id="example-control"
        value={exampleValue}
        onChange={(value) => setAttributes({ exampleValue: value })}
    />
</BaseControl>

FileUpload

ファイルをアップロードさせるためのフォーム。画像やPDFなどのアップロードに使用します。

<FileUpload
    onChange={(file) => setAttributes({ uploadedFile: file })}
/>

MediaUpload

メディアライブラリから画像や動画を選択、または新しいファイルをアップロードできるフォーム。選択したメディアのサムネイルを表示することも可能です。

<MediaUpload
    onSelect={(media) => setAttributes({ mediaUrl: media.url })}
    allowedTypes={['image']}
    render={({ open }) => (
        <Button onClick={open}>メディアを選択</Button>
    )}
/>

MediaUploadCheck

MediaUpload のメディアライブラリへのアクセス権をチェックするために使います。ユーザーがメディアをアップロードする権限を持っているかどうかを確認します。

<MediaUploadCheck>
    <MediaUpload
        onSelect={(media) => setAttributes({ mediaUrl: media.url })}
        allowedTypes={['image']}
        render={({ open }) => (
            <Button onClick={open}>メディアを選択</Button>
        )}
    />
</MediaUploadCheck>

Button

ボタンを作成し、特定のアクションをトリガーするために使用します。例えば、クリックでイベントを実行する際に使用されます。

<Button
    isPrimary
    onClick={() => console.log('ボタンクリック')}
>
    保存する
</Button>

ExternalLink

外部リンクを作成するためのコンポーネント。新しいタブで外部ページに移動するリンクを作成します。

<ExternalLink href="https://example.com" target="_blank">
    外部リンクはこちら
</ExternalLink>

Placeholder

コンテンツがまだ配置されていない場合に表示されるプレースホルダー。例えば、ブロックがまだ設定されていない場合に、設定画面を表示するために使われます。

<Placeholder
    icon="admin-site"
    label="ここにコンテンツを追加"
/>

RangeControl (幅と高さの設定付き)

RangeControl は数値範囲を選択するスライダーです。幅や高さ、パディング、マージンなどのサイズを調整する場合に使われます。

<RangeControl
    label="幅 (px)"
    value={width}
    onChange={(value) => setAttributes({ width: value })}
    min={0}
    max={500}
/>

PanelBody

パネルのセクションとして使用され、サイドバー内のコントロールのグループ化に使います。

<PanelBody title="セクションタイトル">
    <TextControl
        label="テキスト入力"
        value={textValue}
        onChange={(value) => setAttributes({ textValue: value })}
    />
</PanelBody>

PanelRow

サイドバーパネル内の各コントロールをグループ化して整列させるための行コンポーネント。

<PanelBody title="セクションタイトル">
    <PanelRow>
        <CheckboxControl
            label="オプション1"
            checked={option1}
            onChange={(value) => setAttributes({ option1: value })}
        />
    </PanelRow>
</PanelBody>

Notice

注意や警告を表示するための通知メッセージをサイドバー内に表示するためのコンポーネントです。例えばエラーや成功メッセージを表示するのに使います。

<Notice status="warning">
    この設定は慎重に行ってください。
</Notice>

Spinner

:読み込み中などのインジケーターとして使用されるスピナー。非同期処理が行われている間に表示されます。

{isLoading && <Spinner />}

Popover

クリックやホバーで表示されるポップアップメニューや詳細情報を表示するために使われます。ツールチップや小さな設定メニューなどに適しています。

<Popover position="middle center">
    <div>ポップアップの内容</div>
</Popover>

Toolbar

アイコンやボタンのツールバーを表示するためのコンポーネント。エディターでのツールセットなどに使います。

<Toolbar>
    <Button icon="edit" label="編集" onClick={handleEdit} />
    <Button icon="trash" label="削除" onClick={handleDelete} />
</Toolbar>

TabPanel

タブを切り替えることで複数の設定パネルを表示するためのコンポーネント。複数の設定やオプションを効率的に管理するために使われます。

<TabPanel
    className="my-tab-panel"
    activeClass="active-tab"
    tabs={[
        { name: 'tab1', title: 'タブ 1', className: 'tab-one' },
        { name: 'tab2', title: 'タブ 2', className: 'tab-two' },
    ]}
>
    {(tab) => {
        if (tab.name === 'tab1') {
            return <div>タブ 1 の内容</div>;
        } else if (tab.name === 'tab2') {
            return <div>タブ 2 の内容</div>;
        }
    }}
</TabPanel>