@wordpress/block-library 9.44.1-next.v.202604201441.0 → 9.45.0

package/src/embed/edit.js

@@ -1,9 +1,30 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	useBlockProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { View } from '@wordpress/primitives';
+import { Caption } from '../utils/caption';
+
 /**
  * Internal dependencies
  */
 import {
 	createUpgradedEmbedBlock,
+	findMoreSuitableBlock,
 	getClassNames,
+	rewriteXToTwitter,
 	removeAspectRatioClasses,
 	fallback,
 	getEmbedInfoByProvider,
@@ -15,23 +36,6 @@ import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedPreview from './embed-preview';
 
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useBlockProps } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { View } from '@wordpress/primitives';
-import { getAuthority } from '@wordpress/url';
-import { Caption } from '../utils/caption';
-
 const EmbedEdit = ( props ) => {
 	const {
 		attributes: {
@@ -58,6 +62,8 @@ const EmbedEdit = ( props ) => {
 	const [ url, setURL ] = useState( attributesUrl );
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const { invalidateResolution } = useDispatch( coreStore );
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	const {
 		preview,
@@ -131,63 +137,61 @@ const EmbedEdit = ( props ) => {
 		} );
 	}
 
+	// When the preview can't be embedded, retry without any trailing slash.
 	useEffect( () => {
-		if ( preview?.html || ! cannotEmbed || ! hasResolved ) {
+		if ( ! cannotEmbed || ! hasResolved || ! attributesUrl ) {
 			return;
 		}
 
-		// At this stage, we're not fetching the preview and know it can't be embedded,
-		// so try removing any trailing slash, and resubmit.
 		const newURL = attributesUrl.replace( /\/$/, '' );
+		if ( newURL === attributesUrl ) {
+			return;
+		}
+
 		setURL( newURL );
 		setIsEditingURL( false );
+		__unstableMarkNextChangeAsNotPersistent();
 		setAttributes( { url: newURL } );
 	}, [
-		preview?.html,
 		attributesUrl,
 		cannotEmbed,
 		hasResolved,
 		setAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
-	// Try a different provider in case the embed url is not supported.
+	// Apply preview-derived attributes once the preview resolves.
 	useEffect( () => {
-		if ( ! cannotEmbed || fetching || ! url ) {
+		if ( ! preview || isEditingURL ) {
 			return;
 		}
 
-		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
-		if ( getAuthority( url ) === 'x.com' ) {
-			const newURL = new URL( url );
-			newURL.host = 'twitter.com';
-			setAttributes( { url: newURL.toString() } );
-		}
-	}, [ url, cannotEmbed, fetching, setAttributes ] );
+		const mergedAttributes = getMergedAttributes();
 
-	// Handle incoming preview.
-	useEffect( () => {
-		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview,
-			// we set the attributes derived from the preview data.
-			const mergedAttributes = getMergedAttributes();
-			const hasChanges = Object.keys( mergedAttributes ).some(
-				( key ) => mergedAttributes[ key ] !== attributes[ key ]
+		if ( onReplace ) {
+			const upgradedBlock = createUpgradedEmbedBlock(
+				props,
+				mergedAttributes
 			);
 
-			if ( hasChanges ) {
-				setAttributes( mergedAttributes );
+			if ( upgradedBlock ) {
+				// Mutate via setAttributes; onReplace would remount the
+				// block and clear the URL textbox on undo.
+				__unstableMarkNextChangeAsNotPersistent();
+				setAttributes( upgradedBlock.attributes );
+				return;
 			}
+		}
 
-			if ( onReplace ) {
-				const upgradedBlock = createUpgradedEmbedBlock(
-					props,
-					mergedAttributes
-				);
+		const hasChanges = Object.keys( mergedAttributes ).some(
+			( key ) => mergedAttributes[ key ] !== attributes[ key ]
+		);
 
-				if ( upgradedBlock ) {
-					onReplace( upgradedBlock );
-				}
-			}
+		if ( hasChanges ) {
+			// Merge into the URL-submit undo level so a single undo
+			// reverts both the submit and the preview-driven attributes.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( mergedAttributes );
 		}
 	}, [ preview, isEditingURL ] );
 
@@ -219,14 +223,19 @@ const EmbedEdit = ( props ) => {
 							event.preventDefault();
 						}
 
-						// If the embed URL was changed, we need to reset the aspect ratio class.
-						// To do this we have to remove the existing ratio class so it can be recalculated.
+						const rewrittenURL = rewriteXToTwitter( url );
 						const blockClass = removeAspectRatioClasses(
 							attributes.className
 						);
 
+						setURL( rewrittenURL );
+						setAttributes( {
+							url: rewrittenURL,
+							...findMoreSuitableBlock( rewrittenURL )
+								?.attributes,
+							className: blockClass,
+						} );
 						setIsEditingURL( false );
-						setAttributes( { url, className: blockClass } );
 					} }
 					value={ url }
 					cannotEmbed={ cannotEmbed }

package/src/embed/edit.native.js

@@ -1,21 +1,3 @@
-/**
- * Internal dependencies
- */
-import {
-	createUpgradedEmbedBlock,
-	getClassNames,
-	removeAspectRatioClasses,
-	fallback,
-	getEmbedInfoByProvider,
-	getMergedAttributesWithPreview,
-} from './util';
-import EmbedControls from './embed-controls';
-import { embedContentIcon } from './icons';
-import EmbedLoading from './embed-loading';
-import EmbedPlaceholder from './embed-placeholder';
-import EmbedPreview from './embed-preview';
-import EmbedLinkSettings from './embed-link-settings';
-
 /**
  * External dependencies
  */
@@ -33,7 +15,25 @@ import {
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
-import { getAuthority } from '@wordpress/url';
+/**
+ * Internal dependencies
+ */
+import {
+	createUpgradedEmbedBlock,
+	findMoreSuitableBlock,
+	getClassNames,
+	rewriteXToTwitter,
+	removeAspectRatioClasses,
+	fallback,
+	getEmbedInfoByProvider,
+	getMergedAttributesWithPreview,
+} from './util';
+import EmbedControls from './embed-controls';
+import { embedContentIcon } from './icons';
+import EmbedLoading from './embed-loading';
+import EmbedPlaceholder from './embed-placeholder';
+import EmbedPreview from './embed-preview';
+import EmbedLinkSettings from './embed-link-settings';
 
 // The inline preview feature will be released progressible, for this reason
 // the embed will only be considered previewable for the following providers list.
@@ -77,6 +77,8 @@ const EmbedEdit = ( props ) => {
 	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] =
 		useState( isEditingURL );
 	const { invalidateResolution } = useDispatch( coreStore );
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	const { preview, fetching, themeSupportsResponsive, cannotEmbed } =
 		useSelect(
@@ -150,50 +152,61 @@ const EmbedEdit = ( props ) => {
 		} );
 	};
 
+	// When the preview can't be embedded, retry without any trailing slash.
 	useEffect( () => {
-		if ( ! preview?.html || ! cannotEmbed || fetching ) {
+		if ( ! cannotEmbed || fetching || ! url ) {
 			return;
 		}
-		// At this stage, we're not fetching the preview and know it can't be embedded,
-		// so try removing any trailing slash, and resubmit.
+
 		const newURL = url.replace( /\/$/, '' );
+		if ( newURL === url ) {
+			return;
+		}
+
 		setIsEditingURL( false );
+		__unstableMarkNextChangeAsNotPersistent();
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, url, cannotEmbed, fetching ] );
+	}, [
+		url,
+		cannotEmbed,
+		fetching,
+		setAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
 
-	// Try a different provider in case the embed url is not supported.
+	// Apply preview-derived attributes once the preview resolves.
 	useEffect( () => {
-		if ( ! cannotEmbed || fetching || ! url ) {
+		if ( ! preview || isEditingURL ) {
 			return;
 		}
 
-		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
-		if ( getAuthority( url ) === 'x.com' ) {
-			const newURL = new URL( url );
-			newURL.host = 'twitter.com';
-			setAttributes( { url: newURL.toString() } );
-		}
-	}, [ url, cannotEmbed, fetching, setAttributes ] );
+		const mergedAttributes = getMergedAttributes();
 
-	// Handle incoming preview.
-	useEffect( () => {
-		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview,
-			// we set the attributes derived from the preview data.
-			const mergedAttributes = getMergedAttributes();
-			setAttributes( mergedAttributes );
+		if ( onReplace ) {
+			const upgradedBlock = createUpgradedEmbedBlock(
+				props,
+				mergedAttributes
+			);
 
-			if ( onReplace ) {
-				const upgradedBlock = createUpgradedEmbedBlock(
-					props,
-					mergedAttributes
-				);
-
-				if ( upgradedBlock ) {
-					onReplace( upgradedBlock );
-				}
+			if ( upgradedBlock ) {
+				// Mutate via setAttributes; onReplace would remount the
+				// block and clear the URL textbox on undo.
+				__unstableMarkNextChangeAsNotPersistent();
+				setAttributes( upgradedBlock.attributes );
+				return;
 			}
 		}
+
+		const hasChanges = Object.keys( mergedAttributes ).some(
+			( key ) => mergedAttributes[ key ] !== attributes[ key ]
+		);
+
+		if ( hasChanges ) {
+			// Merge into the URL-submit undo level so a single undo
+			// reverts both the submit and the preview-driven attributes.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( mergedAttributes );
+		}
 	}, [ preview, isEditingURL ] );
 
 	useEffect(
@@ -203,19 +216,20 @@ const EmbedEdit = ( props ) => {
 
 	const onEditURL = useCallback(
 		( value ) => {
-			// If the embed URL was changed, we need to reset the aspect ratio class.
-			// To do this we have to remove the existing ratio class so it can be recalculated.
-			if ( attributes.url !== value ) {
-				const blockClass = removeAspectRatioClasses(
-					attributes.className
-				);
-				setAttributes( { className: blockClass } );
-			}
+			const rewrittenURL = rewriteXToTwitter( value );
+			const urlChanged = attributes.url !== rewrittenURL;
 
 			// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
 			// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
 			// for creating the new block.
-			setAttributes( { url: value } );
+			setAttributes( {
+				url: rewrittenURL,
+				...findMoreSuitableBlock( rewrittenURL )?.attributes,
+				// If the embed URL was changed, reset the aspect ratio class so it can be recalculated.
+				...( urlChanged && {
+					className: removeAspectRatioClasses( attributes.className ),
+				} ),
+			} );
 			setIsEditingURL( false );
 		},
 		[ attributes, setAttributes ]

package/src/embed/transforms.js

@@ -7,7 +7,11 @@ import { createBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import metadata from './block.json';
-import { removeAspectRatioClasses } from './util';
+import {
+	findMoreSuitableBlock,
+	rewriteXToTwitter,
+	removeAspectRatioClasses,
+} from './util';
 
 const { name: EMBED_BLOCK } = metadata;
 
@@ -23,8 +27,10 @@ const transforms = {
 				/^\s*(https?:\/\/\S+)\s*$/i.test( node.textContent ) &&
 				node.textContent?.match( /https/gi )?.length === 1,
 			transform: ( node ) => {
+				const url = rewriteXToTwitter( node.textContent.trim() );
 				return createBlock( EMBED_BLOCK, {
-					url: node.textContent.trim(),
+					url,
+					...findMoreSuitableBlock( url )?.attributes,
 				} );
 			},
 		},

package/src/embed/util.js

@@ -14,6 +14,7 @@ import {
 	getBlockType,
 	getBlockVariations,
 } from '@wordpress/blocks';
+import { getAuthority } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -60,6 +61,22 @@ export const findMoreSuitableBlock = ( url ) =>
 		matchesPatterns( url, patterns )
 	);
 
+/**
+ * Rewrites `x.com` URLs to `twitter.com` as a workaround while the
+ * WordPress oEmbed registry lacks an X provider. See: https://core.trac.wordpress.org/ticket/59142.
+ *
+ * @param {string} url The URL to rewrite.
+ * @return {string} The (possibly) rewritten URL.
+ */
+export function rewriteXToTwitter( url ) {
+	if ( ! url || getAuthority( url ) !== 'x.com' ) {
+		return url;
+	}
+	const rewritten = new URL( url );
+	rewritten.host = 'twitter.com';
+	return rewritten.toString();
+}
+
 export const isFromWordPress = ( html ) =>
 	html && html.includes( 'class="wp-embedded-content"' );
 

package/src/form/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/form",
 	"title": "Form",
-	"category": "common",
+	"category": "widgets",
 	"allowedBlocks": [
 		"core/paragraph",
 		"core/heading",

package/src/form-input/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/form-input",
 	"title": "Input Field",
-	"category": "common",
+	"category": "widgets",
 	"ancestor": [ "core/form" ],
 	"description": "The basic building block for forms.",
 	"keywords": [ "input", "form" ],

package/src/form-submission-notification/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/form-submission-notification",
 	"title": "Form Submission Notification",
-	"category": "common",
+	"category": "widgets",
 	"ancestor": [ "core/form" ],
 	"description": "Provide a notification message after the form has been submitted.",
 	"keywords": [ "form", "feedback", "notification", "message" ],

package/src/form-submit-button/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/form-submit-button",
 	"title": "Form Submit Button",
-	"category": "common",
+	"category": "widgets",
 	"icon": "button",
 	"ancestor": [ "core/form" ],
 	"allowedBlocks": [ "core/buttons", "core/button" ],

package/src/image/edit.js

@@ -353,7 +353,11 @@ export function ImageEdit( {
 
 	const isSideloading = useSelect(
 		( select ) => {
-			if ( ! window.__clientSideMediaProcessing || ! id ) {
+			if (
+				( ! window.__clientSideMediaProcessing &&
+					! window.__heicUploadSupport ) ||
+				! id
+			) {
 				return false;
 			}
 			return select( uploadStore ).isUploadingById( id );

package/src/image/edit.native.js

@@ -34,7 +34,7 @@ import {
 	BottomSheetSelectControl,
 	FooterMessageControl,
 	FooterMessageLink,
-	Badge,
+	WCBadge,
 } from '@wordpress/components';
 import {
 	BlockCaption,
@@ -803,7 +803,7 @@ export class ImageEdit extends Component {
 		}
 
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
-			<Badge label={ badgeLabelText } show={ badgeLabelShown }>
+			<WCBadge label={ badgeLabelText } show={ badgeLabelShown }>
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onImagePressed }
@@ -886,7 +886,7 @@ export class ImageEdit extends Component {
 					onBlur={ this.props.onBlur } // Always assign onBlur as props.
 					insertBlocksAfter={ this.props.insertBlocksAfter }
 				/>
-			</Badge>
+			</WCBadge>
 		);
 
 		return (

package/src/image/image.js

@@ -70,9 +70,12 @@ import {
 } from './constants';
 import { evalAspectRatio, mediaPosition } from './utils';
 
-const { DimensionsTool, ResolutionTool, mediaEditKey } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	DimensionsTool,
+	ResolutionTool,
+	mediaEditKey,
+	openMediaEditorModalKey,
+} = unlock( blockEditorPrivateApis );
 
 const scaleOptions = [
 	{
@@ -390,7 +393,21 @@ export default function Image( {
 		[ clientId ]
 	);
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
-	const onNavigateToEntityRecord = getSettings().onNavigateToEntityRecord;
+	const settings = getSettings();
+	const { onNavigateToEntityRecord } = settings;
+	const openMediaEditorModal = settings[ openMediaEditorModalKey ];
+
+	const handleMediaUpdate = useCallback(
+		( { id: newId, url: newUrl } ) => {
+			if ( typeof newId === 'number' && newId !== id ) {
+				setAttributes( {
+					id: newId,
+					url: newUrl ?? url,
+				} );
+			}
+		},
+		[ id, url, setAttributes ]
+	);
 
 	const {
 		replaceBlocks,
@@ -875,7 +892,15 @@ export default function Image( {
 					) }
 					{ allowCrop && (
 						<ToolbarButton
-							onClick={ () => setIsEditingImage( true ) }
+							onClick={
+								openMediaEditorModal && id
+									? () =>
+											openMediaEditorModal( {
+												id,
+												onUpdate: handleMediaUpdate,
+											} )
+									: () => setIsEditingImage( true )
+							}
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>

package/src/index.js

@@ -137,11 +137,11 @@ import * as socialLinks from './social-links';
 import * as spacer from './spacer';
 import * as tab from './tab';
 import * as tabPanel from './tab-panel';
+import * as tabPanels from './tab-panels';
 import * as table from './table';
 import * as tableOfContents from './table-of-contents';
+import * as tabList from './tab-list';
 import * as tabs from './tabs';
-import * as tabsMenu from './tabs-menu';
-import * as tabsMenuItem from './tabs-menu-item';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termCount from './term-count';
@@ -288,10 +288,10 @@ const getAllBlocks = () => {
 
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		blocks.push( tab );
+		blocks.push( tabList );
 		blocks.push( tabs );
-		blocks.push( tabsMenu );
-		blocks.push( tabsMenuItem );
 		blocks.push( tabPanel );
+		blocks.push( tabPanels );
 		blocks.push( playlist );
 		blocks.push( playlistTrack );
 	}

package/src/math/edit.js

@@ -21,7 +21,7 @@ import { speak } from '@wordpress/a11y';
  */
 import { unlock } from '../lock-unlock';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 	const { latex, mathML } = attributes;
@@ -116,7 +116,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 							/>
 							{ error && (
 								<>
-									<Badge
+									<WCBadge
 										intent="error"
 										className="wp-block-math__error"
 									>
@@ -125,7 +125,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 											__( 'Error: %s' ),
 											error
 										) }
-									</Badge>
+									</WCBadge>
 									<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
 								</>
 							) }

package/src/navigation/edit/accessible-description.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 export default function AccessibleDescription( { id, children } ) {
 	return (

package/src/navigation/edit/overlay-template-part-selector.js

@@ -11,7 +11,7 @@ import {
 	FlexBlock,
 	FlexItem,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -351,7 +351,7 @@ export default function OverlayTemplatePartSelector( {
 				alignment="flex-start"
 				className="wp-block-navigation__overlay-help-text-wrapper"
 			>
-				<Text
+				<WCText
 					variant="muted"
 					isBlock
 					className="wp-block-navigation__overlay-help-text"
@@ -359,7 +359,7 @@ export default function OverlayTemplatePartSelector( {
 					{ __(
 						'An overlay template allows you to customize the appearance of the dialog that opens when the menu button is pressed.'
 					) }
-				</Text>
+				</WCText>
 			</HStack>
 		</div>
 	);

package/src/navigation-link/edit.js

@@ -8,11 +8,7 @@ import clsx from 'clsx';
  */
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	ToolbarButton,
-	ToolbarGroup,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import {
@@ -26,6 +22,7 @@ import {
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
+import { VisuallyHidden } from '@wordpress/ui';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 

package/src/navigation-link/link-ui/dialog-wrapper.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Button, VisuallyHidden } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Shared BackButton component for consistent navigation across LinkUI sub-components.