@wordpress/editor 14.9.0 → 14.11.0

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

@@ -0,0 +1,307 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch, resolveSelect } from '@wordpress/data';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { comment as commentIcon } from '@wordpress/icons';
+import { addFilter } from '@wordpress/hooks';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import PluginSidebar from '../plugin-sidebar';
+import { collabSidebarName } from './constants';
+import { Comments } from './comments';
+import { AddComment } from './add-comment';
+import { store as editorStore } from '../../store';
+import AddCommentButton from './comment-button';
+import AddCommentToolbarButton from './comment-button-toolbar';
+
+const threadsEmptyArray = [];
+
+const isBlockCommentExperimentEnabled =
+	window?.__experimentalEnableBlockComment;
+const modifyBlockCommentAttributes = ( settings ) => {
+	if ( ! settings.attributes.blockCommentId ) {
+		settings.attributes = {
+			...settings.attributes,
+			blockCommentId: {
+				type: 'number',
+			},
+		};
+	}
+
+	return settings;
+};
+
+// Apply the filter to all core blocks
+addFilter(
+	'blocks.registerBlockType',
+	'block-comment/modify-core-block-attributes',
+	modifyBlockCommentAttributes
+);
+
+/**
+ * Renders the Collab sidebar.
+ */
+export default function CollabSidebar() {
+	const { createNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
+	const { getEntityRecord } = resolveSelect( coreStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const [ blockCommentID, setBlockCommentID ] = useState( null );
+	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
+	const { postId } = useSelect( ( select ) => {
+		return {
+			postId: select( editorStore ).getCurrentPostId(),
+		};
+	}, [] );
+
+	const postStatus = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
+		return { postStatus: post?.status };
+	}, [] );
+
+	const threads = useSelect(
+		( select ) => {
+			if ( ! postId ) {
+				return threadsEmptyArray;
+			}
+			const { getEntityRecords } = select( coreStore );
+			const data = getEntityRecords( 'root', 'comment', {
+				post: postId,
+				type: 'block_comment',
+				status: 'any',
+				per_page: 100,
+			} );
+			return data || threadsEmptyArray;
+		},
+		[ postId ]
+	);
+
+	const clientId = useSelect( ( select ) => {
+		const { getSelectedBlockClientId } = select( blockEditorStore );
+		return getSelectedBlockClientId();
+	}, [] );
+
+	const blockDetails = useSelect(
+		( select ) => {
+			return clientId
+				? select( blockEditorStore ).getBlock( clientId )
+				: null;
+		},
+		[ clientId ]
+	);
+
+	// Get the dispatch functions to save the comment and update the block attributes.
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	// Process comments to build the tree structure
+	const resultComments = useMemo( () => {
+		// Create a compare to store the references to all objects by id
+		const compare = {};
+		const result = [];
+
+		const filteredComments = threads.filter(
+			( comment ) => comment.status !== 'trash'
+		);
+
+		// Initialize each object with an empty `reply` array
+		filteredComments.forEach( ( item ) => {
+			compare[ item.id ] = { ...item, reply: [] };
+		} );
+
+		// Iterate over the data to build the tree structure
+		filteredComments.forEach( ( item ) => {
+			if ( item.parent === 0 ) {
+				// If parent is 0, it's a root item, push it to the result array
+				result.push( compare[ item.id ] );
+			} else if ( compare[ item.parent ] ) {
+				// Otherwise, find its parent and push it to the parent's `reply` array
+				compare[ item.parent ].reply.push( compare[ item.id ] );
+			}
+		} );
+
+		return result;
+	}, [ threads ] );
+
+	const openCollabBoard = () => {
+		setShowCommentBoard( true );
+		enableComplementaryArea( 'core', 'edit-post/collab-sidebar' );
+	};
+
+	// Function to save the comment.
+	const addNewComment = async ( comment, parentCommentId ) => {
+		const args = {
+			post: postId,
+			content: comment,
+			comment_type: 'block_comment',
+			comment_approved: 0,
+		};
+
+		// Create a new object, conditionally including the parent property
+		const updatedArgs = {
+			...args,
+			...( parentCommentId ? { parent: parentCommentId } : {} ),
+		};
+
+		const savedRecord = await saveEntityRecord(
+			'root',
+			'comment',
+			updatedArgs
+		);
+
+		if ( savedRecord ) {
+			// If it's a main comment, update the block attributes with the comment id.
+			if ( ! parentCommentId ) {
+				updateBlockAttributes( clientId, {
+					blockCommentId: savedRecord?.id,
+				} );
+			}
+
+			createNotice(
+				'snackbar',
+				parentCommentId
+					? // translators: Reply added successfully
+					  __( 'Reply added successfully.' )
+					: // translators: Comment added successfully
+					  __( 'Comment added successfully.' ),
+				{
+					type: 'snackbar',
+					isDismissible: true,
+				}
+			);
+		} else {
+			onError();
+		}
+	};
+
+	const onCommentResolve = async ( commentId ) => {
+		const savedRecord = await saveEntityRecord( 'root', 'comment', {
+			id: commentId,
+			status: 'approved',
+		} );
+
+		if ( savedRecord ) {
+			// translators: Comment resolved successfully
+			createNotice( 'snackbar', __( 'Comment marked as resolved.' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
+		} else {
+			onError();
+		}
+	};
+
+	const onEditComment = async ( commentId, comment ) => {
+		const savedRecord = await saveEntityRecord( 'root', 'comment', {
+			id: commentId,
+			content: comment,
+		} );
+
+		if ( savedRecord ) {
+			createNotice(
+				'snackbar',
+				// translators: Comment edited successfully
+				__( 'Comment edited successfully.' ),
+				{
+					type: 'snackbar',
+					isDismissible: true,
+				}
+			);
+		} else {
+			onError();
+		}
+	};
+
+	const onError = () => {
+		createNotice(
+			'error',
+			// translators: Error message when comment submission fails
+			__(
+				'Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'
+			),
+			{
+				isDismissible: true,
+			}
+		);
+	};
+
+	const onCommentDelete = async ( commentId ) => {
+		const childComment = await getEntityRecord(
+			'root',
+			'comment',
+			commentId
+		);
+		await deleteEntityRecord( 'root', 'comment', commentId );
+
+		if ( childComment && ! childComment.parent ) {
+			updateBlockAttributes( clientId, {
+				blockCommentId: undefined,
+			} );
+		}
+
+		createNotice(
+			'snackbar',
+			// translators: Comment deleted successfully
+			__( 'Comment deleted successfully.' ),
+			{
+				type: 'snackbar',
+				isDismissible: true,
+			}
+		);
+	};
+
+	useEffect( () => {
+		if ( blockDetails ) {
+			setBlockCommentID( blockDetails?.attributes.blockCommentId );
+		}
+	}, [ postId, clientId ] );
+
+	// Check if the experimental flag is enabled.
+	if (
+		! isBlockCommentExperimentEnabled ||
+		postStatus.postStatus === 'publish'
+	) {
+		return null; // or maybe return some message indicating no threads are available.
+	}
+
+	return (
+		<>
+			{ ! blockCommentID && (
+				<AddCommentButton onClick={ openCollabBoard } />
+			) }
+
+			{ blockCommentID > 0 && (
+				<AddCommentToolbarButton onClick={ openCollabBoard } />
+			) }
+			<PluginSidebar
+				identifier={ collabSidebarName }
+				// translators: Comments sidebar title
+				title={ __( 'Comments' ) }
+				icon={ commentIcon }
+			>
+				<div className="editor-collab-sidebar-panel">
+					<AddComment
+						threads={ resultComments }
+						onSubmit={ addNewComment }
+						showCommentBoard={ showCommentBoard }
+						setShowCommentBoard={ setShowCommentBoard }
+					/>
+					<Comments
+						threads={ resultComments }
+						onEditComment={ onEditComment }
+						onAddReply={ addNewComment }
+						onCommentDelete={ onCommentDelete }
+						onCommentResolve={ onCommentResolve }
+					/>
+				</div>
+			</PluginSidebar>
+		</>
+	);
+}

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',
 		};
 	}, [] );
 
