@wordpress/editor 14.0.0 → 14.0.1

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/style.scss

@@ -31,13 +31,6 @@
 	}
 }
 
-.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;

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

@@ -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-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/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 />

package/src/private-apis.js

@@ -12,8 +12,9 @@ import { EntitiesSavedStatesExtensible } from './components/entities-saved-state
 import EditorContentSlotFill from './components/editor-interface/content-slot-fill';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 import BackButton from './components/header/back-button';
-import EditorInterface from './components/editor-interface';
 import CreateTemplatePartModal from './components/create-template-part-modal';
+import Editor from './components/editor';
+import EditorInterface from './components/editor-interface';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PreferencesModal from './components/preferences-modal';
 import { usePostActions } from './components/post-actions/actions';
@@ -34,6 +35,7 @@ lock( privateApis, {
 	BackButton,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
+	Editor,
 	EditorInterface,
 	EditorContentSlotFill,
 	GlobalStylesProvider,

package/src/style.scss

@@ -9,6 +9,7 @@
 @import "./components/document-bar/style.scss";
 @import "./components/document-outline/style.scss";
 @import "./components/document-tools/style.scss";
+@import "./components/editor-interface/style.scss";
 @import "./components/editor-notices/style.scss";
 @import "./components/entities-saved-states/style.scss";
 @import "./components/error-boundary/style.scss";