@wordpress/editor 14.49.1 → 14.51.1-next.v.202607070741.0

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

@@ -27,30 +27,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-10>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -91,7 +67,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           <a
             class="components-external-link"
             href="https://wordpress.local/sample-page/"
-            rel="external noopener"
             target="_blank"
           >
             <span
@@ -163,6 +138,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
               target="_blank"
             >
               <span
+                class="style-visually-hidden"
                 data-visually-hidden=""
               >
                 (opens in a new tab)
@@ -199,9 +175,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"
@@ -254,30 +231,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-10>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -318,7 +271,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           <a
             class="components-external-link"
             href="https://wordpress.local/sample-page/"
-            rel="external noopener"
             target="_blank"
           >
             <span
@@ -405,9 +357,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"
@@ -450,30 +403,6 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
   margin-bottom: inherit;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -560,9 +489,10 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-4 emotion-5"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"
@@ -605,30 +535,6 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
   margin-bottom: inherit;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -715,9 +621,10 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-4 emotion-5"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"
@@ -804,30 +711,6 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   margin-bottom: inherit;
 }
 
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-10>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -894,9 +777,10 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
           class="components-base-control__field emotion-8 emotion-9"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"

package/src/components/post-revisions-preview/revisions-slider.js

@@ -9,6 +9,7 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import { useMemo } from '@wordpress/element';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { Stack } from '@wordpress/ui';
+import { useFocusOnMount } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -64,6 +65,8 @@ function RevisionsSlider() {
 		useDispatch( editorStore )
 	);
 
+	const focusOnMountRef = useFocusOnMount( true );
+
 	const isLoading = ! rawRevisions;
 	const totalPages = Math.ceil( totalRevisions / perPage ) || 1;
 
