Question

我只是希望得到一个快速的答案。我正在尝试使用blockedit钩子扩展核心块。我想知道是否应在块中添加新的属性/组件，以便在属性更改时重新调用编辑功能？

目前，保存功能可以正常工作，但编辑功能无法反映更改，但是如果我显示html，则属性更改将显示在html选项中。

我在文档中看不到有关编辑功能的任何内容/如果添加了新属性等是否应该更新该功能。每次像其他任何块一样更改属性时，是否应该调用BlockEdit？

这是blockedit和保存的代码 https://pastebin.com/AT6kAAhL

import assign from 'lodash.assign';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.blockEditor;
const { Component, Fragment } = wp.element;
const { RangeControl } = wp.components;

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'elder/thicknessAttribute',
    settings => {
        if(settings.name === 'core/separator') {
            settings.attributes = {
                ...settings.attributes,
                elderThickness: {
                    type: 'number',
                    default: 1,
                },
            };
        }
        return settings;
    }
);

wp.hooks.addFilter(
    'editor.BlockEdit',
    'elder/thicknessInput',
    wp.compose.createHigherOrderComponent(
        BlockEdit => props => {
            if(props.name === 'core/separator') {
                return (
                    <Fragment>
                        <BlockEdit {...props} />

                        <InspectorControls>
                            <RangeControl
                                label="Thickness"
                                min={ 1 }
                                max={ 10 }
                                value={props.attributes.elderThickness}
                                onChange={nextRel => props.setAttributes({elderThickness: nextRel})}
                            />
                        </InspectorControls>

                    </Fragment>
                );
            }
            return <BlockEdit {...props} />;
        },
        'withelderThicknessInput'
    )
);

// wp.hooks.addFilter(
//  'blocks.getSaveElement',
//  'elder/rel',
//  (element, block, attributes) => {
//      if(block.name === 'core/separator') {
//          if(attributes.elderThickness) {
//              return wp.element.cloneElement(
//                  element, {
//                      style: {
//                          ...element.props.style,
//                          height: attributes.elderThickness,
//                      },
//                  }
//              );
//          }
//      }
//      return element;
//  }
// );

wp.hooks.addFilter( 'blocks.getSaveContent.extraProps', 'elder/rel', ( element, block, attributes ) => {

    if(block.name === 'core/separator') {
        if(attributes.elderThickness) {
            assign( element, { style: { 'borderTopWidth': attributes.elderThickness } } );
        }
    }

    return element;
} )

古腾堡-扩展核心模块不会重新渲染编辑功能

0 个答案: