区块类型数据

最后更新：2026-10-17 10:55:29

命名空间：core/blocks。

选择器

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 = () => {
    // 此示例假设 core/embed 区块是区块编辑器中的第一个区块。
    const activeBlockVariation = useSelect( ( select ) => {
        // 获取区块列表。
        const [ firstBlock ] = select( blockEditorStore ).getBlocks();

        // 返回第一个区块的活动区块变体。
        return select( blocksStore ).getActiveBlockVariation(
            firstBlock.name,
            firstBlock.attributes
        );
    }, [] );

    return activeBlockVariation && activeBlockVariation.name === 'spotify' ? (
        <p>{ __( 'Spotify variation' ) }</p>
    ) : (
        <p>{ __( 'Other variation' ) }</p>
    );
};

参数

state BlockStoreState：数据状态。
blockName string：区块名称（例如：“core/columns”）。
attributes Record< string, unknown >：用于确定活动变体的区块属性。
scope BlockVariationScope：区块变体作用域名称。
innerContent Array< string | null >：用于确定区块活动变体的区块内部内容，适用于其变体声明了静态内部内容的区块（例如 Custom HTML 区块）。

返回值

BlockVariation | undefined：活动区块变体。

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 BlockStoreState：数据状态。
name string：区块类型名称。

返回值

BlockStyle[]：区块样式。

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 BlockStoreState：数据状态。
nameOrType string | BlockType：区块名称或类型对象
feature string | string[]：要检索的功能
defaultSupports unknown：未显式定义时返回的默认值

返回值

unknown：区块支持值

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 BlockStoreState：数据状态。
name string：区块类型名称。

返回值

BlockType | undefined：区块类型。

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 BlockStoreState：数据状态。

返回值

BlockType[]：区块类型。

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 BlockStoreState：数据状态。
blockName string：区块类型名称。
scope BlockVariationScope：区块变体作用域名称。

返回值

BlockVariation[] | undefined：区块变体。

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 BlockStoreState：数据状态。

返回值

BlockCategory[]：分类列表。

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 BlockStoreState：数据状态。
blockName string：区块类型名称。

返回值

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 BlockStoreState：数据状态。

返回值

Record< string, BlockCollection >：集合列表。

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 BlockStoreState：数据状态。

返回值

string | null：默认区块名称。

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 BlockStoreState：数据状态。
blockName string：区块类型名称。
scope BlockVariationScope：区块变体作用域名称。

返回值

BlockVariation | undefined：默认区块变体。

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 BlockStoreState：数据状态。

返回值

string | null：用于处理非区块内容的区块名称。

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 BlockStoreState：数据状态。

返回值

string | null：用于处理区块分组的区块名称。

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 BlockStoreState：数据状态。

返回值

string | null：用于处理未注册区块的区块名称。

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 BlockStoreState：数据状态。
nameOrType string | BlockType：区块名称或类型对象。
feature string | string[]：要测试的特性。
defaultSupports unknown：在未显式定义时，默认是否支持该特性。

返回值

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 BlockStoreState：数据状态。
blockName string：区块类型名称。

返回值

boolean：如果区块包含子区块则返回 true，否则返回 false。

hasChildBlocksWithInserterSupport

返回一个布尔值，表示区块是否至少有一个支持插入器的子区块。

用法

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 BlockStoreState：数据状态。
blockName string：区块类型名称。

返回值

boolean：如果区块至少包含一个支持插入器的子区块则返回 true，否则返回 false。

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 BlockStoreState：区块状态。
nameOrType string | BlockType：区块名称或类型对象。
searchTerm string：用于过滤的搜索词。

返回值

boolean：区块类型是否匹配搜索词。

操作

此包中的操作不应直接使用。请改用公共 API 中列出的函数，见这里。

reapplyBlockTypeFilters

表示应重新计算所有区块类型。它使用存储的未处理区块类型以及最新注册的所有过滤器列表。

它解决了第三方区块过滤器在第三方区块之后注册的问题。示例顺序：1. 过滤器 A。2. 区块 B。3. 区块 C。4. 过滤器 D。5. 过滤器 E。6. 区块 F。7. 过滤器 G。在这种情况下，某些过滤器不会应用于所有区块，因为它们注册得太晚。