インストール

モジュールをインストールします 

  1. npm install @wordpress/block-editor --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。もし、言語機能やAPIのサポートが限られているか、全くない環境を使用している場合は、コードに@wordpress/babel-preset-defaultで提供されるポリフィルを含めるべきです。

使用法

  1. import { useState } from 'react';
  2. import {
  3.    BlockCanvas,
  4.    BlockEditorProvider,
  5.    BlockList,
  6. } from '@wordpress/block-editor';
  8. function MyEditorComponent() {
  9.    const [ blocks, updateBlocks ] = useState( [] );
  11.    return (
  12.    <BlockEditorProvider
  13.    value={ blocks }
  14.    onInput={ ( blocks ) => updateBlocks( blocks ) }
  15.    onChange={ ( blocks ) => updateBlocks( blocks ) }
  16.    >
  17.    <BlockCanvas height="400px" />
  18.    </BlockEditorProvider>
  19.    );
  20. }
  22. // Make sure to load the block editor stylesheets too
  23. // import '@wordpress/components/build-style/style.css';
  24. // import '@wordpress/block-editor/build-style/style.css';

この例では、ブロックエディタをインスタンス化しています。ブロックエディタは、現在のブロックの配列を渡すBlockEditorProviderラッパーコンポーネントで構成されており、変更があるたびにonInputまたはonChangeコールバックが呼び出されます。変更が永続的と見なされるかどうかによって異なります。

BlockEditorProviderの内部では、エディタのUIを構築するために、利用可能な@wordpress/block-editor UIコンポーネントをネストできます。

