@wordpress/editor 13.30.0 → 13.32.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,10 @@ 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 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';
@@ -64,10 +68,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/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-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/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();
+	} );
+} );