I'm a Gutenberg newbie.
I'm trying to display a placeholder component with my block's edit function:
export default function Edit( { attributes, setAttributes, className } ) {
return (
<Placeholder
icon={ icon }
label={ title }
>
);
}
I would like to display the block icon and title, as they have been defined within the function registerBlockType
.
Could someone point me how to do this ? Thanks !
I'm a Gutenberg newbie.
I'm trying to display a placeholder component with my block's edit function:
export default function Edit( { attributes, setAttributes, className } ) {
return (
<Placeholder
icon={ icon }
label={ title }
>
);
}
I would like to display the block icon and title, as they have been defined within the function registerBlockType
.
Could someone point me how to do this ? Thanks !
Share Improve this question asked Sep 18, 2020 at 21:38 gordiegordie 4925 silver badges19 bronze badges 1 |1 Answer
Reset to default 1You can use wp.blocks.getBlockType()
to get the block type's settings.
So if you've registered a block type with the name my-guten/foo-block
, just run getBlockType( 'my-guten/foo-block' )
to get the block type's title, icon, etc.
const { registerBlockType, getBlockType } = wp.blocks;
// Register a block type.
registerBlockType( 'my-guten/foo-block', { ... } );
// Get the block type settings (title, icon, etc.).
const blockType = getBlockType( 'my-guten/foo-block' );
// Inspect the settings:
console.log( blockType );
And from within a block type's edit
function, the block type's name is passed as a property named name
in the first function argument which is an object with other properties like attributes
and className
. So for examples:
// Using a Dashicons icon.
registerBlockType( 'my-guten/foo-block', {
title: 'Foo Block',
icon: 'heart',
category: 'common',
edit: function ( props ) {
const blockType = getBlockType( props.name );
console.log( blockType.title ); // Foo Block
... your code.
},
... your code.
} );
// Using an SVG icon. (JSX)
registerBlockType( 'my-guten/foo-block', {
title: 'Foo Block',
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,
category: 'common',
// Unpack the first argument — so that we can use "name" and not props.name.
edit: function ( { name } ) {
const blockType = getBlockType( name );
... your code.
},
... your code.
} );
Example based on your code
In edit.js
:
const { getBlockType } = wp.blocks;
const { Placeholder } = wpponents;
export default function Edit( { attributes, setAttributes, className, name } ) {
const blockType = getBlockType( name );
return (
<Placeholder
icon={ blockType.icon.src }
label={ blockType.title }
/>
);
}
In index.js
:
import Edit from './edit';
const { registerBlockType } = wp.blocks;
registerBlockType( 'my-guten/foo-block', {
edit: Edit,
... your code.
} );
const BLOCK_TITLE = 'Foo Block'
) and simply access the constant from theedit
function as well as in the root of theregisterBlockType()
. – Sally CJ Commented Sep 19, 2020 at 7:19