@wordpress/editor 14.32.0 → 14.32.1-next.ff1cebbba.0

package/src/components/{preferences-modal/block-visibility.js → block-visibility/index.js}

@@ -5,6 +5,8 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -67,6 +69,13 @@ export default function BlockVisibility() {
 		( blockType ) => ! hiddenBlockTypes.includes( blockType.name )
 	);
 
+	const numberOfHiddenBlocks =
+		filteredBlockTypes.length - selectedBlockTypes.length;
+
+	function enableAllBlockTypes() {
+		onChangeSelectedBlockTypes( filteredBlockTypes );
+	}
+
 	const onChangeSelectedBlockTypes = ( newSelectedBlockTypes ) => {
 		if ( selectedBlockTypes.length > newSelectedBlockTypes.length ) {
 			const blockTypesToHide = selectedBlockTypes.filter(
@@ -88,10 +97,33 @@ export default function BlockVisibility() {
 	};
 
 	return (
-		<BlockManager
-			blockTypes={ filteredBlockTypes }
-			selectedBlockTypes={ selectedBlockTypes }
-			onChange={ onChangeSelectedBlockTypes }
-		/>
+		<div className="editor-block-visibility">
+			{ !! numberOfHiddenBlocks && (
+				<div className="editor-block-visibility__disabled-blocks-count">
+					{ sprintf(
+						/* translators: %d: number of blocks. */
+						_n(
+							'%d block is hidden.',
+							'%d blocks are hidden.',
+							numberOfHiddenBlocks
+						),
+						numberOfHiddenBlocks
+					) }
+					<Button
+						__next40pxDefaultSize
+						variant="link"
+						onClick={ enableAllBlockTypes }
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</div>
+			) }
+			<BlockManager
+				blockTypes={ filteredBlockTypes }
+				selectedBlockTypes={ selectedBlockTypes }
+				onChange={ onChangeSelectedBlockTypes }
+				showSelectAll={ false }
+			/>
+		</div>
 	);
 }

package/src/components/block-visibility/style.scss

@@ -0,0 +1,25 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
+.editor-block-visibility__disabled-blocks-count {
+	border: $border-width solid $gray-300;
+	border-width: $border-width 0;
+	// Cover up horizontal areas off the sides of the box rectangle
+	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
+	padding: $grid-unit-10;
+	background-color: $white;
+	text-align: center;
+	position: sticky;
+	// When sticking, tuck the top border beneath the modal header border
+	top: ($grid-unit-05 + 1) * -1;
+	z-index: z-index(".block-editor-block-manager__disabled-blocks-count");
+
+	// Stick the category titles to the bottom
+	~ .block-editor-block-manager__content .block-editor-block-manager__category-title {
+		top: $grid-unit-40 - 1;
+	}
+	.is-link {
+		margin-left: 12px;
+	}
+}

package/src/components/blog-title/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .editor-blog-title-dropdown__content .components-popover__content {
 	min-width: 320px;
 	padding: $grid-unit-20;

package/src/components/collab-sidebar/add-comment.js

@@ -7,28 +7,27 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
+import { focusCommentThread } from './utils';
+
+const { useBlockElement } = unlock( blockEditorPrivateApis );
 
-/**
- * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
- *
- * @param {Object}   props                     - The component props.
- * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.
- * @param {boolean}  props.showCommentBoard    - The function to edit the comment.
- * @param {Function} props.setShowCommentBoard - The function to delete the comment.
- * @return {React.ReactNode} The rendered comment input UI.
- */
 export function AddComment( {
 	onSubmit,
 	showCommentBoard,
 	setShowCommentBoard,
+	commentSidebarRef,
 } ) {
 	const { clientId, blockCommentId, isEmptyDefaultBlock } = useSelect(
 		( select ) => {
@@ -41,8 +40,10 @@ export function AddComment( {
 					? isUnmodifiedDefaultBlock( selectedBlock )
 					: false,
 			};
-		}
+		},
+		[]
 	);
+	const blockElement = useBlockElement( clientId );
 
 	if (
 		! showCommentBoard ||
@@ -53,8 +54,6 @@ export function AddComment( {
 		return null;
 	}
 
-	const commentLabel = __( 'New Comment' );
-
 	return (
 		<VStack
 			className="editor-collab-sidebar-panel__thread is-selected"
@@ -66,14 +65,16 @@ export function AddComment( {
 				<CommentAuthorInfo />
 			</HStack>
 			<CommentForm
-				onSubmit={ ( inputComment ) => {
-					onSubmit( { content: inputComment } );
+				onSubmit={ async ( inputComment ) => {
+					const { id } = await onSubmit( { content: inputComment } );
+					focusCommentThread( id, commentSidebarRef.current );
 				} }
 				onCancel={ () => {
 					setShowCommentBoard( false );
+					blockElement?.focus();
 				} }
-				submitButtonText={ _x( 'Comment', 'Add comment button' ) }
-				labelText={ commentLabel }
+				submitButtonText={ _x( 'Note', 'Add note button' ) }
+				labelText={ __( 'New Note' ) }
 			/>
 		</VStack>
 	);

package/src/components/collab-sidebar/comment-author-info.js

@@ -63,14 +63,14 @@ function CommentAuthorInfo( { avatar, name, date, userId } ) {
 
 	const tooltipText = dateI18n(
 		// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.
-		_x( 'F j, Y g:i\xa0a', 'Comment date full date format' ),
+		_x( 'F j, Y g:i\xa0a', 'Note date full date format' ),
 		date
 	);
 
 	return (
 		<>
 			<img
-				src={ avatar ?? currentUserAvatar }
+				src={ avatar || currentUserAvatar }
 				className="editor-collab-sidebar-panel__user-avatar"
 				// translators: alt text for user avatar image
 				alt={ __( 'User avatar' ) }

package/src/components/collab-sidebar/comment-form.js

@@ -15,35 +15,32 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useDebounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { sanitizeCommentString } from './utils';
+import { sanitizeCommentString, noop } from './utils';
 
-/**
- * EditComment component.
- *
- * @param {Object}   props                  - The component props.
- * @param {Function} props.onSubmit         - The function to call when updating the comment.
- * @param {Function} props.onCancel         - The function to call when canceling the comment update.
- * @param {Object}   props.thread           - The comment thread object.
- * @param {string}   props.submitButtonText - The text to display on the submit button.
- * @param {string?}  props.labelText        - The label text for the comment input.
- * @return {React.ReactNode} The CommentForm component.
- */
 function CommentForm( {
 	onSubmit,
 	onCancel,
 	thread,
 	submitButtonText,
 	labelText,
+	reflowComments = noop,
 } ) {
 	const [ inputComment, setInputComment ] = useState(
 		thread?.content?.raw ?? ''
 	);
 
+	// Regularly trigger a reflow as the user types since the textarea may grow or shrink.
+	const debouncedCommentUpdated = useDebounce( reflowComments, 100 );
+
+	const updateComment = ( value ) => {
+		setInputComment( value );
+	};
+
 	const inputId = useInstanceId( CommentForm, 'comment-input' );
 	const isDisabled =
 		inputComment === thread?.content?.raw ||
@@ -55,14 +52,15 @@ function CommentForm( {
 			spacing="4"
 		>
 			<VisuallyHidden as="label" htmlFor={ inputId }>
-				{ labelText ?? __( 'Comment' ) }
+				{ labelText ?? __( 'Note' ) }
 			</VisuallyHidden>
 			<TextareaAutosize
 				id={ inputId }
 				value={ inputComment ?? '' }
-				onChange={ ( comment ) =>
-					setInputComment( comment.target.value )
-				}
+				onChange={ ( comment ) => {
+					updateComment( comment.target.value );
+					debouncedCommentUpdated();
+				} }
 				rows={ 1 }
 				maxRows={ 20 }
 			/>

package/src/components/collab-sidebar/comment-indicator-toolbar.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { ToolbarButton } from '@wordpress/components';
-import { _x, __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -98,7 +98,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 				className={ clsx( 'comment-avatar-indicator', {
 					'has-unresolved': hasUnresolved,
 				} ) }
-				label={ _x( 'View comments', 'View comment thread' ) }
+				label={ __( 'View notes' ) }
 				onClick={ onClick }
 				showTooltip
 			>

package/src/components/collab-sidebar/{comment-button.js → comment-menu-item.js}

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { MenuItem } from '@wordpress/components';
-import { _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { comment as commentIcon } from '@wordpress/icons';
 
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -14,7 +14,7 @@ import { unlock } from '../../lock-unlock';
 
 const { CommentIconSlotFill } = unlock( blockEditorPrivateApis );
 
-const AddCommentButton = ( { onClick } ) => {
+const AddCommentMenuItem = ( { onClick } ) => {
 	return (
 		<CommentIconSlotFill.Fill>
 			{ ( { onClose } ) => (
@@ -26,11 +26,11 @@ const AddCommentButton = ( { onClick } ) => {
 					} }
 					aria-haspopup="dialog"
 				>
-					{ _x( 'Comment', 'Add comment button' ) }
+					{ __( 'Note' ) }
 				</MenuItem>
 			) }
 		</CommentIconSlotFill.Fill>
 	);
 };
 
-export default AddCommentButton;
+export default AddCommentMenuItem;