セレクタ

getActiveBlockVariation

指定されたブロックの属性に基づいて、アクティブなブロックのバリエーションを返します。バリエーションはその isActive プロパティによって決定されます。これは、ブロック属性キーの配列または関数のいずれかです。

ブロック属性キーの配列の場合、attributes はバリエーションの属性と厳密な等価性チェックを使用して比較されます。

関数タイプの場合、関数はブロックの属性とバリエーションの属性を受け入れ、バリエーションがアクティブかどうかを判断します。ブロックの属性とバリエーションの属性を受け入れ、バリエーションがアクティブかどうかを判断する関数です。

使用法

  1. import { __ } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { store as blockEditorStore } from '@wordpress/block-editor';
  4. import { useSelect } from '@wordpress/data';
  5. const ExampleComponent = () => {
  6. // This example assumes that a core/embed block is the first block in the Block Editor.
  7. const activeBlockVariation = useSelect( ( select ) => {
  8. // Retrieve the list of blocks.
  9. const [ firstBlock ] = select( blockEditorStore ).getBlocks();
  10. // Return the active block variation for the first block.
  11. return select( blocksStore ).getActiveBlockVariation(
  12. firstBlock.name,
  13. firstBlock.attributes
  14. );
  15. }, [] );
  16. return activeBlockVariation && activeBlockVariation.name === 'spotify' ? (
  17. <p>{ __( 'Spotify variation' ) }</p>
  18. ) : (
  19. <p>{ __( 'Other variation' ) }</p>
  20. );
  21. };

パラメータ

  • state Object: データ状態。
  • blockName string: ブロックの名前(例: “core/columns”)。
  • attributes Object: アクティブなバリエーションを決定するために使用されるブロック属性。
  • scope [WPBlockVariationScope]: ブロックバリエーションのスコープ名。

返す

  • (WPBlockVariation|undefined): アクティブなブロックバリエーション。

getBlockStyles

ブロック名によってブロックスタイルを返します。

使用法

  1. import { store as blocksStore } from '@wordpress/blocks';
  2. import { useSelect } from '@wordpress/data';
  3. const ExampleComponent = () => {
  4. const buttonBlockStyles = useSelect(
  5. ( select ) => select( blocksStore ).getBlockStyles( 'core/button' ),
  6. []
  7. );
  8. return (
  9. <ul>
  10. { buttonBlockStyles &&
  11. buttonBlockStyles.map( ( style ) => (
  12. <li key={ style.name }>{ style.label }</li>
  13. ) ) }
  14. </ul>
  15. );
  16. };

パラメータ

  • state Object: データ状態。
  • name string: ブロックタイプ名。

返す

  • Array?: ブロックスタイル。

getBlockSupport

機能のブロックサポート値を返します(定義されている場合)。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const paragraphBlockSupportValue = useSelect(
  6. ( select ) =>
  7. select( blocksStore ).getBlockSupport( 'core/paragraph', 'anchor' ),
  8. []
  9. );
  10. return (
  11. <p>
  12. { sprintf(
  13. __( 'core/paragraph supports.anchor value: %s' ),
  14. paragraphBlockSupportValue
  15. ) }
  16. </p>
  17. );
  18. };

パラメータ

  • state Object: データ状態。
  • nameOrType (string|Object): ブロック名またはタイプオブジェクト。
  • feature Array|string: 取得する機能。
  • defaultSupports *: 明示的に定義されていない場合に返すデフォルト値。

返す

  • ?*: ブロックサポート値。

getBlockType

名前によってブロックタイプを返します。

使用法

  1. import { store as blocksStore } from '@wordpress/blocks';
  2. import { useSelect } from '@wordpress/data';
  3. const ExampleComponent = () => {
  4. const paragraphBlock = useSelect(
  5. ( select ) => ( select ) =>
  6. select( blocksStore ).getBlockType( 'core/paragraph' ),
  7. []
  8. );
  9. return (
  10. <ul>
  11. { paragraphBlock &&
  12. Object.entries( paragraphBlock.supports ).map(
  13. ( blockSupportsEntry ) => {
  14. const [ propertyName, value ] = blockSupportsEntry;
  15. return (
  16. <li
  17. key={ propertyName }
  18. >{ `${ propertyName } : ${ value }` }</li>
  19. );
  20. }
  21. ) }
  22. </ul>
  23. );
  24. };

