gutenbergdocs/reference-guides/data/data-core-blocks.md

721 lines
15 KiB
Markdown
Raw Normal View History

2025-10-21 17:33:45 +00:00
### hasChildBlocksWithInserterSupport
返回一个布尔值,用于指示某个区块是否至少拥有一个支持插入器的子区块。
_使用示例_
```js
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。
_使用示例_
```js
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[]`: 区块类型是否与搜索词匹配。
<!-- END TOKEN(Autogenerated selectors|../../../packages/blocks/src/store/selectors.js) -->
## 操作
此包中的操作不应直接使用。请改用[公共 API](/packages/blocks/README.md) 中列出的函数。
<!-- START TOKEN(Autogenerated actions|../../../packages/blocks/src/store/actions.js) -->
### reapplyBlockTypeFilters
发出信号表示应重新计算所有区块类型。该操作使用存储的未处理区块类型和最近注册的所有筛选器列表。
它解决了第三方区块筛选器在第三方区块之后注册的问题。示例顺序1. 筛选器 A → 2. 区块 B → 3. 区块 C → 4. 筛选器 D → 5. 筛选器 E → 6. 区块 F → 7. 筛选器 G。在此场景中部分筛选器因注册过晚而无法应用于所有区块。
<!-- END TOKEN(Autogenerated actions|../../../packages/blocks/src/store/actions.js) -->
### getFreeformFallbackBlockName
返回用于处理非区块内容的区块名称。
_用法_
```js
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
返回用于处理区块分组的区块名称。
_用法_
```js
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
返回用于处理未注册区块的区块名称。
_用法_
```js
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。
_用法_
```js
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
返回一个布尔值,指示区块是否包含子区块。
_用法_
```js
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`
## 选择器
<!-- START TOKEN(Autogenerated selectors|../../../packages/blocks/src/store/selectors.js) -->
### getActiveBlockVariation
根据区块属性返回指定区块的激活变体。变体通过其 `isActive` 属性确定,该属性可以是区块属性键的数组或函数。
当为区块属性键数组时,将使用严格相等性检查将 `attributes` 与变体的属性进行比较。
当为函数类型时,该函数应接受区块属性和变体属性,并确定变体是否处于激活状态。该函数接受区块属性和变体属性,并确定变体是否处于激活状态。
_用法_
```js
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
通过区块名称返回区块样式。
_用法_
```js
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
返回指定功能的区块支持值(如果已定义)。
_用法_
```js
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
通过名称返回区块类型。
_用法_
```js
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
返回所有可用的区块类型。
_用法_
```js
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
根据区块名称返回区块变体。
_用法_
```js
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
返回所有可用的区块分类。
_用法_
```js
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
返回指定区块的子区块数组。
_用法_
```js
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
返回所有可用的集合。
_用法_
```js
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
返回默认区块名称。
_用法_
```js
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
返回指定区块类型的默认区块变体。当存在多个标记为默认的变体时,将选择最后添加的项。这简化了注册覆盖操作。当未设置默认变体时,返回第一个项。
_用法_
```js
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`: 默认区块变体。