@wordpress/editor 14.5.0 → 14.7.0

package/src/components/post-actions/index.js

@@ -17,35 +17,26 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { unlock } from '../../lock-unlock';
 import { usePostActions } from './actions';
-import { store as editorStore } from '../../store';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	kebabCase,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2, kebabCase } = unlock( componentsPrivateApis );
 
-export default function PostActions( { onActionPerformed, buttonProps } ) {
+export default function PostActions( { postType, postId, onActionPerformed } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
-	const { item, permissions, postType } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
-		const { getEditedEntityRecord, getEntityRecordPermissions } = unlock(
-			select( coreStore )
-		);
-		const _postType = getCurrentPostType();
-		const _id = getCurrentPostId();
-		return {
-			item: getEditedEntityRecord( 'postType', _postType, _id ),
-			permissions: getEntityRecordPermissions(
-				'postType',
-				_postType,
-				_id
-			),
-			postType: _postType,
-		};
-	}, [] );
+	const { item, permissions } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getEntityRecordPermissions } =
+				unlock( select( coreStore ) );
+			return {
+				item: getEditedEntityRecord( 'postType', postType, postId ),
+				permissions: getEntityRecordPermissions(
+					'postType',
+					postType,
+					postId
+				),
+			};
+		},
+		[ postId, postType ]
+	);
 	const itemWithPermissions = useMemo( () => {
 		return {
 			...item,
@@ -63,7 +54,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 	}, [ allActions, itemWithPermissions ] );
 
 	return (
-		<DropdownMenu
+		<DropdownMenuV2
 			open={ isActionsMenuOpen }
 			trigger={
 				<Button
@@ -76,7 +67,6 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 					onClick={ () =>
 						setIsActionsMenuOpen( ! isActionsMenuOpen )
 					}
-					{ ...buttonProps }
 				/>
 			}
 			onOpenChange={ setIsActionsMenuOpen }
@@ -89,7 +79,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 					setIsActionsMenuOpen( false );
 				} }
 			/>
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 }
 
@@ -103,12 +93,12 @@ function DropdownMenuItemTrigger( { action, onClick, items } ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<DropdownMenuItem
+		<DropdownMenuV2.Item
 			onClick={ onClick }
 			hideOnClick={ ! action.RenderModal }
 		>
-			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
-		</DropdownMenuItem>
+			<DropdownMenuV2.ItemLabel>{ label }</DropdownMenuV2.ItemLabel>
+		</DropdownMenuV2.Item>
 	);
 }
 
@@ -155,7 +145,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 // With an added onClose prop.
 function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 	return (
-		<DropdownMenuGroup>
+		<DropdownMenuV2.Group>
 			{ actions.map( ( action ) => {
 				if ( action.RenderModal ) {
 					return (
@@ -177,6 +167,6 @@ function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 					/>
 				);
 			} ) }
-		</DropdownMenuGroup>
+		</DropdownMenuV2.Group>
 	);
 }

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

@@ -26,59 +26,56 @@ import {
 	GLOBAL_POST_TYPES,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
+import PostActions from '../post-actions';
 
-export default function PostCardPanel( { actions } ) {
+export default function PostCardPanel( {
+	postType,
+	postId,
+	onActionPerformed,
+} ) {
 	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
 		( select ) => {
-			const {
-				getEditedPostAttribute,
-				getCurrentPostType,
-				getCurrentPostId,
-				__experimentalGetTemplateInfo,
-			} = select( editorStore );
-			const { canUser } = select( coreStore );
-			const { getEditedEntityRecord } = select( coreStore );
+			const { __experimentalGetTemplateInfo } = select( editorStore );
+			const { canUser, getEditedEntityRecord } = select( coreStore );
 			const siteSettings = canUser( 'read', {
 				kind: 'root',
 				name: 'site',
 			} )
 				? getEditedEntityRecord( 'root', 'site' )
 				: undefined;
-			const _type = getCurrentPostType();
-			const _id = getCurrentPostId();
-			const _record = getEditedEntityRecord( 'postType', _type, _id );
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
 			const _templateInfo =
 				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
-					_type
+					postType
 				) && __experimentalGetTemplateInfo( _record );
 			let _isSync = false;
-			if ( GLOBAL_POST_TYPES.includes( _type ) ) {
-				if ( PATTERN_POST_TYPE === _type ) {
+			if ( GLOBAL_POST_TYPES.includes( postType ) ) {
+				if ( PATTERN_POST_TYPE === postType ) {
 					// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
 					const currentSyncStatus =
-						getEditedPostAttribute( 'meta' )
-							?.wp_pattern_sync_status === 'unsynced'
+						_record?.meta?.wp_pattern_sync_status === 'unsynced'
 							? 'unsynced'
-							: getEditedPostAttribute(
-									'wp_pattern_sync_status'
-							  );
+							: _record?.wp_pattern_sync_status;
 					_isSync = currentSyncStatus !== 'unsynced';
 				} else {
 					_isSync = true;
 				}
 			}
 			return {
-				title:
-					_templateInfo?.title || getEditedPostAttribute( 'title' ),
-				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+				title: _templateInfo?.title || _record?.title,
+				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
 					area: _record?.area,
 				} ),
 				isSync: _isSync,
-				isFrontPage: siteSettings?.page_on_front === _id,
-				isPostsPage: siteSettings?.page_for_posts === _id,
+				isFrontPage: siteSettings?.page_on_front === postId,
+				isPostsPage: siteSettings?.page_for_posts === postId,
 			};
 		},
-		[]
+		[ postId, postType ]
 	);
 	return (
 		<div className="editor-post-card-panel">
@@ -113,7 +110,11 @@ export default function PostCardPanel( { actions } ) {
 						</span>
 					) }
 				</Text>
-				{ actions }
+				<PostActions
+					postType={ postType }
+					postId={ postId }
+					onActionPerformed={ onActionPerformed }
+				/>
 			</HStack>
 		</div>
 	);

