Namespace: core/blocks
.
Selectors
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
Returns block styles by block name.
Usage
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>
);
};
Parameters
- state
Object
: Data state. - name
string
: Block type name.
Returns
Array?
: Block Styles.
getBlockSupport
Returns the block support value for a feature, if defined.
Usage
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>
);
};
Parameters
- state
Object
: Data state. - nameOrType
(string|Object)
: Block name or type object - feature
Array|string
: Feature to retrieve - defaultSupports
*
: Default value to return if not explicitly defined
Returns
?*
: Block support value
getBlockType
Returns a block type by name.
Usage
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>
);
};
Parameters
- state
Object
: Data state. - name
string
: Block type name.
Returns
?Object
: Block Type.
getBlockTypes
Returns all the available block types.
Usage
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>
);
};
Parameters
- state
Object
: Data state.
Returns
Array
: Block Types.
getBlockVariations
Returns block variations by block name.
Usage
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>
);
};
Parameters
- state
Object
: Data state. - blockName
string
: Block type name. - scope
[WPBlockVariationScope]
: Block variation scope name.
Returns
(WPBlockVariation[]|void)
: Block variations.
getCategories
Returns all the available block categories.
Usage
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>
);
};
Parameters
- state
Object
: Data state.
Returns
WPBlockCategory[]
: Categories list.
getChildBlockNames
Returns an array with the child blocks of a given block.
Usage
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>
);
};
Parameters
- state
Object
: Data state. - blockName
string
: Block type name.
Returns
Array
: Array of child block names.
getCollections
Returns all the available collections.
Usage
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>
);
};
Parameters
- state
Object
: Data state.
Returns
Object
: Collections list.
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
Returns the default block variation for the given block type. When there are multiple variations annotated as the default one, the last added item is picked. This simplifies registering overrides. When there is no default variation set, it returns the first item.
Usage
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>
)
);
};
Parameters
- state
Object
: Data state. - blockName
string
: Block type name. - scope
[WPBlockVariationScope]
: Block variation scope name.
Returns
?WPBlockVariation
: The default block variation.
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
Returns a boolean indicating if a block has at least one child block with inserter support.
Usage
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>
);
};
Parameters
- state
Object
: Data state. - blockName
string
: Block type name.
Returns
boolean
: True if a block contains at least one child blocks with inserter support and false otherwise.
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.
Actions
The actions in this package shouldn’t be used directly. Instead, use the functions listed in the public API here
reapplyBlockTypeFilters
Signals that all block types should be computed again. It uses stored unprocessed block types and all the most recent list of registered filters.
It addresses the issue where third party block filters get registered after third party blocks. A sample sequence: 1. Filter A. 2. Block B. 3. Block C. 4. Filter D. 5. Filter E. 6. Block F. 7. Filter G. In this scenario some filters would not get applied for all blocks because they are registered too late.