@wordpress/editor 12.8.0 → 12.11.0

package/src/components/editor-help/help-topic-row.native.js

@@ -9,7 +9,7 @@ import { useNavigation } from '@react-navigation/native';
 import { TextControl, Icon } from '@wordpress/components';
 import { chevronRight } from '@wordpress/icons';
 
-const HelpTopicRow = ( { label, icon, screenName } ) => {
+const HelpTopicRow = ( { label, icon, screenName, isLastItem } ) => {
 	const navigation = useNavigation();
 
 	const openSubSheet = () => {
@@ -18,7 +18,7 @@ const HelpTopicRow = ( { label, icon, screenName } ) => {
 
 	return (
 		<TextControl
-			separatorType="leftMargin"
+			separatorType={ isLastItem ? 'none' : 'leftMargin' }
 			customActionButton
 			leftAlign
 			onPress={ openSubSheet }

package/src/components/editor-help/icon-move-blocks.native.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9.53 17.47 9 16.94 7.94 18l.53.53 2 2 .53.53.53-.53 2-2 .53-.53L13 16.94l-.53.53-.72.72v-4.94h-1.5v4.94l-.72-.72Zm-1.06-14L7.94 4 9 5.06l.53-.53.72-.72v4.94h1.5V3.81l.72.72.53.53L14.06 4l-.53-.53-2-2L11 .94l-.53.53-2 2ZM4.53 9.53 5.06 9 4 7.94l-.53.53-2 2-.53.53.53.53 2 2 .53.53L5.06 13l-.53-.53-.72-.72h4.94v-1.5H3.81l.72-.72Zm14-1.06L18 7.94 16.94 9l.53.53.72.72h-4.94v1.5h4.94l-.72.72-.53.53L18 14.06l.53-.53 2-2 .53-.53-.53-.53-2-2Z" />
+	</SVG>
+);

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { kebabCase } from 'lodash';
-import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
 /**
@@ -14,16 +14,9 @@ import {
 	PanelBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	helpFilled,
-	plusCircleFilled,
-	alignJustify,
-	trash,
-	cog,
-} from '@wordpress/icons';
+import { helpFilled, plusCircleFilled, trash, cog } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import {
 	requestContactCustomerSupport,
 	requestGotoCustomerSupportOptions,
@@ -41,6 +34,8 @@ import AddBlocks from './add-blocks';
 import MoveBlocks from './move-blocks';
 import RemoveBlocks from './remove-blocks';
 import CustomizeBlocks from './customize-blocks';
+import moveBlocksIcon from './icon-move-blocks';
+import HelpSectionTitle from './help-section-title';
 
 const HELP_TOPICS = [
 	{
@@ -53,7 +48,7 @@ const HELP_TOPICS = [
 		icon: plusCircleFilled,
 		view: <AddBlocks />,
 	},
-	{ label: __( 'Move blocks' ), icon: alignJustify, view: <MoveBlocks /> },
+	{ label: __( 'Move blocks' ), icon: moveBlocksIcon, view: <MoveBlocks /> },
 	{ label: __( 'Remove blocks' ), icon: trash, view: <RemoveBlocks /> },
 	{
 		label: __( 'Customize blocks' ),
@@ -67,11 +62,6 @@ 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' )
@@ -109,9 +99,10 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 							</BottomSheet.NavBar>
 							<BottomSheetConsumer>
 								{ ( { listProps } ) => {
-									const contentContainerStyle = StyleSheet.flatten(
-										listProps.contentContainerStyle
-									);
+									const contentContainerStyle =
+										StyleSheet.flatten(
+											listProps.contentContainerStyle
+										);
 									return (
 										<ScrollView
 											{ ...listProps }
@@ -130,15 +121,21 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 											} }
 										>
 											<PanelBody>
-												<Text style={ sectionTitle }>
+												<HelpSectionTitle>
 													{ __( 'The basics' ) }
-												</Text>
+												</HelpSectionTitle>
 												{ /* Print out help topics. */ }
 												{ HELP_TOPICS.map(
-													( { label, icon } ) => {
-														const labelSlug = kebabCase(
-															label
-														);
+													(
+														{ label, icon },
+														index
+													) => {
+														const labelSlug =
+															kebabCase( label );
+														const isLastItem =
+															index ===
+															HELP_TOPICS.length -
+																1;
 														return (
 															<HelpTopicRow
 																key={
@@ -149,16 +146,17 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 																screenName={
 																	labelSlug
 																}
+																isLastItem={
+																	isLastItem
+																}
 															/>
 														);
 													}
 												) }
 												{
-													<Text
-														style={ sectionTitle }
-													>
+													<HelpSectionTitle>
 														{ __( 'Get support' ) }
-													</Text>
+													</HelpSectionTitle>
 												}
 												{
 													<HelpGetSupportButton

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

@@ -12,19 +12,39 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import styles from './style.scss';
-import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
+import {
+	HelpDetailBodyText,
+	HelpDetailImage,
+	HelpDetailSectionHeadingText,
+} from './view-sections';
 
 const MoveBlocks = () => {
 	return (
 		<>
+			<HelpDetailImage
+				source={ require( './images/drag-and-drop-light.png' ) }
+				sourceDarkMode={ require( './images/drag-and-drop-dark.png' ) }
+			/>
+			<View style={ styles.helpDetailContainer }>
+				<HelpDetailSectionHeadingText
+					text={ __( 'Drag & drop' ) }
+					badge={ __( 'NEW' ) }
+				/>
+				<HelpDetailBodyText
+					text={ __(
+						'Drag & drop makes rearranging blocks a breeze. Press and hold on a block, then drag it to its new location and release.'
+					) }
+				/>
+			</View>
 			<HelpDetailImage
 				source={ require( './images/move-light.png' ) }
 				sourceDarkMode={ require( './images/move-dark.png' ) }
 			/>
 			<View style={ styles.helpDetailContainer }>
+				<HelpDetailSectionHeadingText text={ __( 'Arrow buttons' ) } />
 				<HelpDetailBodyText
 					text={ __(
-						'You can rearrange blocks by tapping a block and then tapping the up and down arrows that appear on the bottom left side of the block to move it above or below other blocks.'
+						'You can also rearrange blocks by tapping a block and then tapping the up and down arrows that appear on the bottom left side of the block to move it up or down.'
 					) }
 				/>
 			</View>

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

@@ -31,6 +31,21 @@
 	padding: 0;
 }
 
+.helpSectionTitleContainer {
+	margin-top: 24px;
+	margin-bottom: 16px;
+}
+
+.helpSectionTitle {
+	color: $light-primary;
+	font-weight: 600;
+	font-size: 16px;
+}
+
+.helpSectionTitleDark {
+	color: $dark-secondary;
+}
+
 .helpDetailContainer {
 	padding: 0 16px;
 }
@@ -62,14 +77,18 @@
 }
 
 .helpDetailSectionHeading {
+	flex-direction: row;
+	align-items: center;
+}
+
+.helpDetailSectionHeadingText {
 	color: $light-primary;
-	font-weight: 600;
+	font-weight: 700;
 	font-size: 16px;
-	margin-top: 24px;
 }
 
-.helpDetailSectionHeadingDark {
-	color: $dark-secondary;
+.helpDetailSectionHeadingTextDark {
+	color: $dark-primary;
 }
 
 .helpDetailBody {
@@ -81,3 +100,16 @@
 .helpDetailBodyDark {
 	color: $dark-secondary;
 }
+
+.helpDetailBadgeContainer {
+	padding: 2px 6px;
+	margin-right: 8px;
+	border-radius: 6px;
+	background-color: #c9356e;
+}
+
+.helpDetailBadgeText {
+	color: $white;
+	font-weight: 500;
+	font-size: 12px;
+}

package/src/components/editor-help/view-sections.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Text, Image } from 'react-native';
+import { Text, Image, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -28,15 +28,22 @@ export const HelpDetailBodyText = ( { text } ) => {
 	);
 };
 
-export const HelpDetailSectionHeadingText = ( { text } ) => {
-	const headingStyle = usePreferredColorSchemeStyle(
-		styles.helpDetailSectionHeading,
-		styles.helpDetailSectionHeadingDark
+export const HelpDetailSectionHeadingText = ( { text, badge } ) => {
+	const headingTextStyle = usePreferredColorSchemeStyle(
+		styles.helpDetailSectionHeadingText,
+		styles.helpDetailSectionHeadingTextDark
 	);
 	return (
-		<Text accessibilityRole="header" selectable style={ headingStyle }>
-			{ text }
-		</Text>
+		<View style={ styles.helpDetailSectionHeading }>
+			{ badge && <HelpDetailBadge text={ badge } /> }
+			<Text
+				accessibilityRole="header"
+				selectable
+				style={ headingTextStyle }
+			>
+				{ text }
+			</Text>
+		</View>
 	);
 };
 
@@ -62,3 +69,11 @@ export const HelpDetailImage = ( {
 		/>
 	);
 };
+
+const HelpDetailBadge = ( { text } ) => {
+	return (
+		<View style={ styles.helpDetailBadgeContainer }>
+			<Text style={ styles.helpDetailBadgeText }>{ text }</Text>
+		</View>
+	);
+};

package/src/components/entities-saved-states/entity-record-item.js

@@ -57,18 +57,18 @@ export default function EntityRecordItem( {
 
 	const isSelected = useSelect(
 		( select ) => {
-			const selectedBlockId = select(
-				blockEditorStore
-			).getSelectedBlockClientId();
+			const selectedBlockId =
+				select( blockEditorStore ).getSelectedBlockClientId();
 			return selectedBlockId === parentBlockId;
 		},
 		[ parentBlockId ]
 	);
 	const isSelectedText = isSelected ? __( 'Selected' ) : __( 'Select' );
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const selectParentBlock = useCallback( () => selectBlock( parentBlockId ), [
-		parentBlockId,
-	] );
+	const selectParentBlock = useCallback(
+		() => selectBlock( parentBlockId ),
+		[ parentBlockId ]
+	);
 	const selectAndDismiss = useCallback( () => {
 		selectBlock( parentBlockId );
 		closePanel();

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

@@ -39,9 +39,8 @@ const PUBLISH_ON_SAVE_ENTITIES = [
 export default function EntitiesSavedStates( { close } ) {
 	const saveButtonRef = useRef();
 	const { dirtyEntityRecords } = useSelect( ( select ) => {
-		const dirtyRecords = select(
-			coreStore
-		).__experimentalGetDirtyEntityRecords();
+		const dirtyRecords =
+			select( coreStore ).__experimentalGetDirtyEntityRecords();
 
 		// Remove site object and decouple into its edited pieces.
 		const dirtyRecordsWithoutSite = dirtyRecords.filter(
@@ -77,13 +76,11 @@ export default function EntitiesSavedStates( { close } ) {
 		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
 	} = useDispatch( coreStore );
 
-	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	// To group entities by type.
 	const partitionedSavables = groupBy( dirtyEntityRecords, 'name' );

package/src/components/global-keyboard-shortcuts/save-shortcut.js

@@ -12,9 +12,8 @@ import { store as editorStore } from '../../store';
 
 function SaveShortcut( { resetBlocksOnSave } ) {
 	const { resetEditorBlocks, savePost } = useDispatch( editorStore );
-	const { isEditedPostDirty, getPostEdits, isPostSavingLocked } = useSelect(
-		editorStore
-	);
+	const { isEditedPostDirty, getPostEdits, isPostSavingLocked } =
+		useSelect( editorStore );
 
 	useShortcut( 'core/editor/save', ( event ) => {
 		event.preventDefault();

package/src/components/index.js

@@ -41,7 +41,10 @@ export { default as PostPublishPanel } from './post-publish-panel';
 export { default as PostSavedState } from './post-saved-state';
 export { default as PostSchedule } from './post-schedule';
 export { default as PostScheduleCheck } from './post-schedule/check';
-export { default as PostScheduleLabel } from './post-schedule/label';
+export {
+	default as PostScheduleLabel,
+	usePostScheduleLabel,
+} from './post-schedule/label';
 export { default as PostSlug } from './post-slug';
 export { default as PostSlugCheck } from './post-slug/check';
 export { default as PostSticky } from './post-sticky';

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { once, uniqueId, omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -27,23 +22,30 @@ const requestIdleCallback = window.requestIdleCallback
 	? window.requestIdleCallback
 	: window.requestAnimationFrame;
 
+let hasStorageSupport;
+let uniqueId = 0;
+
 /**
  * Function which returns true if the current environment supports browser
  * sessionStorage, or false otherwise. The result of this function is cached and
  * reused in subsequent invocations.
  */
-const hasSessionStorageSupport = once( () => {
-	try {
-		// Private Browsing in Safari 10 and earlier will throw an error when
-		// attempting to set into sessionStorage. The test here is intentional in
-		// causing a thrown error as condition bailing from local autosave.
-		window.sessionStorage.setItem( '__wpEditorTestSessionStorage', '' );
-		window.sessionStorage.removeItem( '__wpEditorTestSessionStorage' );
-		return true;
-	} catch ( error ) {
-		return false;
+const hasSessionStorageSupport = () => {
+	if ( typeof hasStorageSupport === 'undefined' ) {
+		try {
+			// Private Browsing in Safari 10 and earlier will throw an error when
+			// attempting to set into sessionStorage. The test here is intentional in
+			// causing a thrown error as condition bailing from local autosave.
+			window.sessionStorage.setItem( '__wpEditorTestSessionStorage', '' );
+			window.sessionStorage.removeItem( '__wpEditorTestSessionStorage' );
+			hasStorageSupport = true;
+		} catch ( error ) {
+			hasStorageSupport = false;
+		}
 	}
-} );
+
+	return hasStorageSupport;
+};
 
 /**
  * Custom hook which manages the creation of a notice prompting the user to
@@ -54,8 +56,8 @@ function useAutosaveNotice() {
 		( select ) => ( {
 			postId: select( editorStore ).getCurrentPostId(),
 			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			hasRemoteAutosave: !! select( editorStore ).getEditorSettings()
-				.autosave,
+			hasRemoteAutosave:
+				!! select( editorStore ).getEditorSettings().autosave,
 		} ),
 		[]
 	);
@@ -98,7 +100,7 @@ function useAutosaveNotice() {
 			return;
 		}
 
-		const noticeId = uniqueId( 'wpEditorAutosaveRestore' );
+		const noticeId = `wpEditorAutosaveRestore${ ++uniqueId }`;
 		createWarningNotice(
 			__(
 				'The backup of this post in your browser is different from the version below.'
@@ -109,7 +111,11 @@ function useAutosaveNotice() {
 					{
 						label: __( 'Restore the backup' ),
 						onClick() {
-							editPost( omit( edits, [ 'content' ] ) );
+							const {
+								content: editsContent,
+								...editsWithoutContent
+							} = edits;
+							editPost( editsWithoutContent );
 							resetEditorBlocks( parse( edits.content ) );
 							removeNotice( noticeId );
 						},
@@ -124,22 +130,17 @@ function useAutosaveNotice() {
  * Custom hook which ejects a local autosave after a successful save occurs.
  */
 function useAutosavePurge() {
-	const {
-		postId,
-		isEditedPostNew,
-		isDirty,
-		isAutosaving,
-		didError,
-	} = useSelect(
-		( select ) => ( {
-			postId: select( editorStore ).getCurrentPostId(),
-			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			isDirty: select( editorStore ).isEditedPostDirty(),
-			isAutosaving: select( editorStore ).isAutosavingPost(),
-			didError: select( editorStore ).didPostSaveRequestFail(),
-		} ),
-		[]
-	);
+	const { postId, isEditedPostNew, isDirty, isAutosaving, didError } =
+		useSelect(
+			( select ) => ( {
+				postId: select( editorStore ).getCurrentPostId(),
+				isEditedPostNew: select( editorStore ).isEditedPostNew(),
+				isDirty: select( editorStore ).isEditedPostDirty(),
+				isAutosaving: select( editorStore ).isAutosavingPost(),
+				didError: select( editorStore ).didPostSaveRequestFail(),
+			} ),
+			[]
+		);
 
 	const lastIsDirty = useRef( isDirty );
 	const lastIsAutosaving = useRef( isAutosaving );
@@ -177,8 +178,8 @@ function LocalAutosaveMonitor() {
 
 	const { localAutosaveInterval } = useSelect(
 		( select ) => ( {
-			localAutosaveInterval: select( editorStore ).getEditorSettings()
-				.localAutosaveInterval,
+			localAutosaveInterval:
+				select( editorStore ).getEditorSettings().localAutosaveInterval,
 		} ),
 		[]
 	);

package/src/components/page-attributes/parent.js

@@ -7,7 +7,6 @@ import {
 	debounce,
 	repeat,
 	find,
-	flatten,
 	deburr,
 } from 'lodash';
 
@@ -52,12 +51,10 @@ export function PageAttributesParent() {
 	const [ fieldValue, setFieldValue ] = useState( false );
 	const { parentPost, parentPostId, items, postType } = useSelect(
 		( select ) => {
-			const { getPostType, getEntityRecords, getEntityRecord } = select(
-				coreStore
-			);
-			const { getCurrentPostId, getEditedPostAttribute } = select(
-				editorStore
-			);
+			const { getPostType, getEntityRecords, getEntityRecord } =
+				select( coreStore );
+			const { getCurrentPostId, getEditedPostAttribute } =
+				select( editorStore );
 			const postTypeSlug = getEditedPostAttribute( 'type' );
 			const pageId = getEditedPostAttribute( 'parent' );
 			const pType = getPostType( postTypeSlug );
@@ -113,7 +110,7 @@ export function PageAttributesParent() {
 				return priorityA >= priorityB ? 1 : -1;
 			} );
 
-			return flatten( sortedNodes );
+			return sortedNodes.flat();
 		};
 
 		let tree = pageItems.map( ( item ) => ( {

package/src/components/post-author/select.js

@@ -18,9 +18,8 @@ function PostAuthorSelect() {
 	const { editPost } = useDispatch( editorStore );
 	const { postAuthor, authors } = useSelect( ( select ) => {
 		return {
-			postAuthor: select( editorStore ).getEditedPostAttribute(
-				'author'
-			),
+			postAuthor:
+				select( editorStore ).getEditedPostAttribute( 'author' ),
 			authors: select( coreStore ).getUsers( AUTHORS_QUERY ),
 		};
 	}, [] );

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

@@ -29,9 +29,10 @@ function PostComments( { commentStatus = 'open', ...props } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			commentStatus: select( editorStore ).getEditedPostAttribute(
-				'comment_status'
-			),
+			commentStatus:
+				select( editorStore ).getEditedPostAttribute(
+					'comment_status'
+				),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {

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

@@ -49,9 +49,8 @@ export default function PostFormat() {
 
 	const { postFormat, suggestedFormat, supportedFormats } = useSelect(
 		( select ) => {
-			const { getEditedPostAttribute, getSuggestedPostFormat } = select(
-				editorStore
-			);
+			const { getEditedPostAttribute, getSuggestedPostFormat } =
+				select( editorStore );
 			const _postFormat = getEditedPostAttribute( 'format' );
 			const themeSupports = select( coreStore ).getThemeSupports();
 			return {

package/src/components/post-last-revision/check.js

@@ -26,10 +26,8 @@ export function PostLastRevisionCheck( {
 }
 
 export default withSelect( ( select ) => {
-	const {
-		getCurrentPostLastRevisionId,
-		getCurrentPostRevisionsCount,
-	} = select( editorStore );
+	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+		select( editorStore );
 	return {
 		lastRevisionId: getCurrentPostLastRevisionId(),
 		revisionsCount: getCurrentPostRevisionsCount(),

package/src/components/post-last-revision/index.js

@@ -35,10 +35,8 @@ function LastRevision( { lastRevisionId, revisionsCount } ) {
 }
 
 export default withSelect( ( select ) => {
-	const {
-		getCurrentPostLastRevisionId,
-		getCurrentPostRevisionsCount,
-	} = select( editorStore );
+	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+		select( editorStore );
 	return {
 		lastRevisionId: getCurrentPostLastRevisionId(),
 		revisionsCount: getCurrentPostRevisionsCount(),

package/src/components/post-pending-status/check.js

@@ -28,11 +28,8 @@ export function PostPendingStatusCheck( {
 
 export default compose(
 	withSelect( ( select ) => {
-		const {
-			isCurrentPostPublished,
-			getCurrentPostType,
-			getCurrentPost,
-		} = select( editorStore );
+		const { isCurrentPostPublished, getCurrentPostType, getCurrentPost } =
+			select( editorStore );
 		return {
 			hasPublishAction: get(
 				getCurrentPost(),

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

@@ -29,9 +29,8 @@ function PostPingbacks( { pingStatus = 'open', ...props } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			pingStatus: select( editorStore ).getEditedPostAttribute(
-				'ping_status'
-			),
+			pingStatus:
+				select( editorStore ).getEditedPostAttribute( 'ping_status' ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {