wordpress 扩展核心块在编辑器中不起作用

to94eoyn 于 2023-03-29 发布在 WordPress

关注(0)|答案(1)|浏览(161)

我想扩展组核心块，并添加一个旋转内联样式。我读取并使用钩子。当我添加旋转时，它被保存并正确显示在前面。但即使我有一个更新属性的函数，编辑器中也没有任何变化。
这是我的编辑部分的代码，用于扩展核心组块：

const testingAdvancedControls = wp.compose.createHigherOrderComponent(

(BlockEdit) => {

return (props) => {

    // prepare all the variables needed 

    //const { post_id, block_count } = this.props; 

    const { Fragment } = wp.element;

    const {
        PanelBody,
        RangeControl,
    } = wp.components;

    const { InspectorAdvancedControl, InspectorControls, ColorPalette } = wp.blockEditor;

    const { attributes, setAttributes, isSelected, post_id, block_count, clientId, context } = props;

    //functions 

    const updateRotate = (newR) => {
        setAttributes({ rotate: (newR === undefined ? '' : newR) });
    }

    return (

        <Fragment>
            <BlockEdit {...props} />
            {isSelected &&
                <InspectorControls>

                    {isSelected && (props.name == 'core/group') &&

                        <PanelBody title={__('test rotate', 'testing')}
                            initialOpen={false}>

                            <RangeControl
                                label={__('Rotate', 'testing')}
                                value={attributes.rotate}
                                onChange={updateRotate}
                                min={-50}
                                max={50}
                                step={0.1}
                                help={__('Rotate the group', 'testing')}
                                allowReset={true}
                                initialPosition={0}
                            />

                        </PanelBody>
                    }

                </InspectorControls>

            }

        </Fragment>

    )

}

  }, 'testingAdvancedControls'

  );

   wp.hooks.addFilter(
    'editor.BlockEdit',
    'gutrs/add-testing-controls',
    testingAdvancedControls
);

为什么旋转不显示在编辑器内？任何想法？如果我在编辑器中给rotete属性一个值，它会传递到前端，但在编辑器中什么也没有。
有什么想法吗？

wordpress

来源：https://stackoverflow.com/questions/75799795/extending-a-core-block-doesnt-work-inside-the-editor

1条答案

按热度按时间

iszxjhcz1#

编辑器呈现的类名和样式与前端不同;要添加自己的旋转控件来更新编辑器的视觉样式，有3个关键步骤：
1.通过寄存器BlockType向core/group添加旋转属性：

function addRotateAttribute(settings, name) {
    if (name !== 'core/group') {
        return settings;
    }

    return lodash.assign({}, settings, {
        attributes: lodash.assign({}, settings.attributes, {
            rotate: {
                type: 'number',
                default: 0
            },
        }),
    });
}

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'gutrs/add-rotate-attribute',
    addRotateAttribute
);

1.将检查器控件添加到目标块（* 代码的简化版本 *）

const { createHigherOrderComponent } = wp.compose;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, RangeControl } = wp.components;

const testingAdvancedControls = createHigherOrderComponent((BlockEdit) => {

    return (props) => {
        const { attributes, setAttributes } = props;

        return (
            <>
                <BlockEdit {...props} />
                {props.name == 'core/group' && (
                    <InspectorControls>
                        <PanelBody title={__('test rotate', 'testing')}
                            initialOpen={false}>
                            <RangeControl
                                label={__('Rotate', 'testing')}
                                value={attributes.rotate}
                                onChange={(val) => setAttributes({ rotate: val })}
                                min={-50}
                                max={50}
                                step={0.1}
                                help={__('Rotate the group', 'testing')}
                                allowReset={true}
                                initialPosition={0}
                            />
                        </PanelBody>
                    </InspectorControls>
                )}
            </>
        );
    };
}, 'testingAdvancedControls');

wp.hooks.addFilter(
    'editor.BlockEdit',
    'gutrs/add-testing-controls',
    testingAdvancedControls
);

1.更改BlockListBlock的props，以仅使用编辑器的块属性添加旋转的内联样式：

const withRotate = createHigherOrderComponent(
    (BlockListBlock) => {

        return (props) => {

            const {
                name: blockName,
                attributes: { style, rotate },
                wrapperProps,
            } = props;
          
            if (rotate === undefined) {
                // Block doesn't support rotate, return default props
                return <BlockListBlock {...props} />;
            }

            // Setup new props to add inline rotate style
            const newProps = {
                ...props,
                wrapperProps: {
                    ...wrapperProps,
                    style: {
                        rotate: rotate + 'deg',
                        ...wrapperProps?.style,
                    },
                },
            };

            return <BlockListBlock {...newProps} />;
        }
    },
    'withRotateStyle'
);

wp.hooks.addFilter(
    'editor.BlockListBlock',
    'gutrs/with-rotate-style',
    withRotate
);

参考：基于如何实现withChildLayoutStyles。

**结果：**x1c 0d1x

这是一个有趣的结果，可能会使添加更多的内容有点棘手，但我很好奇，看看它将如何工作..

赞(0）回复(0）举报 2023-03-29

我来回答

wordpress 扩展核心块在编辑器中不起作用

1条答案

相关问题

热门标签

最新问答