@wordpress/block-library 8.4.0 → 8.6.0

package/src/search/test/transforms.native.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Search';
+const initialHtml = `
+<!-- wp:search {"label":"Search","buttonText":"Search"} /-->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/separator/test/__snapshots__/edit.native.js.snap

@@ -2,6 +2,6 @@
 
 exports[`Separator block inserts block 1`] = `
 "<!-- wp:separator -->
-<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
 <!-- /wp:separator -->"
 `;

package/src/separator/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Separator block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Separator block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator --></div>
+<!-- /wp:group -->"
+`;

package/src/separator/test/transforms.native.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Separator';
+const initialHtml = `
+<!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/shortcode/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shortcode block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Shortcode block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode --></div>
+<!-- /wp:group -->"
+`;

package/src/shortcode/test/transforms.native.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Shortcode';
+const initialHtml = `
+<!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/site-logo/edit.js

@@ -300,6 +300,7 @@ const SiteLogo = ( {
 						disabled={ ! isResizable }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link image to home' ) }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
@@ -307,6 +308,7 @@ const SiteLogo = ( {
 					{ isLink && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
 								onChange={ ( value ) =>
 									setAttributes( {
@@ -320,6 +322,7 @@ const SiteLogo = ( {
 					{ canUserEdit && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Use as site icon' ) }
 								onChange={ ( value ) => {
 									setAttributes( { shouldSyncIcon: value } );

package/src/site-logo/editor.scss

@@ -33,10 +33,10 @@
 // Provide special styling for the placeholder.
 // @todo: this particular minimal style of placeholder could be componentized further.
 .wp-block-site-logo.wp-block-site-logo {
-	// Match the default logo size.
+
 	&.is-default-size .components-placeholder {
-		height: 120px;
-		width: 120px;
+		height: 60px;
+		width: 60px;
 	}
 
 	// Inherit radius.

package/src/site-logo/index.php

@@ -39,8 +39,13 @@ function render_block_core_site_logo( $attributes ) {
 	if ( $attributes['isLink'] && '_blank' === $attributes['linkTarget'] ) {
 		// Add the link target after the rel="home".
 		// Add an aria-label for informing that the page opens in a new tab.
-		$aria_label  = 'aria-label="' . esc_attr__( '(Home link, opens in a new tab)' ) . '"';
-		$custom_logo = str_replace( 'rel="home"', 'rel="home" target="' . esc_attr( $attributes['linkTarget'] ) . '"' . $aria_label, $custom_logo );
+		$processor = new WP_HTML_Tag_Processor( $custom_logo );
+		$processor->next_tag( 'a' );
+		if ( 'home' === $processor->get_attribute( 'rel' ) ) {
+			$processor->set_attribute( 'aria-label', __( '(Home link, opens in a new tab)' ) );
+			$processor->set_attribute( 'target', $attributes['linkTarget'] );
+		}
+		$custom_logo = $processor->get_updated_html();
 	}
 
 	$classnames = array();

package/src/site-tagline/block.json

@@ -12,6 +12,7 @@
 			"type": "string"
 		}
 	},
+	"example": {},
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],

package/src/site-title/edit/index.js

@@ -111,12 +111,14 @@ export default function SiteTitleEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Make title link to home' ) }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
 					{ isLink && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {

package/src/social-link/index.php

@@ -59,15 +59,15 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$link .= esc_html( $label );
 	$link .= '</span></a></li>';
 
-	$w = new WP_HTML_Tag_Processor( $link );
-	$w->next_tag( 'a' );
+	$processor = new WP_HTML_Tag_Processor( $link );
+	$processor->next_tag( 'a' );
 	if ( $open_in_new_tab ) {
-		$w->set_attribute( 'rel', esc_attr( $rel ) . ' noopener nofollow' );
-		$w->set_attribute( 'target', '_blank' );
+		$processor->set_attribute( 'rel', esc_attr( $rel ) . ' noopener nofollow' );
+		$processor->set_attribute( 'target', '_blank' );
 	} elseif ( '' !== $rel ) {
-		$w->set_attribute( 'rel', esc_attr( $rel ) );
+		$processor->set_attribute( 'rel', esc_attr( $rel ) );
 	}
-	return $w;
+	return $processor->get_updated_html();
 }
 
 /**

package/src/social-links/edit.js

@@ -109,6 +109,7 @@ export function SocialLinksEdit( props ) {
 		allowedBlocks: ALLOWED_BLOCKS,
 		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
 		templateLock: false,
+		orientation: attributes.layout?.orientation ?? 'horizontal',
 		__experimentalAppenderTagName: 'li',
 	} );
 
@@ -196,6 +197,7 @@ export function SocialLinksEdit( props ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open links in new tab' ) }
 						checked={ openInNewTab }
 						onChange={ () =>
@@ -203,6 +205,7 @@ export function SocialLinksEdit( props ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show labels' ) }
 						checked={ showLabels }
 						onChange={ () =>

package/src/social-links/test/__snapshots__/edit.native.js.snap

@@ -2,25 +2,25 @@
 
 exports[`Social links block inserts block with the default icons and the WordPress link set as active 1`] = `
 "<!-- wp:social-links -->
