2025-10-22 01:40:18 +08:00

15 KiB

Raw Blame History

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 区块拥有支持插入器的子区块：%s'
				),
				navigationBlockHasChildBlocksWithInserterSupport
			) }
		</p>
	);
};

参数说明

state Object: 数据状态。
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(
				__(
					'在 block.json 的标题、关键词、分类或描述中找到搜索词：%s'
				),
				termFound
			) }
		</p>
	);
};

参数说明

state Object: 区块状态。
nameOrType (string|Object): 区块名称或类型对象。
searchTerm string: 用于筛选的搜索词。

返回值

Object[]: 区块类型是否与搜索词匹配。

操作

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

reapplyBlockTypeFilters

发出信号表示应重新计算所有区块类型。该操作使用存储的未处理区块类型和最近注册的所有筛选器列表。

它解决了第三方区块筛选器在第三方区块之后注册的问题。示例顺序：1. 筛选器 A → 2. 区块 B → 3. 区块 C → 4. 筛选器 D → 5. 筛选器 E → 6. 区块 F → 7. 筛选器 G。在此场景中，部分筛选器因注册过晚而无法应用于所有区块。

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(
					__( '自由形态降级区块名称：%s' ),
					freeformFallbackBlockName
				) }
			</p>
		)
	);
};

参数

state Object: 数据状态。

返回值

?string: 用于处理非区块内容的区块名称。

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(
					__( '默认分组区块名称：%s' ),
					groupingBlockName
				) }
			</p>
		)
	);
};

参数

state Object: 数据状态。

返回值

?string: 用于处理区块分组的区块名称。

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(
					__( '未注册降级区块名称：%s' ),
					unregisteredFallbackBlockName
				) }
			</p>
		)
	);
};

参数

state Object: 数据状态。

返回值

?string: 用于处理未注册区块的区块名称。

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 是否支持自定义类名：%s' ),
                paragraphBlockSupportClassName
            ) }
        </p>
    );
};

参数

state Object: 数据状态。
nameOrType (string|Object): 区块名称或类型对象。
feature string: 要测试的功能特性。
defaultSupports boolean: 未显式定义时是否默认支持该功能。

返回值

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 是否包含子区块：%s' ),
				navigationBlockHasChildBlocks
			) }
		</p>
	);
};

参数

state Object: 数据状态。
blockName string: 区块类型名称。

返回值

boolean: 如果区块包含子区块则为 true，否则为 false。

区块类型数据

命名空间：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 变体' ) }</p>
	) : (
		<p>{ __( '其他变体' ) }</p>
	);
};

参数

state Object: 数据状态
blockName string: 区块名称（例如："core/columns"）
attributes Object: 用于确定激活变体的区块属性
scope [WPBlockVariationScope]: 区块变体作用域名称

返回值

(WPBlockVariation|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 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 支持的 anchor 值：%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

返回默认区块名称。

用法

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( __( '默认区块名称: %s' ), defaultBlockName ) }
			</p>
		)
	);
};

参数

state Object: 数据状态。

返回值

?string: 默认区块名称。

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 默认变体: %s' ),
					defaultEmbedBlockVariation.title
				) }
			</p>
		)
	);
};

参数

state Object: 数据状态。
blockName string: 区块类型名称。
scope [WPBlockVariationScope]: 区块变体作用域名称。

返回值

?WPBlockVariation: 默认区块变体。

15 KiB Raw Blame History Unescape Escape

hasChildBlocksWithInserterSupport

isMatchingSearchTerm

操作

reapplyBlockTypeFilters

getFreeformFallbackBlockName

getGroupingBlockName

getUnregisteredFallbackBlockName

hasBlockSupport

hasChildBlocks

区块类型数据

选择器

getActiveBlockVariation

getBlockStyles

getBlockSupport

getBlockType

getBlockTypes

getBlockVariations

getCategories

getChildBlockNames

getCollections

getDefaultBlockName

getDefaultBlockVariation

15 KiB

Raw Blame History