@wordpress/editor 14.35.1-next.16d95556a.0 → 14.36.0

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

@@ -69,22 +69,29 @@ export function Comments( {
 	const { selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
 	);
-	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
-		useSelect( ( select ) => {
-			const {
-				getBlockAttributes,
-				getSelectedBlockClientId,
-				getClientIdsWithDescendants,
-			} = select( blockEditorStore );
-			const clientId = getSelectedBlockClientId();
-			return {
-				blockCommentId: clientId
-					? getBlockAttributes( clientId )?.metadata?.noteId
-					: null,
-				selectedBlockClientId: clientId,
-				orderedBlockIds: getClientIdsWithDescendants(),
-			};
-		}, [] );
+
+	const {
+		blockCommentId,
+		selectedBlockClientId,
+		orderedBlockIds,
+		blockMode,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockAttributes,
+			getSelectedBlockClientId,
+			getClientIdsWithDescendants,
+			getBlockMode,
+		} = select( blockEditorStore );
+		const clientId = getSelectedBlockClientId();
+		return {
+			blockCommentId: clientId
+				? getBlockAttributes( clientId )?.metadata?.noteId
+				: null,
+			selectedBlockClientId: clientId,
+			orderedBlockIds: getClientIdsWithDescendants(),
+			blockMode: clientId ? getBlockMode( clientId ) : null,
+		};
+	}, [] );
 
 	const relatedBlockElement = useBlockElement( selectedBlockClientId );
 
@@ -311,6 +318,7 @@ export function Comments( {
 		threads,
 		selectedThread,
 		setCanvasMinHeight,
+		blockMode,
 	] );
 
 	const handleThreadNavigation = ( event, thread, isSelected ) => {
@@ -470,6 +478,7 @@ function Thread( {
 		selectedThread,
 		commentLastUpdated,
 	} );
+	const isKeyboardTabbingRef = useRef( false );
 
 	const onMouseEnter = () => {
 		debouncedToggleBlockHighlight( thread.blockClientId, true );
@@ -479,13 +488,48 @@ function Thread( {
 		debouncedToggleBlockHighlight( thread.blockClientId, false );
 	};
 
+	const onFocus = () => {
+		toggleBlockHighlight( thread.blockClientId, true );
+	};
+
+	const onBlur = ( event ) => {
+		const isNoteFocused = event.relatedTarget?.closest(
+			'.editor-collab-sidebar-panel__thread'
+		);
+		const isDialogFocused =
+			event.relatedTarget?.closest( '[role="dialog"]' );
+		const isTabbing = isKeyboardTabbingRef.current;
+
+		// When another note is clicked, do nothing because the current note is automatically closed.
+		if ( isNoteFocused && ! isTabbing ) {
+			return;
+		}
+		// When deleting a note, a dialog appears, but the note should not be collapsed.
+		if ( isDialogFocused ) {
+			return;
+		}
+		// When tabbing, do nothing if the focus is within the current note.
+		if (
+			isTabbing &&
+			event.currentTarget.contains( event.relatedTarget )
+		) {
+			return;
+		}
+
+		// Closes a note that has lost focus when any of the following conditions are met:
+		// - An element other than a note is clicked.
+		// - Focus was lost by tabbing.
+		toggleBlockHighlight( thread.blockClientId, false );
+		unselectThread();
+	};
+
 	const handleCommentSelect = () => {
 		setNewNoteFormState( 'closed' );
 		setSelectedThread( thread.id );
+		toggleBlockSpotlight( thread.blockClientId, true );
 		if ( !! thread.blockClientId ) {
 			// Pass `null` as the second parameter to prevent focusing the block.
 			selectBlock( thread.blockClientId, null );
-			toggleBlockSpotlight( thread.blockClientId, true );
 		}
 	};
 
@@ -547,9 +591,20 @@ function Thread( {
 			onClick={ handleCommentSelect }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }
-			onFocus={ onMouseEnter }
-			onBlur={ onMouseLeave }
-			onKeyDown={ onKeyDown }
+			onFocus={ onFocus }
+			onBlur={ onBlur }
+			onKeyUp={ ( event ) => {
+				if ( event.key === 'Tab' ) {
+					isKeyboardTabbingRef.current = false;
+				}
+			} }
+			onKeyDown={ ( event ) => {
+				if ( event.key === 'Tab' ) {
+					isKeyboardTabbingRef.current = true;
+				} else {
+					onKeyDown( event );
+				}
+			} }
 			tabIndex={ 0 }
 			role="treeitem"
 			aria-label={ ariaLabel }
@@ -774,6 +829,14 @@ const CommentBoard = ( {
 			? actions.filter( ( item ) => item.isEligible( thread ) )
 			: [];
 
+	const deleteConfirmMessage =
+		// When deleting a top level note, descendants will also be deleted.
+		thread.parent === 0
+			? __(
+					"Are you sure you want to delete this note? This will also delete all of this note's replies."
+			  )
+			: __( 'Are you sure you want to delete this reply?' );
+
 	return (
 		<VStack
 			spacing="2"
@@ -828,7 +891,12 @@ const CommentBoard = ( {
 										/>
 									}
 								/>
-								<Menu.Popover>
+								<Menu.Popover
+									// The menu popover is rendered in a portal, which causes focus to be
+									// lost and the note to be collapsed unintentionally. To prevent this,
+									// the popover should be rendered as an inline.
+									modal={ false }
+								>
 									{ moreActions.map( ( action ) => (
 										<Menu.Item
 											key={ action.id }
@@ -909,9 +977,7 @@ const CommentBoard = ( {
 					onCancel={ handleCancel }
 					confirmButtonText={ __( 'Delete' ) }
 				>
-					{ __(
-						"Are you sure you want to delete this note? This will also delete all of this note's replies."
-					) }
+					{ deleteConfirmMessage }
 				</ConfirmDialog>
 			) }
 		</VStack>

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

@@ -372,6 +372,17 @@ export function useFloatingThread( {
 	const blockRef = useRef();
 	useBlockElementRef( thread.blockClientId, blockRef );
 
+	const blockMode = useSelect(
+		( select ) => {
+			return thread.blockClientId
+				? select( blockEditorStore ).getBlockMode(
+						thread.blockClientId
+				  )
+				: null;
+		},
+		[ thread.blockClientId ]
+	);
+
 	const updateHeight = useCallback(
 		( id, newHeight ) => {
 			setHeights( ( prev ) => {
@@ -400,7 +411,7 @@ export function useFloatingThread( {
 		if ( blockRef.current ) {
 			refs.setReference( blockRef.current );
 		}
-	}, [ blockRef, refs, commentLastUpdated ] );
+	}, [ blockRef, refs, commentLastUpdated, blockMode ] );
 
 	// Track thread heights.
 	useEffect( () => {

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

@@ -32,16 +32,15 @@ function useServerData() {
 		const editorSettings = getEditorSettings();
 
 		const canUserUploadMedia = canUser( 'create', {
-			kind: 'root',
-			name: 'media',
+			kind: 'postType',
+			name: 'attachment',
 		} );
 
 		return {
-			styles: editorSettings?.styles || [],
-			__unstableResolvedAssets:
-				editorSettings?.__unstableResolvedAssets || {},
-			colors: editorSettings?.colors || [],
-			gradients: editorSettings?.gradients || [],
+			styles: editorSettings?.styles,
+			__unstableResolvedAssets: editorSettings?.__unstableResolvedAssets,
+			colors: editorSettings?.colors,
+			gradients: editorSettings?.gradients,
 			__experimentalDiscussionSettings:
 				editorSettings?.__experimentalDiscussionSettings,
 			mediaUploadHandler: canUserUploadMedia ? uploadMedia : undefined,
@@ -64,10 +63,10 @@ function useServerData() {
 			settings: {
 				color: {
 					palette: {
-						theme: colors,
+						theme: colors ?? [],
 					},
 					gradients: {
-						theme: gradients,
+						theme: gradients ?? [],
 					},
 					duotone: {
 						theme: [],

package/src/components/global-styles-sidebar/style.scss

@@ -116,4 +116,11 @@
 			vertical-align: bottom;
 		}
 	}
+	.components-button {
+		&:hover {
+			svg {
+				fill: $white;
+			}
+		}
+	}
 }

package/src/components/post-featured-image/index.js

@@ -25,19 +25,15 @@ import {
 	MediaUpload,
 	MediaUploadCheck,
 	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 import PostFeaturedImageCheck from './check';
 import { store as editorStore } from '../../store';
 
-const { MediaUploadModal } = unlock( blockEditorPrivateApis );
-
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 // Used when labels from post type were not yet loaded or when they are not present.
@@ -52,45 +48,6 @@ const instructions = (
 	</p>
 );
 
-/**
- * Conditional Media component that uses MediaUploadModal when experiment is enabled,
- * otherwise falls back to MediaUpload.
- *
- * @param {Object}   root0        Component props.
- * @param {Function} root0.render Render prop function that receives { open } object.
- * @return {JSX.Element} The component.
- */
-function ConditionalMediaUpload( { render, ...props } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const mediaUpload = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().mediaUpload;
-	}, [] );
-
-	if ( window.__experimentalDataViewsMediaModal ) {
-		return (
-			<>
-				{ render && render( { open: () => setIsModalOpen( true ) } ) }
-				<MediaUploadModal
-					{ ...props }
-					isOpen={ isModalOpen }
-					onClose={ () => {
-						setIsModalOpen( false );
-						props.onClose?.();
-					} }
-					onSelect={ ( media ) => {
-						setIsModalOpen( false );
-						props.onSelect?.( media );
-					} }
-					onUpload={ mediaUpload }
-				/>
-			</>
-		);
-	}
-
-	return <MediaUpload { ...props } render={ render } />;
-}
-
 function getMediaDetails( media, postId ) {
 	if ( ! media ) {
 		return {};
@@ -224,7 +181,7 @@ function PostFeaturedImage( {
 					</div>
 				) }
 				<MediaUploadCheck fallback={ instructions }>
-					<ConditionalMediaUpload
+					<MediaUpload
 						title={
 							postType?.labels?.featured_image ||
 							DEFAULT_FEATURE_IMAGE_LABEL

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

@@ -14,19 +14,7 @@ import PostScheduleForm from './index';
 import { usePostScheduleLabel } from './label';
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-	NAVIGATION_POST_TYPE,
-} from '../../store/constants';
-
-const DESIGN_POST_TYPES = [
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-	NAVIGATION_POST_TYPE,
-];
+import { DESIGN_POST_TYPES } from '../../store/constants';
 
 /**
  * Renders the Post Schedule Panel component.

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

@@ -26,12 +26,7 @@ import {
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-	NAVIGATION_POST_TYPE,
-} from '../../store/constants';
+import { DESIGN_POST_TYPES } from '../../store/constants';
 import PostPanelRow from '../post-panel-row';
 import PostSticky from '../post-sticky';
 import { PrivatePostSchedule } from '../post-schedule';
@@ -74,13 +69,6 @@ export const STATUS_OPTIONS = [
 	},
 ];
 
-const DESIGN_POST_TYPES = [
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-	NAVIGATION_POST_TYPE,
-];
-
 export default function PostStatus() {
 	const { status, date, password, postId, postType, canEdit } = useSelect(
 		( select ) => {

package/src/components/post-template/block-theme.js

@@ -148,7 +148,10 @@ export default function BlockThemeControl( { id } ) {
 										// duplication explicit, so there
 										// wouldn't be an "edit" button for
 										// static theme templates.
-										if ( ! hasSpecificTemplate ) {
+										if (
+											! hasSpecificTemplate &&
+											window?.__experimentalTemplateActivate
+										) {
 											const activeTemplates =
 												await getEntityRecord(
 													'root',

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

@@ -73,7 +73,7 @@ export function useAvailableTemplates( postType ) {
 			allowSwitchingTemplate &&
 			templates?.filter(
 				( template ) =>
-					( template.is_custom || template.type === 'wp_template' ) &&
+					template.is_custom &&
 					template.slug !== currentTemplateSlug &&
 					!! template.content.raw // Skip empty templates.
 			),

package/src/components/provider/index.js

@@ -318,8 +318,13 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		// Synchronizes the active post with the state
 		useEffect( () => {
 			setEditedPost( post.type, post.id );
-			// Clear any notices dependent on the post context.
-			removeNotice( 'template-activate-notice' );
+			if (
+				typeof window !== 'undefined' &&
+				window.__experimentalTemplateActivate
+			) {
+				// Clear any notices dependent on the post context.
+				removeNotice( 'template-activate-notice' );
+			}
 		}, [ post.type, post.id, setEditedPost, removeNotice ] );
 
 		// Synchronize the editor settings as they change.

package/src/components/provider/use-block-editor-settings.js

@@ -96,6 +96,7 @@ const {
 	reusableBlocksSelectKey,
 	sectionRootClientIdKey,
 	mediaEditKey,
+	getMediaSelectKey,
 } = unlock( privateApis );
 
 /**
@@ -293,6 +294,13 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			hasFixedToolbar,
 			isDistractionFree,
 			keepCaretInsideBlock,
+			[ getMediaSelectKey ]: ( select, attachmentId ) => {
+				return select( coreStore ).getEntityRecord(
+					'postType',
+					'attachment',
+					attachmentId
+				);
+			},
 			[ mediaEditKey ]: hasUploadPermissions
 				? editMediaEntity
 				: undefined,

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

@@ -36,6 +36,7 @@ import {
 	PATTERN_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
+	DESIGN_POST_TYPES,
 } from '../../store/constants';
 import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { usePaddingAppender } from './use-padding-appender';
@@ -53,12 +54,6 @@ const {
  * These post types have a special editor where they don't allow you to fill the title
  * and they don't apply the layout styles.
  */
-const DESIGN_POST_TYPES = [
-	PATTERN_POST_TYPE,
-	TEMPLATE_POST_TYPE,
-	NAVIGATION_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-];
 
 /**
  * Given an array of nested blocks, find the first Post Content

package/src/components/visual-editor/use-edit-content-only-section-exit.js

@@ -30,17 +30,16 @@ export function useEditContentOnlySectionExit() {
 					return;
 				}
 
-				if ( ! event.defaultPrevented ) {
-					event.preventDefault();
+				// Check if the click is outside the edited block first.
+				const isClickOutside = ! event.target.closest(
+					`[data-block="${ editedContentOnlySection }"]`
+				);
 
-					// If the user clicks outside the edited block, stop editing.
-					if (
-						! event.target.closest(
-							`[data-block="${ editedContentOnlySection }"]`
-						)
-					) {
-						stopEditingContentOnlySection();
-					}
+				// Only prevent default and stop editing if clicking outside.
+				// This allows default behavior (e.g., file dialogs) to work when clicking inside.
+				if ( isClickOutside && ! event.defaultPrevented ) {
+					event.preventDefault();
+					stopEditingContentOnlySection();
 				}
 			}
 

package/src/dataviews/store/private-actions.ts

@@ -40,9 +40,16 @@ import {
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { DESIGN_POST_TYPES } from '../../store/constants';
 import postPreviewField from '../fields/content-preview';
 import { unlock } from '../../lock-unlock';
 
+declare global {
+	interface Window {
+		__experimentalTemplateActivate?: boolean;
+	}
+}
+
 export function registerEntityAction< Item >(
 	kind: string,
 	name: string,
@@ -148,6 +155,15 @@ export const registerPostTypeSchema =
 			}
 		}
 
+		// When template activation experiment is disabled, templates cannot be duplicated.
+		// @ts-ignore
+		if (
+			postTypeConfig.slug === 'wp_template' &&
+			! window?.__experimentalTemplateActivate
+		) {
+			canDuplicate = undefined;
+		}
+
 		const actions = [
 			postTypeConfig.viewable ? viewPost : undefined,
 			!! postTypeConfig.supports?.revisions
@@ -181,7 +197,7 @@ export const registerPostTypeSchema =
 				featuredImageField,
 			postTypeConfig.supports?.author && authorField,
 			statusField,
-			dateField,
+			! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) && dateField,
 			slugField,
 			postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
 			postTypeConfig.supports?.comments && commentStatusField,

package/src/hooks/media-upload.js

@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
+import deprecated from '@wordpress/deprecated';
 import {
 	MediaUpload,
 	privateApis as mediaUtilsPrivateApis,
@@ -16,16 +18,82 @@ const { MediaUploadModal: MediaUploadModalComponent } = unlock(
 	mediaUtilsPrivateApis
 );
 
+/**
+ * Class component wrapper for MediaUploadModal to maintain compatibility
+ * with the stable MediaUpload component API (render prop pattern).
+ */
+class MediaUploadModalWrapper extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			isOpen: false,
+		};
+		this.openModal = this.openModal.bind( this );
+		this.closeModal = this.closeModal.bind( this );
+	}
+
+	openModal() {
+		this.setState( { isOpen: true } );
+	}
+
+	closeModal() {
+		this.setState( { isOpen: false } );
+		this.props.onClose?.();
+	}
+
+	render() {
+		const {
+			allowedTypes,
+			multiple,
+			value,
+			onSelect,
+			title,
+			modalClass,
+			render,
+		} = this.props;
+		const { isOpen } = this.state;
+
+		return (
+			<>
+				{ render( { open: this.openModal } ) }
+				<MediaUploadModalComponent
+					allowedTypes={ allowedTypes }
+					multiple={ multiple }
+					value={ value }
+					onSelect={ ( media ) => {
+						onSelect( media );
+						this.closeModal();
+					} }
+					onClose={ this.closeModal }
+					title={ title }
+					isOpen={ isOpen }
+					modalClass={ modalClass }
+				/>
+			</>
+		);
+	}
+}
+
 if ( window.__experimentalDataViewsMediaModal ) {
-	// Create a new filter for the MediaUploadModal component
+	// Use the wrapper component for editor.MediaUpload when the experimental flag is enabled
+	addFilter(
+		'editor.MediaUpload',
+		'core/editor/components/media-upload',
+		() => {
+			deprecated( 'Extending MediaUpload as a class component', {
+				since: '7.0',
+				version: '7.2',
+				hint: 'MediaUpload will become a function component in WordPress 7.2 Please update any custom implementations to use function components instead.',
+			} );
+			return MediaUploadModalWrapper;
+		}
+	);
+} else {
 	addFilter(
-		'editor.MediaUploadModal',
-		'core/editor/components/media-upload-modal',
+		'editor.MediaUpload',
+		'core/editor/components/media-upload',
 		() => {
-			return MediaUploadModalComponent;
+			return MediaUpload;
 		}
 	);
 }
-addFilter( 'editor.MediaUpload', 'core/editor/components/media-upload', () => {
-	return MediaUpload;
-} );

package/src/hooks/template-part-navigation-edit-button.js

@@ -6,14 +6,10 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
-	BlockControls,
+	__unstableBlockToolbarLastItem as BlockToolbarLastItem,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	ToolbarGroup,
-	__experimentalDivider as Divider,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 
@@ -96,15 +92,8 @@ function TemplatePartNavigationEditButton( { clientId } ) {
 	}
 
 	return (
-		<BlockControls group="other">
+		<BlockToolbarLastItem>
 			<ToolbarGroup>
-				{ /*
-				 * Add a vertical divider to visually separate the "Edit navigation"
-				 * button from the template part's "Edit" button. Both buttons share
-				 * the same toolbar group ("other"), so without this divider they
-				 * would appear directly adjacent with no visual separation.
-				 */ }
-				<Divider orientation="vertical" marginEnd={ 3 } />
 				<ToolbarButton
 					label={ __( 'Edit navigation' ) }
 					onClick={ onEditNavigation }
@@ -112,7 +101,7 @@ function TemplatePartNavigationEditButton( { clientId } ) {
 					{ __( 'Edit navigation' ) }
 				</ToolbarButton>
 			</ToolbarGroup>
-		</BlockControls>
+		</BlockToolbarLastItem>
 	);
 }
 

package/src/store/actions.js

@@ -274,6 +274,8 @@ export const savePost =
 		dispatch( { type: 'REQUEST_POST_UPDATE_FINISH', options } );
 
 		if (
+			typeof window !== 'undefined' &&
+			window.__experimentalTemplateActivate &&
 			! options.isAutosave &&
 			previousRecord.type === 'wp_template' &&
 			( typeof previousRecord.id === 'number' ||