上記の例では、ブロックリストを表示および編集するためにBlockListをレンダリングしています。たとえば、カスタムサイドバーを追加し、BlockInspectorコンポーネントを使用して現在選択されているブロックの高度な設定を編集できるようにすることができます。（利用可能なすべてのコンポーネントのリストについてはAPIを参照してください）。 

  2. 上記の例では、登録されたブロックタイプはありません。ブロックエディタを正常に使用するには、いくつかのブロックタイプを登録してください。たとえば、コアブロックタイプを登録するには、次のようにします：  
  5. ``````bash
  6. import { registerCoreBlocks } from '@wordpress/block-library';
  8. registerCoreBlocks();
  10. // Make sure to load the block stylesheets too
  11. // import '@wordpress/block-library/build-style/style.css';
  12. // import '@wordpress/block-library/build-style/editor.css';
  13. // import '@wordpress/block-library/build-style/theme.css';
  14. `

API

このパッケージ内のコンポーネントで@wordpress/componentsに対応するものは、これらのコンポーネントの拡張です。

エディタを作成していない限り、@wordpress/componentsのコンポーネントを使用することをお勧めします。このパッケージのコンポーネントはエディタでの使用のためにカスタマイズされており、このコンテキスト外で使用すると予期しない動作を引き起こす可能性があります。

AlignmentControl

関連

AlignmentToolbar

関連

Autocomplete

関連

BlockAlignmentControl

関連

BlockAlignmentToolbar

関連

BlockBreadcrumb

ブロックのパンくずリストコンポーネントで、現在のブロック選択の階層をパンくずリストとして表示します。

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.rootLabelText string: パンくずリストのルート要素の翻訳されたラベル。

戻り値

  • Element: ブロックのパンくずリスト。

BlockCanvas

BlockCanvasコンポーネントは、ブロックエディタのキャンバスを表示するために使用されるコンポーネントです。キャンバスと呼ばれるものは、操作可能なブロックリストを含むiframeです。このコンポーネントは、エディタ内のブロック間のキーボードナビゲーションを有効にするために必要なすべてのフックを接続し、iframeにコンテンツスタイルを注入する役割も担っています。

使用法 

  1. function MyBlockEditor() {
  2.    const [ blocks, updateBlocks ] = useState( [] );
  3.    return (
  4.    <BlockEditorProvider
  5.    value={ blocks }
  6.    onInput={ updateBlocks }
  7.    onChange={ persistBlocks }
  8.    >
  9.    <BlockCanvas height="400px" />
  10.    </BlockEditorProvider>
  11.    );
  12. }

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.height string: キャンバスの高さ、デフォルトは300px。
  • props.styles Array: iframeに注入するコンテンツスタイル。
  • props.children Element: キャンバスのコンテンツ、デフォルトはBlockListコンポーネントです。

戻り値

  • Element: ブロックのパンくずリスト。

BlockColorsStyleSelector

未文書化の宣言。

BlockContextProvider

渡された値を現在の消費されるブロックコンテキストとマージするコンポーネント。

関連

パラメータ

  • props BlockContextProviderProps:

BlockControls

未文書化の宣言。

BlockEdit

未文書化の宣言。

BlockEditorKeyboardShortcuts

未文書化の宣言。

BlockEditorProvider

未文書化の宣言。

BlockFormatControls

未文書化の宣言。

BlockIcon

関連

BlockInspector

関連

BlockList

未文書化の宣言。

BlockMover

関連

BlockNavigationDropdown

未文書化の宣言。

BlockPopover

関連

BlockPreview

BlockPreviewは、ブロックまたはブロックの配列のプレビューをレンダリングします。

関連

パラメータ

  • preview Object: プレビューの表示方法に関するオプション
  • preview.blocks Array|Object: プレビューされるブロックインスタンス（オブジェクト）またはブロックの配列。
  • preview.viewportWidth number: ピクセル単位のプレビューコンテナの幅。ブロックがプレビュー内でどのサイズでレンダリングされるかを制御します。デフォルト: 700。

戻り値

  • Component: レンダリングされるコンポーネント。

BlockSelectionClearer

未文書化の宣言。

BlockSettingsMenu

未文書化の宣言。

BlockSettingsMenuControls

関連

パラメータ

  • props Object: フィルプロパティ。

戻り値

  • Element: 要素。

BlockStyles

未文書化の宣言。

BlockTitle

ブロックの設定されたタイトルを文字列としてレンダリングします。タイトルが決定できない場合は空になります。

使用法 

  1. <BlockTitle
  2.    clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1"
  3.    maximumLength={ 17 }
  4. />

パラメータ

  • props Object:
  • props.clientId string: ブロックのクライアントID。
  • props.maximumLength number|undefined: ブロックタイトル文字列が切り捨てられる前の最大長。
  • props.context string|undefined: getBlockLabelに渡すコンテキスト。

戻り値

  • JSX.Element: ブロックタイトル。

BlockToolbar

ブロックツールバーをレンダリングします。

関連

パラメータ

  • props Object: コンポーネントのプロパティ。
  • props.hideDragHandle boolean: ドラッグアンドドロップ機能のためのドラッグハンドルを表示または非表示にします。
  • props.variant string: ツールバーのスタイルバリアントで、Block Toolbar Buttonsからレンダリングされるドロップダウンにも渡されます。

BlockTools

ブロックツール（ブロックツールバー、選択/ナビゲーションモードツールバー、挿入ポイント、およびインラインリッチテキストツールバーのスロット）をレンダリングします。ブロックコンテンツとエディタスタイルラッパーまたはiframeの周りにラップする必要があります。

パラメータ

  • $0 Object: プロパティ。
  • $0.children Object: ブロックコンテンツとスタイルコンテナ。
  • $0.__unstableContentRef Object: コンテンツスクロールコンテナを保持する参照。

BlockVerticalAlignmentControl

関連

BlockVerticalAlignmentToolbar

関連

ButtonBlockAppender

関連

ButtonBlockerAppender

非推奨
ButtonBlockAppenderを代わりに使用してください。

ColorPalette

未文書化の宣言。

ColorPaletteControl

未文書化の宣言。

ContrastChecker

関連

CopyHandler

非推奨
パラメータ

  • props Object:

createCustomColorsHOC

カスタムカラーのロジックを処理する‘withCustomColors’ HOCを作成するための高階コンポーネントファクトリです。

この高階コンポーネントを使用して、カスタムカラーセットで作業します。

使用法 

  1. const CUSTOM_COLORS = [
  2.    { name: 'Red', slug: 'red', color: '#ff0000' },
  3.    { name: 'Blue', slug: 'blue', color: '#0000ff' },
  4. ];
  5. const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );
  6. // ...
  7. export default compose(
  8.    withCustomColors( 'backgroundColor', 'borderColor' ),
  9.    MyColorfulComponent
  10. );

パラメータ

  • colorsArray Array: カラーオブジェクトの配列（名前、スラッグ、色など）。

戻り値

  • Function: 高階コンポーネント。

DefaultBlockAppender

未文書化の宣言。

FontSizePicker

関連

getColorClassName

色が使用されているコンテキストとそのスラッグに基づいてクラスを返します。

パラメータ

  • colorContextName string: 色が使用されているコンテキスト/場所（例：背景、テキストなど）。
  • colorSlug string: 色のスラッグ。

戻り値

  • ?string: 提供されたコンテキストでの色に対応するクラスを含む文字列。colorContextNameまたはcolorSlugが提供されていない場合はundefinedを返します。

getColorObjectByAttributeValues

テーマまたはエディタのデフォルトによって設定された色オブジェクトの配列と、定義された色またはカスタム色の値を提供し、色を説明する色オブジェクトを返します。

パラメータ

  • colors Array: テーマまたはエディタのデフォルトによって設定された色オブジェクトの配列。
  • definedColor ?string: 色スラッグを含む文字列。
  • customColor ?string: カスタムカラー値を含む文字列。

戻り値

  • ?Object: definedColorが渡され、名前がcolorsに見つかった場合、テーマまたはエディタのデフォルトによって設定された色オブジェクトが正確に返されます。そうでない場合は、色を設定するだけのオブジェクトが定義されます。

getColorObjectByColorValue

テーマまたはエディタのデフォルトによって設定された色オブジェクトの配列と、色値を提供し、その値に一致する色オブジェクトを返します。

パラメータ

  • colors Array: テーマまたはエディタのデフォルトによって設定された色オブジェクトの配列。
  • colorValue ?string: 色値を含む文字列。

戻り値

  • ?Object: colors配列に含まれる色プロパティがcolorValueに等しい色オブジェクト。要件に一致する色オブジェクトがない場合はundefinedを返します。

getComputedFluidTypographyValue

clamp()を使用して流動的なフォントサイズ値を計算します。最小および最大フォントサイズまたは単一のフォントサイズを指定できます。

単一のフォントサイズが指定された場合、それは対数スケールを使用して上下にスケーリングされます。

使用法 

  1. // Calculate fluid font-size value from a minimum and maximum value.
  2. const fontSize = getComputedFluidTypographyValue( {
  3.    minimumFontSize: '20px',
  4.    maximumFontSize: '45px',
  5. } );
  6. // Calculate fluid font-size value from a single font size.
  7. const fontSize = getComputedFluidTypographyValue( {
  8.    fontSize: '30px',
  9. } );

パラメータ

  • args Object:
  • args.minimumViewportWidth ?string: タイプが流動的になる最小ビューポートサイズ。fontSizeが指定されている場合はオプション。
  • args.maximumViewportWidth ?string: タイプが流動的になる最大サイズ。fontSizeが指定されている場合はオプション。
  • args.fontSize [string|number]: maximumFontSizeおよびminimumFontSizeを導出するためのサイズ、必要に応じて。minimumFontSizeおよびmaximumFontSizeが指定されている場合はオプション。
  • args.maximumFontSize ?string: clamp()計算の最大フォントサイズ。オプション。
  • args.minimumFontSize ?string: clamp()計算の最小フォントサイズ。オプション。
  • args.scaleFactor ?number: 境界内でフォントがどれだけ速くスケーリングされるかを決定するスケールファクター。オプション。
  • args.minimumFontSizeLimit ?string: 計算されたフォントサイズの最小値。オプション。

戻り値

  • string|null: clamp()を使用したフォントサイズ値。

getCustomValueFromPreset

スペーシングプリセットをカスタム値に変換します。

パラメータ

  • value string: 変換する値
  • spacingSizes Array: 現在のスペーシングプリセットオブジェクトの配列

戻り値

  • string: スペーシングプリセットのマッピングとその同等のカスタム値。

getFontSize

名前付きフォントサイズの配列とnamedFontSizeおよびcustomFontSize値に基づいてフォントサイズオブジェクトを返します。namedFontSizeがundefinedであるか、fontSizesに見つからない場合は、customFontSizeに基づくサイズ値のみを持つオブジェクトが返されます。

パラメータ

  • fontSizes Array: 少なくとも「name」と「size」値をプロパティとして含むフォントサイズオブジェクトの配列。
  • fontSizeAttribute ?string: フォントサイズ属性の内容（スラッグ）。
  • customFontSizeAttribute ?number: カスタムフォントサイズ属性の内容（値）。

戻り値

  • ?Object: fontSizeAttributeが設定され、fontSizesに等しいスラッグが見つかった場合、そのスラッグのフォントサイズオブジェクトを返します。そうでない場合は、customFontSizeに基づくサイズ値のみを持つオブジェクトが返されます。

getFontSizeClass

fontSizeNameに基づいてクラスを返します。

パラメータ

  • fontSizeSlug string: fontSizeのスラッグ。

戻り値

  • string | undefined: 渡されたfontSizeに対応するクラスを含む文字列。クラスは、‘has-’を追加し、kebabCaseでfontSizeSlugを続け、‘-font-size’で終わります。

getFontSizeObjectByValue

指定された値に対する対応するフォントサイズオブジェクトを返します。

パラメータ

  • fontSizes Array: フォントサイズオブジェクトの配列。
  • value number: フォントサイズ値。

戻り値

  • Object: フォントサイズオブジェクト。

getGradientSlugByValue

スラッグごとにグラデーションスラッグを取得します。

パラメータ

  • gradients Array: グラデーションパレット
  • value string: グラデーション値

戻り値

  • string: グラデーションスラッグ。

getGradientValueBySlug

スラッグごとにグラデーション値を取得します。

パラメータ

  • gradients Array: グラデーションパレット
  • slug string: グラデーションスラッグ

戻り値

  • string: グラデーション値。

getPxFromCssUnit

非推奨
この関数はモバイル/ネイティブ使用のために誤って公開されました。

戻り値

  • string: 空の文字列。

getSpacingPresetCssVar

スペーシングプリセットをカスタム値に変換します。

パラメータ

  • value string: 変換する値。

戻り値

  • string | undefined: 指定されたスペーシングプリセット値のCSS変数文字列。

getTypographyClassesAndStyles

ブロックのタイポグラフィサポート属性のためのCSSクラス名とインラインスタイルを提供します。

パラメータ

  • attributes Object: ブロック属性。
  • settings Object|boolean: マージされたtheme.json設定

戻り値

  • Object: タイポグラフィブロックサポートから派生したCSSクラスおよびスタイル。

HeadingLevelDropdown

見出しレベル（1から6）または段落（0）を選択するためのドロップダウン。

パラメータ

  • props WPHeadingLevelDropdownProps: コンポーネントのプロパティ。

戻り値

  • ComponentType: ツールバー。

HeightControl

HeightControlは、ブロックの高さを調整するためのリンクされた単位コントロールと範囲コントロールをレンダリングします。

関連

パラメータ

  • props Object:
  • props.label ?string: コントロールのラベル。
  • props.onChange ( value: string ) => void: 高さが変更されたときに呼び出されます。
  • props.value string: 現在の高さの値。

戻り値

  • Component: レンダリングされるコンポーネント。

InnerBlocks

関連

Inserter

未文書化の宣言。

InspectorAdvancedControls

未文書化の宣言。

InspectorControls

関連

isValueSpacingPreset

指定された値がスペーシングプリセットであるかどうかをチェックします。

パラメータ

  • value string: チェックする値

戻り値

  • boolean: 値がvar:preset|spacing|形式の文字列である場合はtrueを返します。

JustifyContentControl

関連

JustifyToolbar

関連

LineHeightControl

関連

MediaPlaceholder

関連

MediaReplaceFlow

関連

MediaUpload

関連

MediaUploadCheck

関連

MultiSelectScrollIntoView

非推奨
マルチブロック選択の端をビューにスクロールします。これは、キーボードによる選択後に行うことが重要です。

NavigableToolbar

未文書化の宣言。

ObserveTyping

関連

PanelColorSettings

未文書化の宣言。

PlainText

関連

privateApis

プライベート@wordpress/block-editor API。

RecursionProvider

  2. このプロバイダーでブロックコンテンツをラップし、`````useHasRecursion`````で使用されるのと同じ`````uniqueId`````プロパティを提供します。  
  4. *パラメータ*  
  6. - props `````Object`````: 
  7. - props.uniqueId `````*`````: ブロックインスタンスのユニーク識別子として機能する任意の値。 
  8. - props.blockName `````string`````: オプションのブロック名。 
  9. - props.children `````JSX.Element`````: Reactの子要素。
  11. *戻り値*  
  13. - `````JSX.Element`````: React要素。
  14.  <a name="richtext"></a>
  17. ### RichText
  19. *関連*  
  21. - [https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)
  22.  <a name="richtextshortcut"></a>
  25. ### RichTextShortcut
  27. 未文書化の宣言。  
  28.  <a name="richtexttoolbarbutton"></a>
  31. ### RichTextToolbarButton
  33. 未文書化の宣言。  
  34.  <a name="settings_defaults"></a>
  37. ### SETTINGS_DEFAULTS
  39. デフォルトのエディタ設定  
  41. *型定義*  
  43. - SETTINGS_DEFAULT `````Object

