@wordpress/editor 13.30.0 → 13.32.0

package/src/components/editor-canvas/edit-template-blocks-notification.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useState, useRef } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 
@@ -38,73 +37,22 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		};
 	}, [] );
 
-	const { getNotices } = useSelect( noticesStore );
-
-	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
-
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 
-	const lastNoticeId = useRef( 0 );
-
 	useEffect( () => {
-		const handleClick = async ( event ) => {
-			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
-				return;
-			}
-
-			const isNoticeAlreadyShowing = getNotices().some(
-				( notice ) => notice.id === lastNoticeId.current
-			);
-			if ( isNoticeAlreadyShowing ) {
-				return;
-			}
-
-			const { notice } = await createInfoNotice(
-				__( 'Edit your template to edit this block.' ),
-				{
-					isDismissible: true,
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Edit template' ),
-							onClick: () =>
-								onNavigateToEntityRecord( {
-									postId: templateId,
-									postType: 'wp_template',
-								} ),
-						},
-					],
-				}
-			);
-			lastNoticeId.current = notice.id;
-		};
-
 		const handleDblClick = ( event ) => {
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
 				return;
 			}
-			if ( lastNoticeId.current ) {
-				removeNotice( lastNoticeId.current );
-			}
 			setIsDialogOpen( true );
 		};
 
 		const canvas = contentRef.current;
-		canvas?.addEventListener( 'click', handleClick );
 		canvas?.addEventListener( 'dblclick', handleDblClick );
 		return () => {
-			canvas?.removeEventListener( 'click', handleClick );
 			canvas?.removeEventListener( 'dblclick', handleDblClick );
 		};
-	}, [
-		lastNoticeId,
-		contentRef,
-		getNotices,
-		createInfoNotice,
-		onNavigateToEntityRecord,
-		templateId,
-		removeNotice,
-	] );
+	}, [ contentRef ] );
 
 	return (
 		<ConfirmDialog
@@ -119,7 +67,9 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			} }
 			onCancel={ () => setIsDialogOpen( false ) }
 		>
-			{ __( 'Edit your template to edit this block.' ) }
+			{ __(
+				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages.'
+			) }
 		</ConfirmDialog>
 	);
 }

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

@@ -29,6 +29,7 @@ import PostTitle from '../post-title';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import EditTemplateBlocksNotification from './edit-template-blocks-notification';
+import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block';
 
 const {
 	LayoutStyle,
@@ -313,6 +314,9 @@ function EditorCanvas( {
 		useFlashEditableBlocks( {
 			isEnabled: renderingMode === 'template-locked',
 		} ),
+		useSelectNearestEditableBlock( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
 	] );
 
 	return (

package/src/components/entities-saved-states/hooks/use-is-dirty.js

@@ -4,29 +4,24 @@
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-const TRANSLATED_SITE_PROPERTIES = {
-	title: __( 'Title' ),
-	description: __( 'Tagline' ),
-	site_logo: __( 'Logo' ),
-	site_icon: __( 'Icon' ),
-	show_on_front: __( 'Show on front' ),
-	page_on_front: __( 'Page on front' ),
-	posts_per_page: __( 'Maximum posts per page' ),
-	default_comment_status: __( 'Allow comments on new posts' ),
-};
 
 export const useIsDirty = () => {
-	const { editedEntities, siteEdits } = useSelect( ( select ) => {
-		const { __experimentalGetDirtyEntityRecords, getEntityRecordEdits } =
-			select( coreStore );
+	const { editedEntities, siteEdits, siteEntityConfig } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getEntityRecordEdits,
+				getEntityConfig,
+			} = select( coreStore );
 
-		return {
-			editedEntities: __experimentalGetDirtyEntityRecords(),
-			siteEdits: getEntityRecordEdits( 'root', 'site' ),
-		};
-	}, [] );
+			return {
+				editedEntities: __experimentalGetDirtyEntityRecords(),
+				siteEdits: getEntityRecordEdits( 'root', 'site' ),
+				siteEntityConfig: getEntityConfig( 'root', 'site' ),
+			};
+		},
+		[]
+	);
 
 	const dirtyEntityRecords = useMemo( () => {
 		// Remove site object and decouple into its edited pieces.
@@ -34,18 +29,19 @@ export const useIsDirty = () => {
 			( record ) => ! ( record.kind === 'root' && record.name === 'site' )
 		);
 
+		const siteEntityLabels = siteEntityConfig?.meta?.labels ?? {};
 		const editedSiteEntities = [];
 		for ( const property in siteEdits ) {
 			editedSiteEntities.push( {
 				kind: 'root',
 				name: 'site',
-				title: TRANSLATED_SITE_PROPERTIES[ property ] || property,
+				title: siteEntityLabels[ property ] || property,
 				property,
 			} );
 		}
 
 		return [ ...editedEntitiesWithoutSite, ...editedSiteEntities ];
-	}, [ editedEntities, siteEdits ] );
+	}, [ editedEntities, siteEdits, siteEntityConfig ] );
 
 	// Unchecked entities to be ignored by save function.
 	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );

package/src/components/entities-saved-states/index.js

@@ -3,38 +3,40 @@
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	useCallback,
 	useRef,
 	createInterpolateElement,
 } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { __experimentalUseDialog as useDialog } from '@wordpress/compose';
-import { store as noticesStore } from '@wordpress/notices';
+import {
+	__experimentalUseDialog as useDialog,
+	useInstanceId,
+} from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import EntityTypeList from './entity-type-list';
 import { useIsDirty } from './hooks/use-is-dirty';
-
-const PUBLISH_ON_SAVE_ENTITIES = [
-	{
-		kind: 'postType',
-		name: 'wp_navigation',
-	},
-];
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function identity( values ) {
 	return values;
 }
 
-export default function EntitiesSavedStates( { close } ) {
+export default function EntitiesSavedStates( {
+	close,
+	renderDialog = undefined,
+} ) {
 	const isDirtyProps = useIsDirty();
 	return (
-		<EntitiesSavedStatesExtensible close={ close } { ...isDirtyProps } />
+		<EntitiesSavedStatesExtensible
+			close={ close }
+			renderDialog={ renderDialog }
+			{ ...isDirtyProps }
+		/>
 	);
 }
 
@@ -44,25 +46,14 @@ export function EntitiesSavedStatesExtensible( {
 	onSave = identity,
 	saveEnabled: saveEnabledProp = undefined,
 	saveLabel = __( 'Save' ),
-
+	renderDialog = undefined,
 	dirtyEntityRecords,
 	isDirty,
 	setUnselectedEntities,
 	unselectedEntities,
 } ) {
 	const saveButtonRef = useRef();
-	const {
-		editEntityRecord,
-		saveEditedEntityRecord,
-		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-	} = useDispatch( coreStore );
-
-	const { __unstableMarkLastChangeAsPersistent } =
-		useDispatch( blockEditorStore );
-
-	const { createSuccessNotice, createErrorNotice, removeNotice } =
-		useDispatch( noticesStore );
-
+	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
 	// To group entities by type.
 	const partitionedSavables = dirtyEntityRecords.reduce( ( acc, record ) => {
 		const { name } = record;
@@ -88,94 +79,6 @@ export function EntitiesSavedStatesExtensible( {
 	].filter( Array.isArray );
 
 	const saveEnabled = saveEnabledProp ?? isDirty;
-
-	const { homeUrl } = useSelect( ( select ) => {
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
-		return {
-			homeUrl: getUnstableBase()?.home,
-		};
-	}, [] );
-
-	const saveCheckedEntities = () => {
-		const saveNoticeId = 'site-editor-save-success';
-		removeNotice( saveNoticeId );
-		const entitiesToSave = dirtyEntityRecords.filter(
-			( { kind, name, key, property } ) => {
-				return ! unselectedEntities.some(
-					( elt ) =>
-						elt.kind === kind &&
-						elt.name === name &&
-						elt.key === key &&
-						elt.property === property
-				);
-			}
-		);
-
-		close( entitiesToSave );
-
-		const siteItemsToSave = [];
-		const pendingSavedRecords = [];
-		entitiesToSave.forEach( ( { kind, name, key, property } ) => {
-			if ( 'root' === kind && 'site' === name ) {
-				siteItemsToSave.push( property );
-			} else {
-				if (
-					PUBLISH_ON_SAVE_ENTITIES.some(
-						( typeToPublish ) =>
-							typeToPublish.kind === kind &&
-							typeToPublish.name === name
-					)
-				) {
-					editEntityRecord( kind, name, key, { status: 'publish' } );
-				}
-
-				pendingSavedRecords.push(
-					saveEditedEntityRecord( kind, name, key )
-				);
-			}
-		} );
-		if ( siteItemsToSave.length ) {
-			pendingSavedRecords.push(
-				saveSpecifiedEntityEdits(
-					'root',
-					'site',
-					undefined,
-					siteItemsToSave
-				)
-			);
-		}
-
-		__unstableMarkLastChangeAsPersistent();
-
-		Promise.all( pendingSavedRecords )
-			.then( ( values ) => {
-				return onSave( values );
-			} )
-			.then( ( values ) => {
-				if (
-					values.some( ( value ) => typeof value === 'undefined' )
-				) {
-					createErrorNotice( __( 'Saving failed.' ) );
-				} else {
-					createSuccessNotice( __( 'Site updated.' ), {
-						type: 'snackbar',
-						id: saveNoticeId,
-						actions: [
-							{
-								label: __( 'View site' ),
-								url: homeUrl,
-							},
-						],
-					} );
-				}
-			} )
-			.catch( ( error ) =>
-				createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` )
-			);
-	};
-
 	// Explicitly define this with no argument passed.  Using `close` on
 	// its own will use the event object in place of the expected saved entities.
 	const dismissPanel = useCallback( () => close(), [ close ] );
@@ -183,12 +86,20 @@ export function EntitiesSavedStatesExtensible( {
 	const [ saveDialogRef, saveDialogProps ] = useDialog( {
 		onClose: () => dismissPanel(),
 	} );
+	const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' );
+	const dialogDescription = useInstanceId(
+		EntitiesSavedStatesExtensible,
+		'description'
+	);
 
 	return (
 		<div
 			ref={ saveDialogRef }
 			{ ...saveDialogProps }
 			className="entities-saved-states__panel"
+			role={ renderDialog ? 'dialog' : undefined }
+			aria-labelledby={ renderDialog ? dialogLabel : undefined }
+			aria-describedby={ renderDialog ? dialogDescription : undefined }
 		>
 			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
 				<FlexItem
@@ -197,7 +108,15 @@ export function EntitiesSavedStatesExtensible( {
 					ref={ saveButtonRef }
 					variant="primary"
 					disabled={ ! saveEnabled }
-					onClick={ saveCheckedEntities }
+					__experimentalIsFocusable
+					onClick={ () =>
+						saveDirtyEntities( {
+							onSave,
+							dirtyEntityRecords,
+							entitiesToSkip: unselectedEntities,
+							close,
+						} )
+					}
 					className="editor-entities-saved-states__save-button"
 				>
 					{ saveLabel }
@@ -213,11 +132,16 @@ export function EntitiesSavedStatesExtensible( {
 			</Flex>
 
 			<div className="entities-saved-states__text-prompt">
-				<strong className="entities-saved-states__text-prompt--header">
-					{ __( 'Are you ready to save?' ) }
-				</strong>
-				{ additionalPrompt }
-				<p>
+				<div
+					className="entities-saved-states__text-prompt--header-wrapper"
+					id={ renderDialog ? dialogLabel : undefined }
+				>
+					<strong className="entities-saved-states__text-prompt--header">
+						{ __( 'Are you ready to save?' ) }
+					</strong>
+					{ additionalPrompt }
+				</div>
+				<p id={ renderDialog ? dialogDescription : undefined }>
 					{ isDirty
 						? createInterpolateElement(
 								sprintf(

package/src/components/entities-saved-states/test/use-is-dirty.js

@@ -32,6 +32,9 @@ jest.mock( '@wordpress/data', () => {
 					getEntityRecordEdits: jest.fn().mockReturnValue( {
 						title: 'My Site',
 					} ),
+					getEntityConfig: jest.fn().mockReturnValue( {
+						meta: { labels: { title: 'Title' } },
+					} ),
 				};
 			};
 			return fn( select );

package/src/components/error-boundary/index.native.js

@@ -0,0 +1,192 @@
+/**
+ * External dependencies
+ */
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
+import { logException } from '@wordpress/react-native-bridge';
+import {
+	usePreferredColorSchemeStyle,
+	withPreferredColorScheme,
+} from '@wordpress/compose';
+import { warning } from '@wordpress/icons';
+import { Icon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import styles from './style.scss';
+
+function getContent() {
+	try {
+		// While `select` in a component is generally discouraged, it is
+		// used here because it (a) reduces the chance of data loss in the
+		// case of additional errors by performing a direct retrieval and
+		// (b) avoids the performance cost associated with unnecessary
+		// content serialization throughout the lifetime of a non-erroring
+		// application.
+		return select( editorStore ).getEditedPostContent();
+	} catch ( error ) {}
+}
+
+function CopyButton( {
+	text,
+	label,
+	accessibilityLabel,
+	accessibilityHint,
+	secondary = false,
+} ) {
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__container' ],
+		styles[ 'copy-button__container--dark' ]
+	);
+
+	const containerSecondaryStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__container--secondary' ],
+		styles[ 'copy-button__container--secondary-dark' ]
+	);
+
+	const textStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__text' ],
+		styles[ 'copy-button__text--dark' ]
+	);
+
+	const textSecondaryStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__text--secondary' ],
+		styles[ 'copy-button__text--secondary-dark' ]
+	);
+
+	return (
+		<TouchableOpacity
+			activeOpacity={ 0.5 }
+			accessibilityLabel={ accessibilityLabel }
+			style={ [ containerStyle, secondary && containerSecondaryStyle ] }
+			accessibilityRole={ 'button' }
+			accessibilityHint={ accessibilityHint }
+			onPress={ () => {
+				Clipboard.setString(
+					typeof text === 'function' ? text() : text || ''
+				);
+			} }
+		>
+			<Text style={ [ textStyle, secondary && textSecondaryStyle ] }>
+				{ label }
+			</Text>
+		</TouchableOpacity>
+	);
+}
+
+class ErrorBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	componentDidCatch( error ) {
+		logException( error, {
+			context: {
+				component_stack: error.componentStack,
+			},
+			isHandled: true,
+			handledBy: 'Editor-level Error Boundary',
+		} );
+	}
+
+	static getDerivedStateFromError( error ) {
+		return { error };
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		const { getStylesFromColorScheme } = this.props;
+
+		const iconContainerStyle = getStylesFromColorScheme(
+			styles[ 'error-boundary__icon-container' ],
+			styles[ 'error-boundary__icon-container--dark' ]
+		);
+
+		const titleStyle = getStylesFromColorScheme(
+			styles[ 'error-boundary__title' ],
+			styles[ 'error-boundary__title--dark' ]
+		);
+
+		const messageStyle = getStylesFromColorScheme(
+			styles[ 'error-boundary__message' ],
+			styles[ 'error-boundary__message--dark' ]
+		);
+
+		return (
+			<SafeAreaView>
+				<ScrollView
+					style={ styles[ 'error-boundary__scroll' ] }
+					contentContainerStyle={
+						styles[ 'error-boundary__scroll-container' ]
+					}
+				>
+					<View style={ styles[ 'error-boundary__container' ] }>
+						<View style={ iconContainerStyle }>
+							<Icon
+								icon={ warning }
+								{ ...styles[ 'error-boundary__icon' ] }
+							/>
+						</View>
+						<Text style={ titleStyle }>
+							{ __(
+								'The editor has encountered an unexpected error'
+							) }
+						</Text>
+						<Text style={ messageStyle }>
+							{ __(
+								'You can copy your post text in case your content is impacted. Copy error details to debug and share with support.'
+							) }
+						</Text>
+						<View
+							style={
+								styles[ 'error-boundary__actions-container' ]
+							}
+						>
+							<CopyButton
+								label={ __( 'Copy post text' ) }
+								accessibilityLabel={ __(
+									'Button to copy post text'
+								) }
+								accessibilityHint={ __(
+									'Tap here to copy post text'
+								) }
+								text={ getContent }
+							/>
+							<CopyButton
+								label={ __( 'Copy error details' ) }
+								accessibilityLabel={ __(
+									'Button to copy error details'
+								) }
+								accessibilityHint={ __(
+									'Tap here to copy error details'
+								) }
+								text={ error.stack }
+								secondary
+							/>
+						</View>
+					</View>
+				</ScrollView>
+			</SafeAreaView>
+		);
+	}
+}
+
+export default withPreferredColorScheme( ErrorBoundary );