@wordpress/editor 14.44.1-next.v.202604201441.0 → 14.45.0

package/src/components/post-content-information/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalText as Text } from '@wordpress/components';
+import { __experimentalText as WCText } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { count as wordCount } from '@wordpress/wordcount';
@@ -76,14 +76,14 @@ export function PostContentInformationUI( { postContent } ) {
 			  );
 	return (
 		<div className="editor-post-content-information">
-			<Text>
+			<WCText>
 				{ sprintf(
 					/* translators: 1: How many words a post has. 2: the number of minutes to read the post (e.g. 130 words, 2 minutes read time.) */
 					__( '%1$s, %2$s read time.' ),
 					wordsCountText,
 					minutesText
 				) }
-			</Text>
+			</WCText>
 		</div>
 	);
 }

package/src/components/post-excerpt/panel.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	Dropdown,
 	Button,
 	__experimentalVStack as VStack,
@@ -185,9 +185,9 @@ function PrivateExcerpt() {
 		return false;
 	}
 	const excerptText = !! excerpt && (
-		<Text align="left" numberOfLines={ 4 } truncate={ allowEditing }>
+		<WCText align="left" numberOfLines={ 4 } truncate={ allowEditing }>
 			{ decodeEntities( excerpt ) }
-		</Text>
+		</WCText>
 	);
 	if ( ! allowEditing ) {
 		return excerptText;

package/src/components/post-last-edited-panel/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalText as Text } from '@wordpress/components';
+import { __experimentalText as WCText } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { humanTimeDiff } from '@wordpress/date';
@@ -22,13 +22,13 @@ export default function PostLastEditedPanel() {
 	}
 	return (
 		<div className="editor-post-last-edited-panel">
-			<Text>
+			<WCText>
 				{ sprintf(
 					// translators: %s: Human-readable time difference, e.g. "2 days ago".
 					__( 'Last edited %s.' ),
 					humanTimeDiff( modified )
 				) }
-			</Text>
+			</WCText>
 		</div>
 	);
 }

package/src/components/post-preview-button/index.js

@@ -2,11 +2,12 @@
  * WordPress dependencies
  */
 import { renderToString } from '@wordpress/element';