プロパティ

  • alignWide boolean: ワイド/フルアラインメントを有効/無効にします。
  • supportsLayout boolean: コンテナブロックでのレイアウトサポートを有効/無効にします。
  • imageEditing boolean: 画像編集設定をfalseに設定して無効にします。
  • imageSizes Array: 利用可能な画像サイズ
  • maxWidth number: リサイズを制約する最大幅
  • allowedBlockTypes boolean|Array: 許可されたブロックタイプ
  • hasFixedToolbar boolean: エディタツールバーが固定されているかどうか
  • distractionFree boolean: エディタUIが気を散らさないかどうか
  • focusMode boolean: フォーカスモードが有効かどうか
  • styles Array: エディタスタイル
  • keepCaretInsideBlock boolean: 編集モードでキャレットがブロック間を移動するかどうか
  • bodyPlaceholder string: 空の投稿プレースホルダー
  • titlePlaceholder string: 空のタイトルプレースホルダー
  • canLockBlocks boolean: ユーザーがブロックロック状態を管理できるかどうか
  • codeEditingEnabled boolean: ユーザーがコードエディタに切り替えられるかどうか
  • generateAnchors boolean: 見出しブロックの自動アンカー生成を有効/無効にします。
  • enableOpenverseMediaCategory boolean: インサータでOpenverseメディアカテゴリを有効/無効にします。
  • clearBlockSelection boolean: ブロックがクリックされていないときにブロックエディタが選択をクリアするかどうか。
  • __experimentalCanUserUseUnfilteredHTML boolean: ユーザーがフィルタリングされていないHTMLを使用できるか、HTMLがフィルタリングされるべきか（例：iframeのような不正な要素を削除するため）。
  • __experimentalBlockDirectory boolean: ユーザーがブロックディレクトリを有効にしたかどうか
  • __experimentalBlockPatterns Array: ブロックパターンを表すオブジェクトの配列
  • __experimentalBlockPatternCategories Array: ブロックパターンカテゴリを表すオブジェクトの配列

