@wordpress/editor 13.31.0 → 13.32.0

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

@@ -3,32 +3,24 @@
  */
 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,
 	useInstanceId,
 } from '@wordpress/compose';
-import { store as noticesStore } from '@wordpress/notices';
+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;
@@ -55,25 +47,13 @@ export function EntitiesSavedStatesExtensible( {
 	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;
@@ -99,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 ] );
@@ -217,7 +109,14 @@ export function EntitiesSavedStatesExtensible( {
 					variant="primary"
 					disabled={ ! saveEnabled }
 					__experimentalIsFocusable
-					onClick={ saveCheckedEntities }
+					onClick={ () =>
+						saveDirtyEntities( {
+							onSave,
+							dirtyEntityRecords,
+							entitiesToSkip: unselectedEntities,
+							close,
+						} )
+					}
 					className="editor-entities-saved-states__save-button"
 				>
 					{ saveLabel }

package/src/components/index.js

@@ -27,6 +27,9 @@ 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 PluginBlockSettingsMenuItem } from './block-settings-menu/plugin-block-settings-menu-item';
+export { default as PluginPostPublishPanel } from './plugin-post-publish-panel';
+export { default as PluginPrePublishPanel } from './plugin-pre-publish-panel';
 export { default as PostTemplatePanel } from './post-template/panel';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';

package/src/components/inserter-sidebar/index.js

@@ -19,7 +19,10 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-export default function InserterSidebar() {
+export default function InserterSidebar( {
+	closeGeneralSidebar,
+	isRightSidebarOpen,
+} ) {
 	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
 		const { getInsertionPoint } = unlock( select( editorStore ) );
 		const { get } = select( preferencesStore );
@@ -65,6 +68,9 @@ export default function InserterSidebar() {
 						insertionPoint.insertionIndex
 					}
 					__experimentalFilterValue={ insertionPoint.filterValue }
+					__experimentalOnPatternCategorySelection={
+						isRightSidebarOpen ? closeGeneralSidebar : undefined
+					}
 					ref={ libraryRef }
 				/>
 			</div>

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

@@ -135,6 +135,7 @@ export default function ListViewSidebar() {
 						icon={ closeSmall }
 						label={ __( 'Close' ) }
 						onClick={ closeListView }
+						size="small"
 					/>
 					<Tabs.TabList
 						className="editor-list-view-sidebar__tabs-tablist"

package/src/components/list-view-sidebar/style.scss

@@ -16,7 +16,7 @@
 		background: $white;
 		order: 1;
 		align-self: center;
-		margin-right: $grid-unit-10;
+		margin-right: $grid-unit-15;
 	}
 }
 

package/src/components/pattern-overrides-panel/index.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { OverridesPanel } = unlock( patternsPrivateApis );
+
+export default function PatternOverridesPanel() {
+	const supportsPatternOverridesPanel = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType() === 'wp_block',
+		[]
+	);
+
+	if ( ! supportsPatternOverridesPanel ) {
+		return null;
+	}
+
+	return <OverridesPanel />;
+}

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

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { usePluginContext } from '@wordpress/plugins';
+import { createSlotFill, PanelBody } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
+
+/**
+ * Renders provided content to the post-publish panel in the publish flow
+ * (side panel that opens after a user publishes the post).
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {string}                [props.className]                     An optional class name added to the panel.
+ * @param {string}                [props.title]                         Title displayed at the top of the panel.
+ * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened. When no title is provided it is always opened.
+ * @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
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPostPublishPanel } from '@wordpress/edit-post';
+ *
+ * const MyPluginPostPublishPanel = () => (
+ * 	<PluginPostPublishPanel
+ * 		className="my-plugin-post-publish-panel"
+ * 		title={ __( 'My panel title' ) }
+ * 		initialOpen={ true }
+ * 	>
+ *         { __( 'My panel content' ) }
+ * 	</PluginPostPublishPanel>
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginPostPublishPanel = ( {
+	children,
+	className,
+	title,
+	initialOpen = false,
+	icon,
+} ) => {
+	const { icon: pluginIcon } = usePluginContext();
+
+	return (
+		<Fill>
+			<PanelBody
+				className={ className }
+				initialOpen={ initialOpen || ! title }
+				title={ title }
+				icon={ icon ?? pluginIcon }
+			>
+				{ children }
+			</PanelBody>
+		</Fill>
+	);
+};
+
+PluginPostPublishPanel.Slot = Slot;
+
+export default PluginPostPublishPanel;

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PluginPostPublishPanel renders fill properly 1`] = `
+<div>
+  <div
+    class="components-panel__body my-plugin-post-publish-panel is-opened"
+  >
+    <h2
+      class="components-panel__body-title"
+    >
+      <button
+        aria-expanded="true"
+        class="components-button components-panel__body-toggle"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+        >
+          <svg
+            aria-hidden="true"
+            class="components-panel__arrow"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
+            />
+          </svg>
+        </span>
+        My panel title
+      </button>
+    </h2>
+    My panel content
+  </div>
+</div>
+`;

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostPublishPanel from '../';
+
+describe( 'PluginPostPublishPanel', () => {
+	test( 'renders fill properly', () => {
+		const { container } = render(
+			<SlotFillProvider>
+				<PluginPostPublishPanel
+					className="my-plugin-post-publish-panel"
+					title="My panel title"
+					initialOpen
+				>
+					My panel content
+				</PluginPostPublishPanel>
+				<PluginPostPublishPanel.Slot />
+			</SlotFillProvider>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );

package/src/components/plugin-pre-publish-panel/index.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+import { usePluginContext } from '@wordpress/plugins';
+
+const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
+
+/**
+ * Renders provided content to the pre-publish side panel in the publish flow
+ * (side panel that opens when a user first pushes "Publish" from the main editor).
+ *
+ * @param {Object}                props                                 Component props.
+ * @param {string}                [props.className]                     An optional class name added to the panel.
+ * @param {string}                [props.title]                         Title displayed at the top of the panel.
+ * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened.
+ *                                                                      When no title is provided it is always opened.
+ * @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
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPrePublishPanel } from '@wordpress/edit-post';
+ *
+ * const MyPluginPrePublishPanel = () => (
+ * 	<PluginPrePublishPanel
+ * 		className="my-plugin-pre-publish-panel"
+ * 		title={ __( 'My panel title' ) }
+ * 		initialOpen={ true }
+ * 	>
+ * 	    { __( 'My panel content' ) }
+ * 	</PluginPrePublishPanel>
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginPrePublishPanel = ( {
+	children,
+	className,
+	title,
+	initialOpen = false,
+	icon,
+} ) => {
+	const { icon: pluginIcon } = usePluginContext();
+
+	return (
+		<Fill>
+			<PanelBody
+				className={ className }
+				initialOpen={ initialOpen || ! title }
+				title={ title }
+				icon={ icon ?? pluginIcon }
+			>
+				{ children }
+			</PanelBody>
+		</Fill>
+	);
+};
+
+PluginPrePublishPanel.Slot = Slot;
+
+export default PluginPrePublishPanel;

package/src/components/plugin-pre-publish-panel/test/index.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPrePublishPanel from '../';
+
+describe( 'PluginPrePublishPanel', () => {
+	test( 'renders fill properly', () => {
+		render(
+			<SlotFillProvider>
+				<PluginPrePublishPanel
+					className="my-plugin-pre-publish-panel"
+					title="My panel title"
+					initialOpen
+				>
+					My panel content
+				</PluginPrePublishPanel>
+				<PluginPrePublishPanel.Slot />
+			</SlotFillProvider>
+		);
+
+		expect( screen.getByText( 'My panel title' ) ).toBeVisible();
+	} );
+} );