パラメータ

  • state Object: データ状態。
  • name string: ブロックタイプ名。

返す

  • Object?: ブロックタイプ。

getBlockTypes

利用可能なすべてのブロックタイプを返します。

使用法

  1. import { store as blocksStore } from '@wordpress/blocks';
  2. import { useSelect } from '@wordpress/data';
  3. const ExampleComponent = () => {
  4. const blockTypes = useSelect(
  5. ( select ) => select( blocksStore ).getBlockTypes(),
  6. []
  7. );
  8. return (
  9. <ul>
  10. { blockTypes.map( ( block ) => (
  11. <li key={ block.name }>{ block.title }</li>
  12. ) ) }
  13. </ul>
  14. );
  15. };

パラメータ

  • state Object: データ状態。

返す

  • Array: ブロックタイプ。

getBlockVariations

ブロック名によってブロックのバリエーションを返します。

使用法

  1. import { store as blocksStore } from '@wordpress/blocks';
  2. import { useSelect } from '@wordpress/data';
  3. const ExampleComponent = () => {
  4. const socialLinkVariations = useSelect(
  5. ( select ) =>
  6. select( blocksStore ).getBlockVariations( 'core/social-link' ),
  7. []
  8. );
  9. return (
  10. <ul>
  11. { socialLinkVariations &&
  12. socialLinkVariations.map( ( variation ) => (
  13. <li key={ variation.name }>{ variation.title }</li>
  14. ) ) }
  15. </ul>
  16. );
  17. };

パラメータ

  • state Object: データ状態。
  • blockName string: ブロックタイプ名。
  • scope [WPBlockVariationScope]: ブロックバリエーションのスコープ名。

返す

  • (WPBlockVariation[]|void): ブロックバリエーション。

getCategories

利用可能なすべてのブロックカテゴリを返します。

使用法

  1. import { store as blocksStore } from '@wordpress/blocks';
  2. import { useSelect } from '@wordpress/data';
  3. const ExampleComponent = () => {
  4. const blockCategories = useSelect(
  5. ( select ) => select( blocksStore ).getCategories(),
  6. []
  7. );
  8. return (
  9. <ul>
  10. { blockCategories.map( ( category ) => (
  11. <li key={ category.slug }>{ category.title }</li>
  12. ) ) }
  13. </ul>
  14. );
  15. };

パラメータ

  • state Object: データ状態。

返す

  • WPBlockCategory[]: カテゴリリスト。

getChildBlockNames

指定されたブロックの子ブロックの配列を返します。

使用法

  1. import { store as blocksStore } from '@wordpress/blocks';
  2. import { useSelect } from '@wordpress/data';
  3. const ExampleComponent = () => {
  4. const childBlockNames = useSelect(
  5. ( select ) =>
  6. select( blocksStore ).getChildBlockNames( 'core/navigation' ),
  7. []
  8. );
  9. return (
  10. <ul>
  11. { childBlockNames &&
  12. childBlockNames.map( ( child ) => (
  13. <li key={ child }>{ child }</li>
  14. ) ) }
  15. </ul>
  16. );
  17. };

パラメータ

  • state Object: データ状態。
  • blockName string: ブロックタイプ名。

返す

  • Array: 子ブロック名の配列。

getCollections

利用可能なすべてのコレクションを返します。

使用法

  1. import { store as blocksStore } from '@wordpress/blocks';
  2. import { useSelect } from '@wordpress/data';
  3. const ExampleComponent = () => {
  4. const blockCollections = useSelect(
  5. ( select ) => select( blocksStore ).getCollections(),
  6. []
  7. );
  8. return (
  9. <ul>
  10. { Object.values( blockCollections ).length > 0 &&
  11. Object.values( blockCollections ).map( ( collection ) => (
  12. <li key={ collection.title }>{ collection.title }</li>
  13. ) ) }
  14. </ul>
  15. );
  16. };