SkipToSelectedBlock

関連

store

ブロックエディタ名前空間のストア定義。

関連

storeConfig

ブロックエディタデータストアの設定。

関連

ToolSelector

未文書化の宣言。

transformStyles

指定されたパラメータに応じて、セレクタを指定されたクラス内にラップし、URLを再記述するためにCSSルール変換の一連を適用します。

パラメータ

  • styles EditorStyle[]: CSSルール。
  • wrapperSelector string: ラッパーセレクタ。
  • transformOptions TransformOptions: スタイル変換のための追加オプション。

戻り値

  • Array: 変換されたルール。

Typewriter

このコンポーネント内のキーボードイベント中に、テキスト選択がビューポートから同じ垂直距離を保つことを保証します。垂直距離は変わる可能性があります。最後にクリックまたはスクロールされた位置です。

URLInput

関連

URLInputButton

関連

URLPopover

関連

useBlockBindingsUtils

ブロック bindings メタデータを更新するために必要な既存のユーティリティを取得します。これらは、既存のブロック属性から接続を作成、変更、または削除するために使用できます。

以下のユーティリティが含まれています：

  • updateBlockBindings: ブロック属性に接続されたバインディングの値を更新します。値を undefined に設定することで、特定のバインディングを削除することができます。
  • removeAllBlockBindings: metadata 属性のバインディングプロパティを削除します。

