@wordpress/edit-post 7.14.0 → 7.15.0

package/src/components/header/header-toolbar/index.native.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { Platform, ScrollView, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef, useState } from '@wordpress/element';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { useCallback, useRef, useEffect, Platform } from '@wordpress/element';
+import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
 import { __ } from '@wordpress/i18n';
@@ -19,10 +19,19 @@ import {
 import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import {
 	keyboardClose,
-	undo as undoIcon,
-	redo as redoIcon,
+	audio as audioIcon,
+	media as imageIcon,
+	video as videoIcon,
+	gallery as galleryIcon,
 } from '@wordpress/icons';
 import { store as editorStore } from '@wordpress/editor';
+import { createBlock } from '@wordpress/blocks';
+import {
+	toggleUndoButton,
+	toggleRedoButton,
+	subscribeOnUndoPressed,
+	subscribeOnRedoPressed,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -30,6 +39,13 @@ import { store as editorStore } from '@wordpress/editor';
 import styles from './style.scss';
 import { store as editPostStore } from '../../../store';
 
+const shadowStyle = {
+	shadowOffset: { width: 2, height: 2 },
+	shadowOpacity: 1,
+	shadowRadius: 6,
+	elevation: 18,
+};
+
 function HeaderToolbar( {
 	hasRedo,
 	hasUndo,
@@ -37,83 +53,129 @@ function HeaderToolbar( {
 	undo,
 	showInserter,
 	showKeyboardHideButton,
-	getStylesFromColorScheme,
+	insertBlock,
 	onHideKeyboard,
 	isRTL,
 	noContentSelected,
 } ) {
-	const wasNoContentSelected = useRef( noContentSelected );
-	const [ isInserterOpen, setIsInserterOpen ] = useState( false );
+	const anchorNodeRef = useRef();
+
+	const containerStyle = [
+		usePreferredColorSchemeStyle(
+			styles[ 'header-toolbar__container' ],
+			styles[ 'header-toolbar__container--dark' ]
+		),
+		{ borderTopWidth: StyleSheet.hairlineWidth },
+	];
+
+	useEffect( () => {
+		const onUndoSubscription = subscribeOnUndoPressed( undo );
+		const onRedoSubscription = subscribeOnRedoPressed( redo );
+
+		return () => {
+			onUndoSubscription?.remove();
+			onRedoSubscription?.remove();
+		};
+	}, [ undo, redo ] );
+
+	useEffect( () => {
+		toggleUndoButton( ! hasUndo );
+	}, [ hasUndo ] );
+
+	useEffect( () => {
+		toggleRedoButton( ! hasRedo );
+	}, [ hasRedo ] );
 
 	const scrollViewRef = useRef( null );
 	const scrollToStart = () => {
 		// scrollview doesn't seem to automatically adjust to RTL on Android so, scroll to end when Android
-		const isAndroid = Platform.OS === 'android';
-		if ( isAndroid && isRTL ) {
+		if ( Platform.isAndroid && isRTL ) {
 			scrollViewRef.current.scrollToEnd();
 		} else {
 			scrollViewRef.current.scrollTo( { x: 0 } );
 		}
 	};
-	const renderHistoryButtons = () => {
-		const buttons = [
-			/* TODO: replace with EditorHistoryRedo and EditorHistoryUndo. */
+
+	const onInsertBlock = useCallback(
+		( blockType ) => () => {
+			insertBlock( createBlock( blockType ), undefined, undefined, true, {
+				source: 'inserter_menu',
+			} );
+		},
+		[ insertBlock ]
+	);
+
+	const renderMediaButtons = (
+		<ToolbarGroup>
 			<ToolbarButton
-				key="undoButton"
-				title={ __( 'Undo' ) }
-				icon={ ! isRTL ? undoIcon : redoIcon }
-				isDisabled={ ! hasUndo }
-				onClick={ undo }
+				key="imageButton"
+				title={ __( 'Image' ) }
+				icon={ imageIcon }
+				onClick={ onInsertBlock( 'core/image' ) }
+				testID="insert-image-button"
 				extraProps={ {
-					hint: __( 'Double tap to undo last change' ),
+					hint: __( 'Insert Image Block' ),
 				} }
-			/>,
+			/>
 			<ToolbarButton
-				key="redoButton"
-				title={ __( 'Redo' ) }
-				icon={ ! isRTL ? redoIcon : undoIcon }
-				isDisabled={ ! hasRedo }
-				onClick={ redo }
+				key="videoButton"
+				title={ __( 'Video' ) }
+				icon={ videoIcon }
+				onClick={ onInsertBlock( 'core/video' ) }
+				testID="insert-video-button"
 				extraProps={ {
-					hint: __( 'Double tap to redo last change' ),
+					hint: __( 'Insert Video Block' ),
 				} }
-			/>,
-		];
-
-		return isRTL ? buttons.reverse() : buttons;
-	};
-
-	const onToggleInserter = useCallback(
-		( isOpen ) => {
-			if ( isOpen ) {
-				wasNoContentSelected.current = noContentSelected;
-			}
-			setIsInserterOpen( isOpen );
-		},
-		[ noContentSelected ]
+			/>
+			<ToolbarButton
+				key="galleryButton"
+				title={ __( 'Gallery' ) }
+				icon={ galleryIcon }
+				onClick={ onInsertBlock( 'core/gallery' ) }
+				testID="insert-gallery-button"
+				extraProps={ {
+					hint: __( 'Insert Gallery Block' ),
+				} }
+			/>
+			<ToolbarButton
+				key="audioButton"
+				title={ __( 'Audio' ) }
+				icon={ audioIcon }
+				onClick={ onInsertBlock( 'core/audio' ) }
+				testID="insert-audio-button"
+				extraProps={ {
+					hint: __( 'Insert Audio Block' ),
+				} }
+			/>
+		</ToolbarGroup>
 	);
 
-	// Expanded mode should be preserved while the inserter is open.
-	// This way we prevent style updates during the opening transition.
-	const useExpandedMode = isInserterOpen
-		? wasNoContentSelected.current
-		: noContentSelected;
-
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
 
+	const shadowColor = usePreferredColorSchemeStyle(
+		styles[ 'header-toolbar__keyboard-hide-shadow--light' ],
+		styles[ 'header-toolbar__keyboard-hide-shadow--dark' ]
+	);
+	const showKeyboardButtonStyles = [
+		usePreferredColorSchemeStyle(
+			styles[ 'header-toolbar__keyboard-hide-container' ],
+			styles[ 'header-toolbar__keyboard-hide-container--dark' ]
+		),
+		shadowStyle,
+		{
+			shadowColor: Platform.isAndroid
+				? styles[ 'header-toolbar__keyboard-hide-shadow--solid' ].color
+				: shadowColor.color,
+		},
+	];
+
 	return (
 		<View
+			ref={ anchorNodeRef }
 			testID={ toolbarAriaLabel }
 			accessibilityLabel={ toolbarAriaLabel }
-			style={ [
-				getStylesFromColorScheme(
-					styles[ 'header-toolbar__container' ],
-					styles[ 'header-toolbar__container--dark' ]
-				),
-				useExpandedMode &&
-					styles[ 'header-toolbar__container--expanded' ],
-			] }
+			style={ containerStyle }
 		>
 			<ScrollView
 				ref={ scrollViewRef }
@@ -126,20 +188,13 @@ function HeaderToolbar( {
 					styles[ 'header-toolbar__scrollable-content' ]
 				}
 			>
-				<Inserter
-					disabled={ ! showInserter }
-					useExpandedMode={ useExpandedMode }
-					onToggle={ onToggleInserter }
-				/>
-				{ renderHistoryButtons() }
-				<BlockToolbar />
+				<Inserter disabled={ ! showInserter } />
+
+				{ noContentSelected && renderMediaButtons }
+				<BlockToolbar anchorNodeRef={ anchorNodeRef.current } />
 			</ScrollView>
 			{ showKeyboardHideButton && (
-				<ToolbarGroup
-					passedStyle={
-						styles[ 'header-toolbar__keyboard-hide-container' ]
-					}
-				>
+				<ToolbarGroup passedStyle={ showKeyboardButtonStyles }>
 					<ToolbarButton
 						title={ __( 'Hide keyboard' ) }
 						icon={ keyboardClose }
@@ -181,7 +236,8 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { clearSelectedBlock } = dispatch( blockEditorStore );
+		const { clearSelectedBlock, insertBlock } =
+			dispatch( blockEditorStore );
 		const { togglePostTitleSelection } = dispatch( editorStore );
 
 		return {
@@ -191,8 +247,8 @@ export default compose( [
 				clearSelectedBlock();
 				togglePostTitleSelection( false );
 			},
+			insertBlock,
 		};
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),
-	withPreferredColorScheme,
 ] )( HeaderToolbar );

package/src/components/header/header-toolbar/style.native.scss

@@ -3,13 +3,13 @@
 	height: $mobile-header-toolbar-height;
 	flex-direction: row;
 	background-color: $app-background;
-	border-top-color: #e9eff3;
-	border-top-width: 1px;
+	border-top-color: $light-quaternary;
+	overflow: hidden;
 }
 
 .header-toolbar__container--dark {
-	background-color: $app-background-dark-alt;
-	border-top-color: $background-dark-elevated;
+	background-color: $app-safe-area-background-dark;
+	border-top-color: $dark-quaternary;
 }
 
 .header-toolbar__container--expanded {
@@ -18,6 +18,7 @@
 
 .header-toolbar__scrollable-content {
 	flex-grow: 1; // Fixes RTL issue on Android.
+	padding-right: 8px;
 }
 
 .header-toolbar__keyboard-hide-container {
@@ -27,4 +28,22 @@
 	width: 44px;
 	justify-content: center;
 	align-items: center;
+	border-color: transparent;
+	background-color: $app-background;
+}
+
+.header-toolbar__keyboard-hide-container--dark {
+	background-color: $app-background-dark-alt;
+}
+
+.header-toolbar__keyboard-hide-shadow--solid {
+	color: $black;
+}
+
+.header-toolbar__keyboard-hide-shadow--light {
+	color: $light-quaternary;
+}
+
+.header-toolbar__keyboard-hide-shadow--dark {
+	color: $light-primary;
 }

package/src/components/header/index.js

@@ -32,22 +32,17 @@ const slideX = {
 
 function Header( { setEntitiesSavedStatesCallback } ) {
 	const isLargeViewport = useViewportMatch( 'large' );
-	const {
-		hasActiveMetaboxes,
-		isPublishSidebarOpened,
-		isSaving,
-		showIconLabels,
-	} = useSelect(
-		( select ) => ( {
-			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isPublishSidebarOpened:
-				select( editPostStore ).isPublishSidebarOpened(),
-			isSaving: select( editPostStore ).isSavingMetaBoxes(),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-		} ),
-		[]
-	);
+	const { hasActiveMetaboxes, isPublishSidebarOpened, showIconLabels } =
+		useSelect(
+			( select ) => ( {
+				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+				isPublishSidebarOpened:
+					select( editPostStore ).isPublishSidebarOpened(),
+				showIconLabels:
+					select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			} ),
+			[]
+		);
 
 	return (
 		<div className="edit-post-header">
@@ -82,19 +77,14 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					// when the publish sidebar has been closed.
 					<PostSavedState
 						forceIsDirty={ hasActiveMetaboxes }
-						forceIsSaving={ isSaving }
 						showIconLabels={ showIconLabels }
 					/>
 				) }
 				<DevicePreview />
-				<PostPreviewButton
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
-				/>
+				<PostPreviewButton forceIsAutosaveable={ hasActiveMetaboxes } />
 				<ViewLink />
 				<PostPublishButtonOrToggle
 					forceIsDirty={ hasActiveMetaboxes }
-					forceIsSaving={ isSaving }
 					setEntitiesSavedStatesCallback={
 						setEntitiesSavedStatesCallback
 					}

package/src/components/header/post-publish-button-or-toggle.js

@@ -12,7 +12,6 @@ import { store as editPostStore } from '../../store';
 
 export function PostPublishButtonOrToggle( {
 	forceIsDirty,
-	forceIsSaving,
 	hasPublishAction,
 	isBeingScheduled,
 	isPending,
@@ -67,7 +66,6 @@ export function PostPublishButtonOrToggle( {
 	return (
 		<PostPublishButton
 			forceIsDirty={ forceIsDirty }
-			forceIsSaving={ forceIsSaving }
 			isOpen={ isPublishSidebarOpened }
 			isToggle={ component === IS_TOGGLE }
 			onToggle={ togglePublishSidebar }

package/src/components/layout/actions-panel.js

@@ -31,18 +31,17 @@ export default function ActionsPanel( {
 	const {
 		publishSidebarOpened,
 		hasActiveMetaboxes,
-		isSavingMetaBoxes,
 		hasNonPostEntityChanges,
-	} = useSelect( ( select ) => {
-		return {
+	} = useSelect(
+		( select ) => ( {
 			publishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isSavingMetaBoxes: select( editPostStore ).isSavingMetaBoxes(),
 			hasNonPostEntityChanges:
 				select( editorStore ).hasNonPostEntityChanges(),
-		};
-	}, [] );
+		} ),
+		[]
+	);
 
 	const openEntitiesSavedStates = useCallback(
 		() => setEntitiesSavedStatesCallback( true ),
@@ -57,7 +56,6 @@ export default function ActionsPanel( {
 			<PostPublishPanel
 				onClose={ closePublishSidebar }
 				forceIsDirty={ hasActiveMetaboxes }
-				forceIsSaving={ isSavingMetaBoxes }
 				PrePublishExtension={ PluginPrePublishPanel.Slot }
 				PostPublishExtension={ PluginPostPublishPanel.Slot }
 			/>

package/src/components/layout/index.js

@@ -12,14 +12,13 @@ import {
 	UnsavedChangesWarning,
 	EditorNotices,
 	EditorKeyboardShortcutsRegister,
+	EditorKeyboardShortcuts,
 	EditorSnackbars,
+	PostSyncStatusModal,
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	BlockBreadcrumb,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { BlockBreadcrumb } from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
@@ -52,9 +51,6 @@ import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
 import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -69,12 +65,6 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-const blockRemovalRules = {
-	'core/footnotes': __(
-		'The Footnotes block displays all footnotes found in the content. Note that any footnotes in the content will persist after removing this block.'
-	),
-};
-
 function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
@@ -214,7 +204,7 @@ function Layout( { styles } ) {
 			<LocalAutosaveMonitor />
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
-			<BlockRemovalWarningModal rules={ blockRemovalRules } />
+			<EditorKeyboardShortcuts />
 			<SettingsSidebar />
 			<InterfaceSkeleton
 				isDistractionFree={ isDistractionFree && isLargeViewport }
@@ -304,6 +294,7 @@ function Layout( { styles } ) {
 			<EditPostPreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
+			<PostSyncStatusModal />
 			<StartPageOptions />
 			<Popover.Slot />
 			<PluginArea onError={ onPluginAreaError } />

package/src/components/layout/style.native.scss

@@ -6,7 +6,7 @@
 }
 
 .containerDark {
-	background-color: $app-background-dark-alt;
+	background-color: $app-safe-area-background-dark;
 }
 
 .background {

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -590,6 +590,8 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-13 {
+  font-size: 13px;
+  font-family: inherit;
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -616,12 +618,18 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
+.emotion-13:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .emotion-13:focus-visible {
   box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var(
-  				--wp-components-color-accent,
-  				var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) )
-  			);
+  					--wp-components-color-accent,
+  					var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) )
+  				);
   outline: 2px solid transparent;
+  outline-offset: 0;
 }
 
 .emotion-15 {

package/src/components/text-editor/index.js

@@ -4,7 +4,6 @@
 import {
 	PostTextEditor,
 	PostTitle,
-	TextEditorGlobalKeyboardShortcuts,
 	store as editorStore,
 } from '@wordpress/editor';
 import { Button } from '@wordpress/components';
@@ -25,7 +24,6 @@ export default function TextEditor() {
 
 	return (
 		<div className="edit-post-text-editor">
-			<TextEditorGlobalKeyboardShortcuts />
 			{ isRichEditingEnabled && (
 				<div className="edit-post-text-editor__toolbar">
 					<h2>{ __( 'Editing code' ) }</h2>

package/src/components/visual-editor/header.native.js

@@ -16,23 +16,9 @@ import {
 	useEditorWrapperStyles,
 } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
 const Header = memo(
-	function EditorHeader( {
-		editTitle,
-		setTitleRef,
-		title,
-		getStylesFromColorScheme,
-	} ) {
+	function EditorHeader( { editTitle, setTitleRef, title } ) {
 		const [ wrapperStyles ] = useEditorWrapperStyles();
-		const blockHolderFocusedStyle = getStylesFromColorScheme(
-			styles.blockHolderFocused,
-			styles.blockHolderFocusedDark
-		);
 		return (
 			<View style={ wrapperStyles }>
 				<PostTitle
@@ -40,8 +26,6 @@ const Header = memo(
 					title={ title }
 					onUpdate={ editTitle }
 					placeholder={ __( 'Add title' ) }
-					borderStyle={ styles.blockHolderFullBordered }
-					focusedBorderColor={ blockHolderFocusedStyle.borderColor }
 					accessibilityLabel="post-title"
 				/>
 			</View>

package/src/components/visual-editor/index.js

@@ -6,11 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	VisualEditorGlobalKeyboardShortcuts,
-	PostTitle,
-	store as editorStore,
-} from '@wordpress/editor';
+import { PostTitle, store as editorStore } from '@wordpress/editor';
 import {
 	WritingFlow,
 	BlockList,
@@ -345,7 +341,6 @@ export default function VisualEditor( { styles } ) {
 				'is-template-mode': isTemplateMode,
 			} ) }
 		>
-			<VisualEditorGlobalKeyboardShortcuts />
 			<motion.div
 				className="edit-post-visual-editor__content-area"
 				animate={ {

package/src/components/visual-editor/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when nothing is selected media buttons and picker display correctly 1`] = `
+"<!-- wp:paragraph -->
+<p>First example paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second example paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"></figure>
+<!-- /wp:gallery -->"
+`;