@wordpress/editor 14.0.0 → 14.0.2

package/src/components/editor/index.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import EditorInterface from '../editor-interface';
+import { ExperimentalEditorProvider } from '../provider';
+import Sidebar from '../sidebar';
+
+function Editor( {
+	postType,
+	postId,
+	templateId,
+	settings,
+	children,
+
+	// This could be part of the settings.
+	onActionPerformed,
+
+	// The following abstractions are not ideal but necessary
+	// to account for site editor and post editor differences for now.
+	className,
+	styles,
+	customSaveButton,
+	forceDisableBlockTools,
+	title,
+	iframeProps,
+	extraSidebarPanels,
+	enableRegionNavigation = true,
+} ) {
+	const { post, template, hasLoadedPost } = useSelect(
+		( select ) => {
+			const { getEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			return {
+				post: getEntityRecord( 'postType', postType, postId ),
+				template: templateId
+					? getEntityRecord(
+							'postType',
+							TEMPLATE_POST_TYPE,
+							templateId
+					  )
+					: undefined,
+				hasLoadedPost: hasFinishedResolution( 'getEntityRecord', [
+					'postType',
+					postType,
+					postId,
+				] ),
+			};
+		},
+		[ postType, postId, templateId ]
+	);
+
+	return (
+		<ExperimentalEditorProvider
+			post={ post }
+			__unstableTemplate={ template }
+			settings={ settings }
+			useSubRegistry={ false }
+		>
+			{ hasLoadedPost && ! post && (
+				<Notice status="warning" isDismissible={ false }>
+					{ __(
+						"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+					) }
+				</Notice>
+			) }
+			<EditorInterface
+				className={ className }
+				styles={ styles }
+				enableRegionNavigation={ enableRegionNavigation }
+				customSaveButton={ customSaveButton }
+				forceDisableBlockTools={ forceDisableBlockTools }
+				title={ title }
+				iframeProps={ iframeProps }
+			/>
+			<Sidebar
+				onActionPerformed={ onActionPerformed }
+				extraPanels={ extraSidebarPanels }
+			/>
+			{ children }
+		</ExperimentalEditorProvider>
+	);
+}
+
+export default Editor;

package/src/components/editor-interface/index.js

@@ -121,8 +121,10 @@ export default function EditorInterface( {
 		<InterfaceSkeleton
 			enableRegionNavigation={ enableRegionNavigation }
 			isDistractionFree={ isDistractionFree && isWideViewport }
-			className={ clsx( className, {
+			className={ clsx( 'editor-editor-interface', className, {
 				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+				'is-distraction-free':
+					isDistractionFree && isWideViewport && ! isPreviewMode,
 			} ) }
 			labels={ {
 				...interfaceLabels,
@@ -160,7 +162,7 @@ export default function EditorInterface( {
 
 					<EditorContentSlotFill.Slot>
 						{ ( [ editorCanvasView ] ) =>
-							! isPreviewMode && editorCanvasView ? (
+							editorCanvasView ? (
 								editorCanvasView
 							) : (
 								<>
@@ -206,9 +208,7 @@ export default function EditorInterface( {
 				isRichEditingEnabled &&
 				blockEditorMode !== 'zoom-out' &&
 				mode === 'visual' && (
-					<div className="edit-post-layout__footer">
-						<BlockBreadcrumb rootLabelText={ documentLabel } />
-					</div>
+					<BlockBreadcrumb rootLabelText={ documentLabel } />
 				)
 			}
 			actions={

package/src/components/editor-interface/style.scss

@@ -0,0 +1,3 @@
+.editor-editor-interface .entities-saved-states__panel-header {
+	height: $header-height + $border-width;
+}

package/src/components/entities-saved-states/entity-record-item.js

@@ -1,12 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Icon, CheckboxControl, Flex, PanelRow } from '@wordpress/components';
+import { CheckboxControl, PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { connection } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -60,18 +59,9 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 				/>
 			</PanelRow>
 			{ hasPostMetaChanges && (
-				<PanelRow>
-					<Flex className="entities-saved-states__post-meta">
-						<Icon
-							className="entities-saved-states__connections-icon"
-							icon={ connection }
-							size={ 24 }
-						/>
-						<span className="entities-saved-states__bindings-text">
-							{ __( 'Post Meta.' ) }
-						</span>
-					</Flex>
-				</PanelRow>
+				<ul className="entities-saved-states__changes">
+					<li>{ __( 'Post Meta.' ) }</li>
+				</ul>
 			) }
 		</>
 	);

package/src/components/entities-saved-states/style.scss

@@ -30,23 +30,3 @@
 		margin-bottom: $grid-unit-05;
 	}
 }
-
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
-	.entities-saved-states__panel-header {
-		height: $header-height + $border-width;
-	}
-}
-
-.entities-saved-states__post-meta {
-	margin-left: $grid-unit-30;
-	align-items: center;
-}
-
-.entities-saved-states__connections-icon {
-	flex-grow: 0;
-}
-
-.entities-saved-states__bindings-text {
-	flex-grow: 1;
-}

package/src/components/global-styles-provider/index.js

@@ -163,7 +163,13 @@ function useGlobalStylesUserConfig() {
 	}, [ settings, styles, _links ] );
 
 	const setConfig = useCallback(
-		( callback, options = {} ) => {
+		/**
+		 * Set the global styles config.
+		 * @param {Function|Object} callbackOrObject If the callbackOrObject is a function, pass the current config to the callback so the consumer can merge values.
+		 *                                           Otherwise, overwrite the current config with the incoming object.
+		 * @param {Object}          options          Options for editEntityRecord Core selector.
+		 */
+		( callbackOrObject, options = {} ) => {
 			const record = getEditedEntityRecord(
 				'root',
 				'globalStyles',
@@ -175,7 +181,11 @@ function useGlobalStylesUserConfig() {
 				settings: record?.settings ?? {},
 				_links: record?._links ?? {},
 			};
-			const updatedConfig = callback( currentConfig );
+
+			const updatedConfig =
+				typeof callbackOrObject === 'function'
+					? callbackOrObject( currentConfig )
+					: callbackOrObject;
 
 			editEntityRecord(
 				'root',

package/src/components/header/back-button.js

@@ -20,7 +20,12 @@ const BackButtonSlot = ( { children } ) => {
 		return children;
 	}
 
-	return <Slot bubblesVirtually />;
+	return (
+		<Slot
+			bubblesVirtually
+			fillProps={ { length: ! fills ? 0 : fills.length } }
+		/>
+	);
 };
 BackButton.Slot = BackButtonSlot;
 

package/src/components/header/index.js

@@ -25,7 +25,6 @@ import MoreMenu from '../more-menu';
 import PostPreviewButton from '../post-preview-button';
 import PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle';
 import PostSavedState from '../post-saved-state';
-import PostTypeSupportCheck from '../post-type-support-check';
 import PostViewLink from '../post-view-link';
 import PreviewDropdown from '../preview-dropdown';
 import { store as editorStore } from '../../store';
@@ -117,13 +116,7 @@ function Header( {
 							! isBlockToolsCollapsed && hasTopToolbar,
 					} ) }
 				>
-					{ ! title ? (
-						<PostTypeSupportCheck supportKeys="title">
-							<DocumentBar />
-						</PostTypeSupportCheck>
-					) : (
-						title
-					) }
+					{ ! title ? <DocumentBar /> : title }
 				</div>
 			</motion.div>
 			<motion.div

package/src/components/header/style.scss

@@ -190,7 +190,7 @@
 	}
 }
 
-.is-distraction-free {
+.editor-editor-interface.is-distraction-free {
 	.interface-interface-skeleton__header {
 		border-bottom: none;
 	}

package/src/components/media-categories/index.js

@@ -191,9 +191,7 @@ const inserterMediaCategories = [
 				per_page: 'page_size',
 				search: 'q',
 			};
-			const url = new URL(
-				'https://api.openverse.engineering/v1/images/'
-			);
+			const url = new URL( 'https://api.openverse.org/v1/images/' );
 			Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
 				const queryKey = mapFromInserterMediaRequest[ key ] || key;
 				url.searchParams.set( queryKey, value );

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

@@ -783,7 +783,7 @@ const duplicatePostAction = {
 					sprintf(
 						// translators: %s: Title of the created template e.g: "Category".
 						__( '"%s" successfully created.' ),
-						newItem.title?.rendered || title
+						decodeEntities( newItem.title?.rendered || title )
 					),
 					{
 						id: 'duplicate-post-action',
@@ -1049,6 +1049,7 @@ export function usePostActions( postType, onActionPerformed ) {
 	const isPattern = postType === PATTERN_POST_TYPE;
 	const isLoaded = !! postTypeObject;
 	const supportsRevisions = !! postTypeObject?.supports?.revisions;
+	const supportsTitle = !! postTypeObject?.supports?.title;
 	return useMemo( () => {
 		if ( ! isLoaded ) {
 			return [];
@@ -1064,7 +1065,7 @@ export function usePostActions( postType, onActionPerformed ) {
 				: false,
 			isTemplateOrTemplatePart && duplicateTemplatePartAction,
 			isPattern && duplicatePatternAction,
-			renamePostAction,
+			supportsTitle && renamePostAction,
 			isPattern && exportPatternAsJSONAction,
 			isTemplateOrTemplatePart ? resetTemplateAction : restorePostAction,
 			isTemplateOrTemplatePart || isPattern
@@ -1124,5 +1125,6 @@ export function usePostActions( postType, onActionPerformed ) {
 		onActionPerformed,
 		isLoaded,
 		supportsRevisions,
+		supportsTitle,
 	] );
 }

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

@@ -11,15 +11,11 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import PostLastRevisionCheck from './check';
+import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 
-/**
- * Renders the component for displaying the last revision of a post.
- *
- * @return {Component} The component to be rendered.
- */
-function PostLastRevision() {
-	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
+function usePostLastRevisionInfo() {
+	return useSelect( ( select ) => {
 		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
 			select( editorStore );
 		return {
@@ -27,6 +23,15 @@ function PostLastRevision() {
 			revisionsCount: getCurrentPostRevisionsCount(),
 		};
 	}, [] );
+}
+
+/**
+ * Renders the component for displaying the last revision of a post.
+ *
+ * @return {Component} The component to be rendered.
+ */
+function PostLastRevision() {
+	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
 
 	return (
 		<PostLastRevisionCheck>
@@ -47,4 +52,22 @@ function PostLastRevision() {
 	);
 }
 
+export function PrivatePostLastRevision() {
+	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
+	return (
+		<PostLastRevisionCheck>
+			<PostPanelRow label={ __( 'Revisions' ) }>
+				<Button
+					href={ addQueryArgs( 'revision.php', {
+						revision: lastRevisionId,
+					} ) }
+					className="editor-private-post-last-revision__button"
+					text={ revisionsCount }
+					variant="tertiary"
+				/>
+			</PostPanelRow>
+		</PostLastRevisionCheck>
+	);
+}
+
 export default PostLastRevision;

package/src/components/post-last-revision/style.scss

@@ -28,3 +28,7 @@
 		padding: $grid-unit-20;
 	}
 }
+
+.editor-private-post-last-revision__button {
+	display: inline-block;
+}

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

@@ -25,6 +25,7 @@
 	.components-button {
 		max-width: 100%;
 		text-align: left;
+		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
 		height: auto;
 		min-height: $button-size-compact;

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

@@ -183,6 +183,7 @@ export default function PostPreviewButton( {
 			className={ className || 'editor-post-preview' }
 			href={ href }
 			target={ targetId }
+			__experimentalIsFocusable
 			disabled={ ! isSaveable }
 			onClick={ openPreviewWindow }
 			role={ role }

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

@@ -139,12 +139,16 @@ describe( 'PostPreviewButton', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should be disabled if post is not saveable.', () => {
+	it( 'should be accessibly disabled if post is not saveable.', () => {
 		mockUseSelect( { isEditedPostSaveable: () => false } );
 
 		render( <PostPreviewButton /> );
 
-		expect( screen.getByRole( 'button' ) ).toBeDisabled();
+		expect( screen.getByRole( 'button' ) ).toBeEnabled();
+		expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
 	} );
 
 	it( 'should not be disabled if post is saveable.', () => {
@@ -153,6 +157,10 @@ describe( 'PostPreviewButton', () => {
 		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'button' ) ).toBeEnabled();
+		expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
 	} );
 
 	it( 'should set `href` to edited post preview link if specified.', () => {

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

@@ -93,6 +93,7 @@ export class PostPublishPanel extends Component {
 							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
+									__experimentalIsFocusable
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
 									variant="secondary"

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

@@ -1,7 +1,3 @@
-.editor-post-publish-panel {
-	background: $white;
-}
-
 .editor-post-publish-panel__content {
 	// Ensure the post-publish panel accounts for the header and footer height.
 	min-height: calc(100% - #{$header-height + 84px});
@@ -71,6 +67,7 @@
 
 .editor-post-publish-panel__header-publish-button {
 	padding-right: $grid-unit-05;
+	justify-content: center;
 }
 
 .editor-post-publish-panel__header-cancel-button {
@@ -122,6 +119,7 @@
 
 	.components-panel__body-title .components-button {
 		align-items: flex-start;
+		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
 	}
 }
@@ -194,40 +192,34 @@
 	}
 }
 
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
-	.editor-post-publish-panel {
-		position: fixed;
-		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
-		top: $admin-bar-height-big;
-		bottom: 0;
-		right: 0;
-		left: 0;
-		overflow: auto;
-
-		@include break-medium() {
-			z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
-			top: $admin-bar-height;
-			left: auto;
-			width: $sidebar-width + $border-width;
-			border-left: $border-width solid $gray-300;
-			transform: translateX(+100%);
-			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
-			@include reduce-motion("animation");
-
-			body.is-fullscreen-mode & {
-				top: 0;
-			}
-
-			// Keep it open on focus to avoid conflict with navigate-regions animation.
-			[role="region"]:focus & {
-				transform: translateX(0%);
-			}
+.editor-post-publish-panel {
+	position: fixed;
+	z-index: z-index(".editor-post-publish-panel");
+	background: $white;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;
+
+	@include break-medium() {
+		z-index: z-index(".editor-post-publish-panel {greater than small}");
+		top: $admin-bar-height;
+		left: auto;
+		width: $sidebar-width + $border-width;
+		border-left: $border-width solid $gray-300;
+		transform: translateX(+100%);
+		animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+		@include reduce-motion("animation");
+
+		body.is-fullscreen-mode & {
+			top: 0;
 		}
-	}
 
-	.editor-post-publish-panel__header-publish-button {
-		justify-content: center;
+		// Keep it open on focus to avoid conflict with navigate-regions animation.
+		[role="region"]:focus & {
+			transform: translateX(0%);
+		}
 	}
 }
 

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

@@ -35,14 +35,8 @@ export default function PostSyncStatus() {
 		<PostPanelRow label={ __( 'Sync status' ) }>
 			<div className="editor-post-sync-status__value">
 				{ syncStatus === 'unsynced'
-					? _x(
-							'Not synced',
-							'Text that indicates that the pattern is not synchronized'
-					  )
-					: _x(
-							'Synced',
-							'Text that indicates that the pattern is synchronized'
-					  ) }
+					? _x( 'Not synced', 'pattern (singular)' )
+					: _x( 'Synced', 'pattern (singular)' ) }
 			</div>
 		</PostPanelRow>
 	);

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

@@ -55,6 +55,7 @@ export default function PostTrash() {
 				onConfirm={ handleConfirm }
 				onCancel={ () => setShowConfirmDialog( false ) }
 				confirmButtonText={ __( 'Move to trash' ) }
+				size="medium"
 			>
 				{ __(
 					'Are you sure you want to move this post to the trash?'

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

@@ -6,6 +6,7 @@ import { useSelect } from '@wordpress/data';
 import { Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -58,10 +59,17 @@ export default function PostURLPanel() {
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const slug = useSelect(
-		( select ) => select( editorStore ).getEditedPostSlug(),
-		[]
-	);
+	const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPost } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const siteSettings = getEditedEntityRecord( 'root', 'site' );
+		const _id = getCurrentPostId();
+		return {
+			slug: select( editorStore ).getEditedPostSlug(),
+			isFrontPage: siteSettings?.page_on_front === _id,
+			postLink: getCurrentPost()?.link,
+		};
+	}, [] );
 	const decodedSlug = safeDecodeURIComponent( slug );
 	return (
 		<Button
@@ -73,7 +81,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			/{ decodedSlug }
+			{ isFrontPage ? postLink : <>/{ decodedSlug }</> }
 		</Button>
 	);
 }

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

@@ -133,6 +133,7 @@ export default function PostVisibility( { onClose } ) {
 				onConfirm={ confirmPrivate }
 				onCancel={ handleDialogCancel }
 				confirmButtonText={ __( 'Publish' ) }
+				size="medium"
 			>
 				{ __( 'Would you like to privately publish this post now?' ) }
 			</ConfirmDialog>

package/src/components/provider/disable-non-page-content-blocks.js

@@ -6,31 +6,36 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 
-const CONTENT_ONLY_BLOCKS = applyFilters( 'editor.postContentBlockTypes', [
+const DEFAULT_CONTENT_ONLY_BLOCKS = [
 	'core/post-title',
 	'core/post-featured-image',
 	'core/post-content',
 	'core/template-part',
-] );
+];
 
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
+	const contentOnlyBlocks = applyFilters(
+		'editor.postContentBlockTypes',
+		DEFAULT_CONTENT_ONLY_BLOCKS
+	);
+
 	// Note that there are two separate subscription because the result for each
 	// returns a new array.
 	const contentOnlyIds = useSelect( ( select ) => {
 		const { getBlocksByName, getBlockParents, getBlockName } =
 			select( blockEditorStore );
-		return getBlocksByName( CONTENT_ONLY_BLOCKS ).filter( ( clientId ) =>
+		return getBlocksByName( contentOnlyBlocks ).filter( ( clientId ) =>
 			getBlockParents( clientId ).every( ( parentClientId ) => {
 				const parentBlockName = getBlockName( parentClientId );
 				return (
 					// Ignore descendents of the query block.
 					parentBlockName !== 'core/query' &&
 					// Enable only the top-most block.
-					! CONTENT_ONLY_BLOCKS.includes( parentBlockName )
+					! contentOnlyBlocks.includes( parentBlockName )
 				);
 			} )
 		);

package/src/components/save-publish-panels/style.scss

@@ -26,11 +26,3 @@
 		bottom: 0;
 	}
 }
-
-.edit-post-layout__toggle-sidebar-panel {
-	.interface-interface-skeleton__sidebar:focus &,
-	.interface-interface-skeleton__sidebar:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
-}

package/src/components/sidebar/post-summary.js

@@ -30,6 +30,7 @@ import PostsPerPage from '../posts-per-page';
 import SiteDiscussion from '../site-discussion';
 import { store as editorStore } from '../../store';
 import TemplateAreas from '../template-areas';
+import { PrivatePostLastRevision } from '../post-last-revision';
 
 /**
  * Module Constants
@@ -76,6 +77,7 @@ export default function PostSummary( { onActionPerformed } ) {
 										<PostAuthorPanel />
 										<PostTemplatePanel />
 										<PostDiscussionPanel />
+										<PrivatePostLastRevision />
 										<PageAttributesPanel />
 										<PostSyncStatus />
 										<BlogTitle />