- セレクタ
- getActiveBlockVariation
- getBlockStyles
- getBlockSupport
- getBlockType
- getBlockTypes
- getBlockVariations
- getCategories
- getChildBlockNames
- getCollections
- getDefaultBlockName
- getDefaultBlockVariation
- getFreeformFallbackBlockName
- getGroupingBlockName
- getUnregisteredFallbackBlockName
- hasBlockSupport
- hasChildBlocks
- hasChildBlocksWithInserterSupport
- isMatchingSearchTerm
- アクション
セレクタ
getActiveBlockVariation
指定されたブロックの属性に基づいて、アクティブなブロックのバリエーションを返します。バリエーションはその isActive
プロパティによって決定されます。これは、ブロック属性キーの配列または関数のいずれかです。
ブロック属性キーの配列の場合、attributes
はバリエーションの属性と厳密な等価性チェックを使用して比較されます。
関数タイプの場合、関数はブロックの属性とバリエーションの属性を受け入れ、バリエーションがアクティブかどうかを判断します。ブロックの属性とバリエーションの属性を受け入れ、バリエーションがアクティブかどうかを判断する関数です。
使用法
import { __ } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
// This example assumes that a core/embed block is the first block in the Block Editor.
const activeBlockVariation = useSelect( ( select ) => {
// Retrieve the list of blocks.
const [ firstBlock ] = select( blockEditorStore ).getBlocks();
// Return the active block variation for the first block.
return select( blocksStore ).getActiveBlockVariation(
firstBlock.name,
firstBlock.attributes
);
}, [] );
return activeBlockVariation && activeBlockVariation.name === 'spotify' ? (
<p>{ __( 'Spotify variation' ) }</p>
) : (
<p>{ __( 'Other variation' ) }</p>
);
};
パラメータ
- state
Object
: データ状態。 - blockName
string
: ブロックの名前(例: “core/columns”)。 - attributes
Object
: アクティブなバリエーションを決定するために使用されるブロック属性。 - scope
[WPBlockVariationScope]
: ブロックバリエーションのスコープ名。
返す
getBlockStyles
ブロック名によってブロックスタイルを返します。
使用法
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const buttonBlockStyles = useSelect(
( select ) => select( blocksStore ).getBlockStyles( 'core/button' ),
[]
);
return (
<ul>
{ buttonBlockStyles &&
buttonBlockStyles.map( ( style ) => (
<li key={ style.name }>{ style.label }</li>
) ) }
</ul>
);
};
パラメータ
- state
Object
: データ状態。 - name
string
: ブロックタイプ名。
返す
getBlockSupport
機能のブロックサポート値を返します(定義されている場合)。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const paragraphBlockSupportValue = useSelect(
( select ) =>
select( blocksStore ).getBlockSupport( 'core/paragraph', 'anchor' ),
[]
);
return (
<p>
{ sprintf(
__( 'core/paragraph supports.anchor value: %s' ),
paragraphBlockSupportValue
) }
</p>
);
};
パラメータ
- state
Object
: データ状態。 - nameOrType
(string|Object)
: ブロック名またはタイプオブジェクト。 - feature
Array|string
: 取得する機能。 - defaultSupports
*
: 明示的に定義されていない場合に返すデフォルト値。
返す
getBlockType
名前によってブロックタイプを返します。
使用法
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const paragraphBlock = useSelect(
( select ) => ( select ) =>
select( blocksStore ).getBlockType( 'core/paragraph' ),
[]
);
return (
<ul>
{ paragraphBlock &&
Object.entries( paragraphBlock.supports ).map(
( blockSupportsEntry ) => {
const [ propertyName, value ] = blockSupportsEntry;
return (
<li
key={ propertyName }
>{ `${ propertyName } : ${ value }` }</li>
);
}
) }
</ul>
);
};
パラメータ
- state
Object
: データ状態。 - name
string
: ブロックタイプ名。
返す
getBlockTypes
利用可能なすべてのブロックタイプを返します。
使用法
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const blockTypes = useSelect(
( select ) => select( blocksStore ).getBlockTypes(),
[]
);
return (
<ul>
{ blockTypes.map( ( block ) => (
<li key={ block.name }>{ block.title }</li>
) ) }
</ul>
);
};
パラメータ
- state
Object
: データ状態。
返す
getBlockVariations
ブロック名によってブロックのバリエーションを返します。
使用法
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const socialLinkVariations = useSelect(
( select ) =>
select( blocksStore ).getBlockVariations( 'core/social-link' ),
[]
);
return (
<ul>
{ socialLinkVariations &&
socialLinkVariations.map( ( variation ) => (
<li key={ variation.name }>{ variation.title }</li>
) ) }
</ul>
);
};
パラメータ
- state
Object
: データ状態。 - blockName
string
: ブロックタイプ名。 - scope
[WPBlockVariationScope]
: ブロックバリエーションのスコープ名。
返す
getCategories
利用可能なすべてのブロックカテゴリを返します。
使用法
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const blockCategories = useSelect(
( select ) => select( blocksStore ).getCategories(),
[]
);
return (
<ul>
{ blockCategories.map( ( category ) => (
<li key={ category.slug }>{ category.title }</li>
) ) }
</ul>
);
};
パラメータ
- state
Object
: データ状態。
返す
getChildBlockNames
指定されたブロックの子ブロックの配列を返します。
使用法
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const childBlockNames = useSelect(
( select ) =>
select( blocksStore ).getChildBlockNames( 'core/navigation' ),
[]
);
return (
<ul>
{ childBlockNames &&
childBlockNames.map( ( child ) => (
<li key={ child }>{ child }</li>
) ) }
</ul>
);
};
パラメータ
- state
Object
: データ状態。 - blockName
string
: ブロックタイプ名。
返す
getCollections
利用可能なすべてのコレクションを返します。
使用法
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const blockCollections = useSelect(
( select ) => select( blocksStore ).getCollections(),
[]
);
return (
<ul>
{ Object.values( blockCollections ).length > 0 &&
Object.values( blockCollections ).map( ( collection ) => (
<li key={ collection.title }>{ collection.title }</li>
) ) }
</ul>
);
};
パラメータ
- state
Object
: データ状態。
返す
getDefaultBlockName
デフォルトのブロック名を返します。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const defaultBlockName = useSelect(
( select ) => select( blocksStore ).getDefaultBlockName(),
[]
);
return (
defaultBlockName && (
<p>
{ sprintf( __( 'Default block name: %s' ), defaultBlockName ) }
</p>
)
);
};
パラメータ
- state
Object
: データ状態。
返す
getDefaultBlockVariation
指定されたブロックタイプのデフォルトのブロックバリエーションを返します。デフォルトとして注釈が付けられた複数のバリエーションがある場合、最後に追加されたアイテムが選択されます。これにより、オーバーライドの登録が簡素化されます。デフォルトのバリエーションが設定されていない場合、最初のアイテムが返されます。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const defaultEmbedBlockVariation = useSelect(
( select ) =>
select( blocksStore ).getDefaultBlockVariation( 'core/embed' ),
[]
);
return (
defaultEmbedBlockVariation && (
<p>
{ sprintf(
__( 'core/embed default variation: %s' ),
defaultEmbedBlockVariation.title
) }
</p>
)
);
};
パラメータ
- state
Object
: データ状態。 - blockName
string
: ブロックタイプ名。 - scope
[WPBlockVariationScope]
: ブロックバリエーションのスコープ名。
返す
getFreeformFallbackBlockName
非ブロックコンテンツを処理するためのブロックの名前を返します。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const freeformFallbackBlockName = useSelect(
( select ) => select( blocksStore ).getFreeformFallbackBlockName(),
[]
);
return (
freeformFallbackBlockName && (
<p>
{ sprintf(
__( 'Freeform fallback block name: %s' ),
freeformFallbackBlockName
) }
</p>
)
);
};
パラメータ
- state
Object
: データ状態。
返す
getGroupingBlockName
ブロックのグループ化を処理するためのブロックの名前を返します。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const groupingBlockName = useSelect(
( select ) => select( blocksStore ).getGroupingBlockName(),
[]
);
return (
groupingBlockName && (
<p>
{ sprintf(
__( 'Default grouping block name: %s' ),
groupingBlockName
) }
</p>
)
);
};
パラメータ
- state
Object
: データ状態。
返す
getUnregisteredFallbackBlockName
未登録のブロックを処理するためのブロックの名前を返します。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const unregisteredFallbackBlockName = useSelect(
( select ) => select( blocksStore ).getUnregisteredFallbackBlockName(),
[]
);
return (
unregisteredFallbackBlockName && (
<p>
{ sprintf(
__( 'Unregistered fallback block name: %s' ),
unregisteredFallbackBlockName
) }
</p>
)
);
};
パラメータ
- state
Object
: データ状態。
返す
hasBlockSupport
ブロックが機能のサポートを定義している場合はtrueを返し、そうでない場合はfalseを返します。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const paragraphBlockSupportClassName = useSelect( ( select ) =>
select( blocksStore ).hasBlockSupport( 'core/paragraph', 'className' ),
[]
);
return (
<p>
{ sprintf(
__( 'core/paragraph supports custom class name?: %s' ),
paragraphBlockSupportClassName
) }
/p>
);
};
パラメータ
- state
Object
: データ状態。 - nameOrType
(string|Object)
: ブロック名またはタイプオブジェクト。 - feature
string
: テストする機能。 - defaultSupports
boolean
: 明示的に定義されていない場合に機能がデフォルトでサポートされているかどうか。
返す
hasChildBlocks
ブロックに子ブロックがあるかどうかを示すブール値を返します。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const navigationBlockHasChildBlocks = useSelect(
( select ) => select( blocksStore ).hasChildBlocks( 'core/navigation' ),
[]
);
return (
<p>
{ sprintf(
__( 'core/navigation has child blocks: %s' ),
navigationBlockHasChildBlocks
) }
</p>
);
};
パラメータ
- state
Object
: データ状態。 - blockName
string
: ブロックタイプ名。
返す
hasChildBlocksWithInserterSupport
ブロックにインサータサポートを持つ少なくとも1つの子ブロックがあるかどうかを示すブール値を返します。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const navigationBlockHasChildBlocksWithInserterSupport = useSelect(
( select ) =>
select( blocksStore ).hasChildBlocksWithInserterSupport(
'core/navigation'
),
[]
);
return (
<p>
{ sprintf(
__(
'core/navigation has child blocks with inserter support: %s'
),
navigationBlockHasChildBlocksWithInserterSupport
) }
</p>
);
};
パラメータ
- state
Object
: データ状態。 - blockName
string
: ブロックタイプ名。
返す
isMatchingSearchTerm
指定された名前またはオブジェクト値によるブロックタイプが検索用語と一致する場合はtrueを返し、そうでない場合はfalseを返します。
使用法
import { __, sprintf } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const termFound = useSelect(
( select ) =>
select( blocksStore ).isMatchingSearchTerm(
'core/navigation',
'theme'
),
[]
);
return (
<p>
{ sprintf(
__(
'Search term was found in the title, keywords, category or description in block.json: %s'
),
termFound
) }
</p>
);
};
パラメータ
- state
Object
: ブロックの状態。 - nameOrType
(string|Object)
: ブロック名またはタイプオブジェクト。 - searchTerm
string
: フィルタリングに使用する検索用語。
返す
アクション
このパッケージのアクションは直接使用すべきではありません。代わりに、公開APIにリストされている関数を使用してください こちら
reapplyBlockTypeFilters
すべてのブロックタイプを再計算する必要があることを示します。保存された未処理のブロックタイプと、登録されたフィルタの最新リストを使用します。
これは、サードパーティのブロックフィルタがサードパーティのブロックの後に登録される問題に対処します。サンプルシーケンス: 1. フィルタA。 2. ブロックB。 3. ブロックC。 4. フィルタD。 5. フィルタE。 6. ブロックF。 7. フィルタG。このシナリオでは、いくつかのフィルタがすべてのブロックに適用されない可能性があります。なぜなら、それらは遅すぎるタイミングで登録されるからです。