@wordpress/editor 14.33.3-next.36001005c.0 → 14.33.3

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

@@ -20,7 +20,6 @@ import {
 	SIDEBARS,
 } from './constants';
 import { Comments } from './comments';
-import { AddComment } from './add-comment';
 import { store as editorStore } from '../../store';
 import AddCommentMenuItem from './comment-menu-item';
 import CommentAvatarIndicator from './comment-indicator-toolbar';
@@ -31,9 +30,9 @@ import {
 	useEnableFloatingSidebar,
 } from './hooks';
 import { focusCommentThread } from './utils';
-import PluginMoreMenuItem from '../plugin-more-menu-item';
+import PostTypeSupportCheck from '../post-type-support-check';
 
-function CollabSidebarContent( {
+function NotesSidebarContent( {
 	showCommentBoard,
 	setShowCommentBoard,
 	styles,
@@ -61,12 +60,6 @@ function CollabSidebarContent( {
 				}
 			} }
 		>
-			<AddComment
-				onSubmit={ onCreate }
-				showCommentBoard={ showCommentBoard }
-				setShowCommentBoard={ setShowCommentBoard }
-				commentSidebarRef={ commentSidebarRef }
-			/>
 			<Comments
 				threads={ comments }
 				onEditComment={ onEdit }
@@ -83,22 +76,14 @@ function CollabSidebarContent( {
 	);
 }
 
-/**
- * Renders the Collab sidebar.
- */
-export default function CollabSidebar() {
+function NotesSidebar( { postId, mode } ) {
 	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const commentSidebarRef = useRef( null );
 
-	const { postId } = useSelect( ( select ) => {
-		const { getCurrentPostId } = select( editorStore );
-		return {
-			postId: getCurrentPostId(),
-		};
-	}, [] );
+	const showFloatingSidebar = isLargeViewport && mode === 'post-only';
 
 	const blockCommentId = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
@@ -112,17 +97,14 @@ export default function CollabSidebar() {
 	const {
 		resultComments,
 		unresolvedSortedThreads,
-		totalPages,
 		reflowComments,
 		commentLastUpdated,
 	} = useBlockComments( postId );
 	useEnableFloatingSidebar(
-		isLargeViewport &&
+		showFloatingSidebar &&
 			( unresolvedSortedThreads.length > 0 || showCommentBoard )
 	);
 
-	const hasMoreComments = totalPages && totalPages > 1;
-
 	// Get the global styles to set the background color of the sidebar.
 	const { merged: GlobalStyles } = useGlobalStylesContext();
 	const backgroundColor = GlobalStyles?.styles?.color?.background;
@@ -132,20 +114,18 @@ export default function CollabSidebar() {
 		? resultComments.find( ( thread ) => thread.id === blockCommentId )
 		: null;
 
-	// If postId is not a valid number, do not render the comment sidebar.
-	if ( ! ( !! postId && typeof postId === 'number' ) ) {
-		return null;
-	}
-
 	async function openTheSidebar() {
 		const prevArea = await getActiveComplementaryArea( 'core' );
 		const activeNotesArea = SIDEBARS.find( ( name ) => name === prevArea );
 
-		// If the notes sidebar is not already active, enable the floating sidebar.
-		if ( ! activeNotesArea ) {
+		if ( currentThread?.status === 'approved' ) {
+			enableComplementaryArea( 'core', collabHistorySidebarName );
+		} else if ( ! activeNotesArea ) {
 			enableComplementaryArea(
 				'core',
-				isLargeViewport ? collabSidebarName : collabHistorySidebarName
+				showFloatingSidebar
+					? collabSidebarName
+					: collabHistorySidebarName
 			);
 		}
 
@@ -169,18 +149,18 @@ export default function CollabSidebar() {
 			{ blockCommentId && (
 				<CommentAvatarIndicator
 					thread={ currentThread }
-					hasMoreComments={ hasMoreComments }
 					onClick={ openTheSidebar }
 				/>
 			) }
 			<AddCommentMenuItem onClick={ openTheSidebar } />
 			<PluginSidebar
 				identifier={ collabHistorySidebarName }
+				name={ collabHistorySidebarName }
 				title={ __( 'Notes' ) }
 				icon={ commentIcon }
 				closeLabel={ __( 'Close Notes' ) }
 			>
-				<CollabSidebarContent
+				<NotesSidebarContent
 					comments={ resultComments }
 					showCommentBoard={ showCommentBoard }
 					setShowCommentBoard={ setShowCommentBoard }
@@ -198,7 +178,7 @@ export default function CollabSidebar() {
 					headerClassName="editor-collab-sidebar__header"
 					backgroundColor={ backgroundColor }
 				>
-					<CollabSidebarContent
+					<NotesSidebarContent
 						comments={ unresolvedSortedThreads }
 						showCommentBoard={ showCommentBoard }
 						setShowCommentBoard={ setShowCommentBoard }
@@ -212,14 +192,26 @@ export default function CollabSidebar() {
 					/>
 				</PluginSidebar>
 			) }
-			<PluginMoreMenuItem
-				icon={ commentIcon }
-				onClick={ () =>
-					enableComplementaryArea( 'core', collabHistorySidebarName )
-				}
-			>
-				{ __( 'Notes' ) }
-			</PluginMoreMenuItem>
 		</>
 	);
 }
+
+export default function NotesSidebarContainer() {
+	const { postId, mode } = useSelect( ( select ) => {
+		const { getCurrentPostId, getRenderingMode } = select( editorStore );
+		return {
+			postId: getCurrentPostId(),
+			mode: getRenderingMode(),
+		};
+	}, [] );
+
+	if ( ! postId || typeof postId !== 'number' ) {
+		return null;
+	}
+
+	return (
+		<PostTypeSupportCheck supportKeys="editor.notes">
+			<NotesSidebar postId={ postId } mode={ mode } />
+		</PostTypeSupportCheck>
+	);
+}

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

@@ -16,7 +16,7 @@
 }
 
 .editor-collab-sidebar-panel {
-	padding: $grid-unit-20;
+	padding: $grid-unit-20 $grid-unit-20 $grid-unit-30;
 	height: 100%;
 	overflow: hidden;
 }
@@ -111,7 +111,7 @@
 }
 
 .editor-collab-sidebar-panel__more-reply-button {
-	font-weight: $font-weight-medium;
+	font-weight: 500;
 }
 
 .editor-collab-sidebar-panel__resolution-text {
@@ -161,27 +161,6 @@
 	min-width: auto;
 	background: transparent;
 	border: none;
-
-	&:hover::before {
-		background: rgba(0, 0, 0, 0.04);
-	}
-
-	&.has-unresolved {
-		.comment-avatar-stack {
-			&::after {
-				content: "";
-				position: absolute;
-				top: -2px;
-				right: -2px;
-				width: $grid-unit-10;
-				height: $grid-unit-10;
-				background: #d63638;
-				border-radius: $radius-round;
-				border: $border-width solid $white;
-				z-index: 10;
-			}
-		}
-	}
 }
 
 .comment-avatar-stack {

package/src/components/editor/index.js

@@ -13,6 +13,7 @@ import { TEMPLATE_POST_TYPE } from '../../store/constants';
 import EditorInterface from '../editor-interface';
 import { ExperimentalEditorProvider } from '../provider';
 import Sidebar from '../sidebar';
+import NotesSidebar from '../collab-sidebar';
 
 function Editor( {
 	postType,
@@ -86,6 +87,7 @@ function Editor( {
 						{ extraContent }
 					</EditorInterface>
 					{ children }
+					<NotesSidebar />
 					<Sidebar
 						onActionPerformed={ onActionPerformed }
 						extraPanels={ extraSidebarPanels }

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

@@ -118,6 +118,6 @@
 
 .helpDetailBadgeText {
 	color: $white;
-	font-weight: $font-weight-medium;
+	font-weight: 500;
 	font-size: 12px;
 }

package/src/components/header/index.js

@@ -12,7 +12,6 @@ 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';
@@ -24,7 +23,6 @@ import PostSavedState from '../post-saved-state';
 import PostViewLink from '../post-view-link';
 import PreviewDropdown from '../preview-dropdown';
 import ZoomOutToggle from '../zoom-out-toggle';
-import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_PART_POST_TYPE,
@@ -193,11 +191,6 @@ function Header( {
 						}
 					/>
 				) }
-
-				<PostTypeSupportCheck supportKeys="editor.notes">
-					<CollabSidebar />
-				</PostTypeSupportCheck>
-
 				{ customSaveButton }
 				<MoreMenu />
 			</motion.div>

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

@@ -3,7 +3,7 @@
 
 .editor-post-last-revision__title {
 	width: 100%;
-	font-weight: $font-weight-medium;
+	font-weight: 500;
 }
 
 .editor-post-last-revision__title.components-button.has-icon {

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

@@ -32,7 +32,6 @@
 		text-wrap: pretty;
 		height: auto;
 		min-height: $button-size-compact;
-		font-weight: $font-weight-regular;
 	}
 
 	.components-dropdown {

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

@@ -182,7 +182,7 @@
 }
 
 .post-publish-panel__postpublish-header {
-	font-weight: $font-weight-medium;
+	font-weight: 500;
 }
 
 .post-publish-panel__postpublish-subheader {

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -19,7 +19,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 499;
+  font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -246,7 +246,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 499;
+  font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;

package/src/components/post-template/hooks.js

@@ -52,57 +52,16 @@ export function useAllowSwitchingTemplates() {
 }
 
 function useTemplates( postType ) {
-	// To do: create a new selector to checks if templates exist at all instead
-	// of and unbound request. In the modal, the user templates should be
-	// paginated and we should not make an unbound request.
-	const { defaultTemplateTypes, registeredTemplates, userTemplates } =
-		useSelect(
-			( select ) => {
-				return {
-					defaultTemplateTypes:
-						select( coreStore ).getCurrentTheme()
-							?.default_template_types,
-					registeredTemplates: select( coreStore ).getEntityRecords(
-						'postType',
-						'wp_registered_template',
-						{
-							per_page: -1,
-							post_type: postType,
-						}
-					),
-					userTemplates: select( coreStore ).getEntityRecords(
-						'postType',
-						'wp_template',
-						{ per_page: -1, combinedTemplates: false }
-					),
-				};
-			},
-			[ postType ]
-		);
-
-	return useMemo( () => {
-		if (
-			! defaultTemplateTypes ||
-			! registeredTemplates ||
-			! userTemplates
-		) {
-			return [];
-		}
-		return [
-			...registeredTemplates,
-			...userTemplates.filter(
-				( template ) =>
-					// Only give "custom" templates as an option, which
-					// means the is_wp_suggestion meta field is not set and
-					// the slug is not found in the default template types.
-					// https://github.com/WordPress/wordpress-develop/blob/97382397b2bd7c85aef6d4cd1c10bafd397957fc/src/wp-includes/block-template-utils.php#L858-L867
-					! template.meta.is_wp_suggestion &&
-					! defaultTemplateTypes.find(
-						( type ) => type.slug === template.slug
-					)
-			),
-		];
-	}, [ registeredTemplates, userTemplates, defaultTemplateTypes ] );
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+				post_type: postType,
+				// We look at the combined templates for now (old endpoint)
+				// because posts only accept slugs for templates, not IDs.
+			} ),
+		[ postType ]
+	);
 }
 
 export function useAvailableTemplates( postType ) {

package/src/components/provider/index.js

@@ -32,6 +32,7 @@ import useCommands from '../commands';
 import BlockRemovalWarnings from '../block-removal-warnings';
 import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
+import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
 import StartTemplateOptions from '../start-template-options';
 import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
 import PatternRenameModal from '../pattern-rename-modal';
@@ -219,10 +220,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		const defaultBlockContext = useMemo( () => {
 			const postContext = {};
 			// If it is a template, try to inherit the post type from the name.
-			if (
-				post.type === 'wp_template' ||
-				post.type === 'wp_registered_template'
-			) {
+			if ( post.type === 'wp_template' ) {
 				if ( post.slug === 'page' ) {
 					postContext.postType = 'page';
 				} else if ( post.slug === 'single' ) {
@@ -372,6 +370,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 								<>
 									<PatternsMenuItems />
 									<TemplatePartMenuItems />
+									<ContentOnlySettingsMenu />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />
 									) }

package/src/store/actions.js

@@ -734,7 +734,10 @@ export function updateEditorSettings( settings ) {
 export const setRenderingMode =
 	( mode ) =>
 	( { dispatch, registry, select } ) => {
-		if ( select.__unstableIsEditorReady() ) {
+		if (
+			select.__unstableIsEditorReady() &&
+			! select.getEditorSettings().isPreviewMode
+		) {
 			// We clear the block selection but we also need to clear the selection from the core store.
 			registry.dispatch( blockEditorStore ).clearSelectedBlock();
 			dispatch.editPost( { selection: undefined }, { undoIgnore: true } );

package/src/style.scss

@@ -3,6 +3,7 @@
 @use "./components/autocompleters/style.scss" as *;
 @use "./components/collab-sidebar/style.scss" as *;
 @use "./components/collapsible-block-toolbar/style.scss" as *;
+@use "./components/block-settings-menu/style.scss" as *;
 @use "./components/block-visibility/style.scss" as *;
 @use "./components/blog-title/style.scss" as *;
 @use "./components/document-bar/style.scss" as *;