@wordpress/editor 13.29.0 → 13.31.0

package/src/components/commands/index.js

@@ -25,9 +25,12 @@ function useEditorCommandLoader() {
 		isFocusMode,
 		isPreviewMode,
 		isViewable,
+		isCodeEditingEnabled,
+		isRichEditingEnabled,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
-		const { isListViewOpened, getCurrentPostType } = select( editorStore );
+		const { isListViewOpened, getCurrentPostType, getEditorSettings } =
+			select( editorStore );
 		const { getSettings } = select( blockEditorStore );
 		const { getPostType } = select( coreStore );
 
@@ -40,6 +43,8 @@ function useEditorCommandLoader() {
 			isTopToolbar: get( 'core', 'fixedToolbar' ),
 			isPreviewMode: getSettings().__unstableIsPreviewMode,
 			isViewable: getPostType( getCurrentPostType() )?.viewable ?? false,
+			isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
+			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
 		};
 	}, [] );
 	const { toggle } = useDispatch( preferencesStore );
@@ -51,6 +56,7 @@ function useEditorCommandLoader() {
 		toggleDistractionFree,
 	} = useDispatch( editorStore );
 	const { getCurrentPostId } = useSelect( editorStore );
+	const allowSwitchEditorMode = isCodeEditingEnabled && isRichEditingEnabled;
 
 	if ( isPreviewMode ) {
 		return { commands: [], isLoading: false };
@@ -141,18 +147,20 @@ function useEditorCommandLoader() {
 		},
 	} );
 
