title: "区块类型数据" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Data - Reference Guides - Repos

区块类型数据

命名空间：core/blocks。

选择器

getActiveBlockVariation

Returns the active block variation for a given block based on its attributes. Variations are determined by their isActive property. Which is either an array of block attribute keys or a function.

In case of an array of block attribute keys, the attributes are compared to the variation's attributes using strict equality check.

In case of function type, the function should accept a block's attributes and the variation's attributes and determines if a variation is active. A function that accepts a block's attributes and the variation's attributes and determines if a variation is active.

Usage

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>
    );
};

Parameters

state Object: Data state.
blockName string: Name of block (example: “core/columns”).
attributes Object: Block attributes used to determine active variation.
scope [WPBlockVariationScope]: Block variation scope name.

Returns

(WPBlockVariation|undefined): Active block variation.

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: 区块类型名称。

返回值

Array?: 区块样式数组。

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: 区块类型名称。

返回值

?Object: 区块类型。

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

返回值

Array: 区块类型数组。

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]: 区块变体作用域名称。

返回值

(WPBlockVariation[]|void): 区块变体。

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

返回值

WPBlockCategory[]: 分类列表。

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: 区块类型名称。

返回值

Array: 子区块名称数组。

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

返回值

Object: 集合列表。

getDefaultBlockName

Returns the name of the default block name.

Usage

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>
        )
    );
};

Parameters

state Object: Data state.

Returns

?string: Default block name.

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]: 区块变体作用域名称。

返回值

?WPBlockVariation: 默认区块变体。

getFreeformFallbackBlockName

Returns the name of the block for handling non-block content.

Usage

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>
        )
    );
};

Parameters

state Object: Data state.

Returns

?string: Name of the block for handling non-block content.

getGroupingBlockName

Returns the name of the block for handling the grouping of blocks.

Usage

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>
        )
    );
};

Parameters

state Object: Data state.

Returns

?string: Name of the block for handling the grouping of blocks.

getUnregisteredFallbackBlockName

Returns the name of the block for handling unregistered blocks.

Usage

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>
        )
    );
};

Parameters

state Object: Data state.

Returns

?string: Name of the block for handling unregistered blocks.

hasBlockSupport

Returns true if the block defines support for a feature, or false otherwise.

Usage

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>
    );
};

Parameters

state Object: Data state.
nameOrType (string|Object): Block name or type object.
feature string: Feature to test.
defaultSupports boolean: Whether feature is supported by default if not explicitly defined.

Returns

boolean: Whether block supports feature.

hasChildBlocks

Returns a boolean indicating if a block has child blocks or not.

Usage

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>
    );
};

Parameters

state Object: Data state.
blockName string: Block type name.

Returns

boolean: True if a block contains child blocks and false otherwise.

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

返回值

boolean: 如果块至少包含一个支持插入器的子块则为 true，否则为 false。

isMatchingSearchTerm

Returns true if the block type by the given name or object value matches a search term, or false otherwise.

Usage

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>
    );
};

Parameters

state Object: Blocks state.
nameOrType (string|Object): Block name or type object.
searchTerm string: Search term by which to filter.

Returns

Object[]: Whether block type matches search term.

操作

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

reapplyBlockTypeFilters

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

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

← 返回文档中心