@wordpress/block-library 10.1.0 → 10.2.0

package/src/post-template/edit.js

@@ -103,6 +103,7 @@ export default function PostTemplateEdit( {
 			parents,
 			pages,
 			format,
+			excludeCurrent,
 			// We gather extra query args to pass to the REST API call.
 			// This way extenders of Query Loop can add their own query args,
 			// and have accurate previews in the editor.
@@ -112,6 +113,7 @@ export default function PostTemplateEdit( {
 		} = {},
 		templateSlug,
 		previewPostType,
+		postId,
 	},
 	attributes: { layout },
 	__unstableLayoutClassNames,
@@ -203,6 +205,13 @@ export default function PostTemplateEdit( {
 			if ( format?.length ) {
 				query.format = format;
 			}
+			if ( excludeCurrent && postId ) {
+				if ( query.exclude ) {
+					query.exclude = [ ...query.exclude, postId ];
+				} else {
+					query.exclude = [ postId ];
+				}
+			}
 
 			/*
 			 * Handle cases where sticky is set to `exclude` or `only`.

package/src/pullquote/README.md

@@ -26,6 +26,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
   - `backgroundImage`: `true`
   - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`

package/src/pullquote/block.json

@@ -26,8 +26,10 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
-				"backgroundImage": true
+				"backgroundImage": true,
+				"gradient": true
 			}
 		},
 		"color": {

package/src/query/README.md

@@ -16,7 +16,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
 | `queryId` | `number` | — | — |
-| `query` | `object` | `{"perPage":null,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"format":[]}` | — |
+| `query` | `object` | `{"perPage":null,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"format":[],"excludeCurrent":null}` | — |
 | `tagName` | `string` | `"div"` | — |
 | `namespace` | `string` | — | — |
 | `enhancedPagination` | `boolean` | `false` | — |
@@ -38,6 +38,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 **Uses context:**
 
 - `templateSlug`
+- `postType`
 
 **Provides context:**
 

package/src/query/block.json

@@ -27,7 +27,8 @@
 				"inherit": true,
 				"taxQuery": null,
 				"parents": [],
-				"format": []
+				"format": [],
+				"excludeCurrent": null
 			}
 		},
 		"tagName": {
@@ -42,7 +43,7 @@
 			"default": false
 		}
 	},
-	"usesContext": [ "templateSlug" ],
+	"usesContext": [ "templateSlug", "postType" ],
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",

package/src/query/edit/inspector-controls/author-control.js

@@ -76,7 +76,6 @@ function AuthorControl( { value, onChange } ) {
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
 			help=""
-			__next40pxDefaultSize
 		/>
 	);
 }

package/src/query/edit/inspector-controls/format-controls.js

@@ -83,7 +83,6 @@ export default function FormatControls( { onChange, query: { format } } ) {
 			} }
 			help=""
 			__experimentalExpandOnFocus
-			__next40pxDefaultSize
 		/>
 	);
 }

package/src/query/edit/inspector-controls/index.js

@@ -8,12 +8,13 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { debounce } from '@wordpress/compose';
 import { useState, useMemo } from '@wordpress/element';
 
@@ -40,7 +41,8 @@ import {
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, isSingular } = props;
+	const { attributes, setQuery, isSingular, shouldExcludeCurrentPost } =
+		props;
 	const { query } = attributes;
 	const {
 		order,
@@ -55,6 +57,7 @@ export default function QueryInspectorControls( props ) {
 		taxQuery,
 		parents,
 		format,
+		excludeCurrent,
 	} = query;
 	const allowedControls = useAllowedControls( attributes );
 	const showSticky = postType === 'post';
@@ -171,12 +174,22 @@ export default function QueryInspectorControls( props ) {
 		[ allowedControls, postTypeHasFormatSupport ]
 	);
 
+	const showExcludeCurrentControl =
+		shouldExcludeCurrentPost &&
+		isControlAllowed( allowedControls, 'excludeCurrent' );
+	const postTypeSingularName = useSelect(
+		( select ) =>
+			select( coreStore ).getPostType( postType )?.labels.singular_name,
+		[ postType ]
+	);
+
 	const showFiltersPanel =
 		showTaxControl ||
 		showAuthorControl ||
 		showSearchControl ||
 		showParentControl ||
-		showFormatControl;
+		showFormatControl ||
+		showExcludeCurrentControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const showPostCountControl = isControlAllowed(
@@ -218,7 +231,6 @@ export default function QueryInspectorControls( props ) {
 						>
 							<VStack spacing={ 4 }>
 								<ToggleGroupControl
-									__next40pxDefaultSize
 									label={ __( 'Query type' ) }
 									isBlock
 									onChange={ ( value ) => {
@@ -269,7 +281,6 @@ export default function QueryInspectorControls( props ) {
 						>
 							{ postTypesSelectOptions.length > 2 ? (
 								<SelectControl
-									__next40pxDefaultSize
 									options={ postTypesSelectOptions }
 									value={ postType }
 									label={ postTypeControlLabel }
@@ -278,7 +289,6 @@ export default function QueryInspectorControls( props ) {
 								/>
 							) : (
 								<ToggleGroupControl
-									__next40pxDefaultSize
 									isBlock
 									value={ postType }
 									label={ postTypeControlLabel }
@@ -386,6 +396,7 @@ export default function QueryInspectorControls( props ) {
 							search: '',
 							taxQuery: null,
 							format: [],
+							excludeCurrent: null,
 						} );
 						setQuerySearch( '' );
 					} }
@@ -466,6 +477,32 @@ export default function QueryInspectorControls( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
+					{ showExcludeCurrentControl && (
+						<ToolsPanelItem
+							label={ __( 'Exclude' ) }
+							hasValue={ () => excludeCurrent !== null }
+							onDeselect={ () =>
+								setQuery( { excludeCurrent: null } )
+							}
+						>
+							<ToggleControl
+								label={ __( 'Exclude current' ) }
+								help={ sprintf(
+									/* translators: %s: the post type singular name */
+									__(
+										'Exclude the current %s from the query.'
+									),
+									postTypeSingularName
+								) }
+								checked={ !! excludeCurrent }
+								onChange={ ( value ) => {
+									setQuery( {
+										excludeCurrent: !! value,
+									} );
+								} }
+							/>
+						</ToolsPanelItem>
+					) }
 				</ToolsPanel>
 			) }
 		</>

