跳转到主要内容

区块类型数据

命名空间：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。在此场景中，某些过滤器不会应用于所有区块，因为它们注册得太晚。

这篇文档对你有帮助吗？
想留言或继续讨论？请到 Cyberforums 赛博论坛参与。 参与讨论 / 回复