使用法 

  1. import { useBlockBindingsUtils } from '@wordpress/block-editor';
  2. const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
  4. // Update url and alt attributes.
  5. updateBlockBindings( {
  6.    url: {
  7.    source: 'core/post-meta',
  8.    args: {
  9.    key: 'url_custom_field',
  10.    },
  11.    },
  12.    alt: {
  13.    source: 'core/post-meta',
  14.    args: {
  15.    key: 'text_custom_field',
  16.    },
  17.    },
  18. } );
  20. // Remove binding from url attribute.
  21. updateBlockBindings( { url: undefined } );
  23. // Remove bindings from all attributes.
  24. removeAllBlockBindings();

戻り値

  • ?WPBlockBindingsUtils: ブロックバインディングユーティリティを含むオブジェクト。

変更履歴

6.7.0 WordPressコアに導入されました。

useBlockCommands

文書化されていない宣言です。

useBlockDisplayInformation

一致するブロックバリエーションを見つけ、表示理由のために適切な情報を返すために使用されるフックです。一致を見つけるためには、次の2つのことが必要です：1. ブロックのクライアントIDを使用して現在の属性を抽出します。2. ブロックバリエーションは、isActive プロパティを適切な関数に設定する必要があります。

何らかの理由でブロックバリエーションの一致が見つからない場合、返される情報はブロックタイプから取得されます。提供された clientId でブロックタイプが見つからない場合、null を返します。