@@ -132,7 +135,7 @@ function RevisionsSlider() {
 			<Spinner />
 		) : (
 			<RangeControl
-				__next40pxDefaultSize
+				ref={ focusOnMountRef }
 				aria-valuetext={ renderTooltipContent( selectedIndex ) }
 				className="editor-revisions-header__slider"
 				hideLabelFromVision

package/src/components/post-revisions-preview/test/block-diff.js

@@ -9,8 +9,8 @@ import {
 	serialize,
 } from '@wordpress/blocks';
 import { RichTextData } from '@wordpress/rich-text';
-import * as paragraphBlock from '@wordpress/block-library/src/paragraph';
-import * as groupBlock from '@wordpress/block-library/src/group';
+import * as paragraphBlock from '@wordpress/block-library/build-module/paragraph/index.mjs';
+import * as groupBlock from '@wordpress/block-library/build-module/group/index.mjs';
 
 /**
  * Internal dependencies

package/src/components/post-taxonomies/flat-term-selector.js

@@ -279,7 +279,6 @@ export function FlatTermSelector( { slug } ) {
 	return (
 		<Stack direction="column" gap="lg">
 			<FormTokenField
-				__next40pxDefaultSize
 				value={ values }
 				suggestions={ suggestions }
 				onChange={ onChange }

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -417,7 +417,6 @@ export function HierarchicalTermSelector( { slug } ) {
 		<Flex direction="column" gap="4">
 			{ showFilter && ! loading && (
 				<SearchControl
-					__next40pxDefaultSize
 					label={ filterLabel }
 					placeholder={ filterLabel }
 					value={ filterValue }
@@ -470,7 +469,6 @@ export function HierarchicalTermSelector( { slug } ) {
 						/>
 						{ !! availableTerms.length && (
 							<TreeSelect
-								__next40pxDefaultSize
 								label={ parentSelectLabel }
 								noOptionLabel={ noParentOption }
 								onChange={ onChangeFormParent }

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

@@ -159,7 +159,6 @@ function PostTemplateDropdownContent( { onClose } ) {
 				</Notice>
 			) : (
 				<SelectControl
-					__next40pxDefaultSize
 					hideLabelFromVision
 					label={ __( 'Template' ) }
 					value={ selectedOption?.value ?? '' }

package/src/components/preferences-modal/index.js

@@ -126,30 +126,48 @@ function PreferencesModalContents( { extraSections = {} } ) {
 									label={ __( 'Show starter patterns' ) }
 								/>
 								{ showCollaborationOptions && (
-									<>
-										<PreferenceToggleControl
-											scope="core"
-											featureName="showCollaborationCursor"
-											help={ __(
-												'Show your own avatar inside blocks during collaborative editing sessions.'
-											) }
-											label={ __(
-												'Show avatar in blocks'
-											) }
-										/>
-										<PreferenceToggleControl
-											scope="core"
-											featureName="showCollaborationNotifications"
-											help={ __(
-												'Show notifications when collaborators join, leave, or save the post.'
-											) }
-											label={ __(
-												'Show collaboration notifications'
-											) }
-										/>
-									</>
+									<PreferenceToggleControl
+										scope="core"
+										featureName="showCollaborationCursor"
+										help={ __(
+											'Show your own avatar inside blocks during collaborative editing sessions.'
+										) }
+										label={ __( 'Show avatar in blocks' ) }
+									/>
 								) }
 							</PreferencesModalSection>
+							{ showCollaborationOptions && (
+								<PreferencesModalSection
+									title={ __(
+										'Collaboration notifications'
+									) }
+								>
+									<PreferenceToggleControl
+										scope="core"
+										featureName="showCollaborationJoinNotifications"
+										help={ __(
+											'Show notifications when collaborators join the post.'
+										) }
+										label={ __( 'Collaborator joined' ) }
+									/>
+									<PreferenceToggleControl
+										scope="core"
+										featureName="showCollaborationLeaveNotifications"
+										help={ __(
+											'Show notifications when collaborators leave the post.'
+										) }
+										label={ __( 'Collaborator left' ) }
+									/>
+									<PreferenceToggleControl
+										scope="core"
+										featureName="showCollaborationPostSaveNotifications"
+										help={ __(
+											'Show notifications when collaborators save, update, or publish the post.'
+										) }
+										label={ __( 'Post updated' ) }
+									/>
+								</PreferencesModalSection>
+							) }
 							<PreferencesModalSection
 								title={ __( 'Document settings' ) }
 								description={ __(

package/src/components/preferences-modal/test/index.js

@@ -2,22 +2,84 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+import { store as coreStore } from '@wordpress/core-data';
+import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import EditPostPreferencesModal from '../';
+import { store as editorStore } from '../../../store';
+import { lock } from '../../../lock-unlock';
 
 // This allows us to tweak the returned value on each test.
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
+function setupActiveModal( preferences = {} ) {
+	const user = userEvent.setup();
+	const editorSelectors = {
+		getCurrentPostType: () => 'post',
+		getEditedPostAttribute: () => 'post',
+		isPublishSidebarEnabled: () => false,
+	};
+	lock( editorSelectors, {
+		getEditorSettings: () => ( {
+			richEditingEnabled: true,
+		} ),
+		isCollaborationEnabledForCurrentPost: () => true,
+	} );
+
+	useViewportMatch.mockReturnValue( true );
+	useSelect.mockImplementation( ( mapSelect ) =>
+		mapSelect( ( store ) => {
+			if ( store === interfaceStore ) {
+				return {
+					isModalActive: () => true,
+				};
+			}
+			if ( store === editorStore ) {
+				return editorSelectors;
+			}
+			if ( store === preferencesStore ) {
+				return {
+					get: ( scope, featureName ) => preferences[ featureName ],
+				};
+			}
+			if ( store === coreStore ) {
+				return {
+					getEntityRecords: () => [],
+					getPostType: () => ( { supports: {} } ),
+					getThemeSupports: () => ( {} ),
+				};
+			}
+		} )
+	);
+
+	render(
+		<SlotFillProvider>
+			<EditPostPreferencesModal />
+		</SlotFillProvider>
+	);
+
+	return user;
+}
+
 describe( 'EditPostPreferencesModal', () => {
+	beforeEach( () => {
+		useSelect.mockReset();
+		useViewportMatch.mockReset();
+	} );
+
 	it( 'should not render when the modal is not active', () => {
 		useSelect.mockImplementation( () => false );
 		render( <EditPostPreferencesModal /> );
@@ -25,4 +87,25 @@ describe( 'EditPostPreferencesModal', () => {
 			screen.queryByRole( 'dialog', { name: 'Preferences' } )
 		).not.toBeInTheDocument();
 	} );
+
+	it( 'shows collaboration notification controls', async () => {
+		const user = setupActiveModal();
+		await user.click( screen.getByRole( 'tab', { name: 'General' } ) );
+
+		expect(
+			await screen.findByRole( 'checkbox', {
+				name: 'Collaborator joined',
+			} )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'checkbox', {
+				name: 'Collaborator left',
+			} )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'checkbox', {
+				name: 'Post updated',
+			} )
+		).toBeInTheDocument();
+	} );
 } );

package/src/components/preview-dropdown/index.js

@@ -28,6 +28,7 @@ import { VisuallyHidden } from '@wordpress/ui';
  */
 import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
+import { VIEWPORT_STATE_BY_DEVICE_TYPE } from '../../utils/device-type';
 import { unlock } from '../../lock-unlock';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
@@ -39,13 +40,17 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		showIconLabels,
 		isTemplateHidden,
 		templateId,
+		isResponsiveEditing,
 	} = useSelect( ( select ) => {
 		const {
-			getDeviceType,
 			getCurrentPostType,
 			getCurrentTemplateId,
 			getRenderingMode,
-		} = select( editorStore );
+			getDeviceType,
+		} = unlock( select( editorStore ) );
+		const { isResponsiveEditing: _isResponsiveEditing } = unlock(
+			select( blockEditorStore )
+		);
 		const { getEntityRecord, getPostType } = select( coreStore );
 		const { get } = select( preferencesStore );
 		const _currentPostType = getCurrentPostType();
@@ -57,18 +62,30 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isTemplateHidden: getRenderingMode() === 'post-only',
 			templateId: getCurrentTemplateId(),
+			isResponsiveEditing: _isResponsiveEditing(),
 		};
 	}, [] );
 	const { setDeviceType, setRenderingMode, setDefaultRenderingMode } = unlock(
 		useDispatch( editorStore )
 	);
