@wordpress/editor 12.0.1 → 12.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.0.1",
+	"version": "12.0.5",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,35 +30,35 @@
 		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/api-fetch": "^5.2.4",
-		"@wordpress/autop": "^3.2.2",
-		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-editor": "^7.0.4",
-		"@wordpress/blocks": "^11.1.2",
-		"@wordpress/components": "^19.0.0",
-		"@wordpress/compose": "^5.0.4",
-		"@wordpress/core-data": "^4.0.4",
-		"@wordpress/data": "^6.1.2",
-		"@wordpress/data-controls": "^2.2.5",
-		"@wordpress/date": "^4.2.2",
-		"@wordpress/deprecated": "^3.2.2",
-		"@wordpress/element": "^4.0.3",
-		"@wordpress/hooks": "^3.2.1",
-		"@wordpress/html-entities": "^3.2.2",
-		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.0.1",
-		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.4",
-		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/media-utils": "^3.0.3",
-		"@wordpress/notices": "^3.2.5",
-		"@wordpress/reusable-blocks": "^3.0.4",
-		"@wordpress/rich-text": "^5.0.4",
-		"@wordpress/server-side-render": "^3.0.4",
-		"@wordpress/url": "^3.2.3",
-		"@wordpress/wordcount": "^3.2.2",
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/a11y": "^3.2.4",
+		"@wordpress/api-fetch": "^5.2.6",
+		"@wordpress/autop": "^3.2.3",
+		"@wordpress/blob": "^3.2.2",
+		"@wordpress/block-editor": "^8.0.2",
+		"@wordpress/blocks": "^11.1.4",
+		"@wordpress/components": "^19.0.2",
+		"@wordpress/compose": "^5.0.6",
+		"@wordpress/core-data": "^4.0.7",
+		"@wordpress/data": "^6.1.4",
+		"@wordpress/data-controls": "^2.2.7",
+		"@wordpress/date": "^4.2.3",
+		"@wordpress/deprecated": "^3.2.3",
+		"@wordpress/element": "^4.0.4",
+		"@wordpress/hooks": "^3.2.2",
+		"@wordpress/html-entities": "^3.2.3",
+		"@wordpress/i18n": "^4.2.4",
+		"@wordpress/icons": "^6.1.1",
+		"@wordpress/is-shallow-equal": "^4.2.1",
+		"@wordpress/keyboard-shortcuts": "^3.0.6",
+		"@wordpress/keycodes": "^3.2.4",
+		"@wordpress/media-utils": "^3.0.5",
+		"@wordpress/notices": "^3.2.7",
+		"@wordpress/reusable-blocks": "^3.0.8",
+		"@wordpress/rich-text": "^5.0.6",
+		"@wordpress/server-side-render": "^3.0.6",
+		"@wordpress/url": "^3.3.1",
+		"@wordpress/wordcount": "^3.2.3",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "157f4ae53ab98e574af01f72213ae5a9613159ff"
+	"gitHead": "9a1dd3474d937468e4cf9caf9886ad61ef0a8f50"
 }

package/src/components/autosave-monitor/index.js

@@ -42,6 +42,11 @@ export class AutosaveMonitor extends Component {
 			return;
 		}
 
+		if ( this.props.interval !== prevProps.interval ) {
+			clearTimeout( this.timerId );
+			this.setAutosaveTimer();
+		}
+
 		if ( ! this.props.isDirty ) {
 			this.needsAutosave = false;
 			return;

package/src/components/autosave-monitor/test/index.js

@@ -36,6 +36,12 @@ describe( 'AutosaveMonitor', () => {
 	} );
 
 	describe( '#componentDidUpdate()', () => {
+		it( 'should clear and restart autosave timer when the interval changes', () => {
+			wrapper.setProps( { interval: 999 } );
+			expect( clearTimeout ).toHaveBeenCalled();
+			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
+		} );
+
 		it( 'should set needsAutosave=true when editReference changes', () => {
 			expect( wrapper.instance().needsAutosave ).toBe( false );
 			wrapper.setProps( {
@@ -95,9 +101,9 @@ describe( 'AutosaveMonitor', () => {
 				isAutosaveable: true,
 				interval: 5,
 			} );
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 1 );
-			wrapper.instance().autosaveTimerHandler();
 			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
+			wrapper.instance().autosaveTimerHandler();
+			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 3 );
 			expect( setTimeout ).lastCalledWith( expect.any( Function ), 5000 );
 		} );
 
@@ -106,9 +112,9 @@ describe( 'AutosaveMonitor', () => {
 				isAutosaveable: false,
 				interval: 5,
 			} );
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 1 );
-			wrapper.instance().autosaveTimerHandler();
 			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
+			wrapper.instance().autosaveTimerHandler();
+			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 3 );
 			expect( setTimeout ).lastCalledWith( expect.any( Function ), 1000 );
 		} );
 

