@wordpress/edit-post 8.48.0 → 8.48.2-next.v.202606191442.0

package/src/components/layout/index.js

@@ -49,7 +49,6 @@ import {
 	useRefEffect,
 	useViewportMatch,
 } from '@wordpress/compose';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip, VisuallyHidden } from '@wordpress/ui';
 
 /**
@@ -73,7 +72,8 @@ import { useMetaBoxInitialization } from '../meta-boxes/use-meta-box-initializat
 const { useCommandContext } = unlock( commandsPrivateApis );
 /** @type {{} & {useDrag: import('@use-gesture/react').useDrag}} */
 const { useDrag } = unlock( componentsPrivateApis );
-const { Editor, FullscreenMode } = unlock( editorPrivateApis );
+const { Editor, FullscreenMode, UploadProgressSnackbar } =
+	unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 const DESIGN_POST_TYPES = [
 	'wp_template',
@@ -623,6 +623,7 @@ function Layout( {
 							<PostEditorMoreMenu />
 							{ backButton }
 							<SnackbarNotices className="edit-post-layout__snackbar" />
+							<UploadProgressSnackbar />
 						</Editor>
 					</div>
 				</ErrorBoundary>

package/src/style.scss

@@ -5,7 +5,7 @@
 @use "./components/layout/style.scss" as *;
 @use "./components/meta-boxes/meta-boxes-area/style.scss" as *;
 @use "./components/welcome-guide/style.scss" as *;
-@use "./experimental-admin-bar-in-editor.scss" as *;
+@use "./experimental-omnibar.scss" as *;
 
 body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );

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

@@ -1,255 +0,0 @@
-/**
- * External dependencies
- */
-import { ScrollView, StyleSheet, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-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';
-import {
-	Inserter,
-	BlockToolbar,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import {
-	keyboardClose,
-	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
- */
-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,
-	redo,
-	undo,
-	showInserter,
-	showKeyboardHideButton,
-	insertBlock,
-	onHideKeyboard,
-	isRTL,
-	noContentSelected,
-} ) {
-	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
-		if ( Platform.isAndroid && isRTL ) {
-			scrollViewRef.current.scrollToEnd();
-		} else {
-			scrollViewRef.current.scrollTo( { x: 0 } );
-		}
-	};
-
-	const onInsertBlock = useCallback(
-		( blockType ) => () => {
-			insertBlock( createBlock( blockType ), undefined, undefined, true, {
-				source: 'inserter_menu',
-				inserterMethod: 'quick-inserter',
-			} );
-		},
-		[ insertBlock ]
-	);
-
-	const renderMediaButtons = (
-		<ToolbarGroup>
-			<ToolbarButton
-				key="imageButton"
-				title={ __( 'Image' ) }
-				icon={ imageIcon }
-				onClick={ onInsertBlock( 'core/image' ) }
-				testID="insert-image-button"
-				extraProps={ {
-					hint: __( 'Insert Image Block' ),
-				} }
-			/>
-			<ToolbarButton
-				key="videoButton"
-				title={ __( 'Video' ) }
-				icon={ videoIcon }
-				onClick={ onInsertBlock( 'core/video' ) }
-				testID="insert-video-button"
-				extraProps={ {
-					hint: __( 'Insert Video Block' ),
-				} }
-			/>
-			<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>
-	);
-
-	/* 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={ containerStyle }
-		>
-			<ScrollView
-				ref={ scrollViewRef }
-				onContentSizeChange={ scrollToStart }
-				horizontal
-				showsHorizontalScrollIndicator={ false }
-				keyboardShouldPersistTaps="always"
-				alwaysBounceHorizontal={ false }
-				contentContainerStyle={
-					styles[ 'header-toolbar__scrollable-content' ]
-				}
-			>
-				<Inserter disabled={ ! showInserter } />
-
-				{ noContentSelected && renderMediaButtons }
-				<BlockToolbar anchorNodeRef={ anchorNodeRef.current } />
-			</ScrollView>
-			{ showKeyboardHideButton && (
-				<ToolbarGroup passedStyle={ showKeyboardButtonStyles }>
-					<ToolbarButton
-						title={ __( 'Hide keyboard' ) }
-						icon={ keyboardClose }
-						onClick={ onHideKeyboard }
-						extraProps={ {
-							hint: __( 'Tap to hide the keyboard' ),
-						} }
-					/>
-				</ToolbarGroup>
-			) }
-		</View>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const {
-			getBlockRootClientId,
-			getBlockSelectionEnd,
-			hasInserterItems,
-			hasSelectedBlock,
-		} = select( blockEditorStore );
-		const { getEditorSettings } = select( editorStore );
-		const isAnyBlockSelected = hasSelectedBlock();
-		return {
-			hasRedo: select( editorStore ).hasEditorRedo(),
-			hasUndo: select( editorStore ).hasEditorUndo(),
-			// This setting (richEditingEnabled) should not live in the block editor's setting.
-			showInserter:
-				select( editPostStore ).getEditorMode() === 'visual' &&
-				getEditorSettings().richEditingEnabled &&
-				hasInserterItems(
-					getBlockRootClientId( getBlockSelectionEnd() )
-				),
-			isTextModeEnabled:
-				select( editPostStore ).getEditorMode() === 'text',
-			isRTL: select( blockEditorStore ).getSettings().isRTL,
-			noContentSelected: ! isAnyBlockSelected,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { clearSelectedBlock, insertBlock } =
-			dispatch( blockEditorStore );
-		const { togglePostTitleSelection } = dispatch( editorStore );
-
-		return {
-			redo: dispatch( editorStore ).redo,
-			undo: dispatch( editorStore ).undo,
-			onHideKeyboard() {
-				clearSelectedBlock();
-				togglePostTitleSelection( false );
-			},
-			insertBlock,
-		};
-	} ),
-	withViewportMatch( { isLargeViewport: 'medium' } ),
-] )( HeaderToolbar );

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

@@ -1,49 +0,0 @@
-
-.header-toolbar__container {
-	height: $mobile-header-toolbar-height;
-	flex-direction: row;
-	background-color: $app-background;
-	border-top-color: $light-quaternary;
-	overflow: hidden;
-}
-
-.header-toolbar__container--dark {
-	background-color: $app-safe-area-background-dark;
-	border-top-color: $dark-quaternary;
-}
-
-.header-toolbar__container--expanded {
-	height: $mobile-header-toolbar-expanded-height;
-}
-
-.header-toolbar__scrollable-content {
-	flex-grow: 1; // Fixes RTL issue on Android.
-	padding-right: 8px;
-}
-
-.header-toolbar__keyboard-hide-container {
-	padding-right: 0;
-	padding-left: 0;
-	padding-top: 4px;
-	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.native.js

@@ -1,60 +0,0 @@
-/**
- * External dependencies
- */
-import { Keyboard } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import HeaderToolbar from './header-toolbar';
-
-export default class Header extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.keyboardDidShow = this.keyboardDidShow.bind( this );
-		this.keyboardDidHide = this.keyboardDidHide.bind( this );
-
-		this.state = {
-			isKeyboardVisible: false,
-		};
-	}
-
-	componentDidMount() {
-		this.keyboardShowSubscription = Keyboard.addListener(
-			'keyboardDidShow',
-			this.keyboardDidShow
-		);
-		this.keyboardHideSubscription = Keyboard.addListener(
-			'keyboardDidHide',
-			this.keyboardDidHide
-		);
-	}
-
-	componentWillUnmount() {
-		this.keyboardShowSubscription.remove();
-		this.keyboardHideSubscription.remove();
-	}
-
-	keyboardDidShow() {
-		this.setState( { isKeyboardVisible: true } );
-	}
-
-	keyboardDidHide() {
-		this.setState( { isKeyboardVisible: false } );
-	}
-
-	render() {
-		return (
-			<HeaderToolbar
-				showKeyboardHideButton={ this.state.isKeyboardVisible }
-			/>
-		);
-	}
-}

package/src/components/layout/index.native.js

@@ -1,207 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform, SafeAreaView, View } from 'react-native';
-import SafeArea from 'react-native-safe-area';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-import {
-	BottomSheetSettings,
-	FloatingToolbar,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import {
-	HTMLTextInput,
-	KeyboardAvoidingView,
-	NoticeList,
-	Tooltip as WCTooltip,
-	__unstableAutocompletionItemsSlot as AutocompletionItemsSlot,
-} from '@wordpress/components';
-import {
-	AutosaveMonitor,
-	OfflineStatus,
-	store as editorStore,
-} from '@wordpress/editor';
-import { sendNativeEditorDidLayout } from '@wordpress/react-native-bridge';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import headerToolbarStyles from '../header/header-toolbar/style.scss';
-import Header from '../header';
-import VisualEditor from '../visual-editor';
-
-class Layout extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind( this );
-		this.onRootViewLayout = this.onRootViewLayout.bind( this );
-
-		this.state = {
-			rootViewHeight: 0,
-			safeAreaInsets: { top: 0, bottom: 0, right: 0, left: 0 },
-		};
-
-		SafeArea.getSafeAreaInsetsForRootView().then(
-			this.onSafeAreaInsetsUpdate
-		);
-	}
-
-	componentDidMount() {
-		this._isMounted = true;
-		this.safeAreaSubscription = SafeArea.addEventListener(
-			'safeAreaInsetsForRootViewDidChange',
-			this.onSafeAreaInsetsUpdate
-		);
-	}
-
-	componentWillUnmount() {
-		this.safeAreaSubscription?.remove();
-		this._isMounted = false;
-	}
-
-	onSafeAreaInsetsUpdate( result ) {
-		const { safeAreaInsets } = result;
-		if ( this._isMounted ) {
-			this.setState( { safeAreaInsets } );
-		}
-	}
-
-	onRootViewLayout( event ) {
-		if ( this._isMounted ) {
-			this.setHeightState( event );
-		}
-	}
-
-	setHeightState( event ) {
-		const { height } = event.nativeEvent.layout;
-		if ( height !== this.state.rootViewHeight ) {
-			this.setState(
-				{ rootViewHeight: height },
-				sendNativeEditorDidLayout
-			);
-		}
-	}
-
-	renderHTML() {
-		const { globalStyles } = this.props;
-		return (
-			<HTMLTextInput
-				parentHeight={ this.state.rootViewHeight }
-				style={ globalStyles }
-			/>
-		);
-	}
-
-	renderVisual() {
-		const { isReady } = this.props;
-
-		if ( ! isReady ) {
-			return null;
-		}
-
-		return <VisualEditor setTitleRef={ this.props.setTitleRef } />;
-	}
-
-	render() {
-		const { getStylesFromColorScheme, mode, globalStyles } = this.props;
-
-		const isHtmlView = mode === 'text';
-
-		// Add a margin view at the bottom for the header.
-		const marginBottom =
-			Platform.OS === 'android' && ! isHtmlView
-				? headerToolbarStyles[ 'header-toolbar__container' ].height
-				: 0;
-
-		const containerStyles = getStylesFromColorScheme(
-			styles.container,
-			styles.containerDark
-		);
-
-		const toolbarKeyboardAvoidingViewStyle = {
-			...styles.toolbarKeyboardAvoidingView,
-			left: this.state.safeAreaInsets.left,
-			right: this.state.safeAreaInsets.right,
-			bottom: this.state.safeAreaInsets.bottom,
-			backgroundColor: containerStyles.backgroundColor,
-		};
-
-		const editorStyles = [
-			getStylesFromColorScheme(
-				styles.background,
-				styles.backgroundDark
-			),
-			globalStyles?.background && {
-				backgroundColor: globalStyles.background,
-			},
-		];
-
-		return (
-			<WCTooltip.Slot>
-				<SafeAreaView
-					style={ containerStyles }
-					onLayout={ this.onRootViewLayout }
-				>
-					<AutosaveMonitor disableIntervalChecks />
-					<OfflineStatus />
-					<View style={ editorStyles }>
-						{ isHtmlView ? this.renderHTML() : this.renderVisual() }
-						{ ! isHtmlView && Platform.OS === 'android' && (
-							<FloatingToolbar />
-						) }
-						<NoticeList />
-					</View>
-					<View
-						style={ {
-							flex: 0,
-							flexBasis: marginBottom,
-							height: marginBottom,
-						} }
-					/>
-					{ ! isHtmlView && (
-						<KeyboardAvoidingView
-							parentHeight={ this.state.rootViewHeight }
-							style={ toolbarKeyboardAvoidingViewStyle }
-							withAnimatedHeight
-						>
-							{ Platform.OS === 'ios' && (
-								<>
-									<AutocompletionItemsSlot />
-									<FloatingToolbar />
-								</>
-							) }
-							<Header />
-							<BottomSheetSettings />
-						</KeyboardAvoidingView>
-					) }
-					{ Platform.OS === 'android' && <AutocompletionItemsSlot /> }
-				</SafeAreaView>
-			</WCTooltip.Slot>
-		);
-	}
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { __unstableIsEditorReady: isEditorReady, getEditorMode } =
-			select( editorStore );
-		const { getSettings } = select( blockEditorStore );
-		const globalStyles =
-			getSettings()?.__experimentalGlobalStylesBaseStyles?.color;
-
-		return {
-			isReady: isEditorReady(),
-			mode: getEditorMode(),
-			globalStyles,
-		};
-	} ),
-	withPreferredColorScheme,
-] )( Layout );

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

