admin管理员组文章数量:1322527
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.
} );
本文标签: Gutenberghow can I get the title of the current block within its 39edit39 function
版权声明:本文标题:Gutenberg : how can I get the title of the current block within its 'edit' function? 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742111136a2421261.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
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