如何向Gutenberg核心块添加自定义属性？

时间：2018-09-26 作者：Eric Murphy

我正在尝试向Wordpress核心块添加下拉列表，以选择将添加到前端的数据属性（例如data attr=“value from dropdown”）。

我认为解决方案是向核心块添加自定义属性，在后端将其设置并将其传递到前端，但我一辈子都不知道如何向核心块添加新属性。这是我得到的最接近的，但这只是让我创建一个下拉列表，运行道具。内部的setAttribute（）不起作用。

https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/#editor-blockedit

我能做些什么吗，或者功能还没有实现？

2 个回复
SO网友:Welcher

可以使用blocks.registerBlockType 滤器

/**
 * Filter the attributes for all blocks to add custom ones
 *
 * Name can be used to only add the new attribute to a certain block.
 *
 * @param settings
 * @param name
 * @returns {*}
 */
function addCustomAttributes( settings, name ) {
    if ( settings.attributes ) {

        settings.attributes.customAttribute = {
            type: \'string\',
            default: \'\'
        };

        settings.attributes.anotherCustomAttribute = {
            type: \'boolean\',
            default: false
        };
    }
    return settings;
}

addFilter( \'blocks.registerBlockType\', \'namespace/filterBlockAttributes\', addCustomAttributes );

SO网友:Ashiquzzaman Kiron

首先在编辑函数中使用下拉选项声明一个变量-

const linkOptions = [
        { value: \'small\', label: __( \'Small\' ) },
        { value: \'normal\', label: __( \'Normal\' ) },
        { value: \'medium\', label: __( \'Medium\' ) },
        { value: \'large\', label: __( \'Large\' ) },
    ];
我假设您将在侧栏面板中显示下拉选项。以下是panelbody的代码以及如何获取下拉值-

<PanelBody>
  <SelectControl
    label={ __( \'Size\' ) }
    value={ size }
    options={ linkOptions.map( ({ value, label }) => ( {
    value: value,
    label: label,
    } ) ) }
    onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
   />
</PanelBody>
这将在Inspector区域显示一个下拉面板，请注意，我正在使用（ES6）映射函数来迭代值和相应的标签。现在，出现了RichText组件，您可以在其中调用HTML节点-

<RichText
      tagName={ \'span\' }
      placeholder={ __( \'Enter Text\' ) }
      value={ text }
      onChange={ (text) => setAttributes( { text: text } ) }
      formattingControls={ [ \'bold\', \'italic\', \'strikethrough\' ] }
      className={`button-${size}`} /*ES6 Template Literals*/
      isSelected={ isSelected }
      keepPlaceholderOnFocus
/>
请注意，具体取决于下拉选项。按钮大小附加到HTML节点类名。现在在编辑器样式表中，添加几个css类和属性-

button-small
button-normal
button-medium
button-large
对于保存功能-

const save = ( props ) => {

    const {  size } = props.attributes;


    return (
        <div className={ `ubutton-${size}` }>

        </div>
    );
}

结束
标签： block-editor   小码农  

相关推荐