@wordpress/edit-post 7.13.0 → 7.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.13.0",
+	"version": "7.15.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.36.0",
-		"@wordpress/api-fetch": "^6.33.0",
-		"@wordpress/block-editor": "^12.4.0",
-		"@wordpress/block-library": "^8.13.0",
-		"@wordpress/blocks": "^12.13.0",
-		"@wordpress/commands": "^0.7.0",
-		"@wordpress/components": "^25.2.0",
-		"@wordpress/compose": "^6.13.0",
-		"@wordpress/core-commands": "^0.5.0",
-		"@wordpress/core-data": "^6.13.0",
-		"@wordpress/data": "^9.6.0",
-		"@wordpress/deprecated": "^3.36.0",
-		"@wordpress/dom": "^3.36.0",
-		"@wordpress/editor": "^13.13.0",
-		"@wordpress/element": "^5.13.0",
-		"@wordpress/hooks": "^3.36.0",
-		"@wordpress/i18n": "^4.36.0",
-		"@wordpress/icons": "^9.27.0",
-		"@wordpress/interface": "^5.13.0",
-		"@wordpress/keyboard-shortcuts": "^4.13.0",
-		"@wordpress/keycodes": "^3.36.0",
-		"@wordpress/media-utils": "^4.27.0",
-		"@wordpress/notices": "^4.4.0",
-		"@wordpress/plugins": "^6.4.0",
-		"@wordpress/preferences": "^3.13.0",
-		"@wordpress/private-apis": "^0.18.0",
-		"@wordpress/url": "^3.37.0",
-		"@wordpress/viewport": "^5.13.0",
-		"@wordpress/warning": "^2.36.0",
-		"@wordpress/widgets": "^3.13.0",
+		"@wordpress/a11y": "^3.38.0",
+		"@wordpress/api-fetch": "^6.35.0",
+		"@wordpress/block-editor": "^12.6.0",
+		"@wordpress/block-library": "^8.15.0",
+		"@wordpress/blocks": "^12.15.0",
+		"@wordpress/commands": "^0.9.0",
+		"@wordpress/components": "^25.4.0",
+		"@wordpress/compose": "^6.15.0",
+		"@wordpress/core-commands": "^0.7.0",
+		"@wordpress/core-data": "^6.15.0",
+		"@wordpress/data": "^9.8.0",
+		"@wordpress/deprecated": "^3.38.0",
+		"@wordpress/dom": "^3.38.0",
+		"@wordpress/editor": "^13.15.0",
+		"@wordpress/element": "^5.15.0",
+		"@wordpress/hooks": "^3.38.0",
+		"@wordpress/i18n": "^4.38.0",
+		"@wordpress/icons": "^9.29.0",
+		"@wordpress/interface": "^5.15.0",
+		"@wordpress/keyboard-shortcuts": "^4.15.0",
+		"@wordpress/keycodes": "^3.38.0",
+		"@wordpress/media-utils": "^4.29.0",
+		"@wordpress/notices": "^4.6.0",
+		"@wordpress/plugins": "^6.6.0",
+		"@wordpress/preferences": "^3.15.0",
+		"@wordpress/private-apis": "^0.20.0",
+		"@wordpress/url": "^3.39.0",
+		"@wordpress/viewport": "^5.15.0",
+		"@wordpress/warning": "^2.38.0",
+		"@wordpress/widgets": "^3.15.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d47d8069e1aae05d4a16dc287902eb90edcbff50"
+	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
 }

package/src/components/block-manager/style.scss

