ResizableBox

使用法

ほとんどのオプションは re-resizable に直接渡されるため、彼らのドキュメントを参照することをお勧めします。このコンポーネントの主な違いは、handleClasses（カスタムクラス名を使用するため）を設定し、handleStyles にいくつかの null 値を渡して（いくつかのインラインスタイルを解除するため）いることです。

以下の例は、ResizableBox を使用してブロックの edit コンポーネント内に幅と高さを設定する方法を示しています。

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 );
   } }
   />
   );
};

プロパティ

追加のプロパティについては、re-resizable をチェックしてください。