-	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+	const { resetZoomLevel, setStyleStateViewport, setResponsiveEditing } =
+		unlock( useDispatch( blockEditorStore ) );
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
 		setDeviceType( newDeviceType );
 		resetZoomLevel();
 	};
 
+	const handleResponsiveEditingChange = () => {
+		const newIsResponsiveEditing = ! isResponsiveEditing;
+		setResponsiveEditing( newIsResponsiveEditing );
+		setStyleStateViewport(
+			newIsResponsiveEditing
+				? VIEWPORT_STATE_BY_DEVICE_TYPE[ deviceType ] ?? 'default'
+				: 'default'
+		);
+	};
+
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
 		return null;
@@ -107,16 +124,25 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			value: 'Desktop',
 			label: __( 'Desktop' ),
 			icon: desktop,
+			info: isResponsiveEditing
+				? __( 'Edit across all breakpoints.' )
+				: __( 'Preview desktop viewport.' ),
 		},
 		{
 			value: 'Tablet',
 			label: __( 'Tablet' ),
 			icon: tablet,
+			info: isResponsiveEditing
+				? __( 'Make tablet exclusive style changes.' )
+				: __( 'Preview tablet viewport.' ),
 		},
 		{
 			value: 'Mobile',
 			label: __( 'Mobile' ),
 			icon: mobile,
+			info: isResponsiveEditing
+				? __( 'Make mobile exclusive style changes.' )
+				: __( 'Preview mobile viewport.' ),
 		},
 	];
 
@@ -142,6 +168,19 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 							onSelect={ handleDevicePreviewChange }
 						/>
 					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							icon={ isResponsiveEditing ? check : undefined }
+							isSelected={ isResponsiveEditing }
+							role="menuitemcheckbox"
+							onClick={ handleResponsiveEditingChange }
+							info={ __(
+								'Style changes apply only to the current viewport.'
+							) }
+						>
+							{ __( 'Responsive editing' ) }
+						</MenuItem>
+					</MenuGroup>
 					{ isTemplate && (
 						<MenuGroup>
 							<MenuItem