-<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+<!-- wp:social-link {"service":"facebook"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"instagram\\"} /--></ul>
+<!-- wp:social-link {"service":"instagram"} /--></ul>
 <!-- /wp:social-links -->"
 `;
 
 exports[`Social links block shows active links correctly when not selected 1`] = `
 "<!-- wp:social-links -->
-<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+<!-- wp:social-link {"service":"facebook"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"instagram\\"} /--></ul>
+<!-- wp:social-link {"service":"instagram"} /--></ul>
 <!-- /wp:social-links -->
 
 <!-- wp:paragraph -->
@@ -30,11 +30,11 @@ exports[`Social links block shows active links correctly when not selected 1`] =
 
 exports[`Social links block shows the ghost placeholder when no icon is active 1`] = `
 "<!-- wp:social-links -->
-<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+<ul class="wp-block-social-links"><!-- wp:social-link {"service":"facebook"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"instagram\\"} /--></ul>
+<!-- wp:social-link {"service":"instagram"} /--></ul>
 <!-- /wp:social-links -->
 
 <!-- wp:paragraph -->
@@ -44,14 +44,14 @@ exports[`Social links block shows the ghost placeholder when no icon is active 1
 
 exports[`Social links block shows the social links bottom sheet when tapping on the inline appender 1`] = `
 "<!-- wp:social-links -->
-<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+<!-- wp:social-link {"service":"facebook"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"instagram\\"} /-->
+<!-- wp:social-link {"service":"instagram"} /-->
 
-<!-- wp:social-link-amazon {\\"url\\":\\"\\"} /--></ul>
+<!-- wp:social-link-amazon {"url":""} /--></ul>
 <!-- /wp:social-links -->"
 `;

package/src/social-links/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Social Icons block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"service":"facebook"} /-->
+
+<!-- wp:social-link {"service":"twitter"} /-->
+
+<!-- wp:social-link {"service":"instagram"} /--></ul>
+<!-- /wp:social-links --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Social Icons block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"service":"facebook"} /-->
+
+<!-- wp:social-link {"service":"twitter"} /-->
+
+<!-- wp:social-link {"service":"instagram"} /--></ul>
+<!-- /wp:social-links --></div>
+<!-- /wp:group -->"
+`;

package/src/social-links/test/transforms.native.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+import { Animated } from 'react-native';
+
+const block = 'Social Icons';
+const initialHtml = `
+<!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+<!-- wp:social-link {"service":"facebook"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
+<!-- wp:social-link {"service":"instagram"} /--></ul>
+<!-- /wp:social-links -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	beforeAll( () => {
+		// Mock call to Animated.sequence for animating colors.
+		jest.spyOn( Animated, 'sequence' ).mockImplementation( () => ( {
+			start: ( cb ) => cb(),
+		} ) );
+	} );
+
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/spacer/controls.native.js

@@ -17,16 +17,24 @@ import { __ } from '@wordpress/i18n';
 import { MIN_SPACER_SIZE } from './constants';
 import styles from './style.scss';
 
-const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };
+export const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };
 
