@wordpress/editor 12.8.0 → 12.9.0

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' )
@@ -130,15 +120,22 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 											} }
 										>
 											<PanelBody>
-												<Text style={ sectionTitle }>
+												<HelpSectionTitle>
 													{ __( 'The basics' ) }
-												</Text>
+												</HelpSectionTitle>
 												{ /* Print out help topics. */ }
 												{ HELP_TOPICS.map(
-													( { label, icon } ) => {
+													(
+														{ 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/post-schedule/index.js

@@ -3,8 +3,8 @@
  */
 import { __experimentalGetSettings } from '@wordpress/date';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { DateTimePicker } from '@wordpress/components';
-import { useRef, useState, useMemo } from '@wordpress/element';
+import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -21,7 +21,7 @@ function getDayOfTheMonth( date = new Date(), firstDay = true ) {
 	).toISOString();
 }
 
-export default function PostSchedule() {
+export default function PostSchedule( { onClose } ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
 			postDate: select( editorStore ).getEditedPostAttribute( 'date' ),
@@ -61,7 +61,6 @@ export default function PostSchedule() {
 		[ eventsByPostType ]
 	);
 
-	const ref = useRef();
 	const settings = __experimentalGetSettings();
 
 	// To know if the current timezone is a 12 hour time with look for "a" in the time format
@@ -75,20 +74,14 @@ export default function PostSchedule() {
 			.join( '' ) // Reverse the string and test for "a" not followed by a slash.
 	);
 
-	function onChange( newDate ) {
-		onUpdateDate( newDate );
-		const { ownerDocument } = ref.current;
-		ownerDocument.activeElement.blur();
-	}
-
 	return (
-		<DateTimePicker
-			ref={ ref }
+		<PublishDateTimePicker
 			currentDate={ postDate }
-			onChange={ onChange }
+			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
 			events={ events }
 			onMonthPreviewed={ setPreviewedMonth }
+			onClose={ onClose }
 		/>
 	);
 }

package/src/store/selectors.js

@@ -1606,14 +1606,16 @@ export function __experimentalGetTemplateInfo( state, template ) {
 		return {};
 	}
 
-	const { excerpt, slug, title, area } = template;
+	const { description, slug, title, area } = template;
 	const {
 		title: defaultTitle,
 		description: defaultDescription,
 	} = __experimentalGetDefaultTemplateType( state, slug );
 
 	const templateTitle = isString( title ) ? title : title?.rendered;
-	const templateDescription = isString( excerpt ) ? excerpt : excerpt?.raw;
+	const templateDescription = isString( description )
+		? description
+		: description?.raw;
 	const templateIcon =
 		__experimentalGetDefaultTemplatePartAreas( state ).find(
 			( item ) => area === item.area

package/src/store/test/selectors.js

@@ -2968,7 +2968,7 @@ describe( 'selectors', () => {
 			expect(
 				__experimentalGetTemplateInfo( state, {
 					slug: 'index',
-					excerpt: { raw: 'test description' },
+					description: { raw: 'test description' },
 				} ).description
 			).toEqual( 'test description' );
 		} );
@@ -2996,7 +2996,7 @@ describe( 'selectors', () => {
 			expect(
 				__experimentalGetTemplateInfo( state, {
 					slug: 'index',
-					excerpt: { raw: 'test description' },
+					description: { raw: 'test description' },
 				} )
 			).toEqual( {
 				title: 'Default (Index)',
@@ -3008,7 +3008,7 @@ describe( 'selectors', () => {
 				__experimentalGetTemplateInfo( state, {
 					slug: 'index',
 					title: { rendered: 'test title' },
-					excerpt: { raw: 'test description' },
+					description: { raw: 'test description' },
 				} )
 			).toEqual( {
 				title: 'test title',