@@ -36,7 +36,7 @@
 
 .edit-post-block-manager__category-title {
 	position: sticky;
-	top: 0;
+	top: - $grid-unit-05; // Offsets the top padding on the modal content container
 	padding: $grid-unit-20 0;
 	background-color: $white;
 	z-index: z-index(".edit-post-block-manager__category-title");

package/src/components/device-preview/index.js

@@ -15,26 +15,22 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../store';
 
 export default function DevicePreview() {
-	const {
-		hasActiveMetaboxes,
-		isPostSaveable,
-		isSaving,
-		isViewable,
-		deviceType,
-	} = useSelect( ( select ) => {
-		const { getEditedPostAttribute } = select( editorStore );
-		const { getPostType } = select( coreStore );
-		const postType = getPostType( getEditedPostAttribute( 'type' ) );
+	const { hasActiveMetaboxes, isPostSaveable, isViewable, deviceType } =
+		useSelect( ( select ) => {
+			const { getEditedPostAttribute } = select( editorStore );
+			const { getPostType } = select( coreStore );
+			const postType = getPostType( getEditedPostAttribute( 'type' ) );
 
-		return {
-			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isSaving: select( editPostStore ).isSavingMetaBoxes(),
-			isPostSaveable: select( editorStore ).isEditedPostSaveable(),
-			isViewable: postType?.viewable ?? false,
-			deviceType:
-				select( editPostStore ).__experimentalGetPreviewDeviceType(),
-		};
-	}, [] );
+			return {
+				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+				isPostSaveable: select( editorStore ).isEditedPostSaveable(),
+				isViewable: postType?.viewable ?? false,
+				deviceType:
+					select(
+						editPostStore
+					).__experimentalGetPreviewDeviceType(),
+			};
+		}, [] );
 	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
 		useDispatch( editPostStore );
 
@@ -46,26 +42,26 @@ export default function DevicePreview() {
 			setDeviceType={ setPreviewDeviceType }
 			label={ __( 'Preview' ) }
 		>
-			{ isViewable && (
-				<MenuGroup>
-					<div className="edit-post-header-preview__grouping-external">
-						<PostPreviewButton
-							className={
-								'edit-post-header-preview__button-external'
-							}
-							role="menuitem"
-							forceIsAutosaveable={ hasActiveMetaboxes }
-							forcePreviewLink={ isSaving ? null : undefined }
-							textContent={
-								<>
-									{ __( 'Preview in new tab' ) }
-									<Icon icon={ external } />
-								</>
-							}
-						/>
-					</div>
-				</MenuGroup>
-			) }
+			{ ( { onClose } ) =>
+				isViewable && (
+					<MenuGroup>
+						<div className="edit-post-header-preview__grouping-external">
+							<PostPreviewButton
+								className="edit-post-header-preview__button-external"
+								role="menuitem"
+								forceIsAutosaveable={ hasActiveMetaboxes }
+								textContent={
+									<>
+										{ __( 'Preview in new tab' ) }
+										<Icon icon={ external } />
+									</>
+								}
+								onPreview={ onClose }
+							/>
+						</div>
+					</MenuGroup>
+				)
+			}
 		</PreviewOptions>
 	);
 }

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

@@ -19,6 +19,7 @@ import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useRef, useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -43,6 +44,7 @@ function HeaderToolbar() {
 		showIconLabels,
 		isListViewOpen,
 		listViewShortcut,
+		hasFixedToolbar,
 	} = useSelect( ( select ) => {
 		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
 			select( blockEditorStore );
@@ -50,6 +52,7 @@ function HeaderToolbar() {
 		const { getEditorMode, isFeatureActive, isListViewOpened } =
 			select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const { get: getPreference } = select( preferencesStore );
 
 		return {
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
@@ -66,6 +69,7 @@ function HeaderToolbar() {
 			listViewShortcut: getShortcutRepresentation(
 				'core/edit-post/toggle-list-view'
 			),
+			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),
 		};
 	}, [] );
 
@@ -147,7 +151,7 @@ function HeaderToolbar() {
 				/>
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
-						{ isLargeViewport && (
+						{ isLargeViewport && ! hasFixedToolbar && (
 							<ToolbarItem
 								as={ ToolSelector }
 								showTooltip={ ! showIconLabels }

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

@@ -20,34 +20,29 @@ import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import DocumentTitle from './document-title';
 
-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 slideY = {
+	hidden: { y: '-50px' },
+	hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
+};
 
-	const slideY = {
-		hidden: { y: '-50px' },
-		hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
-	};
+const slideX = {
+	hidden: { x: '-100%' },
+	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
+};
 
-	const slideX = {
-		hidden: { x: '-100%' },
-		hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
-	};
+function Header( { setEntitiesSavedStatesCallback } ) {
+	const isLargeViewport = useViewportMatch( 'large' );
+	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/header/preferences-menu-item/index.js

@@ -4,18 +4,19 @@
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../../store';
+import { PREFERENCES_MODAL_NAME } from '../../../components/preferences-modal';
 
 export default function PreferencesMenuItem() {
-	const { openModal } = useDispatch( editPostStore );
+	const { openModal } = useDispatch( interfaceStore );
 	return (
 		<MenuItem
 			onClick={ () => {
-				openModal( 'edit-post/preferences' );
+				openModal( PREFERENCES_MODAL_NAME );
 			} }
 		>
 			{ __( 'Preferences' ) }