Гутенберг - Расширение основного блока не переопределяет функцию редактирования - PullRequest
Новая
       44

Гутенберг - Расширение основного блока не переопределяет функцию редактирования

0 голосов
/ 30 марта 2020

Я просто надеялся на очень быстрый ответ. Я пытаюсь расширить основной блок, используя ловушку заблокированного. Мне было интересно, следует ли добавлять новый атрибут / компонент в блок, если функция редактирования вызывается при изменении атрибута?

Поскольку в настоящее время функция сохранения работает просто отлично, однако функция редактирования не отражает изменения, однако, если я показываю html изменение атрибута отображается в опции html.

Я не вижу ничего в документации, касающейся функции редактирования / если она должна обновиться, если вы добавите новый атрибут et c. Должен ли 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;
} )
...