パラメータ

  • clientId string: ブロックのクライアントID。

戻り値

  • ?WPBlockDisplayInformation: ブロックの表示情報、またはブロックまたはそのタイプが見つからない場合は null です。

useBlockEditContext

useBlockEditContext フックは、このフックが使用されているブロックに関する情報を提供します。name、isSelected ステート、およびブロックの clientId を含むオブジェクトを返します。これは、現在のブロックの clientId にアクセスする必要があるカスタムフックを作成したい場合に便利ですが、パラメータとして渡されるデータに依存したくない場合に役立ちます。

戻り値

  • Object: ブロック編集コンテキスト

useBlockEditingMode

ブロックがそのブロックおよびその内部ブロックの編集のために表示されるユーザーインターフェースを制限できるようにします。

使用法 

  1. function MyBlock( { attributes, setAttributes } ) {
  2.    useBlockEditingMode( 'disabled' );
  3.    return <div { ...useBlockProps() }></div>;
  4. }

mode は次の3つのオプションのいずれかです：

  • 'disabled': ブロックの編集を完全に防ぎます。つまり、選択できません。
  • 'contentOnly': 非コンテンツ UI（例：ツールバーの補助コントロール、ブロックムーバー、ブロック設定）をすべて隠します。
  • 'default': 通常通りブロックを編集できます。

このモードは、独自のモードを持たない限り、すべてのブロックの内部ブロックに継承されます。

ブロックコンテキストの外で呼び出された場合、モードはすべてのブロックに適用されます。

パラメータ

  • mode ?BlockEditingMode: 適用する編集モード。未定義の場合、現在の編集モードは変更されません。

戻り値

  • BlockEditingMode: 現在の編集モード。

useBlockProps

このフックは、要素をブロック要素として軽くマークするために使用されます。要素はブロックの最外要素である必要があります。このフックを呼び出し、返されたプロパティを要素に渡してブロックとしてマークします。要素のために ref を定義する場合、このフックに ref を渡すことが重要であり、フックは返すプロパティを通じてコンポーネントに渡します。オプションで、このフックを通じて他のプロパティも渡すことができ、それらはマージされて返されます。

API >= v2 を使用する場合、ブロックの最外要素でこのフックを使用することが必要です。

使用法 

  1. import { useBlockProps } from '@wordpress/block-editor';
  3. export default function Edit() {
  4.    const blockProps = useBlockProps( {
  5.    className: 'my-custom-class',
  6.    style: {
  7.    color: '#222222',
  8.    backgroundColor: '#eeeeee',
  9.    },
  10.    } );
  12.    return <div { ...blockProps }></div>;
  13. }

パラメータ

  • props Object: オプション。要素に渡すプロパティ。定義されている場合は ref を含む必要があります。
  • options Object: 内部使用のためのオプション。
  • options.__unstableIsHtml boolean:

戻り値

  • Object: ブロックとしてマークするために要素に渡すプロパティ。

useCachedTruthy

渡された値の最新のコピーを保持し、それを返します。値が偽の場合、最後の真のコピーを返します。

パラメータ

  • value any:

戻り値

  • any: 値

useHasRecursion

ブロックツリー内で以前にレンダリングされたブロックを追跡するための React フックです。再帰に影響を受けるブロックは、このフックを Edit 関数内で使用して、その再帰を防ぐことができます。

