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 !

• block-editor

• If it's just for a block type you created, then you could, for example, just define a constant with the title/icon/etc. (e.g. const BLOCK_TITLE = 'Foo Block') and simply access the constant from the edit function as well as in the root of the registerBlockType(). – Sally CJ Commented Sep 19, 2020 at 7:19

1 Answer 1

You 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.
} );