块编辑器开发文档

💡 云策文档标注

概述

ResizableBox 是基于 re-resizable 包的封装组件,提供预定义类和样式,用于在 WordPress 块编辑器中实现可调整大小的功能。

关键要点

  • ResizableBox 是 re-resizable 的包装器,大部分选项直接传递给 re-resizable,但自定义了 handleClasses 和 handleStyles。
  • 组件主要用于块编辑器的编辑组件中,通过设置 size、minHeight、minWidth、enable 等属性控制尺寸和调整方向。
  • 支持 onResizeStart 和 onResizeStop 事件处理函数,用于在调整大小时更新属性和控制选择状态。

代码示例

import { ResizableBox } from '@wordpress/components';

const Edit = ( props ) => {
    const {
        attributes: { height, width },
        setAttributes,
        toggleSelection,
    } = props;

    return (
        <ResizableBox
            size={ {
                height,
                width,
            } }
            minHeight="50"
            minWidth="50"
            enable={ {
                top: false,
                right: true,
                bottom: true,
                left: false,
                topRight: false,
                bottomRight: true,
                bottomLeft: false,
                topLeft: false,
            } }
            onResizeStop={ ( event, direction, elt, delta ) => {
                setAttributes( {
                    height: height + delta.height,
                    width: width + delta.width,
                } );
                toggleSelection( true );
            } }
            onResizeStart={ () => {
                toggleSelection( false );
            } }
        />
    );
};

注意事项

  • showHandle 属性默认为 false,用于控制调整手柄的可见性。
  • 更多属性请参考 re-resizable 的文档,因为 ResizableBox 直接传递大部分选项。

📄 原文内容

ResizableBox is a wrapper around the re-resizable package with pre-defined classes and styles.

Usage

Most options are passed directly through to re-resizable so you may wish to refer to their documentation. The primary differences in this component are that we set handleClasses (to use custom class names) and pass some null values to handleStyles (to unset some inline styles).

The example below shows how you might use ResizableBox to set a width and height inside a block’s edit component.

import { ResizableBox } from '@wordpress/components';

const Edit = ( props ) => {
    const {
        attributes: { height, width },
        setAttributes,
        toggleSelection,
    } = props;

    return (
        <ResizableBox
            size={ {
                height,
                width,
            } }
            minHeight="50"
            minWidth="50"
            enable={ {
                top: false,
                right: true,
                bottom: true,
                left: false,
                topRight: false,
                bottomRight: true,
                bottomLeft: false,
                topLeft: false,
            } }
            onResizeStop={ ( event, direction, elt, delta ) => {
                setAttributes( {
                    height: height + delta.height,
                    width: width + delta.width,
                } );
                toggleSelection( true );
            } }
            onResizeStart={ () => {
                toggleSelection( false );
            } }
        />
    );
};

Props

Name Type Default Description
showHandle bool false Determines of the resize handles are visible.

For additional props, check out re-resizable.