このフックと RecursionProvider コンポーネントを使用し、フックとプロバイダーの両方に同じ uniqueId 値を使用します。

パラメータ

  • uniqueId *: ブロックインスタンスのユニークな識別子として機能する任意の値。
  • blockName string: オプションのブロック名。

戻り値

  • boolean: 提供された ID がすでにレンダリングされているかどうかを示すブール値。

useInnerBlocksProps

このフックは、要素を内部ブロックラッパー要素として軽くマークするために使用されます。このフックを呼び出し、返されたプロパティを要素に渡して内部ブロックラッパーとしてマークし、内部ブロックを自動的に子としてレンダリングします。要素のために ref を定義する場合、このフックに ref を渡すことが重要であり、フックは返すプロパティを通じてコンポーネントに渡します。オプションで、このフックを通じて他のプロパティも渡すことができ、それらはマージされて返されます。

関連

パラメータ

  • props Object: オプション。要素に渡すプロパティ。定義されている場合は ref を含む必要があります。
  • options Object: オプション。内部ブロックオプション。

useSetting

非推奨 6.5.0 代わりに useSettings を使用してください。
使用中のブロックインスタンスの設定を取得するフックです。

最初にブロックインスタンス階層で設定を検索します。見つからない場合は、ブロックエディタ設定で検索します。

使用法 

  1. const isEnabled = useSetting( 'typography.dropCap' );

パラメータ

  • path string: 設定へのパス。

戻り値

  • any: 設定のために定義された値を返します。

useSettings

使用中のブロックインスタンスの設定を取得するフックです。

最初にブロックインスタンス階層で設定を検索します。見つからない場合は、ブロックエディタ設定で検索します。

使用法 

  1. const [ fixed, sticky ] = useSettings( 'position.fixed', 'position.sticky' );

パラメータ

  • paths string[]: 設定へのパス。

戻り値

  • any[]: 設定のために定義された値を返します。

useStyleOverride

ブロックエディタ設定スタイルをオーバーライドします。新しいスタイルを作成するには、ID を空白のままにします。

パラメータ

  • override Object: オーバーライドオブジェクト。
  • override.id ?string: スタイルオーバーライドの ID、空白のままにすると新しいスタイルが作成されます。
  • override.css string: 適用する CSS。

useZoomOut

ズームアウトビューを設定するために使用されるフックで、フックを呼び出すとモードが設定されます。

パラメータ

  • zoomOut boolean: ズームアウトするかどうか。

Warning

関連

withColorContext

文書化されていない宣言です。

withColors

クラス生成のための色値のロジック、取得、および色属性設定を処理する高階コンポーネントです。

デフォルトのエディタ/テーマカラーパレットで使用します。

使用法 

  1. export default compose(
  2.    withColors( 'backgroundColor', { textColor: 'color' } ),
  3.    MyColorfulComponent
  4. );

パラメータ

  • colorTypes ...(Object|string): 引数は文字列またはオブジェクトであることができます。引数がオブジェクトの場合、色属性名をキー、色コンテキストを値として含む必要があります。引数が文字列の場合、値は色属性名であり、色コンテキストは値にケバブケース変換を適用することで計算されます。色コンテキストは、色が使用されるコンテキスト/場所を表します。色のクラス名は「has」に続き、色名が続き、色コンテキストで終わり、すべてケバブケースで表現されます。例：has-green-background-color。

戻り値

  • Function: 高階コンポーネント。

withFontSizes

フォントサイズのロジック、フォントサイズ値の取得、およびフォントサイズ変更処理を処理する高階コンポーネントです。

パラメータ

  • fontSizeNames ...(Object|string): 引数はすべて文字列である必要があります。各文字列はフォントサイズ属性名を含みます。例：‘fontSize’。

戻り値

  • Function: 高階コンポーネント。

WritingFlow

ブロック間の選択とナビゲーションを処理します。このコンポーネントは BlockList の周りにラップする必要があります。

パラメータ

  • props Object: コンポーネントのプロパティ。

  • props.children Element: レンダリングされる子要素。

このパッケージへの貢献

これはグーテンベルクプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやグーテンベルク全体への貢献について詳しく知りたい場合は、プロジェクトの主な貢献者ガイドをお読みください。