package/src/components/post-card-panel/style.scss

@@ -46,7 +46,7 @@
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	font-size: 12px;
 	font-weight: 400;
 	flex-shrink: 0;

package/src/components/post-discussion/style.scss

@@ -2,15 +2,6 @@
 	// sidebar width - popover padding - form margin
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
 	margin: $grid-unit-10;
-
-	.components-radio-control__option {
-		align-items: flex-start;
-	}
-
-	.components-radio-control__label .components-text {
-		display: block;
-		margin-top: $grid-unit-05;
-	}
 }
 .editor-post-discussion__panel-toggle {
 

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

@@ -198,6 +198,8 @@ function PrivateExcerpt() {
 				ref={ setPopoverAnchor }
 				renderToggle={ ( { onToggle } ) => (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						className="editor-post-excerpt__dropdown__trigger"
 						onClick={ onToggle }
 						variant="link"

package/src/components/post-featured-image/index.js

@@ -160,6 +160,8 @@ function PostFeaturedImage( {
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									ref={ toggleRef }
 									className={
 										! featuredImageId
@@ -180,6 +182,8 @@ function PostFeaturedImage( {
 											: `editor-post-featured-image-${ featuredImageId }-describedby`
 									}
 									aria-haspopup="dialog"
+									disabled={ isLoading }
+									accessibleWhenDisabled
 								>
 									{ !! featuredImageId && media && (
 										<img
@@ -198,6 +202,8 @@ function PostFeaturedImage( {
 								{ !! featuredImageId && (
 									<HStack className="editor-post-featured-image__actions">
 										<Button
+											// TODO: Switch to `true` (40px size) if possible
+											__next40pxDefaultSize={ false }
 											className="editor-post-featured-image__action"
 											onClick={ open }
 											aria-haspopup="dialog"
@@ -205,6 +211,8 @@ function PostFeaturedImage( {
 											{ __( 'Replace' ) }
 										</Button>
 										<Button
+											// TODO: Switch to `true` (40px size) if possible
+											__next40pxDefaultSize={ false }
 											className="editor-post-featured-image__action"
 											onClick={ () => {
 												onRemoveImage();

package/src/components/post-featured-image/style.scss

@@ -22,7 +22,7 @@
 	}
 
 	.components-drop-zone__content {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 
 	// Align text and icons horizontally to avoid clipping when the featured image is not set.
@@ -65,7 +65,6 @@
 }
 
 .editor-post-featured-image__toggle {
-	border-radius: $radius-block-ui;
 	height: 100%;
 	line-height: 20px;
 	padding: $grid-unit-10 0;

package/src/components/post-format/index.js

@@ -100,6 +100,8 @@ export default function PostFormat() {
 				{ suggestion && suggestion.id !== postFormat && (
 					<p className="editor-post-format__suggestion">
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							variant="link"
 							onClick={ () =>
 								onUpdatePostFormat( suggestion.id )

package/src/components/post-format/style.scss

@@ -7,9 +7,3 @@
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
 	margin: $grid-unit-10;
 }
-
-.editor-post-format__options {
-	.components-base-control__field > .components-v-stack {
-		gap: $grid-unit-15;
-	}
-}

package/src/components/post-last-revision/index.js

@@ -36,6 +36,8 @@ function PostLastRevision() {
 	return (
 		<PostLastRevisionCheck>
 			<Button
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				href={ addQueryArgs( 'revision.php', {
 					revision: lastRevisionId,
 				} ) }

package/src/components/post-locked-modal/index.js

@@ -178,6 +178,8 @@ export default function PostLockedModal() {
 			shouldCloseOnClickOutside={ false }
 			shouldCloseOnEsc={ false }
 			isDismissible={ false }
+			// Do not remove this class, as this class is used by third party plugins.
+			className="editor-post-locked-modal"
 			size="medium"
 		>
 			<HStack alignment="top" spacing={ 6 }>
@@ -254,11 +256,21 @@ export default function PostLockedModal() {
 						justify="flex-end"
 					>
 						{ ! isTakeover && (
-							<Button variant="tertiary" href={ unlockUrl }>
+							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
+								variant="tertiary"
+								href={ unlockUrl }
+							>
 								{ __( 'Take over' ) }
 							</Button>
 						) }
-						<Button variant="primary" href={ allPostsUrl }>
+						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
+							variant="primary"
+							href={ allPostsUrl }
+						>
 							{ allPostsLabel }
 						</Button>
 					</HStack>

package/src/components/post-locked-modal/style.scss

@@ -3,7 +3,7 @@
 }
 
 .editor-post-locked-modal__avatar {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-round;
 	margin-top: $grid-unit-20;
 	min-width: initial !important;
 }

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

@@ -78,6 +78,8 @@ export class PostPublishPanel extends Component {
 				<div className="editor-post-publish-panel__header">
 					{ isPostPublish ? (
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							onClick={ onClose }
 							icon={ closeSmall }
 							label={ __( 'Close panel' ) }

package/src/components/post-publish-panel/maybe-post-format-panel.js

@@ -25,6 +25,8 @@ const PostFormatSuggestion = ( {
 	onUpdatePostFormat,
 } ) => (
 	<Button
+		// TODO: Switch to `true` (40px size) if possible
+		__next40pxDefaultSize={ false }
 		variant="link"
 		onClick={ () => onUpdatePostFormat( suggestedPostFormat ) }
 	>

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -14,11 +14,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
 
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-
 function flattenBlocks( blocks ) {
 	const result = [];
 
@@ -65,9 +60,11 @@ function Image( block ) {
 
 export default function PostFormatPanel() {
 	const [ isUploading, setIsUploading ] = useState( false );
+	const [ isAnimating, setIsAnimating ] = useState( false );
+	const [ hadUploadError, setHadUploadError ] = useState( false );
 	const { editorBlocks, mediaUpload } = useSelect(
 		( select ) => ( {
-			editorBlocks: select( editorStore ).getEditorBlocks(),
+			editorBlocks: select( blockEditorStore ).getBlocks(),
 			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
 		} ),
 		[]
@@ -93,6 +90,7 @@ export default function PostFormatPanel() {
 
 	function uploadImages() {
 		setIsUploading( true );
+		setHadUploadError( false );
 		Promise.all(
 			externalImages.map( ( image ) =>
 				window
@@ -102,28 +100,30 @@ export default function PostFormatPanel() {
 							: image.attributes.url + '?'
 					)
 					.then( ( response ) => response.blob() )
-					.then(
-						( blob ) =>
-							new Promise( ( resolve, reject ) => {
-								mediaUpload( {
-									filesList: [ blob ],
-									onFileChange: ( [ media ] ) => {
-										if ( isBlobURL( media.url ) ) {
-											return;
-										}
+					.then( ( blob ) =>
+						new Promise( ( resolve, reject ) => {
+							mediaUpload( {
+								filesList: [ blob ],
+								onFileChange: ( [ media ] ) => {
+									if ( isBlobURL( media.url ) ) {
+										return;
+									}
 
-										updateBlockAttributes( image.clientId, {
-											id: media.id,
-											url: media.url,
-										} );
-										resolve();
-									},
-									onError() {
-										reject();
-									},
-								} );
-							} )
+									updateBlockAttributes( image.clientId, {
+										id: media.id,
+										url: media.url,
+									} );
+									resolve();
+								},
+								onError() {
+									reject();
+								},
+							} );
+						} ).then( () => setIsAnimating( true ) )
 					)
+					.catch( () => {
+						setHadUploadError( true );
+					} )
 			)
 		).finally( () => {
 			setIsUploading( false );
@@ -144,19 +144,27 @@ export default function PostFormatPanel() {
 					gap: '8px',
 				} }
 			>
-				<AnimatePresence>
+				<AnimatePresence
+					onExitComplete={ () => setIsAnimating( false ) }
+				>
 					{ externalImages.map( ( image ) => {
 						return <Image key={ image.clientId } { ...image } />;
 					} ) }
 				</AnimatePresence>
-				{ isUploading ? (
+				{ isUploading || isAnimating ? (
 					<Spinner />
 				) : (
-					<Button variant="primary" onClick={ uploadImages }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="primary"
+						onClick={ uploadImages }
+					>
 						{ __( 'Upload' ) }
 					</Button>
 				) }
 			</div>
+			{ hadUploadError && <p>{ __( 'Upload failed, try again.' ) }</p> }
 		</PanelBody>
 	);
 }

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

@@ -44,7 +44,7 @@ const getFuturePostUrl = ( post ) => {
 function CopyButton( { text, onCopy, children } ) {
 	const ref = useCopyToClipboard( text, onCopy );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
@@ -122,6 +122,7 @@ class PostPublishPanelPostpublish extends Component {
 					</p>
 					<div className="post-publish-panel__postpublish-post-address-container">
 						<TextControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							className="post-publish-panel__postpublish-post-address"
 							readOnly
@@ -145,12 +146,17 @@ class PostPublishPanelPostpublish extends Component {
 
 					<div className="post-publish-panel__postpublish-buttons">
 						{ ! isScheduled && (
-							<Button variant="primary" href={ link }>
+							<Button
+								variant="primary"
+								href={ link }
+								__next40pxDefaultSize
+							>
 								{ viewPostLabel }
 							</Button>
 						) }
 						<Button
 							variant={ isScheduled ? 'primary' : 'secondary' }
+							__next40pxDefaultSize
 							href={ addLink }
 						>
 							{ addNewPostLabel }

package/src/components/post-publish-panel/style.scss

@@ -37,8 +37,9 @@
 
 .components-site-icon {
 	border: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	margin-right: $grid-unit-15;
+	flex-shrink: 0;
 
 	// Same size as in the Site menu.
 	height: 36px;
@@ -54,6 +55,7 @@
 	display: block;
 	color: $gray-700;
 	font-size: $helptext-font-size;
+	word-break: break-word;
 }
 
 .editor-post-publish-panel__header-publish-button,

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

@@ -120,7 +120,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
                   post address
                 </label>
                 <input
-                  class="components-text-control__input"
+                  class="components-text-control__input is-next-40px-default-size"
                   id="inspector-text-control-0"
                   readonly=""
                   type="text"
@@ -132,7 +132,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
               class="post-publish-panel__postpublish-post-address__copy-button-wrap"
             >
               <button
-                class="components-button is-secondary"
+                class="components-button is-next-40px-default-size is-secondary"
                 type="button"
               >
                 Copy
@@ -143,11 +143,11 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-primary"
+              class="components-button is-next-40px-default-size is-primary"
               href="https://wordpress.local/sample-page/"
             />
             <a
-              class="components-button is-secondary"
+              class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
             />
           </div>
@@ -312,7 +312,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
                   post address
                 </label>
                 <input
-                  class="components-text-control__input"
+                  class="components-text-control__input is-next-40px-default-size"
                   id="inspector-text-control-1"
                   readonly=""
                   type="text"
@@ -324,7 +324,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
               class="post-publish-panel__postpublish-post-address__copy-button-wrap"
             >
               <button
-                class="components-button is-secondary"
+                class="components-button is-next-40px-default-size is-secondary"
                 type="button"
               >
                 Copy
@@ -335,11 +335,11 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-primary"
+              class="components-button is-next-40px-default-size is-primary"
               href="https://wordpress.local/sample-page/"
             />
             <a
-              class="components-button is-secondary"
+              class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
             />
           </div>

package/src/components/post-slug/index.js

@@ -24,6 +24,7 @@ function PostSlugControl() {
 
 	return (
 		<TextControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Slug' ) }
 			autoComplete="off"

package/src/components/post-status/index.js

@@ -171,7 +171,7 @@ export default function PostStatus() {
 					contentClassName="editor-change-status__content"
 					popoverProps={ popoverProps }
 					focusOnMount
-					renderToggle={ ( { onToggle } ) => (
+					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
 							variant="tertiary"
 							size="compact"
@@ -179,9 +179,10 @@ export default function PostStatus() {
 							icon={ postStatusesInfo[ status ]?.icon }
 							aria-label={ sprintf(
 								// translators: %s: Current post status.
-								__( 'Change post status: %s' ),
+								__( 'Change status: %s' ),
 								postStatusesInfo[ status ]?.label
 							) }
+							aria-expanded={ isOpen }
 						>
 							{ postStatusesInfo[ status ]?.label }
 						</Button>