@wordpress/editor 11.0.2 → 12.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "11.0.2",
+	"version": "12.0.3",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,34 +31,34 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.2",
-		"@wordpress/api-fetch": "^5.2.2",
-		"@wordpress/autop": "^3.2.1",
+		"@wordpress/a11y": "^3.2.3",
+		"@wordpress/api-fetch": "^5.2.5",
+		"@wordpress/autop": "^3.2.2",
 		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-editor": "^7.0.2",
-		"@wordpress/blocks": "^11.1.0",
-		"@wordpress/components": "^17.0.0",
-		"@wordpress/compose": "^5.0.2",
-		"@wordpress/core-data": "^4.0.2",
-		"@wordpress/data": "^6.1.0",
-		"@wordpress/data-controls": "^2.2.3",
-		"@wordpress/date": "^4.2.1",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/element": "^4.0.1",
-		"@wordpress/hooks": "^3.2.0",
-		"@wordpress/html-entities": "^3.2.1",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^5.0.2",
+		"@wordpress/block-editor": "^8.0.1",
+		"@wordpress/blocks": "^11.1.3",
+		"@wordpress/components": "^19.0.1",
+		"@wordpress/compose": "^5.0.5",
+		"@wordpress/core-data": "^4.0.5",
+		"@wordpress/data": "^6.1.3",
+		"@wordpress/data-controls": "^2.2.6",
+		"@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.1.0",
 		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.2",
-		"@wordpress/keycodes": "^3.2.2",
-		"@wordpress/media-utils": "^3.0.1",
-		"@wordpress/notices": "^3.2.3",
-		"@wordpress/reusable-blocks": "^3.0.2",
-		"@wordpress/rich-text": "^5.0.2",
-		"@wordpress/server-side-render": "^3.0.2",
-		"@wordpress/url": "^3.2.2",
-		"@wordpress/wordcount": "^3.2.1",
+		"@wordpress/keyboard-shortcuts": "^3.0.5",
+		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/media-utils": "^3.0.4",
+		"@wordpress/notices": "^3.2.6",
+		"@wordpress/reusable-blocks": "^3.0.6",
+		"@wordpress/rich-text": "^5.0.5",
+		"@wordpress/server-side-render": "^3.0.5",
+		"@wordpress/url": "^3.3.0",
+		"@wordpress/wordcount": "^3.2.2",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
+	"gitHead": "f89b63995376fe6efe920d858b48268b510920e1"
 }

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/character-count/index.js

