@wordpress/editor 14.10.0 → 14.11.0

package/src/components/collab-sidebar/style.scss

@@ -0,0 +1,111 @@
+.editor-collab-sidebar-panel {
+	padding: $grid-unit-20;
+
+	&__thread {
+		position: relative;
+		padding: $grid-unit-20;
+		border-radius: $radius-large;
+		border: 1px solid $gray-300;
+		background-color: $gray-100;
+		margin-bottom: $grid-unit-20;
+	}
+
+	&__active-thread {
+		border: 1.5px solid #3858e9;
+		background-color: $white;
+		box-shadow: 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.102);
+	}
+
+	&__comment-field {
+		flex: 1;
+	}
+
+	&__child-thread {
+		margin-top: 15px;
+	}
+
+	&__user-name {
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+		text-align: left;
+		color: $gray-700;
+		text-transform: capitalize;
+	}
+
+	&__user-time {
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+		text-align: left;
+		color: $gray-700;
+	}
+
+	&__user-comment {
+		font-size: 13px;
+		font-weight: 400;
+		line-height: 20px;
+		text-align: left;
+		color: $gray-900;
+
+		p {
+			margin-bottom: 0;
+		}
+	}
+
+	&__user-avatar {
+		border-radius: $radius-round;
+		flex-shrink: 0;
+	}
+
+	&__thread-overlay {
+		background-color: rgba(0, 0, 0, 0.7);
+		width: 100%;
+		height: 100%;
+		text-align: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		padding: 15px;
+		border-radius: $radius-large;
+		color: $white;
+
+		p {
+			margin-bottom: 15px;
+		}
+
+		button {
+			padding: 4px 10px;
+			color: $white;
+		}
+	}
+
+	&__comment-status {
+		margin-left: auto;
+
+		button {
+			&.has-icon:not(.has-text) {
+				min-width: 24px;
+				padding: 0;
+				width: 24px;
+				height: 24px;
+				flex-shrink: 0;
+			}
+		}
+	}
+
+	&__comment-dropdown-menu {
+		flex-shrink: 0;
+
+		button {
+			&.has-icon {
+				min-width: 24px;
+				padding: 0;
+				width: 24px;
+				height: 24px;
+			}
+		}
+	}
+
+}

package/src/components/collab-sidebar/utils.js

@@ -0,0 +1,9 @@
+/**
+ * Sanitizes a comment string by removing non-printable ASCII characters.
+ *
+ * @param {string} str - The comment string to sanitize.
+ * @return {string} - The sanitized comment string.
+ */
+export function sanitizeCommentString( str ) {
+	return str.trim();
+}

package/src/components/commands/index.js

