@wordpress/editor 13.29.0 → 13.31.0

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

package/src/components/list-view-sidebar/index.js

@@ -127,7 +127,7 @@ export default function ListViewSidebar() {
 				// render where no tab is selected. This ensures that the
 				// tabpanel height is correct so the relevant scroll container
 				// can be rendered internally.
-				initialTabId="list-view"
+				defaultTabId="list-view"
 			>
 				<div className="edit-post-editor__document-overview-panel__header">
 					<Button

package/src/components/plugin-document-setting-panel/index.js

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+import { usePluginContext } from '@wordpress/plugins';
+import { useDispatch, useSelect } from '@wordpress/data';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import EnablePluginDocumentSettingPanelOption from '../preferences-modal/enable-plugin-document-setting-panel';
+import { store as editorStore } from '../../store';
+
+const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
+
+/**
+ * Renders items below the Status & Availability panel in the Document Sidebar.
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {string}                props.name                            Required. A machine-friendly name for the panel.
+ * @param {string}                [props.className]                     An optional class name added to the row.
+ * @param {string}                [props.title]                         The title of the panel
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+ * @param {Element}               props.children                        Children to be rendered
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var el = React.createElement;
+ * var __ = wp.i18n.__;
+ * var registerPlugin = wp.plugins.registerPlugin;
+ * var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
+ *
+ * function MyDocumentSettingPlugin() {
+ * 	return el(
+ * 		PluginDocumentSettingPanel,
+ * 		{
+ * 			className: 'my-document-setting-plugin',
+ * 			title: 'My Panel',
+ * 			name: 'my-panel',
+ * 		},
+ * 		__( 'My Document Setting Panel' )
+ * 	);
+ * }
+ *
+ * registerPlugin( 'my-document-setting-plugin', {
+ * 		render: MyDocumentSettingPlugin
+ * } );
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { registerPlugin } from '@wordpress/plugins';
+ * import { PluginDocumentSettingPanel } from '@wordpress/editor';
+ *
+ * const MyDocumentSettingTest = () => (
+ * 		<PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel" name="my-panel">
+ *			<p>My Document Setting Panel</p>
+ *		</PluginDocumentSettingPanel>
+ *	);
+ *
+ *  registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginDocumentSettingPanel = ( {
+	name,
+	className,
+	title,
+	icon,
+	children,
+} ) => {
+	const { name: pluginName } = usePluginContext();
+	const panelName = `${ pluginName }/${ name }`;
+	const { opened, isEnabled } = useSelect(
+		( select ) => {
+			const { isEditorPanelOpened, isEditorPanelEnabled } =
+				select( editorStore );
+
+			return {
+				opened: isEditorPanelOpened( panelName ),
+				isEnabled: isEditorPanelEnabled( panelName ),
+			};
+		},
+		[ panelName ]
+	);
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+
+	if ( undefined === name ) {
+		warning( 'PluginDocumentSettingPanel requires a name property.' );
+	}
+
+	return (
+		<>
+			<EnablePluginDocumentSettingPanelOption
+				label={ title }
+				panelName={ panelName }
+			/>
+			<Fill>
+				{ isEnabled && (
+					<PanelBody
+						className={ className }
+						title={ title }
+						icon={ icon }
+						opened={ opened }
+						onToggle={ () => toggleEditorPanelOpened( panelName ) }
+					>
+						{ children }
+					</PanelBody>
+				) }
+			</Fill>
+		</>
+	);
+};
+
+PluginDocumentSettingPanel.Slot = Slot;
+
+export default PluginDocumentSettingPanel;

package/src/components/post-featured-image/index.js

@@ -7,7 +7,6 @@ import {
 	DropZone,
 	Button,
 	Spinner,
-	ResponsiveWrapper,
 	withNotices,
 	withFilters,
 	__experimentalHStack as HStack,
@@ -99,10 +98,7 @@ function PostFeaturedImage( {
 	const toggleRef = useRef();
 	const [ isLoading, setIsLoading ] = useState( false );
 	const { getSettings } = useSelect( blockEditorStore );
-	const { mediaWidth, mediaHeight, mediaSourceUrl } = getMediaDetails(
-		media,
-		currentPostId
-	);
+	const { mediaSourceUrl } = getMediaDetails( media, currentPostId );
 
 	function onDropFiles( filesList ) {
 		getSettings().mediaUpload( {
@@ -183,16 +179,11 @@ function PostFeaturedImage( {
 									}
 								>
 									{ !! featuredImageId && media && (
-										<ResponsiveWrapper
-											naturalWidth={ mediaWidth }
-											naturalHeight={ mediaHeight }
-											isInline
-										>
-											<img
-												src={ mediaSourceUrl }
-												alt=""
-											/>
-										</ResponsiveWrapper>
+										<img
+											className="editor-post-featured-image__preview-image"
+											src={ mediaSourceUrl }
+											alt=""
+										/>
 									) }
 									{ isLoading && <Spinner /> }
 									{ ! featuredImageId &&

package/src/components/post-featured-image/panel.js

@@ -15,7 +15,7 @@ import PostFeaturedImageCheck from './check';
 
 const PANEL_NAME = 'featured-image';
 
-function FeaturedImage() {
+export default function PostFeaturedImagePanel( { withPanelBody = true } ) {
 	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
 		const {
 			getEditedPostAttribute,
@@ -37,6 +37,14 @@ function FeaturedImage() {
 		return null;
 	}
 
+	if ( ! withPanelBody ) {
+		return (
+			<PostFeaturedImageCheck>
+				<PostFeaturedImage />
+			</PostFeaturedImageCheck>
+		);
+	}
+
 	return (
 		<PostFeaturedImageCheck>
 			<PanelBody
@@ -51,5 +59,3 @@ function FeaturedImage() {
 		</PostFeaturedImageCheck>
 	);
 }
-
-export default FeaturedImage;

package/src/components/post-featured-image/style.scss

@@ -1,7 +1,6 @@
 .editor-post-featured-image {
 	padding: 0;
 
-
 	.components-spinner {
 		position: absolute;
 		top: 50%;
@@ -9,17 +8,11 @@
 		margin-top: -9px;
 		margin-left: -9px;
 	}
-
-	// This keeps images at their intrinsic size (eg. a 50px
-	// image will never be wider than 50px).
-	.components-responsive-wrapper__content {
-		max-width: 100%;
-		width: auto;
-	}
 }
 
 .editor-post-featured-image__container {
 	position: relative;
+	aspect-ratio: 2/1;
 
 	&:hover,
 	&:focus,
@@ -38,26 +31,28 @@
 	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
 	overflow: hidden; // Ensure the focus style properly encapsulates the image.
+	outline: $border-width solid rgba(0, 0, 0, 0.1);
+	outline-offset: -#{$border-width};
 
-	// Apply a max-height.
 	display: flex;
 	justify-content: center;
-	max-height: 150px;
 }
 
 .editor-post-featured-image__preview {
 	height: auto;
 
-	.components-responsive-wrapper {
+	.editor-post-featured-image__preview-image {
+		object-fit: cover;
 		width: 100%;
-		background: $gray-100;
+		object-position: 50% 50%;
+		aspect-ratio: 2/1;
 	}
 }
 
 .editor-post-featured-image__toggle {
 	border-radius: $radius-block-ui;
 	background-color: $gray-100;
-	min-height: 90px;
+	height: 100%;
 	line-height: 20px;
 	padding: $grid-unit-10 0;
 	text-align: center;

package/src/components/post-locked-modal/index.js

@@ -168,7 +168,7 @@ export default function PostLockedModal() {
 					? __( 'Someone else has taken over this post' )
 					: __( 'This post is already being edited' )
 			}
-			focusOnMount={ true }
+			focusOnMount
 			shouldCloseOnClickOutside={ false }
 			shouldCloseOnEsc={ false }
 			isDismissible={ false }

package/src/components/post-preview-button/index.js

@@ -171,6 +171,7 @@ export default function PostPreviewButton( {
 			disabled={ ! isSaveable }
 			onClick={ openPreviewWindow }
 			role={ role }
+			size="compact"
 		>
 			{ textContent || (
 				<>

package/src/components/post-publish-button/index.js

@@ -203,6 +203,7 @@ export class PostPublishButton extends Component {
 							'has-changes-dot': hasNonPostEntityChanges,
 						}
 					) }
+					size="compact"
 				>
 					{ componentChildren }
 				</Button>

package/src/components/post-publish-panel/index.js

@@ -110,7 +110,7 @@ export class PostPublishPanel extends Component {
 						</PostPublishPanelPrepublish>
 					) }
 					{ isPostPublish && (
-						<PostPublishPanelPostpublish focusOnMount={ true }>
+						<PostPublishPanelPostpublish focusOnMount>
 							{ PostPublishExtension && <PostPublishExtension /> }
 						</PostPublishPanelPostpublish>
 					) }

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -131,7 +131,7 @@ export default function PostFormatPanel() {
 	}
 
 	return (
-		<PanelBody initialOpen={ true } title={ panelBodyTitle }>
+		<PanelBody initialOpen title={ panelBodyTitle }>
 			<p>
 				{ __(
 					'Upload external images to the Media Library. Images from different domains may load slowly, display incorrectly, or be removed unexpectedly.'

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -353,7 +353,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
           Submit for Review
@@ -476,7 +476,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
           Submit for Review
@@ -643,7 +643,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
           Submit for Review

package/src/components/post-sync-status/index.js

@@ -1,26 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
-import {
-	Modal,
-	Button,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	ToggleControl,
-} from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { ReusableBlocksRenameHint } = unlock( blockEditorPrivateApis );
 
 export default function PostSyncStatus() {
 	const { syncStatus, postType } = useSelect( ( select ) => {
@@ -59,84 +47,3 @@ export default function PostSyncStatus() {
 		</PostPanelRow>
 	);
 }
-
-export function PostSyncStatusModal() {
-	const { editPost } = useDispatch( editorStore );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const [ syncType, setSyncType ] = useState( undefined );
-
-	const { postType, isNewPost } = useSelect( ( select ) => {
-		const { getEditedPostAttribute, isCleanNewPost } =
-			select( editorStore );
-		return {
-			postType: getEditedPostAttribute( 'type' ),
-			isNewPost: isCleanNewPost(),
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( isNewPost && postType === 'wp_block' ) {
-			setIsModalOpen( true );
-		}
-		// We only want the modal to open when the page is first loaded.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
-	const setSyncStatus = () => {
-		editPost( {
-			meta: {
-				wp_pattern_sync_status: syncType,
-			},
-		} );
-	};
-
-	if ( postType !== 'wp_block' || ! isNewPost ) {
-		return null;
-	}
-
-	return (
-		<>
-			{ isModalOpen && (
-				<Modal
-					title={ __( 'Set pattern sync status' ) }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName="reusable-blocks-menu-items__convert-modal"
-				>
-					<form
-						onSubmit={ ( event ) => {
-							event.preventDefault();
-							setIsModalOpen( false );
-							setSyncStatus();
-						} }
-					>
-						<VStack spacing="5">
-							<ReusableBlocksRenameHint />
-							<ToggleControl
-								label={ _x(
-									'Synced',
-									'Option that makes an individual pattern synchronized'
-								) }
-								help={ __(
-									'Sync this pattern across multiple locations.'
-								) }
-								checked={ ! syncType }
-								onChange={ () => {
-									setSyncType(
-										! syncType ? 'unsynced' : undefined
-									);
-								} }
-							/>
-							<HStack justify="right">
-								<Button variant="primary" type="submit">
-									{ __( 'Create' ) }
-								</Button>
-							</HStack>
-						</VStack>
-					</form>
-				</Modal>
-			) }
-		</>
-	);
-}

package/src/components/post-taxonomies/flat-term-selector.js

@@ -40,10 +40,13 @@ const isSameTermName = ( termA, termB ) =>
 	unescapeString( termB ).toLowerCase();
 
 const termNamesToIds = ( names, terms ) => {
-	return names.map(
-		( termName ) =>
-			terms.find( ( term ) => isSameTermName( term.name, termName ) ).id
-	);
+	return names
+		.map(
+			( termName ) =>
+				terms.find( ( term ) => isSameTermName( term.name, termName ) )
+					?.id
+		)
+		.filter( ( id ) => id !== undefined );
 };
 
 export function FlatTermSelector( { slug } ) {
@@ -193,9 +196,8 @@ export function FlatTermSelector( { slug } ) {
 		setValues( uniqueTerms );
 
 		if ( newTermNames.length === 0 ) {
-			return onUpdateTerms(
-				termNamesToIds( uniqueTerms, availableTerms )
-			);
+			onUpdateTerms( termNamesToIds( uniqueTerms, availableTerms ) );
+			return;
 		}
 
 		if ( ! hasCreateAction ) {
@@ -209,7 +211,7 @@ export function FlatTermSelector( { slug } ) {
 		)
 			.then( ( newTerms ) => {
 				const newAvailableTerms = availableTerms.concat( newTerms );
-				return onUpdateTerms(
+				onUpdateTerms(
 					termNamesToIds( uniqueTerms, newAvailableTerms )
 				);
 			} )
@@ -217,6 +219,9 @@ export function FlatTermSelector( { slug } ) {
 				createErrorNotice( error.message, {
 					type: 'snackbar',
 				} );
+				// In case of a failure, try assigning available terms.
+				// This will invalidate the optimistic update.
+				onUpdateTerms( termNamesToIds( uniqueTerms, availableTerms ) );
 			} );
 	}
 

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -439,6 +439,7 @@ export function HierarchicalTermSelector( { slug } ) {
 				<form onSubmit={ onAddTerm }>
 					<Flex direction="column" gap="4">
 						<TextControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							className="editor-post-taxonomies__hierarchical-terms-input"
 							label={ newTermLabel }
@@ -448,6 +449,7 @@ export function HierarchicalTermSelector( { slug } ) {
 						/>
 						{ !! availableTerms.length && (
 							<TreeSelect
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ parentSelectLabel }
 								noOptionLabel={ noParentOption }
@@ -458,6 +460,7 @@ export function HierarchicalTermSelector( { slug } ) {
 						) }
 						<FlexItem>
 							<Button
+								__next40pxDefaultSize
 								variant="secondary"
 								type="submit"
 								className="editor-post-taxonomies__hierarchical-terms-submit"

package/src/components/post-title/index.native.js

@@ -175,7 +175,7 @@ class PostTitle extends Component {
 					fontSize={ 24 }
 					lineHeight={ 1 }
 					fontWeight={ 'bold' }
-					deleteEnter={ true }
+					deleteEnter
 					onChange={ ( value ) => {
 						this.props.onUpdate( value );
 					} }
@@ -184,7 +184,7 @@ class PostTitle extends Component {
 					value={ title }
 					onSelectionChange={ () => {} }
 					onEnter={ this.props.onEnterPress }
-					disableEditingMenu={ true }
+					disableEditingMenu
 					__unstableIsSelected={ this.props.isSelected }
 					__unstableOnCreateUndoLevel={ () => {} }
 				/>