package/src/components/editor-help/index.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { kebabCase } from 'lodash';
-import { Text, ScrollView, StyleSheet, View } from 'react-native';
+import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
 /**
@@ -86,119 +86,125 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 			contentStyle={ styles.contentContainer }
 			testID="editor-help-modal"
 		>
-			<BottomSheet.NavigationContainer
-				animate
-				main
-				style={ styles.navigationContainer }
-			>
-				<BottomSheet.NavigationScreen
-					isScrollable
-					fullScreen
-					name="help-topics"
+			<SafeAreaView>
+				<BottomSheet.NavigationContainer
+					animate
+					main
+					style={ styles.navigationContainer }
 				>
-					<View style={ styles.container }>
-						<BottomSheet.NavBar>
-							<BottomSheet.NavBar.DismissButton
-								onPress={ close }
-								iosText={ __( 'Close' ) }
-							/>
-							<BottomSheet.NavBar.Heading>
-								{ title }
-							</BottomSheet.NavBar.Heading>
-						</BottomSheet.NavBar>
-						<BottomSheetConsumer>
-							{ ( { listProps } ) => {
-								const contentContainerStyle = StyleSheet.flatten(
-									listProps.contentContainerStyle
-								);
-								return (
-									<ScrollView
-										{ ...listProps }
-										contentContainerStyle={ {
-											...contentContainerStyle,
-											paddingBottom: Math.max(
-												listProps.safeAreaBottomInset,
-												contentContainerStyle.paddingBottom
-											),
-											/**
-											 * Remove margin set via `hideHeader`. Combining a header
-											 * and navigation in this bottom sheet is at odds with the
-											 * current `BottomSheet` implementation.
-											 */
-											marginTop: 0,
-										} }
-									>
-										<PanelBody>
-											<Text style={ sectionTitle }>
-												{ __( 'The basics' ) }
-											</Text>
-											{ /* Print out help topics */ }
-											{ HELP_TOPICS.map(
-												( { label, icon } ) => {
-													const labelSlug = kebabCase(
-														label
-													);
-													return (
-														<HelpTopicRow
-															key={ labelSlug }
-															label={ label }
-															icon={ icon }
-															screenName={
-																labelSlug
-															}
-														/>
-													);
-												}
-											) }
-											{
+					<BottomSheet.NavigationScreen
+						isScrollable
+						fullScreen
+						name="help-topics"
+					>
+						<View style={ styles.container }>
+							<BottomSheet.NavBar>
+								<BottomSheet.NavBar.DismissButton
+									onPress={ close }
+									iosText={ __( 'Close' ) }
+								/>
+								<BottomSheet.NavBar.Heading>
+									{ title }
+								</BottomSheet.NavBar.Heading>
+							</BottomSheet.NavBar>
+							<BottomSheetConsumer>
+								{ ( { listProps } ) => {
+									const contentContainerStyle = StyleSheet.flatten(
+										listProps.contentContainerStyle
+									);
+									return (
+										<ScrollView
+											{ ...listProps }
+											contentContainerStyle={ {
+												...contentContainerStyle,
+												paddingBottom: Math.max(
+													listProps.safeAreaBottomInset,
+													contentContainerStyle.paddingBottom
+												),
+												/**
+												 * Remove margin set via `hideHeader`. Combining a header
+												 * and navigation in this bottom sheet is at odds with the
+												 * current `BottomSheet` implementation.
+												 */
+												marginTop: 0,
+											} }
+										>
+											<PanelBody>
 												<Text style={ sectionTitle }>
-													{ __( 'Get support' ) }
+													{ __( 'The basics' ) }
 												</Text>
-											}
-											{
-												<HelpGetSupportButton
-													title={ __(
-														'Contact support'
-													) }
-													onPress={
-														requestContactCustomerSupport
+												{ /* Print out help topics */ }
+												{ HELP_TOPICS.map(
+													( { label, icon } ) => {
+														const labelSlug = kebabCase(
+															label
+														);
+														return (
+															<HelpTopicRow
+																key={
+																	labelSlug
+																}
+																label={ label }
+																icon={ icon }
+																screenName={
+																	labelSlug
+																}
+															/>
+														);
 													}
-												/>
-											}
-											{
-												<HelpGetSupportButton
-													title={ __(
-														'More support options'
-													) }
-													onPress={
-														requestGotoCustomerSupportOptions
-													}
-												/>
-											}
-										</PanelBody>
-									</ScrollView>
-								);
-							} }
-						</BottomSheetConsumer>
-					</View>
-				</BottomSheet.NavigationScreen>
-				{ /* Print out help detail screens */ }
-				{ HELP_TOPICS.map( ( { view, label } ) => {
-					const labelSlug = kebabCase( label );
-					return (
-						<HelpDetailNavigationScreen
-							key={ labelSlug }
-							name={ labelSlug }
-							content={ view }
-							label={ label }
-							options={ {
-								gestureEnabled: true,
-								...TransitionPresets.DefaultTransition,
-							} }
-						/>
-					);
-				} ) }
-			</BottomSheet.NavigationContainer>
+												) }
+												{
+													<Text
+														style={ sectionTitle }
+													>
+														{ __( 'Get support' ) }
+													</Text>
+												}
+												{
+													<HelpGetSupportButton
+														title={ __(
+															'Contact support'
+														) }
+														onPress={
+															requestContactCustomerSupport
+														}
+													/>
+												}
+												{
+													<HelpGetSupportButton
+														title={ __(
+															'More support options'
+														) }
+														onPress={
+															requestGotoCustomerSupportOptions
+														}
+													/>
+												}
+											</PanelBody>
+										</ScrollView>
+									);
+								} }
+							</BottomSheetConsumer>
+						</View>
+					</BottomSheet.NavigationScreen>
+					{ /* Print out help detail screens */ }
+					{ HELP_TOPICS.map( ( { view, label } ) => {
+						const labelSlug = kebabCase( label );
+						return (
+							<HelpDetailNavigationScreen
+								key={ labelSlug }
+								name={ labelSlug }
+								content={ view }
+								label={ label }
+								options={ {
+									gestureEnabled: true,
+									...TransitionPresets.DefaultTransition,
+								} }
+							/>
+						);
+					} ) }
+				</BottomSheet.NavigationContainer>
+			</SafeAreaView>
 		</BottomSheet>
 	);
 }