package/src/query/edit/inspector-controls/offset-controls.js

@@ -10,7 +10,6 @@ const MAX_OFFSET = 100;
 export const OffsetControl = ( { offset = 0, onChange } ) => {
 	return (
 		<NumberControl
-			__next40pxDefaultSize
 			label={ __( 'Offset' ) }
 			value={ offset }
 			min={ MIN_OFFSET }

package/src/query/edit/inspector-controls/order-control.js

@@ -33,7 +33,6 @@ function OrderControl( {
 } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderByOptions }

package/src/query/edit/inspector-controls/pages-control.js

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 export const PagesControl = ( { pages, onChange } ) => {
 	return (
 		<NumberControl
-			__next40pxDefaultSize
 			label={ __( 'Max pages to show' ) }
 			value={ pages }
 			min={ 0 }

package/src/query/edit/inspector-controls/parent-control.js

@@ -132,7 +132,6 @@ function ParentControl( { parents, postType, onChange } ) {
 	};
 	return (
 		<FormTokenField
-			__next40pxDefaultSize
 			label={ __( 'Parents' ) }
 			value={ value }
 			onInputChange={ debouncedSearch }

package/src/query/edit/inspector-controls/per-page-control.js

@@ -10,7 +10,6 @@ const MAX_POSTS_PER_PAGE = 100;
 const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
 	return (
 		<RangeControl
-			__next40pxDefaultSize
 			label={ __( 'Items per page' ) }
 			min={ MIN_POSTS_PER_PAGE }
 			max={ MAX_POSTS_PER_PAGE }

package/src/query/edit/inspector-controls/sticky-control.js

@@ -14,7 +14,6 @@ const stickyOptions = [
 export default function StickyControl( { value, onChange } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -243,7 +243,6 @@ function TaxonomyItem( {
 				displayTransform={ decodeEntities }
 				onChange={ onTermsChange }
 				help=""
-				__next40pxDefaultSize
 			/>
 		</div>
 	);

package/src/query/edit/query-content.js

@@ -44,8 +44,9 @@ export default function QueryContent( {
 		tagName: TagName = 'div',
 		query: { inherit } = {},
 	} = attributes;
-	const { templateSlug } = context;
-	const { isSingular } = getQueryContextFromTemplate( templateSlug );
+	const { templateSlug, postType } = context;
+	const { isSingular, templateType } =
+		getQueryContextFromTemplate( templateSlug );
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
@@ -77,6 +78,14 @@ export default function QueryContent( {
 				DEFAULTS_POSTS_PER_PAGE,
 		};
 	}, [] );
+
+	// Whether the "exclude current" filter applies: we're in a singular template
+	// and the post type matches the query.
+	const shouldExcludeCurrentPost =
+		isSingular &&
+		! inherit &&
+		( query.postType === postType || query.postType === templateType );
+
 	// There are some effects running where some initialization logic is
 	// happening and setting some values to some attributes (ex. queryId).
 	// These updates can cause an `undo trap` where undoing will result in
@@ -102,15 +111,21 @@ export default function QueryContent( {
 		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
-
+		// Remove the exclusion when it no longer applies, so the filters stay
+		// clean. We never force it on: enabling the exclusion is left to the user.
+		if ( ! shouldExcludeCurrentPost && query.excludeCurrent !== null ) {
+			newQuery.excludeCurrent = null;
+		}
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
 	}, [
 		query.perPage,
+		query.excludeCurrent,
 		inherit,
 		postsPerPage,
+		shouldExcludeCurrentPost,
 		__unstableMarkNextChangeAsNotPersistent,
 		updateQuery,
 	] );
@@ -150,6 +165,7 @@ export default function QueryContent( {
 					setAttributes={ setAttributes }
 					clientId={ clientId }
 					isSingular={ isSingular }
+					shouldExcludeCurrentPost={ shouldExcludeCurrentPost }
 				/>
 			</InspectorControls>
 			<InspectorControls group="advanced">

package/src/query/index.js

@@ -34,6 +34,7 @@ export const settings = {
 				search: '',
 				sticky: 'exclude',
 				inherit: false,
+				excludeCurrent: null,
 			},
 		},
 		innerBlocks: [

package/src/query-pagination/query-pagination-arrow-controls.js

@@ -10,7 +10,6 @@ import {
 export function QueryPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Arrow' ) }
 			value={ value }
 			onChange={ onChange }

package/src/query-pagination-numbers/edit.js

@@ -72,7 +72,6 @@ export default function QueryPaginationNumbersEdit( {
 						isShownByDefault
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Number of links' ) }
 							help={ __(
 								'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'

package/src/quote/README.md

@@ -29,6 +29,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
   - `backgroundImage`: `true`
   - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
   - `minHeight`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):

package/src/quote/block.json

@@ -33,8 +33,10 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
-				"backgroundImage": true
+				"backgroundImage": true,
+				"gradient": true
 			}
 		},
 		"__experimentalBorder": {

package/src/quote/transforms.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import {
+	createBlock,
+	cloneSanitizedBlock,
+	switchToBlockType,
+} from '@wordpress/blocks';
 
 const transforms = {
 	from: [
@@ -92,13 +96,7 @@ const transforms = {
 				createBlock(
 					'core/quote',
 					{},
-					blocks.map( ( block ) =>
-						createBlock(
-							block.name,
-							block.attributes,
-							block.innerBlocks
-						)
-					)
+					blocks.map( ( block ) => cloneSanitizedBlock( block ) )
 				),
 		},
 	],

package/src/rss/edit.js

@@ -96,7 +96,6 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 						className="wp-block-rss__placeholder-form"
 					>
 						<InputControl
-							__next40pxDefaultSize
 							label={ label }
 							type="url"
 							hideLabelFromVision
@@ -168,7 +167,6 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 						isShownByDefault
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Number of items' ) }
 							value={ itemsToShow }
 							onChange={ ( value ) =>
@@ -235,7 +233,6 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 							isShownByDefault
 						>
 							<RangeControl
-								__next40pxDefaultSize
 								label={ __( 'Max number of words in excerpt' ) }
 								value={ excerptLength }
 								onChange={ ( value ) =>
@@ -256,7 +253,6 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 							isShownByDefault
 						>
 							<RangeControl
-								__next40pxDefaultSize
 								label={ __( 'Columns' ) }
 								value={ columns }
 								onChange={ ( value ) =>

package/src/rss/index.php

@@ -97,7 +97,7 @@ function render_block_core_rss( $attributes ) {
 			$excerpt = esc_attr( wp_trim_words( $excerpt, $attributes['excerptLength'], ' […]' ) );
 
 			// Change existing [...] to […].
-			if ( '[...]' === substr( $excerpt, -5 ) ) {
+			if ( str_ends_with( $excerpt, '[...]' ) ) {
 				$excerpt = substr( $excerpt, 0, -5 ) . '[…]';
 			}
 

package/src/search/edit.js

@@ -376,7 +376,6 @@ export default function SearchEdit( {
 					>
 						<SelectControl
 							value={ buttonPosition }
-							__next40pxDefaultSize
 							label={ __( 'Button position' ) }
 							onChange={ ( value ) => {
 								setAttributes( {
@@ -421,7 +420,6 @@ export default function SearchEdit( {
 					>
 						<VStack>
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Width' ) }
 								id={ unitControlInputId } // Unused, kept for backwards compatibility
 								min={
@@ -473,7 +471,6 @@ export default function SearchEdit( {
 									} );
 								} }
 								isBlock
-								__next40pxDefaultSize
 							>
 								{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {
 									return (
@@ -495,7 +492,6 @@ export default function SearchEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
-					__next40pxDefaultSize
 					label={ __( 'HTML element' ) }
 					value={ tagName ?? '' }
 					options={ [

package/src/separator/edit.js

@@ -39,7 +39,6 @@ const HtmlElementControl = ( { tagName, setAttributes } ) => {
 							'The <div> element should only be used if the block is a design element with no semantic meaning.'
 					  )
 			}
-			__next40pxDefaultSize
 		/>
 	);
 };

package/src/site-logo/edit.js

@@ -34,7 +34,6 @@ import {
 	MediaReplaceFlow,
 	useBlockProps,
 	store as blockEditorStore,
-	__experimentalImageEditor as ImageEditor,
 	useBlockEditingMode,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
@@ -73,7 +72,6 @@ const SiteLogo = ( {
 	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const isResizable = ! isWideAligned && isLargeViewport;
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
-	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const cropButtonRef = useRef();
 	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -114,12 +112,6 @@ const SiteLogo = ( {
 		}
 	}, [] );
 
-	useEffect( () => {
-		if ( ! isSelected ) {
-			setIsEditingImage( false );
-		}
-	}, [ isSelected ] );
-
 	// Always apply modal updates as snackbar Undo may restore the original id.
 	const handleMediaUpdate = ( { id: newId } ) => {
 		if ( typeof newId === 'number' ) {
@@ -233,58 +225,6 @@ const SiteLogo = ( {
 	// Hide crop and dimensions editing in write mode
 	const shouldShowCropAndDimensions = ! isContentOnlyMode;
 
-	let imgEdit;
-	if ( canEditImage && isEditingImage ) {
-		imgEdit = (
-			<ImageEditor
-				id={ logoId }
-				url={ logoUrl }
-				width={ currentWidth }
-				height={ currentHeight }
-				naturalHeight={ naturalHeight }
-				naturalWidth={ naturalWidth }
-				onSaveImage={ ( imageAttributes ) => {
-					setLogo( imageAttributes.id );
-				} }
-				onFinishEditing={ () => {
-					setIsEditingImage( false );
-				} }
-			/>
-		);
-	} else {
-		// Always render ResizableBox but disable resize functionality in contentOnly mode
-		imgEdit = (
-			<ResizableBox
-				size={ {
-					width: currentWidth,
-					height: currentHeight,
-				} }
-				showHandle={ isSelected && shouldShowCropAndDimensions }
-				minWidth={ minWidth }
-				maxWidth={ maxWidthBuffer }
-				minHeight={ minHeight }
-				maxHeight={ maxWidthBuffer / ratio }
-				lockAspectRatio
-				enable={ {
-					top: false,
-					right: showRightHandle,
-					bottom: true,
-					left: showLeftHandle,
-				} }
-				onResizeStart={ onResizeStart }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					onResizeStop();
-					setAttributes( {
-						width: parseInt( currentWidth + delta.width, 10 ),
-						height: parseInt( currentHeight + delta.height, 10 ),
-					} );
-				} }
-			>
-				{ imgWrapper }
-			</ResizableBox>
-		);
-	}
-
 	// Support the previous location for the Site Icon settings. To be removed
 	// when the required WP core version for Gutenberg is >= 6.5.0.
 	const shouldUseNewUrl = ! window?.__experimentalUseCustomizerSiteLogoUrl;
@@ -325,7 +265,6 @@ const SiteLogo = ( {
 						}
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Image width' ) }
 							onChange={ ( newWidth ) =>
 								setAttributes( { width: newWidth } )
@@ -401,33 +340,54 @@ const SiteLogo = ( {
 				</ToolsPanel>
 			</InspectorControls>
 			{ canEditImage &&
-				! isEditingImage &&
+				openMediaEditorModal &&
 				shouldShowCropAndDimensions && (
 					<BlockControls group="block">
 						<ToolbarButton
 							ref={ cropButtonRef }
-							onClick={
-								openMediaEditorModal && logoId
-									? () =>
-											openMediaEditorModal( {
-												id: logoId,
-												onUpdate: handleMediaUpdate,
-												onClose: () =>
-													cropButtonRef.current?.focus(),
-											} )
-									: () => setIsEditingImage( true )
-							}
-							aria-haspopup={
-								openMediaEditorModal && logoId
-									? 'dialog'
-									: undefined
+							onClick={ () =>
+								openMediaEditorModal( {
+									id: logoId,
+									onUpdate: handleMediaUpdate,
+									onClose: () =>
+										cropButtonRef.current?.focus(),
+								} )
 							}
+							aria-haspopup="dialog"
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>
 					</BlockControls>
 				) }
-			{ imgEdit }
+			{ /* Always render ResizableBox but disable resize functionality in contentOnly mode */ }
+			<ResizableBox
+				size={ {
+					width: currentWidth,
+					height: currentHeight,
+				} }
+				showHandle={ isSelected && shouldShowCropAndDimensions }
+				minWidth={ minWidth }
+				maxWidth={ maxWidthBuffer }
+				minHeight={ minHeight }
+				maxHeight={ maxWidthBuffer / ratio }
+				lockAspectRatio
+				enable={ {
+					top: false,
+					right: showRightHandle,
+					bottom: true,
+					left: showLeftHandle,
+				} }
+				onResizeStart={ onResizeStart }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					onResizeStop();
+					setAttributes( {
+						width: parseInt( currentWidth + delta.width, 10 ),
+						height: parseInt( currentHeight + delta.height, 10 ),
+					} );
+				} }
+			>
+				{ imgWrapper }
+			</ResizableBox>
 		</>
 	);
 };