@wordpress/editor 11.0.1 → 12.0.2

package/build-style/style-rtl.css

@@ -381,6 +381,7 @@
 }
 
 .editor-post-format__suggestion {
+  padding: 6px;
   text-align: left;
   font-size: 13px;
 }
@@ -634,6 +635,10 @@
   overflow: hidden;
   white-space: nowrap;
 }
+.editor-post-saved-state.is-saving[aria-disabled=true], .editor-post-saved-state.is-saving[aria-disabled=true]:hover, .editor-post-saved-state.is-saved[aria-disabled=true], .editor-post-saved-state.is-saved[aria-disabled=true]:hover {
+  background: transparent;
+  color: #757575;
+}
 .editor-post-saved-state svg {
   display: inline-block;
   flex: 0 0 auto;
@@ -647,7 +652,7 @@
     text-indent: inherit;
   }
   .editor-post-saved-state svg {
-    margin-left: 4px;
+    margin-left: 0;
   }
 }
 
@@ -912,73 +917,17 @@
 .editor-post-title {
   position: relative;
 }
-.editor-post-title .editor-post-title__input {
-  display: block;
-  width: 100%;
-  margin: 0;
-  box-shadow: none;
-  background: transparent;
-  transition: border 0.1s ease-out, box-shadow 0.1s linear;
-  padding: 19px 0;
-  word-break: keep-all;
-  font-family: inherit;
-  color: inherit;
-  border: 1px solid transparent;
-  border-right-width: 0;
-  border-left-width: 0;
-  border-radius: 0;
-  outline: 1px solid transparent;
-  font-size: 2.44em;
-  font-weight: 800;
-  line-height: 1.4;
-}
-@media (prefers-reduced-motion: reduce) {
-  .editor-post-title .editor-post-title__input {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-@media (min-width: 600px) {
-  .editor-post-title .editor-post-title__input {
-    border-width: 1px;
-  }
-}
-.editor-post-title .editor-post-title__input::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.editor-post-title .editor-post-title__input::-moz-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-  opacity: 1;
-}
-.editor-post-title .editor-post-title__input:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.is-dark-theme .editor-post-title .editor-post-title__input::-webkit-input-placeholder {
-  color: rgba(255, 255, 255, 0.65);
-}
-.is-dark-theme .editor-post-title .editor-post-title__input::-moz-placeholder {
-  opacity: 1;
-  color: rgba(255, 255, 255, 0.65);
-}
-.is-dark-theme .editor-post-title .editor-post-title__input:-ms-input-placeholder {
-  color: rgba(255, 255, 255, 0.65);
-}
-.editor-post-title .editor-post-title__input:focus {
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  box-shadow: none;
-}
-.editor-post-title.is-focus-mode .editor-post-title__input {
+.editor-post-title.is-focus-mode {
   opacity: 0.5;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
-  .editor-post-title.is-focus-mode .editor-post-title__input {
+  .editor-post-title.is-focus-mode {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.editor-post-title.is-focus-mode .editor-post-title__input:focus {
+.editor-post-title.is-focus-mode:focus {
   opacity: 1;
 }
 

package/build-style/style.css

@@ -381,6 +381,7 @@
 }
 
 .editor-post-format__suggestion {
+  padding: 6px;
   text-align: right;
   font-size: 13px;
 }
@@ -634,6 +635,10 @@
   overflow: hidden;
   white-space: nowrap;
 }
+.editor-post-saved-state.is-saving[aria-disabled=true], .editor-post-saved-state.is-saving[aria-disabled=true]:hover, .editor-post-saved-state.is-saved[aria-disabled=true], .editor-post-saved-state.is-saved[aria-disabled=true]:hover {
+  background: transparent;
+  color: #757575;
+}
 .editor-post-saved-state svg {
   display: inline-block;
   flex: 0 0 auto;
@@ -647,7 +652,7 @@
     text-indent: inherit;
   }
   .editor-post-saved-state svg {
-    margin-right: 4px;
+    margin-right: 0;
   }
 }
 
@@ -912,73 +917,17 @@
 .editor-post-title {
   position: relative;
 }
-.editor-post-title .editor-post-title__input {
-  display: block;
-  width: 100%;
-  margin: 0;
-  box-shadow: none;
-  background: transparent;
-  transition: border 0.1s ease-out, box-shadow 0.1s linear;
-  padding: 19px 0;
-  word-break: keep-all;
-  font-family: inherit;
-  color: inherit;
-  border: 1px solid transparent;
-  border-left-width: 0;
-  border-right-width: 0;
-  border-radius: 0;
-  outline: 1px solid transparent;
-  font-size: 2.44em;
-  font-weight: 800;
-  line-height: 1.4;
-}
-@media (prefers-reduced-motion: reduce) {
-  .editor-post-title .editor-post-title__input {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-@media (min-width: 600px) {
-  .editor-post-title .editor-post-title__input {
-    border-width: 1px;
-  }
-}
-.editor-post-title .editor-post-title__input::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.editor-post-title .editor-post-title__input::-moz-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-  opacity: 1;
-}
-.editor-post-title .editor-post-title__input:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.is-dark-theme .editor-post-title .editor-post-title__input::-webkit-input-placeholder {
-  color: rgba(255, 255, 255, 0.65);
-}
-.is-dark-theme .editor-post-title .editor-post-title__input::-moz-placeholder {
-  opacity: 1;
-  color: rgba(255, 255, 255, 0.65);
-}
-.is-dark-theme .editor-post-title .editor-post-title__input:-ms-input-placeholder {
-  color: rgba(255, 255, 255, 0.65);
-}
-.editor-post-title .editor-post-title__input:focus {
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  box-shadow: none;
-}
-.editor-post-title.is-focus-mode .editor-post-title__input {
+.editor-post-title.is-focus-mode {
   opacity: 0.5;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
-  .editor-post-title.is-focus-mode .editor-post-title__input {
+  .editor-post-title.is-focus-mode {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.editor-post-title.is-focus-mode .editor-post-title__input:focus {
+.editor-post-title.is-focus-mode:focus {
   opacity: 1;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "11.0.1",
+	"version": "12.0.2",
 	"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.1",
-		"@wordpress/api-fetch": "^5.2.1",
-		"@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.1",
-		"@wordpress/blocks": "^11.0.1",
-		"@wordpress/components": "^16.0.0",
-		"@wordpress/compose": "^5.0.1",
-		"@wordpress/core-data": "^4.0.1",
-		"@wordpress/data": "^6.0.1",
-		"@wordpress/data-controls": "^2.2.2",
-		"@wordpress/date": "^4.2.1",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/element": "^4.0.0",
-		"@wordpress/hooks": "^3.2.0",
-		"@wordpress/html-entities": "^3.2.1",
-		"@wordpress/i18n": "^4.2.1",
-		"@wordpress/icons": "^5.0.1",
+		"@wordpress/block-editor": "^8.0.0",
+		"@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.1",
-		"@wordpress/keycodes": "^3.2.1",
-		"@wordpress/media-utils": "^3.0.0",
-		"@wordpress/notices": "^3.2.2",
-		"@wordpress/reusable-blocks": "^3.0.1",
-		"@wordpress/rich-text": "^5.0.1",
-		"@wordpress/server-side-render": "^3.0.1",
-		"@wordpress/url": "^3.2.1",
-		"@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.5",
+		"@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": "8b67fbd424bc67f81c2d825877f0fae726d6363a"
+	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
 }

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/add-blocks.native.js

@@ -16,19 +16,24 @@ import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
 
 const AddBlocks = () => {
 	return (
-		<View style={ styles.helpDetailContainer }>
-			<HelpDetailImage source={ require( './images/add-blocks.png' ) } />
-			<HelpDetailBodyText
-				text={ __(
-					'Add a new block at any time by tapping on the + icon in the toolbar on the bottom left. '
-				) }
+		<>
+			<HelpDetailImage
+				source={ require( './images/add-light.png' ) }
+				sourceDarkMode={ require( './images/add-dark.png' ) }
 			/>
-			<HelpDetailBodyText
-				text={ __(
-					'Once you become familiar with the names of different blocks, you can add a block by typing a forward slash followed by the block name — for example, /image or /heading.'
-				) }
-			/>
-		</View>
+			<View style={ styles.helpDetailContainer }>
+				<HelpDetailBodyText
+					text={ __(
+						'Add a new block at any time by tapping on the + icon in the toolbar on the bottom left. '
+					) }
+				/>
+				<HelpDetailBodyText
+					text={ __(
+						'Once you become familiar with the names of different blocks, you can add a block by typing a forward slash followed by the block name — for example, /image or /heading.'
+					) }
+				/>
+			</View>
+		</>
 	);
 };
 

package/src/components/editor-help/customize-blocks.native.js

@@ -16,21 +16,24 @@ import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
 
 const CustomizeBlocks = () => {
 	return (
-		<View style={ styles.helpDetailContainer }>
+		<>
 			<HelpDetailImage
-				source={ require( './images/customize-blocks.png' ) }
+				source={ require( './images/settings-light.png' ) }
+				sourceDarkMode={ require( './images/settings-dark.png' ) }
 			/>
-			<HelpDetailBodyText
-				text={ __(
-					'Each block has its own settings. To find them, click on a block. Its settings will appear on the toolbar at the bottom of the screen.'
-				) }
-			/>
-			<HelpDetailBodyText
-				text={ __(
-					'Some blocks have additional settings. Tap the settings icon on the bottom right of the block to view more options.'
-				) }
-			/>
-		</View>
+			<View style={ styles.helpDetailContainer }>
+				<HelpDetailBodyText
+					text={ __(
+						'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.'
+					) }
+				/>
+				<HelpDetailBodyText
+					text={ __(
+						'Some blocks have additional settings. Tap the settings icon on the bottom right of the block to view more options.'
+					) }
+				/>
+			</View>
+		</>
 	);
 };
 

package/src/components/editor-help/help-detail-navigation-screen.native.js

@@ -1,35 +1,65 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import {
+	ScrollView,
+	StyleSheet,
+	TouchableWithoutFeedback,
+	View,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
-import { BottomSheet } from '@wordpress/components';
-import { useNavigation } from '@react-navigation/native';
-import { __ } from '@wordpress/i18n';
+import { BottomSheet, BottomSheetContext } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-const HelpDetailNavigationScreen = ( { name, content } ) => {
+const HelpDetailNavigationScreen = ( { content, label } ) => {
 	const navigation = useNavigation();
 
-	const goBack = () => {
-		navigation.goBack();
-	};
+	const { listProps } = useContext( BottomSheetContext );
+	const contentContainerStyle = StyleSheet.flatten(
+		listProps.contentContainerStyle
+	);
 
 	return (
-		<BottomSheet.NavigationScreen name={ __( 'What is a block?' ) }>
-			<BottomSheet.NavigationHeader
-				screen={ name }
-				leftButtonOnPress={ goBack }
-			/>
-			<View style={ styles.separator } />
-			{ content }
+		<BottomSheet.NavigationScreen isScrollable fullScreen>
+			<View style={ styles.container }>
+				<BottomSheet.NavBar>
+					<BottomSheet.NavBar.BackButton
+						onPress={ navigation.goBack }
+					/>
+					<BottomSheet.NavBar.Heading>
+						{ label }
+					</BottomSheet.NavBar.Heading>
+				</BottomSheet.NavBar>
+				<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,
+					} }
+				>
+					<TouchableWithoutFeedback accessible={ false }>
+						<View>{ content }</View>
+					</TouchableWithoutFeedback>
+				</ScrollView>
+			</View>
 		</BottomSheet.NavigationScreen>
 	);
 };

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/help-topic-row.native.js

@@ -9,11 +9,11 @@ import { useNavigation } from '@react-navigation/native';
 import { TextControl, Icon } from '@wordpress/components';
 import { chevronRight } from '@wordpress/icons';
 
-const HelpTopicRow = ( { label, icon } ) => {
+const HelpTopicRow = ( { label, icon, screenName } ) => {
 	const navigation = useNavigation();
 
 	const openSubSheet = () => {
-		navigation.navigate( label );
+		navigation.navigate( screenName );
 	};
 
 	return (