0

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 !

1
  • 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 Sep 19 '20 at 7:19
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.org/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 } = wp.components;

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.
} );
2
  • got it, thanks ! Can you explain me what's the point of doing const { getBlockType } = wp.blocks; const blockType = getBlockType( name ); rather than const blockType = wp.blocks.getBlockType( name ); ? Just trying to understand it. Thanks ! – gordie Sep 20 '20 at 9:40
  • The former is particularly useful when you need to call wp.blocks.getBlockType() multiple times in the same file, function or block of code, because "getBlockType()" is shorter.. (and easier to type..) so the file/code gets smaller in size. – Sally CJ Sep 21 '20 at 17:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.