パラメータ

  • state Object: データ状態。

返す

  • Object: コレクションリスト。

getDefaultBlockName

デフォルトのブロック名を返します。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const defaultBlockName = useSelect(
  6. ( select ) => select( blocksStore ).getDefaultBlockName(),
  7. []
  8. );
  9. return (
  10. defaultBlockName && (
  11. <p>
  12. { sprintf( __( 'Default block name: %s' ), defaultBlockName ) }
  13. </p>
  14. )
  15. );
  16. };

パラメータ

  • state Object: データ状態。

返す

  • string?: デフォルトのブロック名。

getDefaultBlockVariation

指定されたブロックタイプのデフォルトのブロックバリエーションを返します。デフォルトとして注釈が付けられた複数のバリエーションがある場合、最後に追加されたアイテムが選択されます。これにより、オーバーライドの登録が簡素化されます。デフォルトのバリエーションが設定されていない場合、最初のアイテムが返されます。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const defaultEmbedBlockVariation = useSelect(
  6. ( select ) =>
  7. select( blocksStore ).getDefaultBlockVariation( 'core/embed' ),
  8. []
  9. );
  10. return (
  11. defaultEmbedBlockVariation && (
  12. <p>
  13. { sprintf(
  14. __( 'core/embed default variation: %s' ),
  15. defaultEmbedBlockVariation.title
  16. ) }
  17. </p>
  18. )
  19. );
  20. };

パラメータ

  • state Object: データ状態。
  • blockName string: ブロックタイプ名。
  • scope [WPBlockVariationScope]: ブロックバリエーションのスコープ名。

返す

  • ?WPBlockVariation: デフォルトのブロックバリエーション。

getFreeformFallbackBlockName

非ブロックコンテンツを処理するためのブロックの名前を返します。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const freeformFallbackBlockName = useSelect(
  6. ( select ) => select( blocksStore ).getFreeformFallbackBlockName(),
  7. []
  8. );
  9. return (
  10. freeformFallbackBlockName && (
  11. <p>
  12. { sprintf(
  13. __( 'Freeform fallback block name: %s' ),
  14. freeformFallbackBlockName
  15. ) }
  16. </p>
  17. )
  18. );
  19. };

パラメータ

  • state Object: データ状態。

返す

  • string?: 非ブロックコンテンツを処理するためのブロックの名前。

getGroupingBlockName

ブロックのグループ化を処理するためのブロックの名前を返します。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const groupingBlockName = useSelect(
  6. ( select ) => select( blocksStore ).getGroupingBlockName(),
  7. []
  8. );
  9. return (
  10. groupingBlockName && (
  11. <p>
  12. { sprintf(
  13. __( 'Default grouping block name: %s' ),
  14. groupingBlockName
  15. ) }
  16. </p>
  17. )
  18. );
  19. };

パラメータ

  • state Object: データ状態。

返す

  • string?: ブロックのグループ化を処理するためのブロックの名前。

getUnregisteredFallbackBlockName

未登録のブロックを処理するためのブロックの名前を返します。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const unregisteredFallbackBlockName = useSelect(
  6. ( select ) => select( blocksStore ).getUnregisteredFallbackBlockName(),
  7. []
  8. );
  9. return (
  10. unregisteredFallbackBlockName && (
  11. <p>
  12. { sprintf(
  13. __( 'Unregistered fallback block name: %s' ),
  14. unregisteredFallbackBlockName
  15. ) }
  16. </p>
  17. )
  18. );
  19. };

パラメータ

  • state Object: データ状態。

返す

  • string?: 未登録のブロックを処理するためのブロックの名前。

hasBlockSupport

ブロックが機能のサポートを定義している場合はtrueを返し、そうでない場合はfalseを返します。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const paragraphBlockSupportClassName = useSelect( ( select ) =>
  6. select( blocksStore ).hasBlockSupport( 'core/paragraph', 'className' ),
  7. []
  8. );
  9. return (
  10. <p>
  11. { sprintf(
  12. __( 'core/paragraph supports custom class name?: %s' ),
  13. paragraphBlockSupportClassName
  14. ) }
  15. /p>
  16. );
  17. };

