@wordpress/edit-widgets 2.1.19 → 2.1.22

package/src/blocks/widget-area/edit/inner-blocks.js

@@ -18,7 +18,7 @@ import { useRef } from '@wordpress/element';
  */
 import useIsDraggingWithin from './use-is-dragging-within';
 
-export default function WidgetAreaInnerBlocks() {
+export default function WidgetAreaInnerBlocks( { id } ) {
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'root',
 		'postType'
@@ -40,6 +40,7 @@ export default function WidgetAreaInnerBlocks() {
 
 	return (
 		<div
+			data-widget-area-id={ id }
 			className={ classnames(
 				'wp-block-widget-area__inner-blocks block-editor-inner-blocks editor-styles-wrapper',
 				{

package/src/components/error-boundary/index.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { Warning } from '@wordpress/block-editor';
+import { useCopyToClipboard } from '@wordpress/compose';
+
+function CopyButton( { text, children } ) {
+	const ref = useCopyToClipboard( text );
+	return (
+		<Button variant="secondary" ref={ ref }>
+			{ children }
+		</Button>
+	);
+}
+
+export default class ErrorBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.reboot = this.reboot.bind( this );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	componentDidCatch( error ) {
+		this.setState( { error } );
+	}
+
+	reboot() {
+		this.props.onError();
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		return (
+			<Warning
+				className="edit-widgets-error-boundary"
+				actions={ [
+					<Button
+						key="recovery"
+						onClick={ this.reboot }
+						variant="secondary"
+					>
+						{ __( 'Attempt Recovery' ) }
+					</Button>,
+					<CopyButton key="copy-error" text={ error.stack }>
+						{ __( 'Copy Error' ) }
+					</CopyButton>,
+				] }
+			>
+				{ __( 'The editor has encountered an unexpected error.' ) }
+			</Warning>
+		);
+	}
+}

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

@@ -0,0 +1,7 @@
+.edit-widgets-error-boundary {
+	margin: auto;
+	max-width: 780px;
+	padding: 20px;
+	margin-top: 60px;
+	box-shadow: $shadow-modal;
+}

package/src/components/layout/index.js

@@ -7,24 +7,27 @@ import { PluginArea } from '@wordpress/plugins';
 /**
  * Internal dependencies
  */
+import ErrorBoundary from '../error-boundary';
 import WidgetAreasBlockEditorProvider from '../widget-areas-block-editor-provider';
 import Sidebar from '../sidebar';
 import Interface from './interface';
 import UnsavedChangesWarning from './unsaved-changes-warning';
 import WelcomeGuide from '../welcome-guide';
 
-function Layout( { blockEditorSettings } ) {
+function Layout( { blockEditorSettings, onError } ) {
 	return (
-		<WidgetAreasBlockEditorProvider
-			blockEditorSettings={ blockEditorSettings }
-		>
-			<Interface blockEditorSettings={ blockEditorSettings } />
-			<Sidebar />
-			<Popover.Slot />
-			<PluginArea />
-			<UnsavedChangesWarning />
-			<WelcomeGuide />
-		</WidgetAreasBlockEditorProvider>
+		<ErrorBoundary onError={ onError }>
+			<WidgetAreasBlockEditorProvider
+				blockEditorSettings={ blockEditorSettings }
+			>
+				<Interface blockEditorSettings={ blockEditorSettings } />
+				<Sidebar />
+				<Popover.Slot />
+				<PluginArea />
+				<UnsavedChangesWarning />
+				<WelcomeGuide />
+			</WidgetAreasBlockEditorProvider>
+		</ErrorBoundary>
 	);
 }
 

package/src/components/more-menu/index.js

@@ -92,7 +92,7 @@ export default function MoreMenu() {
 								role="menuitem"
 								icon={ external }
 								href={ __(
-									'https://wordpress.org/support/article/wordpress-editor/'
+									'https://wordpress.org/support/article/block-based-widgets-editor/'
 								) }
 								target="_blank"
 								rel="noopener noreferrer"

package/src/components/sidebar/widget-areas.js

@@ -8,6 +8,7 @@ import { BlockIcon } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
+import { safeHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -47,7 +48,15 @@ export default function WidgetAreas( { selectedWidgetAreaId } ) {
 			<div className="edit-widgets-widget-areas__top-container">
 				<BlockIcon icon={ blockDefault } />
 				<div>
-					<p>{ description }</p>
+					<p
+						// Use `dangerouslySetInnerHTML` to keep backwards
+						// compatibility. Basic markup in the description is an
+						// established feature of WordPress.
+						// @see https://github.com/WordPress/gutenberg/issues/33106
+						dangerouslySetInnerHTML={ {
+							__html: safeHTML( description ),
+						} }
+					/>
 					{ widgetAreas?.length === 0 && (
 						<p>
 							{ __(

package/src/hooks/use-widget-library-insertion-point.js

@@ -7,6 +7,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
+import { store as editWidgetsStore } from '../store';
 import { buildWidgetAreasPostId, KIND, POST_TYPE } from '../store/utils';
 
 const useWidgetLibraryInsertionPoint = () => {
@@ -30,6 +31,16 @@ const useWidgetLibraryInsertionPoint = () => {
 				getBlockIndex,
 			} = select( blockEditorStore );
 
+			const insertionPoint = select(
+				editWidgetsStore
+			).__experimentalGetInsertionPoint();
+
+			// "Browse all" in the quick inserter will set the rootClientId to the current block.
+			// Otherwise, it will just be undefined, and we'll have to handle it differently below.
+			if ( insertionPoint.rootClientId ) {
+				return insertionPoint;
+			}
+
 			const clientId = getBlockSelectionEnd() || firstRootId;
 			const rootClientId = getBlockRootClientId( clientId );
 

package/src/index.js

@@ -6,7 +6,7 @@ import {
 	unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase
 	setFreeformContentHandlerName,
 } from '@wordpress/blocks';
-import { render } from '@wordpress/element';
+import { render, unmountComponentAtNode } from '@wordpress/element';
 import {
 	registerCoreBlocks,
 	__experimentalGetCoreBlocks,
@@ -36,6 +36,23 @@ const disabledBlocks = [
 	...( ! ALLOW_REUSABLE_BLOCKS && [ 'core/block' ] ),
 ];
 
+/**
+ * Reinitializes the editor after the user chooses to reboot the editor after
+ * an unhandled error occurs, replacing previously mounted editor element using
+ * an initial state from prior to the crash.
+ *
+ * @param {Element} target   DOM node in which editor is rendered.
+ * @param {?Object} settings Editor settings object.
+ */
+export function reinitializeEditor( target, settings ) {
+	unmountComponentAtNode( target );
+	const reboot = reinitializeEditor.bind( null, target, settings );
+	render(
+		<Layout blockEditorSettings={ settings } onError={ reboot } />,
+		target
+	);
+}
+
 /**
  * Initializes the block editor in the widgets screen.
  *
@@ -43,6 +60,8 @@ const disabledBlocks = [
  * @param {Object} settings Block editor settings.
  */
 export function initialize( id, settings ) {
+	const target = document.getElementById( id );
+	const reboot = reinitializeEditor.bind( null, target, settings );
 	const coreBlocks = __experimentalGetCoreBlocks().filter( ( block ) => {
 		return ! (
 			disabledBlocks.includes( block.name ) ||
@@ -70,8 +89,8 @@ export function initialize( id, settings ) {
 	// see: https://github.com/WordPress/gutenberg/issues/33097
 	setFreeformContentHandlerName( 'core/html' );
 	render(
-		<Layout blockEditorSettings={ settings } />,
-		document.getElementById( id )
+		<Layout blockEditorSettings={ settings } onError={ reboot } />,
+		target
 	);
 }
 

package/src/store/selectors.js

@@ -218,6 +218,18 @@ export function isInserterOpened( state ) {
 	return !! state.blockInserterPanel;
 }
 
+/**
+ * Get the insertion point for the inserter.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Object} The root client ID and index to insert at.
+ */
+export function __experimentalGetInsertionPoint( state ) {
+	const { rootClientId, insertionIndex } = state.blockInserterPanel;
+	return { rootClientId, insertionIndex };
+}
+
 /**
  * Returns true if a block can be inserted into a widget area.
  *

package/src/style.scss

@@ -1,6 +1,7 @@
 @import "../../interface/src/style.scss";
 
 @import "./blocks/widget-area/editor.scss";
+@import "./components/error-boundary/style.scss";
 @import "./components/header/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/more-menu/style.scss";