@wordpress/editor 13.30.0 → 13.31.0

package/build-style/style.css

@@ -697,13 +697,10 @@
   margin-top: -9px;
   margin-left: -9px;
 }
-.editor-post-featured-image .components-responsive-wrapper__content {
-  max-width: 100%;
-  width: auto;
-}
 
 .editor-post-featured-image__container {
   position: relative;
+  aspect-ratio: 2/1;
 }
 .editor-post-featured-image__container:hover .editor-post-featured-image__actions, .editor-post-featured-image__container:focus .editor-post-featured-image__actions, .editor-post-featured-image__container:focus-within .editor-post-featured-image__actions {
   opacity: 1;
@@ -716,9 +713,10 @@
   transition: all 0.1s ease-out;
   box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
   overflow: hidden;
+  outline: 1px solid rgba(0, 0, 0, 0.1);
+  outline-offset: -1px;
   display: flex;
   justify-content: center;
-  max-height: 150px;
 }
 @media (prefers-reduced-motion: reduce) {
   .editor-post-featured-image__toggle,
@@ -731,15 +729,17 @@
 .editor-post-featured-image__preview {
   height: auto;
 }
-.editor-post-featured-image__preview .components-responsive-wrapper {
+.editor-post-featured-image__preview .editor-post-featured-image__preview-image {
+  object-fit: cover;
   width: 100%;
-  background: #f0f0f0;
+  object-position: 50% 50%;
+  aspect-ratio: 2/1;
 }
 
 .editor-post-featured-image__toggle {
   border-radius: 2px;
   background-color: #f0f0f0;
-  min-height: 90px;
+  height: 100%;
   line-height: 20px;
   padding: 8px 0;
   text-align: center;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.30.0",
+	"version": "13.31.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,38 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.53.0",
-		"@wordpress/api-fetch": "^6.50.0",
-		"@wordpress/blob": "^3.53.0",
-		"@wordpress/block-editor": "^12.21.0",
-		"@wordpress/blocks": "^12.30.0",
-		"@wordpress/commands": "^0.24.0",
-		"@wordpress/components": "^27.1.0",
-		"@wordpress/compose": "^6.30.0",
-		"@wordpress/core-data": "^6.30.0",
-		"@wordpress/data": "^9.23.0",
-		"@wordpress/date": "^4.53.0",
-		"@wordpress/deprecated": "^3.53.0",
-		"@wordpress/dom": "^3.53.0",
-		"@wordpress/element": "^5.30.0",
-		"@wordpress/hooks": "^3.53.0",
-		"@wordpress/html-entities": "^3.53.0",
-		"@wordpress/i18n": "^4.53.0",
-		"@wordpress/icons": "^9.44.0",
-		"@wordpress/keyboard-shortcuts": "^4.30.0",
-		"@wordpress/keycodes": "^3.53.0",
-		"@wordpress/media-utils": "^4.44.0",
-		"@wordpress/notices": "^4.21.0",
-		"@wordpress/patterns": "^1.14.0",
-		"@wordpress/preferences": "^3.30.0",
-		"@wordpress/private-apis": "^0.35.0",
-		"@wordpress/reusable-blocks": "^4.30.0",
-		"@wordpress/rich-text": "^6.30.0",
-		"@wordpress/server-side-render": "^4.30.0",
-		"@wordpress/url": "^3.54.0",
-		"@wordpress/wordcount": "^3.53.0",
+		"@wordpress/a11y": "^3.54.0",
+		"@wordpress/api-fetch": "^6.51.0",
+		"@wordpress/blob": "^3.54.0",
+		"@wordpress/block-editor": "^12.22.0",
+		"@wordpress/blocks": "^12.31.0",
+		"@wordpress/commands": "^0.25.0",
+		"@wordpress/components": "^27.2.0",
+		"@wordpress/compose": "^6.31.0",
+		"@wordpress/core-data": "^6.31.0",
+		"@wordpress/data": "^9.24.0",
+		"@wordpress/date": "^4.54.0",
+		"@wordpress/deprecated": "^3.54.0",
+		"@wordpress/dom": "^3.54.0",
+		"@wordpress/element": "^5.31.0",
+		"@wordpress/hooks": "^3.54.0",
+		"@wordpress/html-entities": "^3.54.0",
+		"@wordpress/i18n": "^4.54.0",
+		"@wordpress/icons": "^9.45.0",
+		"@wordpress/keyboard-shortcuts": "^4.31.0",
+		"@wordpress/keycodes": "^3.54.0",
+		"@wordpress/media-utils": "^4.45.0",
+		"@wordpress/notices": "^4.22.0",
+		"@wordpress/patterns": "^1.15.0",
+		"@wordpress/plugins": "^6.22.0",
+		"@wordpress/preferences": "^3.31.0",
+		"@wordpress/private-apis": "^0.36.0",
+		"@wordpress/reusable-blocks": "^4.31.0",
+		"@wordpress/rich-text": "^6.31.0",
+		"@wordpress/server-side-render": "^4.31.0",
+		"@wordpress/url": "^3.55.0",
+		"@wordpress/warning": "^2.54.0",
+		"@wordpress/wordcount": "^3.54.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"memize": "^2.1.0",
@@ -75,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
+	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
 }

package/src/bindings/index.js

@@ -11,5 +11,8 @@ import patternOverrides from './pattern-overrides';
 import postMeta from './post-meta';
 
 const { registerBlockBindingsSource } = unlock( dispatch( blocksStore ) );
-registerBlockBindingsSource( patternOverrides );
 registerBlockBindingsSource( postMeta );
+
+if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	registerBlockBindingsSource( patternOverrides );
+}

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/index.js

@@ -95,7 +95,8 @@ const computeOutlineHeadings = ( blocks = [] ) => {
 };
 
 const isEmptyHeading = ( heading ) =>
-	! heading.attributes.content || heading.attributes.content.length === 0;
+	! heading.attributes.content ||
+	heading.attributes.content.trim().length === 0;
 
 export default function DocumentOutline( {
 	onSelect,

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 );

package/src/components/error-boundary/style.native.scss

@@ -0,0 +1,116 @@
+.error-boundary__scroll {
+	height: 100%;
+	width: 100%;
+}
+
+.error-boundary__scroll-container {
+	flex-grow: 1;
+	max-height: 580px;
+	align-items: center;
+	justify-content: center;
+}
+
+
+.error-boundary__container {
+	width: 100%;
+	max-width: 600px;
+	justify-content: center;
+	align-items: center;
+	padding: 0 24px;
+}
+
+.error-boundary__icon-container {
+	$size: 40px;
+
+	width: $size;
+	height: $size;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 8px;
+	background-color: rgba(60, 60, 67, 0.3);
+	border-radius: $size/2;
+}
+
+.error-boundary__icon-container--dark {
+	background-color: rgba(235, 235, 245, 0.3);
+}
+
+.error-boundary__icon {
+	width: 24px;
+	height: 24px;
+	fill: $white;
+}
+
+.error-boundary__title {
+	font-size: 20px;
+	font-weight: 600;
+	line-height: 25px;
+	color: $black;
+	text-align: center;
+	margin-bottom: 8px;
+}
+
+.error-boundary__title--dark {
+	color: $white;
+}
+
+.error-boundary__message {
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 21px;
+	color: rgba(60, 60, 67, 0.6);
+	text-align: center;
+	margin-bottom: 16px;
+}
+
+.error-boundary__message--dark {
+	color: rgba(235, 235, 245, 0.6);
+}
+
+.error-boundary__actions-container {
+	width: 100%;
+	max-width: 400px;
+	justify-content: center;
+	gap: 12px;
+	padding-top: 16px;
+}
+
+.copy-button__container {
+	border-radius: 5px;
+	padding: $grid-unit $grid-unit-20;
+	background-color: $light-primary;
+}
+
+.copy-button__container--dark {
+	background-color: $white;
+}
+
+.copy-button__container--secondary {
+	border: 1px #c6c6c8;
+	background-color: $white;
+}
+
+.copy-button__container--secondary-dark {
+	border-color: rgba(255, 255, 255, 0.3);
+	background-color: $black;
+}
+
+.copy-button__text {
+	font-size: 17px;
+	font-weight: 400;
+	line-height: 22px;
+	text-align: center;
+	color: $white;
+}
+
+.copy-button__text--dark {
+	color: $background-dark-secondary;
+}
+
+.copy-button__text--secondary {
+	color: $black;
+}
+
+.copy-button__text--secondary-dark {
+	color: $white;
+}

package/src/components/index.js

@@ -26,6 +26,7 @@ export { default as PageAttributesOrder } from './page-attributes/order';
 export { default as PageAttributesPanel } from './page-attributes/panel';
 export { default as PageAttributesParent } from './page-attributes/parent';
 export { default as PageTemplate } from './post-template/classic-theme';
+export { default as PluginDocumentSettingPanel } from './plugin-document-setting-panel';
 export { default as PostTemplatePanel } from './post-template/panel';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
@@ -64,10 +65,7 @@ export { default as PostSlugCheck } from './post-slug/check';
 export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button';
-export {
-	default as PostSyncStatus,
-	PostSyncStatusModal,
-} from './post-sync-status';
+export { default as PostSyncStatus } from './post-sync-status';
 export { default as PostTaxonomies } from './post-taxonomies';
 export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
 export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';

package/src/components/index.native.js

@@ -10,5 +10,6 @@ export { default as EditorProvider } from './provider';
 // Other Components.
 export { default as EditorHelpTopics } from './editor-help';
 export { default as OfflineStatus } from './offline-status';
+export { default as ErrorBoundary } from './error-boundary';
 
 export * from './deprecated';