@@ -57,7 +57,7 @@ function useEditorCommandLoader() {
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isFocusMode: get( 'core', 'focusMode' ),
 			isTopToolbar: get( 'core', 'fixedToolbar' ),
-			isPreviewMode: getSettings().__unstableIsPreviewMode,
+			isPreviewMode: getSettings().isPreviewMode,
 			isViewable: getPostType( getCurrentPostType() )?.viewable ?? false,
 			isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
 			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
@@ -98,8 +98,8 @@ function useEditorCommandLoader() {
 	commands.push( {
 		name: 'core/toggle-distraction-free',
 		label: isDistractionFree
-			? __( 'Exit Distraction Free' )
-			: __( 'Enter Distraction Free' ),
+			? __( 'Exit Distraction free' )
+			: __( 'Enter Distraction free' ),
 		callback: ( { close } ) => {
 			toggleDistractionFree();
 			close();
@@ -117,7 +117,9 @@ function useEditorCommandLoader() {
 
 	commands.push( {
 		name: 'core/toggle-spotlight-mode',
-		label: __( 'Toggle spotlight' ),
+		label: isFocusMode
+			? __( 'Exit Spotlight mode' )
+			: __( 'Enter Spotlight mode' ),
 		callback: ( { close } ) => {
 			toggle( 'core', 'focusMode' );
 			close();
@@ -160,7 +162,7 @@ function useEditorCommandLoader() {
 
 	commands.push( {
 		name: 'core/toggle-top-toolbar',
-		label: __( 'Toggle top toolbar' ),
+		label: __( 'Top toolbar' ),
 		callback: ( { close } ) => {
 			toggle( 'core', 'fixedToolbar' );
 			if ( isDistractionFree ) {
@@ -224,7 +226,7 @@ function useEditorCommandLoader() {
 
 	commands.push( {
 		name: 'core/open-settings-sidebar',
-		label: __( 'Toggle settings sidebar' ),
+		label: __( 'Show or hide the Settings panel.' ),
 		icon: isRTL() ? drawerLeft : drawerRight,
 		callback: ( { close } ) => {
 			const activeSidebar = getActiveComplementaryArea( 'core' );
@@ -239,7 +241,7 @@ function useEditorCommandLoader() {
 
 	commands.push( {
 		name: 'core/open-block-inspector',
-		label: __( 'Toggle block inspector' ),
+		label: __( 'Show or hide the Block settings panel' ),
 		icon: blockDefault,
 		callback: ( { close } ) => {
 			const activeSidebar = getActiveComplementaryArea( 'core' );

package/src/components/document-bar/index.js

@@ -26,8 +26,9 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
-import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants';
+import { TEMPLATE_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
+import usePageTypeBadge from '../../utils/pageTypeBadge';
 
 /** @typedef {import("@wordpress/components").IconType} IconType */
 
@@ -56,7 +57,6 @@ export default function DocumentBar( props ) {
 		postTypeLabel,
 		documentTitle,
 		isNotFound,
-		isUnsyncedPattern,
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
 	} = useSelect( ( select ) => {
@@ -93,7 +93,6 @@ export default function DocumentBar( props ) {
 					_postType,
 					_postId
 				),
-			isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced',
 			templateTitle: _templateInfo.title,
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
@@ -104,12 +103,13 @@ export default function DocumentBar( props ) {
 	const isReducedMotion = useReducedMotion();
 
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
-	const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType );
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
 	const entityTitle = isTemplate ? templateTitle : documentTitle;
 	const title = props.title || entityTitle;
 	const icon = props.icon;
 
+	const pageTypeBadge = usePageTypeBadge();
+
 	const mountedRef = useRef( false );
 	useEffect( () => {
 		mountedRef.current = true;
@@ -119,7 +119,6 @@ export default function DocumentBar( props ) {
 		<div
 			className={ clsx( 'editor-document-bar', {
 				'has-back-button': hasBackButton,
-				'is-global': isGlobalEntity && ! isUnsyncedPattern,
 			} ) }
 		>
 			<AnimatePresence>
@@ -184,11 +183,20 @@ export default function DocumentBar( props ) {
 									? decodeEntities( title )
 									: __( 'No title' ) }
 							</span>
-							{ postTypeLabel && ! props.title && (
+							{ pageTypeBadge && (
 								<span className="editor-document-bar__post-type-label">
-									{ '· ' + decodeEntities( postTypeLabel ) }
+									{ `· ${ pageTypeBadge }` }
 								</span>
 							) }
+							{ postTypeLabel &&
+								! props.title &&
+								! pageTypeBadge && (
+									<span className="editor-document-bar__post-type-label">
+										{ `· ${ decodeEntities(
+											postTypeLabel
+										) }` }
+									</span>
+								) }
 						</Text>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">

package/src/components/document-bar/style.scss

@@ -67,10 +67,6 @@
 	flex: 1;
 	overflow: hidden;
 	text-overflow: ellipsis;
-
-	.editor-document-bar.is-global & {
-		color: var(--wp-block-synced-color);
-	}
 }
 
 .editor-document-bar__post-type-label {

package/src/components/document-tools/index.js

@@ -9,11 +9,7 @@ import clsx from 'clsx';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
-import {
-	NavigableToolbar,
-	ToolSelector,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { NavigableToolbar, ToolSelector } from '@wordpress/block-editor';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useCallback } from '@wordpress/element';
@@ -48,7 +44,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			getListViewToggleRef,
 		} = unlock( select( editorStore ) );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		return {
 			isInserterOpened: select( editorStore ).isInserterOpened(),
@@ -61,7 +56,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
-			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 

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

@@ -83,10 +83,11 @@ export default function EditorInterface( {
 			isInserterOpened: select( editorStore ).isInserterOpened(),
 			isListViewOpened: select( editorStore ).isListViewOpened(),
 			isDistractionFree: get( 'core', 'distractionFree' ),
-			isPreviewMode: editorSettings.__unstableIsPreviewMode,
+			isPreviewMode: editorSettings.isPreviewMode,
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			// translators: Default label for the Document in the Block Breadcrumb.
-			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
+			documentLabel:
+				// translators: Default label for the Document in the Block Breadcrumb.
+				postTypeLabel || _x( 'Document', 'noun, breadcrumb' ),
 			isZoomOut: _isZoomOut(),
 		};
 	}, [] );

package/src/components/entities-saved-states/index.js

@@ -177,9 +177,9 @@ export function EntitiesSavedStatesExtensible( {
 									_n(
 										'There is <strong>%d site change</strong> waiting to be saved.',
 										'There are <strong>%d site changes</strong> waiting to be saved.',
-										sortedPartitionedSavables.length
+										dirtyEntityRecords.length
 									),
-									sortedPartitionedSavables.length
+									dirtyEntityRecords.length
 								),
 								{ strong: <strong /> }
 						  )

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -72,7 +72,7 @@ function EditorKeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/editor/toggle-list-view',
 			category: 'global',
-			description: __( 'Open the List View.' ),
+			description: __( 'Show or hide the List View.' ),
 			keyCombination: {
 				modifier: 'access',
 				character: 'o',
@@ -82,7 +82,7 @@ function EditorKeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/editor/toggle-distraction-free',
 			category: 'global',
-			description: __( 'Toggle distraction free mode.' ),
+			description: __( 'Enter or exit distraction free mode.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: '\\',
@@ -92,7 +92,7 @@ function EditorKeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/editor/toggle-sidebar',
 			category: 'global',
-			description: __( 'Show or hide the Settings sidebar.' ),
+			description: __( 'Show or hide the Settings panel.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: ',',

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

@@ -56,13 +56,27 @@ function useGlobalStylesUserConfig() {
 				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 
 			let record;
-			const userCanEditGlobalStyles = canUser( 'update', {
-				kind: 'root',
-				name: 'globalStyles',
-				id: _globalStylesId,
-			} );
 
-			if ( _globalStylesId ) {
+			// We want the global styles ID request to finish before triggering
+			// the OPTIONS request for user capabilities, otherwise it will
+			// fetch `/wp/v2/global-styles` instead of
+			// `/wp/v2/global-styles/{id}`!
+			// Please adjust the preloaded requests if this changes!
+			const userCanEditGlobalStyles = _globalStylesId
+				? canUser( 'update', {
+						kind: 'root',
+						name: 'globalStyles',
+						id: _globalStylesId,
+				  } )
+				: null;
+
+			if (
+				_globalStylesId &&
+				// We want the OPTIONS request for user capabilities to finish
+				// before getting the records, otherwise we'll fetch both!
+				typeof userCanEditGlobalStyles === 'boolean'
+			) {
+				// Please adjust the preloaded requests if this changes!
 				if ( userCanEditGlobalStyles ) {
 					record = getEditedEntityRecord(
 						'root',

package/src/components/header/index.js

@@ -12,6 +12,7 @@ import { PinnedItems } from '@wordpress/interface';
 /**
  * Internal dependencies
  */
+import CollabSidebar from '../collab-sidebar';
 import BackButton, { useHasBackButton } from './back-button';
 import CollapsibleBlockToolbar from '../collapsible-block-toolbar';
 import DocumentBar from '../document-bar';
@@ -149,7 +150,7 @@ function Header( {
 				) }
 
 				{ canBeZoomedOut && isEditorIframed && isWideViewport && (
-					<ZoomOutToggle />
+					<ZoomOutToggle disabled={ forceDisableBlockTools } />
 				) }
 
 				<PreviewDropdown
@@ -174,6 +175,7 @@ function Header( {
 						}
 					/>
 				) }
+				<CollabSidebar />
 
 				{ customSaveButton }
 				<MoreMenu />

package/src/components/inserter-sidebar/index.js

@@ -33,15 +33,12 @@ export default function InserterSidebar() {
 			getInserter,
 			isPublishSidebarOpened,
 		} = unlock( select( editorStore ) );
-		const {
-			getBlockRootClientId,
-			__unstableGetEditorMode,
-			getSectionRootClientId,
-		} = unlock( select( blockEditorStore ) );
+		const { getBlockRootClientId, isZoomOut, getSectionRootClientId } =
+			unlock( select( blockEditorStore ) );
 		const { get } = select( preferencesStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const getBlockSectionRootClientId = () => {
-			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+			if ( isZoomOut() ) {
 				const sectionRootClientId = getSectionRootClientId();
 
 				if ( sectionRootClientId ) {

package/src/components/page-attributes/parent.js

@@ -212,8 +212,10 @@ function PostParentToggle( { isOpen, onClick } ) {
 			className="editor-post-parent__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post parent.
-			aria-label={ sprintf( __( 'Change parent: %s' ), parentTitle ) }
+			aria-label={
+				// translators: %s: Current post parent.
+				sprintf( __( 'Change parent: %s' ), parentTitle )
+			}
 			onClick={ onClick }
 		>
 			{ parentTitle }
@@ -261,9 +263,9 @@ export function ParentRow() {
 						<div>
 							{ createInterpolateElement(
 								sprintf(
-									/* translators: %1$s The home URL of the WordPress installation without the scheme. */
+									/* translators: %s: The home URL of the WordPress installation without the scheme. */
 									__(
-										'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %1$s<wbr />/services<wbr />/pricing.'
+										'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %s<wbr />/services<wbr />/pricing.'
 									),
 									filterURLForDisplay( homeUrl ).replace(
 										/([/.])/g,

package/src/components/plugin-more-menu-item/index.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import { MenuItem } from '@wordpress/components';
-import { withPluginContext } from '@wordpress/plugins';
+import { usePluginContext } from '@wordpress/plugins';
 import { ActionItem } from '@wordpress/interface';
 
 /**
@@ -62,12 +61,14 @@ import { ActionItem } from '@wordpress/interface';
  *
  * @return {Component} The component to be rendered.
  */
-export default compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			as: ownProps.as ?? MenuItem,
-			icon: ownProps.icon || context.icon,
-			name: 'core/plugin-more-menu',
-		};
-	} )
-)( ActionItem );
+export default function PluginMoreMenuItem( props ) {
+	const context = usePluginContext();
+	return (
+		<ActionItem
+			name="core/plugin-more-menu"
+			as={ props.as ?? MenuItem }
+			icon={ props.icon || context.icon }
+			{ ...props }
+		/>
+	);
+}

package/src/components/plugin-preview-menu-item/index.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import { MenuItem } from '@wordpress/components';
-import { withPluginContext } from '@wordpress/plugins';
+import { usePluginContext } from '@wordpress/plugins';
 import { ActionItem } from '@wordpress/interface';
 
 /**
@@ -27,12 +26,12 @@ import { ActionItem } from '@wordpress/interface';
  * }
  *
  * const ExternalPreviewMenuItem = () => (
- *   <PreviewDropdownMenuItem
+ *   <PluginPreviewMenuItem
  *     icon={ external }
  *     onClick={ onPreviewClick }
  *   >
  *     { __( 'Preview in new tab' ) }
- *   </PreviewDropdownMenuItem>
+ *   </PluginPreviewMenuItem>
  * );
  * registerPlugin( 'external-preview-menu-item', {
  *     render: ExternalPreviewMenuItem,
@@ -41,12 +40,14 @@ import { ActionItem } from '@wordpress/interface';
  *
  * @return {Component} The rendered menu item component.
  */
-export default compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			as: ownProps.as ?? MenuItem,
-			icon: ownProps.icon || context.icon,
-			name: 'core/plugin-preview-menu',
-		};
-	} )
-)( ActionItem );
+export default function PluginPreviewMenuItem( props ) {
+	const context = usePluginContext();
+	return (
+		<ActionItem
+			name="core/plugin-preview-menu"
+			as={ props.as ?? MenuItem }
+			icon={ props.icon || context.icon }
+			{ ...props }
+		/>
+	);
+}

package/src/components/plugin-sidebar/index.js

@@ -1,15 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import { ComplementaryArea } from '@wordpress/interface';
 
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
  * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
@@ -76,16 +69,10 @@ import { store as editorStore } from '../../store';
  * ```
  */
 export default function PluginSidebar( { className, ...props } ) {
-	const { postTitle } = useSelect( ( select ) => {
-		return {
-			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-		};
-	}, [] );
 	return (
 		<ComplementaryArea
 			panelClassName={ className }
 			className="editor-sidebar"
-			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core"
 			{ ...props }
 		/>

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

@@ -18,7 +18,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { unlock } from '../../lock-unlock';
 import { usePostActions } from './actions';
 
-const { DropdownMenuV2, kebabCase } = unlock( componentsPrivateApis );
+const { Menu, kebabCase } = unlock( componentsPrivateApis );
 
 export default function PostActions( { postType, postId, onActionPerformed } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
@@ -54,7 +54,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 	}, [ allActions, itemWithPermissions ] );
 
 	return (
-		<DropdownMenuV2
+		<Menu
 			open={ isActionsMenuOpen }
 			trigger={
 				<Button
@@ -79,7 +79,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 					setIsActionsMenuOpen( false );
 				} }
 			/>
-		</DropdownMenuV2>
+		</Menu>
 	);
 }
 
@@ -93,12 +93,9 @@ function DropdownMenuItemTrigger( { action, onClick, items } ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<DropdownMenuV2.Item
-			onClick={ onClick }
-			hideOnClick={ ! action.RenderModal }
-		>
-			<DropdownMenuV2.ItemLabel>{ label }</DropdownMenuV2.ItemLabel>
-		</DropdownMenuV2.Item>
+		<Menu.Item onClick={ onClick } hideOnClick={ ! action.RenderModal }>
+			<Menu.ItemLabel>{ label }</Menu.ItemLabel>
+		</Menu.Item>
 	);
 }
 
@@ -145,7 +142,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 // With an added onClose prop.
 function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 	return (
-		<DropdownMenuV2.Group>
+		<Menu.Group>
 			{ actions.map( ( action ) => {
 				if ( action.RenderModal ) {
 					return (
@@ -167,6 +164,6 @@ function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 					/>
 				);
 			} ) }
-		</DropdownMenuV2.Group>
+		</Menu.Group>
 	);
 }

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

@@ -25,8 +25,10 @@ function PostAuthorToggle( { isOpen, onClick } ) {
 			className="editor-post-author__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post link.
-			aria-label={ sprintf( __( 'Change author: %s' ), authorName ) }
+			aria-label={
+				// translators: %s: Author name.
+				sprintf( __( 'Change author: %s' ), authorName )
+			}
 			onClick={ onClick }
 		>
 			{ authorName }