721 lines
15 KiB
Markdown
721 lines
15 KiB
Markdown
### 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`: 默认区块变体。 |