@wordpress/edit-post 7.14.0 → 7.16.0

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/{document-title → document-actions}/index.js

@@ -19,7 +19,7 @@ import { displayShortcut } from '@wordpress/keycodes';
  */
 import { store as editPostStore } from '../../../store';
 
-function DocumentTitle() {
+function DocumentActions() {
 	const { template, isEditing } = useSelect( ( select ) => {
 		const { isEditingTemplate, getEditedPostTemplate } =
 			select( editPostStore );
@@ -46,24 +46,26 @@ function DocumentTitle() {
 	}
 
 	return (
-		<div className="edit-post-document-title">
-			<span className="edit-post-document-title__left">
-				<Button
-					onClick={ () => {
-						clearSelectedBlock();
-						setIsEditingTemplate( false );
-					} }
-					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-				>
-					{ __( 'Back' ) }
-				</Button>
-			</span>
-
+		<div className="edit-post-document-actions">
+			<Button
+				className="edit-post-document-actions__back"
+				onClick={ () => {
+					clearSelectedBlock();
+					setIsEditingTemplate( false );
+				} }
+				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+			>
+				{ __( 'Back' ) }
+			</Button>
 			<Button
-				className="edit-post-document-title__title"
+				className="edit-post-document-actions__command"
 				onClick={ () => openCommandCenter() }
 			>
-				<HStack spacing={ 1 } justify="center">
+				<HStack
+					className="edit-post-document-actions__title"
+					spacing={ 1 }
+					justify="center"
+				>
 					<BlockIcon icon={ layout } />
 					<Text size="body" as="h1">
 						<VisuallyHidden as="span">
@@ -72,15 +74,12 @@ function DocumentTitle() {
 						{ templateTitle }
 					</Text>
 				</HStack>
-			</Button>
-			<Button
-				className="edit-post-document-title__shortcut"
-				onClick={ () => openCommandCenter() }
-			>
-				{ displayShortcut.primary( 'k' ) }
+				<span className="edit-post-document-actions__shortcut">
+					{ displayShortcut.primary( 'k' ) }
+				</span>
 			</Button>
 		</div>
 	);
 }
 
-export default DocumentTitle;
+export default DocumentActions;

package/src/components/header/{document-title → document-actions}/style.scss

@@ -1,4 +1,4 @@
-.edit-post-document-title {
+.edit-post-document-actions {
 	display: flex;
 	align-items: center;
 	gap: $grid-unit;
@@ -13,13 +13,21 @@
 	border-radius: 4px;
 	width: min(100%, 450px);
 
-	&:hover {
-		color: currentColor;
-		background: $gray-200;
+	.components-button {
+		&:hover {
+			color: var(--wp-block-synced-color);
+			background: $gray-200;
+		}
 	}
 }
 
-.edit-post-document-title__title.components-button {
+.edit-post-document-actions__command {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+}
+
+.edit-post-document-actions__title {
 	flex-grow: 1;
 	color: var(--wp-block-synced-color);
 	overflow: hidden;
@@ -28,34 +36,29 @@
 		color: var(--wp-block-synced-color);
 	}
 
+	.block-editor-block-icon {
+		flex-shrink: 0;
+	}
+
 	h1 {
-		color: var(--wp-block-synced-color);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		color: var(--wp-block-synced-color);
 	}
 }
 
-.edit-post-document-title__shortcut {
-	flex-shrink: 0;
-	color: $gray-700;
-	padding: 0 $grid-unit-15;
-
-	&:hover {
-		color: $gray-700;
-	}
+.edit-post-document-actions__shortcut {
+	color: $gray-800;
 }
 
-.edit-post-document-title__left {
+.edit-post-document-actions__back.components-button.has-icon.has-text {
 	min-width: $button-size;
 	flex-shrink: 0;
+	color: $gray-700;
+	gap: 0;
 
-	.components-button.has-icon.has-text {
-		color: $gray-700;
-		gap: 0;
-
-		&:hover {
-			color: currentColor;
-		}
+	&:hover {
+		color: currentColor;
 	}
 }

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

@@ -37,8 +37,6 @@ function HeaderToolbar() {
 	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editPostStore );
-	const { get: getPreference } = useSelect( preferencesStore );
-	const hasFixedToolbar = getPreference( 'core/edit-post', 'fixedToolbar' );
 	const {
 		isInserterEnabled,
 		isInserterOpened,
@@ -46,6 +44,7 @@ function HeaderToolbar() {
 		showIconLabels,
 		isListViewOpen,
 		listViewShortcut,
+		hasFixedToolbar,
 	} = useSelect( ( select ) => {
 		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
 			select( blockEditorStore );
@@ -53,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.
@@ -69,6 +69,7 @@ function HeaderToolbar() {
 			listViewShortcut: getShortcutRepresentation(
 				'core/edit-post/toggle-list-view'
 			),
+			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),
 		};
 	}, [] );
 

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,130 @@ 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',
+				inserterMethod: 'quick-inserter',
+			} );
+		},
+		[ 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 +189,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 +237,8 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { clearSelectedBlock } = dispatch( blockEditorStore );
+		const { clearSelectedBlock, insertBlock } =
+			dispatch( blockEditorStore );
 		const { togglePostTitleSelection } = dispatch( editorStore );
 
 		return {
@@ -191,8 +248,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/header-toolbar/style.scss

@@ -82,6 +82,10 @@
 	align-items: center;
 	padding-left: $grid-unit-10;
 
+	// Some plugins add buttons here despite best practices.
+	// Push them a bit rightwards to fit the top toolbar.
+	margin-right: $grid-unit-10;
+
 	@include break-small() {
 		padding-left: $grid-unit-30;
 	}

package/src/components/header/index.js

@@ -18,7 +18,7 @@ import { default as DevicePreview } from '../device-preview';
 import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
-import DocumentTitle from './document-title';
+import DocumentActions from './document-actions';
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -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">
@@ -65,8 +60,8 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				className="edit-post-header__toolbar"
 			>
 				<HeaderToolbar />
-				<div className="edit-post-header__document-title">
-					<DocumentTitle />
+				<div className="edit-post-header__center">
+					<DocumentActions />
 				</div>
 			</motion.div>
 			<motion.div
@@ -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
 					}