【WordPress】ResizableBox の使い方｜カスタムブロックをドラッグでリサイズできるようにする方法

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "webool/notice-box",
  "title": "お知らせボックス",
  "category": "design",
  "attributes": {
    "height": {
      "type": "number",
      "default": 200
    },
    "content": {
      "type": "string",
      "source": "html",
      "selector": "p"
    }
  },
  "editorScript": "file:./index.js",
  "style": "file:./style-index.css"
}

import { useBlockProps, RichText } from '@wordpress/block-editor';
import { ResizableBox } from '@wordpress/components';

export default function Edit( { attributes, setAttributes } ) {
	const { height, content } = attributes;
	const blockProps = useBlockProps();

	return (
		<div { ...blockProps }>
			<ResizableBox
				size={ { width: '100%', height } }
				minHeight={ 80 }
				maxHeight={ 600 }
				enable={ {
					top: false,
					right: false,
					bottom: true,
					left: false,
					topRight: false,
					bottomRight: false,
					bottomLeft: false,
					topLeft: false,
				} }
				onResizeStop={ ( event, direction, elt, delta ) => {
					setAttributes( {
						height: parseInt( height + delta.height, 10 ),
					} );
				} }
			>
				<div className="notice-box" style={ { height: '100%' } }>
					<RichText
						tagName="p"
						value={ content }
						onChange={ ( value ) => setAttributes( { content: value } ) }
						placeholder="お知らせの本文を入力"
					/>
				</div>
			</ResizableBox>
		</div>
	);
}

import { useBlockProps, store as blockEditorStore } from '@wordpress/block-editor';
import { ResizableBox } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';

export default function Edit( { attributes, setAttributes, isSelected } ) {
	const { height } = attributes;
	const blockProps = useBlockProps();

	// エディターのテキスト選択を一時的に止めるためのアクション
	const { toggleSelection } = useDispatch( blockEditorStore );

	return (
		<div { ...blockProps }>
			<ResizableBox
				size={ { width: '100%', height } }
				minHeight={ 80 }
				showHandle={ isSelected }
				enable={ {
					top: false,
					right: false,
					bottom: true,
					left: false,
					topRight: false,
					bottomRight: false,
					bottomLeft: false,
					topLeft: false,
				} }
				onResizeStart={ () => {
					toggleSelection( false );
				} }
				onResizeStop={ ( event, direction, elt, delta ) => {
					setAttributes( {
						height: parseInt( height + delta.height, 10 ),
					} );
					toggleSelection( true );
				} }
			>
				{ /* 中身 */ }
			</ResizableBox>
		</div>
	);
}

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
	const { height, content } = attributes;

	const blockProps = useBlockProps.save( {
		style: { minHeight: `${ height }px` },
	} );

	return (
		<div { ...blockProps }>
			<RichText.Content tagName="p" value={ content } />
		</div>
	);
}

<?php
$height = isset( $attributes['height'] ) ? (int) $attributes['height'] : 200;

$wrapper_attributes = get_block_wrapper_attributes(
	array(
		'style' => sprintf( 'min-height:%dpx;', $height ),
	)
);
?>
<div <?php echo $wrapper_attributes; ?>>
	<?php echo wp_kses_post( $attributes['content'] ?? '' ); ?>
</div>