@wordpress/editor 13.30.0 → 13.31.0

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

@@ -232,7 +232,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			setRenderingMode( settings.defaultRenderingMode ?? 'post-only' );
 		}, [ settings.defaultRenderingMode, setRenderingMode ] );
 
-		useHideBlocksFromInserter( post.type );
+		useHideBlocksFromInserter( post.type, mode );
 
 		// Register the editor commands.
 		useCommands();

package/src/components/provider/use-hide-blocks-from-inserter.js

@@ -18,8 +18,9 @@ const POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART = [
  * the template part and post content blocks need to be hidden.
  *
  * @param {string} postType Post Type
+ * @param {string} mode     Rendering mode
  */
-export function useHideBlocksFromInserter( postType ) {
+export function useHideBlocksFromInserter( postType, mode ) {
 	useEffect( () => {
 		/*
 		 * Prevent adding template part in the editor.
@@ -32,7 +33,8 @@ export function useHideBlocksFromInserter( postType ) {
 					! POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART.includes(
 						postType
 					) &&
-					blockType.name === 'core/template-part'
+					blockType.name === 'core/template-part' &&
+					mode === 'post-only'
 				) {
 					return false;
 				}
@@ -77,5 +79,5 @@ export function useHideBlocksFromInserter( postType ) {
 				'removePostContentFromInserter'
 			);
 		};
-	}, [ postType ] );
+	}, [ postType, mode ] );
 }

package/src/private-apis.js

@@ -4,7 +4,6 @@
 import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
-import EnablePluginDocumentSettingPanelOption from './components/preferences-modal/enable-plugin-document-setting-panel';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 import DocumentTools from './components/document-tools';
@@ -22,7 +21,6 @@ lock( privateApis, {
 	DocumentTools,
 	EditorCanvas,
 	ExperimentalEditorProvider,
-	EnablePluginDocumentSettingPanelOption,
 	EntitiesSavedStatesExtensible,
 	InserterSidebar,
 	ListViewSidebar,