@@ -96,7 +90,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const longLabel = _x(
-		'Toggle block inserter',
+		'Block Inserter',
 		'Generic label for block inserter button'
 	);
 	const shortLabel = ! isInserterOpened ? __( 'Add' ) : __( 'Close' );

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

@@ -15,7 +15,6 @@ import {
 	BlockBreadcrumb,
 	BlockToolbar,
 } from '@wordpress/block-editor';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useViewportMatch } from '@wordpress/compose';
 import { useState, useCallback } from '@wordpress/element';
 
@@ -49,7 +48,6 @@ const interfaceLabels = {
 
 export default function EditorInterface( {
 	className,
-	enableRegionNavigation,
 	styles,
 	children,
 	forceIsDirty,
@@ -69,8 +67,6 @@ export default function EditorInterface( {
 		isListViewOpened,
 		isDistractionFree,
 		isPreviewMode,
-		previousShortcut,
-		nextShortcut,
 		showBlockBreadcrumbs,
 		documentLabel,
 		isZoomOut,
@@ -87,16 +83,11 @@ export default function EditorInterface( {
 			isInserterOpened: select( editorStore ).isInserterOpened(),
 			isListViewOpened: select( editorStore ).isListViewOpened(),
 			isDistractionFree: get( 'core', 'distractionFree' ),
-			isPreviewMode: editorSettings.__unstableIsPreviewMode,
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
+			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(),
 		};
 	}, [] );
@@ -121,7 +112,6 @@ export default function EditorInterface( {
 
 	return (
 		<InterfaceSkeleton
-			enableRegionNavigation={ enableRegionNavigation }
 			isDistractionFree={ isDistractionFree }
 			className={ clsx( 'editor-editor-interface', className, {
 				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
@@ -231,10 +221,6 @@ export default function EditorInterface( {
 					  )
 					: undefined
 			}
-			shortcuts={ {
-				previous: previousShortcut,
-				next: nextShortcut,
-			} }
 		/>
 	);
 }

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 /> }
 						  )