package/src/components/entities-saved-states/entity-type-list.js

@@ -6,9 +6,9 @@ import { some } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { __, _n } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { PanelBody } from '@wordpress/components';
-import { page, layout } from '@wordpress/icons';
+import { PanelBody, PanelRow } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -16,10 +16,25 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import EntityRecordItem from './entity-record-item';
 
-const ENTITY_NAME_ICONS = {
-	site: layout,
-	page,
-};
+function getEntityDescription( entity, length ) {
+	switch ( entity ) {
+		case 'site':
+			return _n(
+				'This change will affect your whole site.',
+				'These changes will affect your whole site.',
+				length
+			);
+		case 'wp_template':
+			return _n(
+				'This change will affect pages and posts that use this template.',
+				'These changes will affect pages and posts that use these templates.',
+				length
+			);
+		case 'page':
+		case 'post':
+			return __( 'The following content has been modified.' );
+	}
+}
 
 export default function EntityTypeList( {
 	list,
@@ -33,13 +48,17 @@ export default function EntityTypeList( {
 			select( coreStore ).getEntity( firstRecord.kind, firstRecord.name ),
 		[ firstRecord.kind, firstRecord.name ]
 	);
-
-	// Set icon based on type of entity.
 	const { name } = firstRecord;
-	const icon = ENTITY_NAME_ICONS[ name ];
+	const entityLabel =
+		name === 'wp_template_part'
+			? _n( 'Template Part', 'Template Parts', list.length )
+			: entity.label;
+	// Set description based on type of entity.
+	const description = getEntityDescription( name, list.length );
 
 	return (
-		<PanelBody title={ entity.label } initialOpen={ true } icon={ icon }>
+		<PanelBody title={ entityLabel } initialOpen={ true }>
+			{ description && <PanelRow>{ description }</PanelRow> }
 			{ list.map( ( record ) => {
 				return (
 					<EntityRecordItem

package/src/components/entities-saved-states/index.js

@@ -19,7 +19,7 @@ import { close as closeIcon } from '@wordpress/icons';
  */
 import EntityTypeList from './entity-type-list';
 
-const TRANSLATED_SITE_PROTPERTIES = {
+const TRANSLATED_SITE_PROPERTIES = {
 	title: __( 'Title' ),
 	description: __( 'Tagline' ),
 	site_logo: __( 'Logo' ),
@@ -27,6 +27,13 @@ const TRANSLATED_SITE_PROTPERTIES = {
 	page_on_front: __( 'Page on front' ),
 };
 
+const PUBLISH_ON_SAVE_ENTITIES = [
+	{
+		kind: 'postType',
+		name: 'wp_navigation',
+	},
+];
+
 export default function EntitiesSavedStates( { close } ) {
 	const saveButtonRef = useRef();
 	const { dirtyEntityRecords } = useSelect( ( select ) => {
@@ -49,7 +56,7 @@ export default function EntitiesSavedStates( { close } ) {
 			siteEditsAsEntities.push( {
 				kind: 'root',
 				name: 'site',
-				title: TRANSLATED_SITE_PROTPERTIES[ property ] || property,
+				title: TRANSLATED_SITE_PROPERTIES[ property ] || property,
 				property,
 			} );
 		}
@@ -63,14 +70,27 @@ export default function EntitiesSavedStates( { close } ) {
 		};
 	}, [] );
 	const {
+		editEntityRecord,
 		saveEditedEntityRecord,
 		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
 	} = useDispatch( coreStore );
 
 	// To group entities by type.
-	const partitionedSavables = Object.values(
-		groupBy( dirtyEntityRecords, 'name' )
-	);
+	const partitionedSavables = groupBy( dirtyEntityRecords, 'name' );
+
+	// Sort entity groups.
+	const {
+		site: siteSavables,
+		wp_template: templateSavables,
+		wp_template_part: templatePartSavables,
+		...contentSavables
+	} = partitionedSavables;
+	const sortedPartitionedSavables = [
+		siteSavables,
+		templateSavables,
+		templatePartSavables,
+		...Object.values( contentSavables ),
+	].filter( Array.isArray );
 
 	// Unchecked entities to be ignored by save function.
 	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
@@ -118,6 +138,16 @@ export default function EntitiesSavedStates( { close } ) {
 			if ( 'root' === kind && 'site' === name ) {
 				siteItemsToSave.push( property );
 			} else {
+				if (
+					PUBLISH_ON_SAVE_ENTITIES.some(
+						( typeToPublish ) =>
+							typeToPublish.kind === kind &&
+							typeToPublish.name === name
+					)
+				) {
+					editEntityRecord( kind, name, key, { status: 'publish' } );
+				}
+
 				saveEditedEntityRecord( kind, name, key );
 			}
 		} );
@@ -160,15 +190,15 @@ export default function EntitiesSavedStates( { close } ) {
 			</div>
 
 			<div className="entities-saved-states__text-prompt">
-				<strong>{ __( 'Select the changes you want to save' ) }</strong>
+				<strong>{ __( 'Are you ready to save?' ) }</strong>
 				<p>
 					{ __(
-						'Some changes may affect other areas of your site.'
+						'The following changes have been made to your site, templates, and content.'
 					) }
 				</p>
 			</div>
 
-			{ partitionedSavables.map( ( list ) => {
+			{ sortedPartitionedSavables.map( ( list ) => {
 				return (
 					<EntityTypeList
 						key={ list[ 0 ].name }