官方“创建区块”教程的初始帮助

时间:2021-01-31 作者:aitor

[EDIT] Problem 3 is solved (just I must to remove source: \'text\' from attributes declaration to allow store data in the the block’s comment delimiter).

下列的this tutorial 我制作了一个嵌入peertube视频的插件。我的块只需两个字段(实例和ID)即可。Here it is a working example. 和here 插件。

我有三个问题:

文本控件字段显示为100%宽,而不是在列中居中:

The TextControl fields are shown 100% wide, instead center in the column

<创建后,我无法在编辑器中删除块

该块在前端显示视频内容,但当我回到编辑器时,字段不会存储。首先显示如下:

enter image description here

其次,如果我尝试使用此按钮恢复块,字段将显示为空(如第一幅图像中所示)。

这是编辑功能(也是here 在上下文中):

import { TextControl } from \'@wordpress/components\';

export default function Edit( { attributes, className, setAttributes } ) {
    return (
        <div className={ className }>
            <TextControl
                label={ __( \'Identificador\', \'peertube\' ) }
                value={ attributes.identificador }
                onChange={ ( val ) => setAttributes( { identificador: val } ) }
            />
            <TextControl
                label={ __( \'Instancia\', \'peertube\' ) }
                value={ attributes.instancia }
                onChange={ ( val ) => setAttributes( { instancia: val } ) }
            />
        </div>
    );
}
这里是寄存器块功能(也here 在上下文中):

registerBlockType( \'e451/peertube\', {
    attributes: {
        identificador: {
            type: \'string\',
            source: \'text\',
            selector: \'div\',
        },
        instancia: {
            type: \'string\',
            source: \'text\',
            selector: \'div\',
        },
    },
    apiVersion: 2,
    title: __( \'Peertube video\', \'peertube\' ),
    description: __( \'Insertar contenido de peertube\', \'peertube\' ),
    category: \'embed\',
    icon: \'video-alt3\',
    supports: {
        // Removes support for an HTML mode.
        html: false,
    },
    edit: Edit,
    save,
} );
感谢您的帮助。

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

很高兴您解决了第三个问题(块验证失败),对于第一个和第二个问题,您可以使用useBlockProps 在块的编辑回调中:

// In src/index.js

import { TextControl } from \'@wordpress/components\';
import { useBlockProps } from \'@wordpress/block-editor\';

export default function Edit( { attributes, className, setAttributes } ) {
    const blockProps = useBlockProps();
    return (
        <div { ...blockProps }>
            ... your code.
        </div>
    );
}
看见Developer Documentation → Block API Reference → Edit and Save 有关详细信息,请参阅块编辑器手册useBlockProps (钩子)。:)

相关推荐