-function Controls( { attributes, context, setAttributes } ) {
+function Controls( {
+	attributes,
+	context,
+	setAttributes,
+	presetWidth,
+	presetHeight,
+} ) {
 	const { orientation } = context;
 	const label = orientation !== 'horizontal' ? __( 'Height' ) : __( 'Width' );
 
-	const { height, width } = attributes;
+	const width = presetWidth || attributes.width;
+	const height = presetHeight || attributes.height;
 	const { valueToConvert, valueUnit: unit } =
 		getValueAndUnit( orientation !== 'horizontal' ? height : width ) || {};
 	const value = Number( valueToConvert );
+	const currentUnit = unit || 'px';
 
 	const setNewDimensions = ( nextValue, nextUnit ) => {
 		const valueWithUnit = `${ nextValue }${ nextUnit }`;
@@ -39,7 +47,7 @@ function Controls( { attributes, context, setAttributes } ) {
 
 	const handleChange = useCallback(
 		( nextValue ) => {
-			setNewDimensions( nextValue, unit );
+			setNewDimensions( nextValue, currentUnit );
 		},
 		[ height, width ]
 	);
@@ -72,7 +80,7 @@ function Controls( { attributes, context, setAttributes } ) {
 					onChange={ handleChange }
 					onUnitChange={ handleUnitChange }
 					units={ units }
-					unit={ unit }
+					unit={ currentUnit }
 					style={ styles.rangeCellContainer }
 				/>
 			</PanelBody>

package/src/spacer/edit.native.js

@@ -1,22 +1,30 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { useConvertUnitToMobile } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	isValueSpacingPreset,
+	useSetting,
+	getCustomValueFromPreset,
+	getPxFromCssUnit,
+} from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import Controls from './controls';
+import Controls, { DEFAULT_VALUES } from './controls';
 import styles from './editor.native.scss';
 
+const DEFAULT_FONT_SIZE = 16;
+
 const Spacer = ( {
 	attributes,
 	context,
@@ -24,8 +32,17 @@ const Spacer = ( {
 	isSelected,
 	getStylesFromColorScheme,
 } ) => {
+	const { height: screenHeight, width: screenWidth } = useWindowDimensions();
+	const cssUnitOptions = {
+		height: screenHeight,
+		width: screenWidth,
+		fontSize: DEFAULT_FONT_SIZE,
+	};
 	const { height, width } = attributes;
-
+	const spacingSizes = [
+		{ name: 0, slug: '0', size: 0 },
+		...( useSetting( 'spacing.spacingSizes' ) || [] ),
+	];
 	const { orientation } = context;
 	const defaultStyle = getStylesFromColorScheme(
 		styles.staticSpacer,
@@ -41,8 +58,29 @@ const Spacer = ( {
 		}
 	}, [] );
 
-	const convertedHeight = useConvertUnitToMobile( height );
-	const convertedWidth = useConvertUnitToMobile( width );
+	let convertedHeight = useConvertUnitToMobile( height );
+	let convertedWidth = useConvertUnitToMobile( width );
+	const presetValues = {};
+
+	if ( isValueSpacingPreset( height ) ) {
+		const heightValue = getCustomValueFromPreset( height, spacingSizes );
+		const parsedPresetHeightValue = parseFloat(
+			getPxFromCssUnit( heightValue, cssUnitOptions )
+		);
+
+		convertedHeight = parsedPresetHeightValue || DEFAULT_VALUES.px;
+		presetValues.presetHeight = convertedHeight;
+	}
+
+	if ( isValueSpacingPreset( width ) ) {
+		const widthValue = getCustomValueFromPreset( width, spacingSizes );
+		const parsedPresetWidthValue = parseFloat(
+			getPxFromCssUnit( widthValue, cssUnitOptions )
+		);
+
+		convertedWidth = parsedPresetWidthValue || DEFAULT_VALUES.px;
+		presetValues.presetWidth = convertedWidth;
+	}
 
 	return (
 		<View
@@ -58,6 +96,7 @@ const Spacer = ( {
 						attributes={ attributes }
 						context={ context }
 						setAttributes={ setAttributes }
+						{ ...presetValues }
 					/>
 				</InspectorControls>
 			) }

package/src/spacer/save.native.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, getSpacingPresetCssVar } from '@wordpress/block-editor';
+
+export default function save( { attributes: { height, width } } ) {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				style: {
+					height: getSpacingPresetCssVar( height ),
+					width: getSpacingPresetCssVar( width ),
+				},
+				'aria-hidden': true,
+			} ) }
+		/>
+	);
+}