パラメータ

  • state Object: データ状態。
  • nameOrType (string|Object): ブロック名またはタイプオブジェクト。
  • feature string: テストする機能。
  • defaultSupports boolean: 明示的に定義されていない場合に機能がデフォルトでサポートされているかどうか。

返す

  • boolean: ブロックが機能をサポートしているかどうか。

hasChildBlocks

ブロックに子ブロックがあるかどうかを示すブール値を返します。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const navigationBlockHasChildBlocks = useSelect(
  6. ( select ) => select( blocksStore ).hasChildBlocks( 'core/navigation' ),
  7. []
  8. );
  9. return (
  10. <p>
  11. { sprintf(
  12. __( 'core/navigation has child blocks: %s' ),
  13. navigationBlockHasChildBlocks
  14. ) }
  15. </p>
  16. );
  17. };

パラメータ

  • state Object: データ状態。
  • blockName string: ブロックタイプ名。

返す

  • boolean: ブロックが子ブロックを含む場合はtrue、そうでない場合はfalse。

hasChildBlocksWithInserterSupport

ブロックにインサータサポートを持つ少なくとも1つの子ブロックがあるかどうかを示すブール値を返します。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const navigationBlockHasChildBlocksWithInserterSupport = useSelect(
  6. ( select ) =>
  7. select( blocksStore ).hasChildBlocksWithInserterSupport(
  8. 'core/navigation'
  9. ),
  10. []
  11. );
  12. return (
  13. <p>
  14. { sprintf(
  15. __(
  16. 'core/navigation has child blocks with inserter support: %s'
  17. ),
  18. navigationBlockHasChildBlocksWithInserterSupport
  19. ) }
  20. </p>
  21. );
  22. };

パラメータ

  • state Object: データ状態。
  • blockName string: ブロックタイプ名。

返す

  • boolean: ブロックがインサータサポートを持つ少なくとも1つの子ブロックを含む場合はtrue、そうでない場合はfalse。

isMatchingSearchTerm

指定された名前またはオブジェクト値によるブロックタイプが検索用語と一致する場合はtrueを返し、そうでない場合はfalseを返します。

使用法

  1. import { __, sprintf } from '@wordpress/i18n';
  2. import { store as blocksStore } from '@wordpress/blocks';
  3. import { useSelect } from '@wordpress/data';
  4. const ExampleComponent = () => {
  5. const termFound = useSelect(
  6. ( select ) =>
  7. select( blocksStore ).isMatchingSearchTerm(
  8. 'core/navigation',
  9. 'theme'
  10. ),
  11. []
  12. );
  13. return (
  14. <p>
  15. { sprintf(
  16. __(
  17. 'Search term was found in the title, keywords, category or description in block.json: %s'
  18. ),
  19. termFound
  20. ) }
  21. </p>
  22. );
  23. };

パラメータ

  • state Object: ブロックの状態。
  • nameOrType (string|Object): ブロック名またはタイプオブジェクト。
  • searchTerm string: フィルタリングに使用する検索用語。

返す

  • Object[]: ブロックタイプが検索用語と一致するかどうか。

アクション

このパッケージのアクションは直接使用すべきではありません。代わりに、公開APIにリストされている関数を使用してください こちら

reapplyBlockTypeFilters

すべてのブロックタイプを再計算する必要があることを示します。保存された未処理のブロックタイプと、登録されたフィルタの最新リストを使用します。

これは、サードパーティのブロックフィルタがサードパーティのブロックの後に登録される問題に対処します。サンプルシーケンス: 1. フィルタA。 2. ブロックB。 3. ブロックC。 4. フィルタD。 5. フィルタE。 6. ブロックF。 7. フィルタG。このシナリオでは、いくつかのフィルタがすべてのブロックに適用されない可能性があります。なぜなら、それらは遅すぎるタイミングで登録されるからです。