-	commands.push( {
-		name: 'core/toggle-code-editor',
-		label:
-			editorMode === 'visual'
-				? __( 'Open code editor' )
-				: __( 'Exit code editor' ),
-		icon: code,
-		callback: ( { close } ) => {
-			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
-			close();
-		},
-	} );
+	if ( allowSwitchEditorMode ) {
+		commands.push( {
+			name: 'core/toggle-code-editor',
+			label:
+				editorMode === 'visual'
+					? __( 'Open code editor' )
+					: __( 'Exit code editor' ),
+			icon: code,
+			callback: ( { close } ) => {
+				switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+				close();
+			},
+		} );
+	}
 
 	commands.push( {
 		name: 'core/toggle-breadcrumbs',

package/src/components/document-bar/index.js

@@ -74,7 +74,8 @@ export default function DocumentBar() {
 			getEditorSettings,
 			__experimentalGetTemplateInfo: getTemplateInfo,
 		} = select( editorStore );
-		const { getEditedEntityRecord, getIsResolving } = select( coreStore );
+		const { getEditedEntityRecord, isResolving: isResolvingSelector } =
+			select( coreStore );
 		const _postType = getCurrentPostType();
 		const _postId = getCurrentPostId();
 		const _document = getEditedEntityRecord(
@@ -86,7 +87,7 @@ export default function DocumentBar() {
 		return {
 			postType: _postType,
 			document: _document,
-			isResolving: getIsResolving(
+			isResolving: isResolvingSelector(
 				'getEditedEntityRecord',
 				'postType',
 				_postType,

package/src/components/document-outline/check.js

@@ -1,21 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
-function DocumentOutlineCheck( { blocks, children } ) {
-	const headings = blocks.filter(
-		( block ) => block.name === 'core/heading'
-	);
+export default function DocumentOutlineCheck( { children } ) {
+	const hasHeadings = useSelect( ( select ) => {
+		const { getGlobalBlockCount } = select( blockEditorStore );
 
-	if ( headings.length < 1 ) {
+		return getGlobalBlockCount( 'core/heading' ) > 0;
+	} );
+
+	if ( hasHeadings ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default withSelect( ( select ) => ( {
-	blocks: select( blockEditorStore ).getBlocks(),
-} ) )( DocumentOutlineCheck );

package/src/components/document-outline/index.js

@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
-import { withSelect, useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { create, getTextContent } from '@wordpress/rich-text';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -96,17 +95,29 @@ const computeOutlineHeadings = ( blocks = [] ) => {
 };
 
 const isEmptyHeading = ( heading ) =>
-	! heading.attributes.content || heading.attributes.content.length === 0;
+	! heading.attributes.content ||
+	heading.attributes.content.trim().length === 0;
 
-export const DocumentOutline = ( {
-	blocks = [],
-	title,
+export default function DocumentOutline( {
 	onSelect,
 	isTitleSupported,
 	hasOutlineItemsDisabled,
-} ) => {
-	const headings = computeOutlineHeadings( blocks );
+} ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
+	const { blocks, title } = useSelect( ( select ) => {
+		const { getBlocks } = select( blockEditorStore );
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
+
+		return {
+			title: getEditedPostAttribute( 'title' ),
+			blocks: getBlocks(),
+			isTitleSupported: postType?.supports?.title ?? false,
+		};
+	} );
+
+	const headings = computeOutlineHeadings( blocks );
 	if ( headings.length < 1 ) {
 		return (
 			<div className="editor-document-outline has-no-headings">
@@ -194,19 +205,4 @@ export const DocumentOutline = ( {
 			</ul>
 		</div>
 	);
-};
-
-export default compose(
-	withSelect( ( select ) => {
-		const { getBlocks } = select( blockEditorStore );
-		const { getEditedPostAttribute } = select( editorStore );
-		const { getPostType } = select( coreStore );
-		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
-		return {
-			title: getEditedPostAttribute( 'title' ),
-			blocks: getBlocks(),
-			isTitleSupported: postType?.supports?.title ?? false,
-		};
-	} )
-)( DocumentOutline );
+}

package/src/components/document-outline/test/index.js

@@ -11,15 +11,27 @@ import {
 	registerBlockType,
 	unregisterBlockType,
 } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { DocumentOutline } from '../';
+import DocumentOutline from '../';
 
 jest.mock( '@wordpress/block-editor', () => ( {
 	BlockTitle: () => 'Block Title',
 } ) );
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupMockSelect( blocks ) {
+	useSelect.mockImplementation( ( mapSelect ) => {
+		return mapSelect( () => ( {
+			getBlocks: () => blocks,
+			getEditedPostAttribute: () => null,
+			getPostType: () => null,
+		} ) );
+	} );
+}
 
 describe( 'DocumentOutline', () => {
 	let paragraph, headingH1, headingH2, headingH3, nestedHeading;
@@ -77,6 +89,7 @@ describe( 'DocumentOutline', () => {
 
 	describe( 'no header blocks present', () => {
 		it( 'should not render when no blocks provided', () => {
+			setupMockSelect( [] );
 			render( <DocumentOutline /> );
 
 			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
@@ -87,7 +100,8 @@ describe( 'DocumentOutline', () => {
 				// Set client IDs to a predictable value.
 				return { ...block, clientId: `clientId_${ index }` };
 			} );
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
 		} );
@@ -99,14 +113,16 @@ describe( 'DocumentOutline', () => {
 				// Set client IDs to a predictable value.
 				return { ...block, clientId: `clientId_${ index }` };
 			} );
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
 		} );
 
 		it( 'should render an item when only one heading provided', () => {
 			const blocks = [ headingH2 ];
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			const tableOfContentItem = within(
 				screen.getByRole( 'list' )
@@ -123,7 +139,8 @@ describe( 'DocumentOutline', () => {
 				headingH3,
 				paragraph,
 			];
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			expect(
 				within( screen.getByRole( 'list' ) ).getAllByRole( 'listitem' )
@@ -137,7 +154,8 @@ describe( 'DocumentOutline', () => {
 					return { ...block, clientId: `clientId_${ index }` };
 				}
 			);
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
 		} );
@@ -146,7 +164,8 @@ describe( 'DocumentOutline', () => {
 	describe( 'nested headings', () => {
 		it( 'should render even if the heading is nested', () => {
 			const blocks = [ headingH2, nestedHeading ];
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			// Unnested heading and nested heading should appear as items.
 			const tableOfContentItems = within(

package/src/components/document-tools/index.js

@@ -29,7 +29,7 @@ import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
 
-const { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );
+const { useShowBlockTools } = unlock( blockEditorPrivateApis );
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -76,7 +76,7 @@ function DocumentTools( {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-	const blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();
+	const { showFixedToolbar } = useShowBlockTools();
 
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
@@ -117,7 +117,7 @@ function DocumentTools( {
 				className
 			) }
 			aria-label={ toolbarAriaLabel }
-			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+			shouldUseKeyboardFocusShortcut={ ! showFixedToolbar }
 			variant="unstyled"
 		>
 			<div className="editor-document-tools__left">

package/src/components/editor-help/intro-to-blocks.native.js

@@ -51,7 +51,7 @@ const IntroToBlocks = () => {
 					) }
 				/>
 				<HelpDetailImage
-					accessible={ true }
+					accessible
 					accessibilityLabel={ __(
 						'Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block'
 					) }

package/src/components/entities-saved-states/entity-type-list.js

@@ -94,7 +94,7 @@ export default function EntityTypeList( {
 	}
 
 	return (
-		<PanelBody title={ entityLabel } initialOpen={ true }>
+		<PanelBody title={ entityLabel } initialOpen>
 			<EntityDescription record={ firstRecord } count={ count } />
 			{ list.map( ( record ) => {
 				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

@@ -11,7 +11,10 @@ import {
 } 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 {
+	__experimentalUseDialog as useDialog,
+	useInstanceId,
+} from '@wordpress/compose';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -31,10 +34,17 @@ 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,6 +54,7 @@ export function EntitiesSavedStatesExtensible( {
 	onSave = identity,
 	saveEnabled: saveEnabledProp = undefined,
 	saveLabel = __( 'Save' ),
+	renderDialog = undefined,
 
 	dirtyEntityRecords,
 	isDirty,
@@ -183,12 +194,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,6 +216,7 @@ export function EntitiesSavedStatesExtensible( {
 					ref={ saveButtonRef }
 					variant="primary"
 					disabled={ ! saveEnabled }
+					__experimentalIsFocusable
 					onClick={ saveCheckedEntities }
 					className="editor-entities-saved-states__save-button"
 				>
@@ -213,11 +233,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 );