Title: エディター内のブロック
Author: Akira Tachibana
Published: 2023年12月23日
Last modified: 2025年3月8日

---

# エディター内のブロック

## この投稿内

 * [組み込みコンポーネント](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#組み込みコンポーネント)
 * [ブロックコントロール: ブロックツールバーと設定サイドバー](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#ブロックコントロール-ブロックツールバーと設定サイドバー)
    - [ブロックツールバー](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#ブロックツールバー)
    - [設定サイドバー](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#設定サイドバー)
 * [その他の情報](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#その他の情報)

[↑ ページの先頭へ戻る](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#wp--skip-link--target)

ブロックエディターは React シングルページアプリケーション (SPA) です。エディター
内のすべてのブロックは、クライアントでの[ブロック登録](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/registration-of-a-block/#JavaScript-%E3%81%AB%E3%82%88%E3%82%8B%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AE%E7%99%BB%E9%8C%B2%EF%BC%88%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E5%81%B4%EF%BC%89)
に使用される settings オブジェクトの `edit` プロパティで定義された、React コンポーネント
経由で表示されます。

ブロックの `Edit` React コンポーネントが受け取る `props` オブジェクトは以下を含み
ます。

 * **[`attributes`](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-edit-save/#%E5%B1%9E%E6%80%A7):**
   ブロックスのすべての属性オブジェクト
 * **[`setAttributes`](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-edit-save/#setAttributes):**
   属性オブジェクトを更新するメソッド
 * **[`isSelected`](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-edit-save/#isSelected):**
   ブロックが現在選択されているかどうかを示すブール値

WordPress にはエディター内のブロックのインターフェースを定義する、多くの組み込み
標準コンポーネントがあります。これらの組み込みコンポーネントは、[`@wordpress/components`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/)
や [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/)
などのパッケージから利用できます。

> WordPress Gutenberg プロジェクトでは、WordPress パッケージで利用可能なユーザー
> インターフェースコンポーネントのドキュメントに、[Storybook](https://wordpress.github.io/gutenberg/?path=/docs/docs-introduction--page)
> を使用しています。

ブロックツールバーや設定サイドバーのブロックのカスタム設定コントロールもまた、次
のような組み込みコンポーネントを介して、`Edit` React コンポーネント経由で定義でき
ます。

 * [`InspectorControls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md)
 * [`BlockControls`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-controls)

## 󠀁[組み込みコンポーネント](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#組み込みコンポーネント)󠁿

パッケージ [`@wordpress/components`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/)
には、ブロックエディターと WordPress ダッシュボード用の共通 UI 要素を作成する、汎用
WordPress コンポーネントのライブラリが含まれています。このパッケージでよく使用さ
れるコンポーネントです。

 * [`TextControl`](https://wordpress.github.io/gutenberg/?path=/docs/components-textcontrol--docs)
 * [`Panel`](https://wordpress.github.io/gutenberg/?path=/docs/components-panel--docs)
 * [`ToggleControl`](https://wordpress.github.io/gutenberg/?path=/docs/components-togglecontrol--docs)
 * [`ExternalLink`](https://wordpress.github.io/gutenberg/?path=/docs/components-externallink--docs)

パッケージ [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/)
にはブロックエディター用のコンポーネントとフックのライブラリが含まれ、そこにはブロック
のカスタム設定コントロールを定義するものもあります。このパッケージでよく使用される
コンポーネントです。

 * [`RichText`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)
 * [`BlockControls`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-controls)
 * [`InspectorControls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md)
 * [`InnerBlocks`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md)
 * `PanelColorSettings` または `ColorPalette`

> パッケージ [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/)
> にはまた、スタンドアロンブロックエディターを作成し、使用するためのツールも含まれ
> ます。

ブロックエディター用のコンポーネントを使用する際の、良いワークフローは、

 * WordPress のパッケージからコンポーネントをインポートする。
 * コンポーネントに対応するコードを JSX 形式でプロジェクトに追加する。
 * ほとんどの組み込みコンポーネントは、[ブロック属性](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-json/#attributes-%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E4%BF%9D%E5%AD%98)
   の設定に使用される。このため、`block.json` で必要な属性を定義し、コンポーネント
   の `setAttributes` でその属性を更新するイベントハンドラを作成する。
 * 必要であれば、コードをシリアライズして、データベースに格納できるようにする。

## 󠀁[ブロックコントロール: ブロックツールバーと設定サイドバー](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#ブロックコントロール-ブロックツールバーと設定サイドバー)󠁿

ブロックのカスタマイズを簡素化し、一貫したユーザー体験を保証するため、ブロックの
エディタープレビュー生成を支援するいくつかの組み込み UI パターンがあります。

下図は、選択した段落ブロックのブロックツールバーと設定サイドバーの詳細です。

![段落ブロック選択時のブロックツールバーと設定サイドバーの図解](https://developer.
wordpress.org/files/2023/12/block-toolbar-settings-sidebar.png)

### 󠀁[ブロックツールバー](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#ブロックツールバー)󠁿

ユーザーがブロックを選択すると、選択されたブロックの上のツールバーに、多くのコントロール
ボタンが表示されます。このうちブロックレベルのコントロールのいくつかは自動的に表示
されますが、ツールバーをカスタマイズしてブロックタイプに固有のコントロールを挿入
できます。ブロックタイプの `edit` 関数の戻り値に `BlockControls` 要素を含めると、
選択したブロックのツールバーにそのコントロールが表示されます。

    ```notranslate
    export default function Edit( { className, attributes: attr, setAttributes } ) {

    	const onChangeContent = ( newContent ) => {
    		setAttributes( { content: newContent } );
    	};

    	const onChangeAlignment = ( newAlignment ) => {
    		setAttributes( {
    			alignment: newAlignment === undefined ? 'none' : newAlignment,
    		} );
    	};

    	return (
    		<div { ...useBlockProps() }>
    			<BlockControls>
    				<ToolbarGroup>
    					<AlignmentToolbar
    						value={ attr.alignment }
    						onChange={ onChangeAlignment }
    					/>
    				</ToolbarGroup>
    			</BlockControls>

    			<RichText
    				className={ className }
    				style={ { textAlign: attr.alignment } }
    				tagName="p"
    				onChange={ onChangeContent }
    				value={ attr.content }
    			/>
    		</div>
    	);
    }
    ```

_[上のコード](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/block-toolbar-ab967f/src/edit.js)
を含む、[完全なブロックのサンプルプログラム](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-toolbar-ab967f)
を参照してください。_

なお、`BlockControls` はブロックが選択されていて、ビジュアル編集モードのときのみ
表示されます。HTML 編集モードでブロックを編集しているときは `BlockControls` は表示
されません。

### 󠀁[設定サイドバー](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#設定サイドバー)󠁿

設定サイドバーは、使用頻度の低い設定や、大きな画面領域を必要とする設定の表示に使用
されます。設定サイドバーは、**ブロックレベルの設定のみに使用し**、ブロックを選択
すると表示されます。

ブロック内の選択したコンテンツにのみ影響する設定、たとえばテキストの「太字」など
は、**設定サイドバー内に配置しないでください**。代わりにツールバーを使用してくだ
さい。設定サイドバーは HTML モードでブロックを編集しているときにも表示されます。
このため、ブロックレベルの設定のみを配置してください。

ツールバーのレンダリングと同様に、ブロックタイプの `edit` 関数の戻り値に `InspectorControls`
要素を含めると、コントロールが設定サイドバー領域に表示されます。

    ```notranslate
    export default function Edit( { attributes, setAttributes } ) {
    	const onChangeBGColor = ( hexColor ) => {
    		setAttributes( { bg_color: hexColor } );
    	};

    	const onChangeTextColor = ( hexColor ) => {
    		setAttributes( { text_color: hexColor } );
    	};

    	return (
    		<div { ...useBlockProps() }>
    			<InspectorControls key="setting">
    				<div>
    					<fieldset>
    						<legend className="blocks-base-control__label">
    							{ __( 'Background color', 'block-development-examples' ) }
    						</legend>
    						<ColorPalette // Element Tag for Gutenberg standard color selector
    							onChange={ onChangeBGColor } // onChange event callback
    						/>
    					</fieldset>
    					<fieldset>
    						<legend className="blocks-base-control__label">
    							{ __( 'Text color', 'block-development-examples' ) }
    						</legend>
    						<ColorPalette
    							onChange={ onChangeTextColor }
    						/>
    					</fieldset>
    				</div>
    			</InspectorControls>
    			<TextControl
    				__nextHasNoMarginBottom
    				__next40pxDefaultSize
    				value={ attributes.message }
    				onChange={ ( val ) => setAttributes( { message: val } ) }
    				style={ {
    					backgroundColor: attributes.bg_color,
    					color: attributes.text_color,
    				} }
    			/>
    		</div>
    	);
    }
    ```

_[上のコード](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/settings-sidebar-82c525/src/edit.js)
を含む、[完全なブロックのサンプルプログラム](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/settings-sidebar-82c525)
を参照してください。_

ツールバーとサイドバーの両方でレンダーされるブロックコントロールは、同じタイプの
複数のブロックが選択されている場合にも利用できます。

色、ボーダー、スペースのカスタマイズなどを含む、一般的なカスタマイズ設定について
は、[ブロックサポート](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-json/#supports-%E3%81%AB%E3%82%88%E3%82%8B%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AE-UI-%E8%A8%AD%E5%AE%9A%E3%83%91%E3%83%8D%E3%83%AB%E3%81%AE%E6%9C%89%E5%8A%B9%E5%8C%96)
を使用すると、より効率的な方法で、同じ機能を提供できます。

## 󠀁[その他の情報](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-in-the-editor/?output_format=md#その他の情報)󠁿

 * [Storybook for WordPress components](https://wordpress.github.io/gutenberg/?path=/docs/docs-introduction--page)
 * [@wordpress/block-editor](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/)
 * [@wordpress/components](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/)
 * [`InspectorControls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md)
 * [`BlockControls`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-controls)

[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/getting-started/fundamentals/block-in-the-editor.md)

公開日

2023年12月23日

最終更新

2025年3月8日

[  前へ: ブロックラッパー](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/block-wrapper/)

[  次へ: ブロックのマークアップ表現](https://ja.wordpress.org/team/handbook/block-editor/getting-started/fundamentals/markup-representation-block/)