古登堡：我怎样才能在“编辑”功能中获得当前块的标题？

时间：2020-09-18 作者：gordie

我是古腾堡的新手。

我正在尝试使用块的编辑功能显示占位符组件：

export default function Edit( { attributes, setAttributes, className } ) {
  return (
    <Placeholder
      icon={ icon }
      label={ title }
    >
  );
}
我想显示块图标和标题，因为它们已在函数中定义registerBlockType.

有人能告诉我怎么做吗？谢谢

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

您可以使用wp.blocks.getBlockType() 获取块类型的设置。

因此，如果您已使用以下名称注册了块类型my-guten/foo-block, 快跑吧getBlockType( \'my-guten/foo-block\' ) 获取块类型的标题、图标等。

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 );
和来自块类型的edit 函数中，块类型的名称作为名为name 在第一个函数参数中，它是一个具有以下其他属性的对象attributes 和className. 例如：

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

基于代码的示例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 }
        />
    );
}
在里面index.js:

import Edit from \'./edit\';

const { registerBlockType } = wp.blocks;

registerBlockType( \'my-guten/foo-block\', {
    edit: Edit,
    ... your code.
} );

标签： block-editor   小码农  

相关推荐