@@ -10,8 +10,9 @@ import { count as characterCount } from '@wordpress/wordcount';
 import { store as editorStore } from '../../store';
 
 export default function CharacterCount() {
-	const content = useSelect( ( select ) =>
-		select( editorStore ).getEditedPostAttribute( 'content' )
+	const content = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
+		[]
 	);
 
 	return characterCount( content, 'characters_including_spaces' );

package/src/components/editor-help/help-get-support-button.native.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { Pressable, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const HelpGetSupportButton = ( { onPress, title } ) => {
+	const buttonStyle = usePreferredColorSchemeStyle(
+		styles.button,
+		styles.buttonDark
+	);
+
+	const textStyle = usePreferredColorSchemeStyle(
+		styles.buttonText,
+		styles.buttonTextDark
+	);
+
+	return (
+		<Pressable
+			style={ buttonStyle }
+			onPress={ onPress }
+			accessibilityRole={ 'button' }
+		>
+			<Text style={ textStyle }>{ title }</Text>
+		</Pressable>
+	);
+};
+
+export default HelpGetSupportButton;

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { kebabCase } from 'lodash';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
 /**
@@ -23,6 +23,11 @@ import {
 } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import {
+	requestContactCustomerSupport,
+	requestGotoCustomerSupportOptions,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -30,6 +35,7 @@ import { store as editorStore } from '@wordpress/editor';
 import styles from './style.scss';
 import HelpDetailNavigationScreen from './help-detail-navigation-screen';
 import HelpTopicRow from './help-topic-row';
+import HelpGetSupportButton from './help-get-support-button';
 import IntroToBlocks from './intro-to-blocks';
 import AddBlocks from './add-blocks';
 import MoveBlocks from './move-blocks';
@@ -61,6 +67,11 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
 
+	const sectionTitle = usePreferredColorSchemeStyle(
+		styles.helpDetailSectionHeading,
+		styles.helpDetailSectionHeadingDark
+	);
+
 	const title =
 		postType === 'page'
 			? __( 'How to edit your page' )
@@ -73,88 +84,127 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 			hideHeader
 			hasNavigation
 			contentStyle={ styles.contentContainer }
+			testID="editor-help-modal"
 		>
-			<BottomSheet.NavigationContainer animate main>
-				<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>
-											{ /* 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 }>
+													{ __( '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
+																}
+															/>
+														);
+													}
+												) }
+												{
+													<Text
+														style={ sectionTitle }
+													>
+														{ __( 'Get support' ) }
+													</Text>
 												}
-											) }
-										</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>
+												{
+													<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/editor-help/style.android.scss

@@ -0,0 +1,6 @@
+@import "./style.scss";
+
+.button {
+	border-radius: $border-width * 4;
+	padding: $grid-unit-10;
+}

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

@@ -0,0 +1,6 @@
+@import "./style.scss";
+
+.button {
+	border-radius: $border-width * 8;
+	padding: $grid-unit-15;
+}

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

@@ -1,3 +1,28 @@
+.button {
+	margin: $grid-unit-10 $grid-unit-05;
+	align-items: center;
+	justify-content: center;
+	border: $border-width solid $gray-300;
+}
+
+.buttonDark {
+	border-color: $gray-700;
+}
+
+.buttonText {
+	font-weight: 600;
+	font-size: 16px;
+	color: $light-primary;
+}
+
+.buttonTextDark {
+	color: $dark-primary;
+}
+
+.navigationContainer {
+	overflow: hidden;
+}
+
 .container {
 	height: 100%;
 }

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

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, waitForElementToBeRemoved } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import EditorHelp from '../index';
+
+it( 'lists help topics', async () => {
+	const screen = render( <EditorHelp isVisible /> );
+	const helpTopic = await screen.findByText( 'Customize blocks' );
+
+	expect( helpTopic ).toBeTruthy();
+} );
+
+it( 'navigates to help topic detail screen', async () => {
+	const screen = render( <EditorHelp isVisible /> );
+	const helpTopic = await screen.findByText( 'Customize blocks' );
+	fireEvent.press( helpTopic );
+
+	expect(
+		screen.getByText(
+			'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'
+		)
+	).toBeTruthy();
+} );
+
+it( 'navigates back from help topic detail screen', async () => {
+	const screen = render( <EditorHelp isVisible /> );
+	const helpTopic = await screen.findByText( 'Customize blocks' );
+	fireEvent.press( helpTopic );
+
+	const backButton = screen.getAllByA11yLabel( 'Go back' );
+	fireEvent.press( backButton[ backButton.length - 1 ] );
+
+	// Currently logs `act` warning due to https://git.io/JYYGE
+	await waitForElementToBeRemoved( () =>
+		screen.getByText(
+			'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'
+		)
+	);
+} );
+
+it( 'dismisses when close button is pressed', async () => {
+	const closeMock = jest.fn();
+	const screen = render( <EditorHelp isVisible close={ closeMock } /> );
+	const closeButton = await screen.findByA11yLabel( 'Go back' );
+	fireEvent.press( closeButton );
+
+	expect( closeMock ).toHaveBeenCalled();
+} );
+
+it( 'dismisses when parent modal backdrop is pressed', async () => {
+	const onCloseMock = jest.fn();
+	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
+	const modal = await screen.findByTestId( 'editor-help-modal' );
+	fireEvent( modal, 'backdropPress' );
+
+	expect( onCloseMock ).toHaveBeenCalled();
+} );
+
+it( 'dismisses when parent modal backdrop is swiped', async () => {
+	const onCloseMock = jest.fn();
+	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
+	const modal = await screen.findByTestId( 'editor-help-modal' );
+	fireEvent( modal, 'swipeComplete' );
+
+	expect( onCloseMock ).toHaveBeenCalled();
+} );
+
+it( 'dismisses when hardware back button is pressed', async () => {
+	const onCloseMock = jest.fn();
+	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
+	const modal = await screen.findByTestId( 'editor-help-modal' );
+	fireEvent( modal, 'backButtonPress' );
+
+	expect( onCloseMock ).toHaveBeenCalled();
+} );

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