@wordpress/block-library 8.6.0 → 8.8.0

package/src/image/edit.native.js

@@ -578,7 +578,7 @@ export class ImageEdit extends Component {
 				footerNote={
 					<>
 						{ __(
-							'Describe the purpose of the image. Leave empty if the image is purely decorative.'
+							'Describe the purpose of the image. Leave empty if decorative.'
 						) }{ ' ' }
 						<FooterMessageLink
 							href={

package/src/image/image.js

@@ -170,12 +170,18 @@ export default function Image( {
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
 		)
 		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
+	const canUploadMedia = !! mediaUpload;
 
 	// If an image is externally hosted, try to fetch the image data. This may
 	// fail if the image host doesn't allow CORS with the domain. If it works,
 	// we can enable a button in the toolbar to upload the image.
 	useEffect( () => {
-		if ( ! isExternalImage( id, url ) || ! isSelected || externalBlob ) {
+		if (
+			! isExternalImage( id, url ) ||
+			! isSelected ||
+			! canUploadMedia ||
+			externalBlob
+		) {
 			return;
 		}
 
@@ -185,7 +191,7 @@ export default function Image( {
 			.then( ( blob ) => setExternalBlob( blob ) )
 			// Do nothing, cannot upload.
 			.catch( () => {} );
-	}, [ id, url, isSelected, externalBlob ] );
+	}, [ id, url, isSelected, externalBlob, canUploadMedia ] );
 
 	// We need to show the caption when changes come from
 	// history navigation(undo/redo).
@@ -401,19 +407,18 @@ export default function Image( {
 					{ ! multiImageSelection && (
 						<TextareaControl
 							__nextHasNoMarginBottom
-							label={ __( 'Alt text (alternative text)' ) }
+							label={ __( 'Alternative text' ) }
 							value={ alt }
 							onChange={ updateAlt }
 							help={
 								<>
 									<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
 										{ __(
-											'Describe the purpose of the image'
+											'Describe the purpose of the image.'
 										) }
 									</ExternalLink>
-									{ __(
-										'Leave empty if the image is purely decorative.'
-									) }
+									<br />
+									{ __( 'Leave empty if decorative.' ) }
 								</>
 							}
 						/>
@@ -428,6 +433,9 @@ export default function Image( {
 						isResizable={ isResizable }
 						imageWidth={ naturalWidth }
 						imageHeight={ naturalHeight }
+						imageSizeHelp={ __(
+							'Select the size of the source image.'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>

package/src/image/index.php

@@ -14,13 +14,18 @@
  * @return string Returns the block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content ) {
+	$processor = new WP_HTML_Tag_Processor( $content );
+	$processor->next_tag( 'img' );
+
+	if ( $processor->get_attribute( 'src' ) === null ) {
+		return '';
+	}
+
 	if ( isset( $attributes['data-id'] ) ) {
 		// Add the data-id="$id" attribute to the img element
 		// to provide backwards compatibility for the Gallery Block,
 		// which now wraps Image Blocks within innerBlocks.
 		// The data-id attribute is added in a core/gallery `render_block_data` hook.
-		$processor = new WP_HTML_Tag_Processor( $content );
-		$processor->next_tag( 'img' );
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
 		$content = $processor->get_updated_html();
 	}

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

@@ -42,7 +42,7 @@ exports[`Image block transformations to Group block 1`] = `
 
 exports[`Image block transformations to Media & Text block 1`] = `
 "<!-- wp:media-text {"mediaId":1,"mediaType":"image"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
 <p></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->"

package/src/index.js

@@ -45,6 +45,9 @@ import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as commentsTitle from './comments-title';
 import * as cover from './cover';
+import * as details from './details';
+import * as detailsContent from './details-content';
+import * as detailsSummary from './details-summary';
 import * as embed from './embed';
 import * as file from './file';
 import * as gallery from './gallery';
@@ -121,8 +124,8 @@ import isBlockMetadataExperimental from './utils/is-block-metadata-experimental'
 /**
  * Function to get all the block-library blocks in an array
  */
-const getAllBlocks = () =>
-	[
+const getAllBlocks = () => {
+	const blocks = [
 		// Common blocks are grouped at the top to prioritize their display
 		// in various contexts — like the inserter and auto-complete components.
 		paragraph,
@@ -224,7 +227,14 @@ const getAllBlocks = () =>
 		termDescription,
 		queryTitle,
 		postAuthorBiography,
-	].filter( Boolean );
+	];
+	if ( window?.__experimentalEnableDetailsBlocks ) {
+		blocks.push( details );
+		blocks.push( detailsContent );
+		blocks.push( detailsSummary );
+	}
+	return blocks.filter( Boolean );
+};
 
 /**
  * Function to get all the core blocks in an array.

package/src/latest-comments/style.scss

@@ -1,7 +1,7 @@
 // Lower specificity - target list element.
 ol.wp-block-latest-comments {
 	// Removes left spacing in Customizer Widgets screen.
-	// Due to low specificity this will be safely overriden
+	// Due to low specificity this will be safely overridden
 	// by default wp-block layout styles in the Post/Site editor
 	margin-left: 0;
 

package/src/latest-posts/edit.js

@@ -289,6 +289,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							imageWidth={ defaultImageWidth }
 							imageHeight={ defaultImageHeight }
 							imageSizeOptions={ imageSizeOptions }
+							imageSizeHelp={ __(
+								'Select the size of the source image.'
+							) }
 							onChangeImage={ ( value ) =>
 								setAttributes( {
 									featuredImageSizeSlug: value,

package/src/media-text/block.json

@@ -10,7 +10,7 @@
 	"attributes": {
 		"align": {
 			"type": "string",
-			"default": "wide"
+			"default": "none"
 		},
 		"mediaAlt": {
 			"type": "string",

package/src/media-text/deprecated.js

@@ -13,6 +13,7 @@ import {
 	useInnerBlocksProps,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -30,6 +31,19 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
 		: {};
 };
 
+const v6ImageFillStyles = ( url, focalPoint ) => {
+	return url
+		? {
+				backgroundImage: `url(${ url })`,
+				backgroundPosition: focalPoint
+					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+							focalPoint.y * 100
+					  ) }%`
+					: `50% 50%`,
+		  }
+		: {};
+};
+
 const DEFAULT_MEDIA_WIDTH = 50;
 const noop = () => {};
 
@@ -49,6 +63,20 @@ const migrateCustomColors = ( attributes ) => {
 	};
 };
 
+// After align attribute's default was updated this function explicitly sets
+// the align value for deprecated blocks to the `wide` value which was default
+// for their versions of this block.
+const migrateDefaultAlign = ( attributes ) => {
+	if ( attributes.align ) {
+		return attributes;
+	}
+
+	return {
+		...attributes,
+		align: 'wide',
+	};
+};
+
 const baseAttributes = {
 	align: {
 		type: 'string',
@@ -133,6 +161,40 @@ const v4ToV5BlockAttributes = {
 	},
 };
 
+const v6Attributes = {
+	...v4ToV5BlockAttributes,
+	mediaAlt: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure img',
+		attribute: 'alt',
+		default: '',
+		__experimentalRole: 'content',
+	},
+	mediaId: {
+		type: 'number',
+		__experimentalRole: 'content',
+	},
+	mediaUrl: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure video,figure img',
+		attribute: 'src',
+		__experimentalRole: 'content',
+	},
+	href: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure a',
+		attribute: 'href',
+		__experimentalRole: 'content',
+	},
+	mediaType: {
+		type: 'string',
+		__experimentalRole: 'content',
+	},
+};
+
 const v4ToV5Supports = {
 	anchor: true,
 	align: [ 'wide', 'full' ],
@@ -143,6 +205,166 @@ const v4ToV5Supports = {
 	},
 };
 
+const v6Supports = {
+	...v4ToV5Supports,
+	color: {
+		gradients: true,
+		link: true,
+		__experimentalDefaultControls: {
+			background: true,
+			text: true,
+		},
+	},
+	spacing: {
+		margin: true,
+		padding: true,
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+};
+
+// Version with wide as the default alignment.
+// See: https://github.com/WordPress/gutenberg/pull/48404
+const v6 = {
+	attributes: v6Attributes,
+	supports: v6Supports,
+	save( { attributes } ) {
+		const {
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+			linkClass,
+			href,
+			linkTarget,
+			rel,
+		} = attributes;
+		const mediaSizeSlug =
+			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+		const newRel = isEmpty( rel ) ? undefined : rel;
+
+		const imageClasses = classnames( {
+			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+		} );
+
+		let image = (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || null }
+			/>
+		);
+
+		if ( href ) {
+			image = (
+				<a
+					className={ linkClass }
+					href={ href }
+					target={ linkTarget }
+					rel={ newRel }
+				>
+					{ image }
+				</a>
+			);
+		}
+
+		const mediaTypeRenders = {
+			image: () => image,
+			video: () => <video controls src={ mediaUrl } />,
+		};
+		const className = classnames( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
+				verticalAlignment,
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v6ImageFillStyles( mediaUrl, focalPoint )
+			: {};
+
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			gridTemplateColumns,
+		};
+
+		if ( 'right' === mediaPosition ) {
+			return (
+				<div { ...useBlockProps.save( { className, style } ) }>
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'wp-block-media-text__content',
+						} ) }
+					/>
+					<figure
+						className="wp-block-media-text__media"
+						style={ backgroundStyles }
+					>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+				</div>
+			);
+		}
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+			</div>
+		);
+	},
+	migrate: migrateDefaultAlign,
+	isEligible( attributes, innerBlocks, { block } ) {
+		const { attributes: finalizedAttributes } = block;
+		// When the align attribute defaults to none, valid block markup should
+		// not contain any alignment CSS class. Unfortunately, this
+		// deprecation's version of the block won't be invalidated due to the
+		// alignwide class still being in the markup. That is because the custom
+		// CSS classname support picks it up and adds it to the className
+		// attribute. At the time of parsing, the className attribute won't
+		// contain the alignwide class, hence the need to check the finalized
+		// block attributes.
+		return (
+			attributes.align === undefined &&
+			!! finalizedAttributes.className?.includes( 'alignwide' )
+		);
+	},
+};
+
+// Version with non-rounded background position attribute for focal point.
+// See: https://github.com/WordPress/gutenberg/pull/33915
 const v5 = {
 	attributes: v4ToV5BlockAttributes,
 	supports: v4ToV5Supports,
@@ -252,9 +474,11 @@ const v5 = {
 			</div>
 		);
 	},
+	migrate: migrateDefaultAlign,
 };
 
 // Version with CSS grid
+// See: https://github.com/WordPress/gutenberg/pull/40806
 const v4 = {
 	attributes: v4ToV5BlockAttributes,
 	supports: v4ToV5Supports,
@@ -348,8 +572,11 @@ const v4 = {
 			</div>
 		);
 	},
+	migrate: migrateDefaultAlign,
 };
 
+// Version with ad-hoc color attributes
+// See: https://github.com/WordPress/gutenberg/pull/21169
 const v3 = {
 	attributes: {
 		...baseAttributes,
@@ -399,7 +626,7 @@ const v3 = {
 			type: 'object',
 		},
 	},
-	migrate: migrateCustomColors,
+	migrate: compose( migrateCustomColors, migrateDefaultAlign ),
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -496,6 +723,8 @@ const v3 = {
 	},
 };
 
+// Version with stack on mobile off by default
+// See: https://github.com/WordPress/gutenberg/pull/14364
 const v2 = {
 	attributes: {
 		...baseAttributes,
@@ -521,7 +750,7 @@ const v2 = {
 			type: 'object',
 		},
 	},
-	migrate: migrateCustomColors,
+	migrate: compose( migrateCustomColors, migrateDefaultAlign ),
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -596,6 +825,8 @@ const v2 = {
 	},
 };
 
+// Version without the wp-image-#### class on image
+// See: https://github.com/WordPress/gutenberg/pull/11922
 const v1 = {
 	attributes: {
 		...baseAttributes,
@@ -612,6 +843,7 @@ const v1 = {
 			attribute: 'src',
 		},
 	},
+	migrate: migrateDefaultAlign,
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -663,4 +895,4 @@ const v1 = {
 	},
 };
 
-export default [ v5, v4, v3, v2, v1 ];
+export default [ v6, v5, v4, v3, v2, v1 ];

package/src/media-text/edit.js

@@ -270,17 +270,16 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			{ mediaType === 'image' && (
 				<TextareaControl
 					__nextHasNoMarginBottom
-					label={ __( 'Alt text (alternative text)' ) }
+					label={ __( 'Alternative text' ) }
 					value={ mediaAlt }
 					onChange={ onMediaAltChange }
 					help={
 						<>
 							<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-								{ __( 'Describe the purpose of the image' ) }
+								{ __( 'Describe the purpose of the image.' ) }
 							</ExternalLink>
-							{ __(
-								'Leave empty if the image is purely decorative.'
-							) }
+							<br />
+							{ __( 'Leave empty if decorative.' ) }
 						</>
 					}
 				/>
@@ -291,7 +290,9 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					slug={ mediaSizeSlug }
 					imageSizeOptions={ imageSizeOptions }
 					isResizable={ false }
-					imageSizeHelp={ __( 'Select which image size to load.' ) }
+					imageSizeHelp={ __(
+						'Select the size of the source image.'
+					) }
 				/>
 			) }
 			{ mediaUrl && (

package/src/media-text/media-container.js

@@ -20,11 +20,7 @@ import { useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import icon from './media-container-icon';
+import { media as icon } from '@wordpress/icons';
 
 /**
  * Constants

package/src/media-text/media-container.native.js

@@ -26,12 +26,12 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { media as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-import icon from './media-container-icon';
 import SvgIconRetry from './icon-retry';
 
 /**

package/src/media-text/test/__snapshots__/transforms.native.js.snap

@@ -3,7 +3,7 @@
 exports[`Media & Text block transformations with Image 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:media-text {"mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Mountain</p>
 <!-- /wp:paragraph --></div></div>
@@ -22,7 +22,7 @@ exports[`Media & Text block transformations with Image to Cover block 1`] = `
 
 exports[`Media & Text block transformations with Image to Group block 1`] = `
 "<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide"><!-- wp:media-text {"mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Mountain</p>
 <!-- /wp:paragraph --></div></div>
@@ -39,7 +39,7 @@ exports[`Media & Text block transformations with Image to Image block 1`] = `
 exports[`Media & Text block transformations with Video 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:media-text {"mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Cloudup</p>
 <!-- /wp:paragraph --></div></div>
@@ -58,7 +58,7 @@ exports[`Media & Text block transformations with Video to Cover block 1`] = `
 
 exports[`Media & Text block transformations with Video to Group block 1`] = `
 "<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide"><!-- wp:media-text {"mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Cloudup</p>
 <!-- /wp:paragraph --></div></div>

package/src/navigation/block.json

@@ -87,7 +87,6 @@
 		"showSubmenuIcon": "showSubmenuIcon",
 		"openSubmenusOnClick": "openSubmenusOnClick",
 		"style": "style",
-		"orientation": "orientation",
 		"maxNestingLevel": "maxNestingLevel"
 	},
 	"supports": {

package/src/navigation/deprecated.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -331,22 +326,23 @@ const migrateTypographyPresets = function ( attributes ) {
 		...attributes,
 		style: {
 			...attributes.style,
-			typography: mapValues(
-				attributes.style.typography,
-				( value, key ) => {
-					const prefix = TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ];
-					if ( prefix && value.startsWith( prefix ) ) {
-						const newValue = value.slice( prefix.length );
-						if (
-							'textDecoration' === key &&
-							'strikethrough' === newValue
-						) {
-							return 'line-through';
+			typography: Object.fromEntries(
+				Object.entries( attributes.style.typography ?? {} ).map(
+					( [ key, value ] ) => {
+						const prefix = TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ];
+						if ( prefix && value.startsWith( prefix ) ) {
+							const newValue = value.slice( prefix.length );
+							if (
+								'textDecoration' === key &&
+								'strikethrough' === newValue
+							) {
+								return [ key, 'line-through' ];
+							}
+							return [ key, newValue ];
 						}
-						return newValue;
+						return [ key, value ];
 					}
-					return value;
-				}
+				)
 			),
 		},
 	};

package/src/navigation/edit/index.js

@@ -477,19 +477,6 @@ function Navigation( {
 		showClassicMenuConversionNotice,
 	] );
 
-	// Spacer block needs orientation from context. This is a patch until
-	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
-	useEffect( () => {
-		if ( orientation ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { orientation } );
-		}
-	}, [
-		orientation,
-		__unstableMarkNextChangeAsNotPersistent,
-		setAttributes,
-	] );
-
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
 			return;