@@ -1,26 +0,0 @@
-
-.container {
-	flex: 1;
-	justify-content: flex-start;
-	background-color: $app-background;
-}
-
-.containerDark {
-	background-color: $app-safe-area-background-dark;
-}
-
-.background {
-	flex: 1;
-	background-color: $app-background;
-}
-
-.backgroundDark {
-	background-color: $app-background-dark;
-}
-
-.toolbarKeyboardAvoidingView {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	left: 0;
-}

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

@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { PostTitle } from '@wordpress/editor';
-import {
-	store as blockEditorStore,
-	useEditorWrapperStyles,
-} from '@wordpress/block-editor';
-
-const Header = memo(
-	function EditorHeader( { editTitle, setTitleRef, title } ) {
-		const [ wrapperStyles ] = useEditorWrapperStyles();
-		return (
-			<View style={ wrapperStyles }>
-				<PostTitle
-					innerRef={ setTitleRef }
-					title={ title }
-					onUpdate={ editTitle }
-					placeholder={ __( 'Add title' ) }
-					accessibilityLabel="post-title"
-				/>
-			</View>
-		);
-	},
-	( prevProps, nextProps ) => prevProps.title === nextProps.title
-);
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getEditedPostAttribute } = select( 'core/editor' );
-
-		return {
-			title: getEditedPostAttribute( 'title' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost } = dispatch( 'core/editor' );
-
-		const { clearSelectedBlock } = dispatch( blockEditorStore );
-
-		return {
-			clearSelectedBlock,
-			editTitle( title ) {
-				editPost( { title } );
-			},
-		};
-	} ),
-	withPreferredColorScheme,
-] )( Header );