-import { Button, Path, SVG, VisuallyHidden } from '@wordpress/components';
+import { Button, Path, SVG } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
 import { store as coreStore } from '@wordpress/core-data';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -196,7 +197,7 @@ export default function PostPreviewButton( {
 			{ textContent || (
 				<>
 					{ _x( 'Preview', 'imperative verb' ) }
-					<VisuallyHidden as="span">
+					<VisuallyHidden render={ <span /> }>
 						{
 							/* translators: accessibility text */
 							__( '(opens in a new tab)' )

package/src/components/post-publish-button/index.js

@@ -101,18 +101,19 @@ export class PostPublishButton extends Component {
 		} = this.props;
 
 		const isButtonDisabled =
-			( isSaving ||
+			isPostSavingLocked ||
+			( ( isSaving ||
 				! isSaveable ||
-				isPostSavingLocked ||
 				( ! isPublishable && ! forceIsDirty ) ) &&
-			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges );
+				( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges ) );
 
 		const isToggleDisabled =
-			( isPublished ||
+			isPostSavingLocked ||
+			( ( isPublished ||
 				isSaving ||
 				! isSaveable ||
 				( ! isPublishable && ! forceIsDirty ) ) &&
-			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges );
+				( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges ) );
 
 		// If the new status has not changed explicitly, we derive it from
 		// other factors, like having a publish action, etc.. We need to preserve

package/src/components/post-publish-button/label.js

@@ -29,6 +29,7 @@ export default function PublishButtonLabel() {
 		postStatusHasChanged,
 		postStatus,
 		postType,
+		isPostSavingLocked,
 	} = useSelect( ( select ) => {
 		const {
 			isCurrentPostPublished,
@@ -52,6 +53,7 @@ export default function PublishButtonLabel() {
 			isAutosaving: isAutosavingPost(),
 			hasNonPostEntityChanges:
 				select( editorStore ).hasNonPostEntityChanges(),
+			isPostSavingLocked: select( editorStore ).isPostSavingLocked(),
 			postStatusHasChanged: !! getPostEdits()?.status,
 			postStatus: getEditedPostAttribute( 'status' ),
 		};
@@ -82,7 +84,7 @@ export default function PublishButtonLabel() {
 			: __( 'Submit for Review' );
 	}
 	if (
-		hasNonPostEntityChanges ||
+		( hasNonPostEntityChanges && ! isPostSavingLocked ) ||
 		isPublished ||
 		( postStatusHasChanged &&
 			! [ 'future', 'publish' ].includes( postStatus ) ) ||

package/src/components/post-publish-panel/postpublish.js

@@ -6,7 +6,6 @@ import {
 	Button,
 	TextControl,
 	ExternalLink,
-	VisuallyHidden,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
@@ -16,6 +15,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import { external } from '@wordpress/icons';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -164,7 +164,7 @@ export default function PostPublishPanelPostpublish( {
 							target="_blank"
 						>
 							{ viewPostLabel }
-							<VisuallyHidden as="span">
+							<VisuallyHidden render={ <span /> }>
 								{
 									/* translators: accessibility text */
 									__( '(opens in a new tab)' )

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -27,7 +27,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -47,7 +47,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   width: 100%;
 }
 
-.emotion-12>* {
+.emotion-10>* {
   min-width: 0;
 }
 
@@ -161,10 +161,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
               target="_blank"
             >
               <span
-                class="components-visually-hidden emotion-6 emotion-7"
-                data-wp-c16t="true"
-                data-wp-component="VisuallyHidden"
-                style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal; word-break: normal;"
+                data-visually-hidden=""
               >
                 (opens in a new tab)
               </span>
@@ -199,7 +196,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-12 emotion-7"
+            class="components-flex components-h-stack emotion-10 emotion-11"
             data-wp-c16t="true"
             data-wp-component="HStack"
           >
@@ -254,7 +251,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -274,7 +271,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   width: 100%;
 }
 
-.emotion-12>* {
+.emotion-10>* {
   min-width: 0;
 }
 
@@ -388,10 +385,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
               target="_blank"
             >
               <span
-                class="components-visually-hidden emotion-6 emotion-7"
-                data-wp-c16t="true"
-                data-wp-component="VisuallyHidden"
-                style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal; word-break: normal;"
+                data-visually-hidden=""
               >
                 (opens in a new tab)
               </span>
@@ -426,7 +420,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-12 emotion-7"
+            class="components-flex components-h-stack emotion-10 emotion-11"
             data-wp-c16t="true"
             data-wp-component="HStack"
           >

package/src/components/post-revisions-panel/index.js

@@ -22,7 +22,7 @@ import PostLastRevisionCheck from '../post-last-revision/check';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 const DAY_IN_MILLISECONDS = 86400000;
 const EMPTY_ARRAY = [];
 const defaultLayouts = { activity: true };
@@ -107,9 +107,9 @@ function PostRevisionsPanelContent() {
 			title={
 				<HStack justify="space-between" align="center" as="span">
 					<span>{ __( 'Revisions' ) }</span>
-					<Badge className="editor-post-revisions-panel__revisions-count">
+					<WCBadge className="editor-post-revisions-panel__revisions-count">
 						{ revisionsCount }
-					</Badge>
+					</WCBadge>
 				</HStack>
 			}
 			initialOpen={ false }

package/src/components/post-revisions-preview/diff-markers.js

@@ -145,7 +145,7 @@ export function useDiffMarkers() {
 			key="diff-markers"
 			className="revision-diff-markers"
 			role="navigation"
-			aria-label={ __( 'Diff markers' ) }
+			aria-label={ __( 'Document changes' ) }
 		>
 			{ isMounted &&
 				diffBlocks.map( ( { clientId, status } ) => (

package/src/components/post-revisions-preview/revisions-slider.js

@@ -117,6 +117,7 @@ function RevisionsSlider() {
 	return (
 		<RangeControl
 			__next40pxDefaultSize
+			aria-valuetext={ renderTooltipContent( selectedIndex ) }
 			className="editor-revisions-header__slider"
 			hideLabelFromVision
 			label={ __( 'Revision' ) }

package/src/components/post-saved-state/index.js

@@ -45,6 +45,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 		isPublished,
 		isSaveable,
 		isSaving,
+		isSavingLocked,
 		isScheduled,
 		hasPublishAction,
 		showIconLabels,
@@ -60,6 +61,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 				isEditedPostDirty,
 				isSavingPost,
 				isEditedPostSaveable,
+				isPostSavingLocked,
 				getCurrentPost,
 				isAutosavingPost,
 				getEditedPostAttribute,
@@ -73,6 +75,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 				isPublished: isCurrentPostPublished(),
 				isSaving: isSavingPost(),
 				isSaveable: isEditedPostSaveable(),
+				isSavingLocked: isPostSavingLocked(),
 				isScheduled: isCurrentPostScheduled(),
 				hasPublishAction:
 					getCurrentPost()?._links?.[ 'wp:action-publish' ] ?? false,
@@ -140,7 +143,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 
 	const isSaved = forceSavedMessage || ( ! isNew && ! isDirty );
 	const isSavedState = isSaving || isSaved;
-	const isDisabled = isSaving || isSaved || ! isSaveable;
+	const isDisabled = isSaving || isSaved || ! isSaveable || isSavingLocked;
 	let text;
 
 	if ( isSaving ) {

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -24,7 +24,6 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 
 exports[`PostSavedState should return Save button if edits to be saved 1`] = `
 <button
-  aria-disabled="false"
   aria-label="Save draft"
   class="components-button editor-post-save-draft is-compact is-tertiary"
   type="button"

package/src/components/post-text-editor/index.js

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -38,8 +38,8 @@ export default function PostTextEditor() {
 	return (
 		<>
 			<VisuallyHidden
-				as="label"
-				htmlFor={ `post-content-${ instanceId }` }
+				// eslint-disable-next-line jsx-a11y/label-has-associated-control
+				render={ <label htmlFor={ `post-content-${ instanceId }` } /> }
 			>
 				{ __( 'Type text or HTML' ) }
 			</VisuallyHidden>

package/src/components/preview-dropdown/index.js

@@ -12,7 +12,6 @@ import {
 	MenuGroup,
 	MenuItem,
 	MenuItemsChoice,
-	VisuallyHidden,
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -22,6 +21,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { ActionItem } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -151,7 +151,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 								onClick={ onClose }
 							>
 								{ __( 'View site' ) }
-								<VisuallyHidden as="span">
+								<VisuallyHidden render={ <span /> }>
 									{
 										/* translators: accessibility text */
 										__( '(opens in a new tab)' )

package/src/components/provider/index.js

@@ -45,6 +45,7 @@ import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
 import PatternRenameModal from '../pattern-rename-modal';
 import PatternDuplicateModal from '../pattern-duplicate-modal';
 import TemplatePartMenuItems from '../template-part-menu-items';
+import MediaEditorModalMount from '../media/media-editor-modal';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -465,6 +466,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 									<StartTemplateOptions />
 									<PatternRenameModal />
 									<PatternDuplicateModal />
+									{ window?.__experimentalMediaEditorModal && (
+										<MediaEditorModalMount />
+									) }
 								</>
 							) }
 						</BlockEditorProviderComponent>

package/src/components/provider/use-block-editor-settings.js

@@ -17,6 +17,7 @@ import {
 	privateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { privateApis as mediaEditorPrivateApis } from '@wordpress/media-editor';
 
 /**
  * Internal dependencies
@@ -30,6 +31,8 @@ import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
 
+const { store: mediaEditorStore } = unlock( mediaEditorPrivateApis );
+
 const EMPTY_OBJECT = {};
 
 function __experimentalReusableBlocksSelect( select ) {
@@ -107,6 +110,7 @@ const {
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	openMediaEditorModalKey,
 } = unlock( privateApis );
 
 /**
@@ -269,6 +273,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	const { undo, setIsInserterOpened } = useDispatch( editorStore );
 	const { editMediaEntity } = unlock( useDispatch( coreStore ) );
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const { openMediaEditorModal } = useDispatch( mediaEditorStore );
 
 	/**
 	 * Creates a Post entity.
@@ -339,6 +344,10 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			[ mediaEditKey ]: hasUploadPermissions
 				? editMediaEntity
 				: undefined,
+			[ openMediaEditorModalKey ]: window?.__experimentalMediaEditorModal
+				? ( { id, onUpdate } ) =>
+						openMediaEditorModal( { id, onUpdate } )
+				: undefined,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			[ mediaUploadOnSuccessKey ]: hasUploadPermissions
 				? mediaUploadOnSuccess
@@ -435,6 +444,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		globalStylesLinksData,
 		renderingMode,
 		editMediaEntity,
+		openMediaEditorModal,
 		settings.onNavigateToEntityRecord,
 		deviceType,
 		allImageSizes,

package/src/components/provider/use-upload-save-lock.js

@@ -15,21 +15,11 @@ const LOCK_NAME = 'upload-in-progress';
 /**
  * A hook that locks post saving and autosaving while media uploads are in progress.
  * This prevents users from publishing or saving while files are still uploading.
- *
- * Only active when client-side media processing is enabled.
  */
 export default function useUploadSaveLock() {
-	const isClientSideMediaProcessingEnabled =
-		window.__clientSideMediaProcessing;
-
 	const isUploading = useSelect(
-		( select ) => {
-			if ( ! isClientSideMediaProcessingEnabled ) {
-				return false;
-			}
-			return select( uploadStore ).isUploading();
-		},
-		[ isClientSideMediaProcessingEnabled ]
+		( select ) => select( uploadStore ).isUploading(),
+		[]
 	);
 
 	const {
@@ -40,10 +30,6 @@ export default function useUploadSaveLock() {
 	} = useDispatch( editorStore );
 
 	useEffect( () => {
-		if ( ! isClientSideMediaProcessingEnabled ) {
-			return;
-		}
-
 		if ( isUploading ) {
 			lockPostSaving( LOCK_NAME );
 			lockPostAutosaving( LOCK_NAME );
@@ -57,7 +43,6 @@ export default function useUploadSaveLock() {
 			unlockPostAutosaving( LOCK_NAME );
 		};
 	}, [
-		isClientSideMediaProcessingEnabled,
 		isUploading,
 		lockPostSaving,
 		unlockPostSaving,

package/src/components/resizable-editor/resize-handle.js

@@ -3,11 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
-import {
-	VisuallyHidden,
-	Tooltip,
-	__unstableMotion as motion,
-} from '@wordpress/components';
+import { Tooltip, __unstableMotion as motion } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
 

package/src/components/revision-created-panel/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalText as Text } from '@wordpress/components';
+import { __experimentalText as WCText } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { humanTimeDiff } from '@wordpress/date';
@@ -24,13 +24,13 @@ export default function RevisionCreatedPanel() {
 
 	return (
 		<div className="editor-post-last-edited-panel">
-			<Text>
+			<WCText>
 				{ sprintf(
 					// translators: %s: Human-readable time difference, e.g. "2 days ago".
 					__( 'Created %s.' ),
 					humanTimeDiff( date )
 				) }
-			</Text>
+			</WCText>
 		</div>
 	);
 }

package/src/components/site-discussion/index.js

@@ -9,7 +9,7 @@ import {
 	Dropdown,
 	RadioControl,
 	__experimentalVStack as VStack,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 } from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
@@ -109,11 +109,11 @@ export default function SiteDiscussion() {
 							onClose={ onClose }
 						/>
 						<VStack spacing={ 3 }>
-							<Text>
+							<WCText>
 								{ __(
 									'Changes will apply to new posts only. Individual posts may override these settings.'
 								) }
-							</Text>
+							</WCText>
 							<RadioControl
 								className="editor-site-discussion__options"
 								hideLabelFromVision

package/src/components/template-actions-panel/classic-theme-content.js

@@ -11,7 +11,7 @@ import { BlockPreview } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	Button,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -117,11 +117,11 @@ export default function ClassicThemeContent() {
 			>
 				<VStack>
 					{ ! templateId && (
-						<Text>
+						<WCText>
 							{ __(
 								'This page uses a classic template. To edit this template with blocks, create a block template.'
 							) }
-						</Text>
+						</WCText>
 					) }
 					{ template && previewContent && (
 						<div className="editor-template-actions-panel__preview">