扩展WordPress核心组块后编辑器内旋转样式不显示问题

你只实现了旋转属性的保存逻辑和网站前台的样式渲染，但编辑器内的块预览没有将rotate属性映射为视觉样式。WordPress编辑器的块渲染环境与前台是分离的，需要单独处理编辑器内的样式应用。

步骤1：显式注册rotate属性（可选但推荐） #

虽然你的属性能保存，但显式扩展core/group块的属性定义，能避免潜在的类型不匹配问题：

// 扩展core/group块的属性
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'gutrs/add-rotate-attribute',
    (settings, name) => {
        if (name !== 'core/group') return settings;
        
        return {
            ...settings,
            attributes: {
                ...settings.attributes,
                rotate: {
                    type: 'number',
                    default: 0,
                },
            },
        };
    }
);

步骤2：给编辑器内的组块应用旋转样式 #

有两种方式实现编辑器内的样式预览，选其一即可：

方式一：通过editor.BlockListBlock过滤器修改块容器样式

这个方法直接作用于编辑器里的块外层容器，效果更贴近前台渲染：

const addRotateBlockStyle = wp.compose.createHigherOrderComponent((BlockListBlock) => {
    return (props) => {
        const { attributes, name } = props;
        
        // 只处理core/group块，且有rotate值时才添加样式
        if (name !== 'core/group' || !attributes.rotate) {
            return <BlockListBlock {...props} />;
        }

        const rotateStyle = {
            transform: `rotate(${attributes.rotate}deg)`,
            transformOrigin: 'center', // 可选，设置旋转中心点
        };

        // 合并原有样式与旋转样式
        return <BlockListBlock {...props} style={{ ...props.style, ...rotateStyle }} />;
    };
}, 'addRotateBlockStyle');

wp.hooks.addFilter(
    'editor.BlockListBlock',
    'gutrs/add-rotate-block-style',
    addRotateBlockStyle
);

方式二：在原BlockEdit组件外包裹带样式的容器

修改你已有的testingAdvancedControls组件，给原BlockEdit添加样式包裹：

const testingAdvancedControls = wp.compose.createHigherOrderComponent((BlockEdit) => {
    return (props) => {
        const { Fragment } = wp.element;
        const { PanelBody, RangeControl } = wp.components;
        const { InspectorControls } = wp.blockEditor;
        const { attributes, setAttributes, isSelected, name } = props;

        // 修正reset时的属性值为0（匹配number类型）
        const updateRotate = (newR) => {
            setAttributes({ rotate: newR === undefined ? 0 : newR });
        };

        return (
            <Fragment>
                {/* 给编辑器内的组块添加旋转样式 */}
                <div style={
                    attributes.rotate ? {
                        transform: `rotate(${attributes.rotate}deg)`,
                        transformOrigin: 'center',
                        display: 'block',
                    } : {}
                }>
                    <BlockEdit {...props} />
                </div>

                {isSelected && name === 'core/group' && (
                    <InspectorControls>
                        <PanelBody title={__('test rotate', 'testing')} initialOpen={false}>
                            <RangeControl
                                label={__('Rotate', 'testing')}
                                value={attributes.rotate || 0} // 加默认值避免undefined
                                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
);

步骤3：验证效果 #

保存代码后刷新编辑器，调整旋转滑块，就能实时看到组块在编辑器内的旋转效果了。

内容的提问来源于stack exchange，提问作者Ron