@wordpress/edit-post 5.0.27 → 6.0.1-next.f435e9e01b.0

package/build-module/index.native.js

@@ -5,14 +5,12 @@ import { createElement } from "@wordpress/element";
  */
 import '@wordpress/core-data';
 import '@wordpress/format-library';
-import { render } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 
 export { store } from './store';
 import Editor from './editor';
-let editorInitialized = false;
 /**
  * Initializes the Editor and returns a componentProvider
  * that can be registered with `AppRegistry.registerComponent`
@@ -23,14 +21,9 @@ let editorInitialized = false;
  */
 
 export function initializeEditor(id, postType, postId) {
-  if (editorInitialized) {
-    return;
-  }
-
-  editorInitialized = true;
-  render(createElement(Editor, {
+  return createElement(Editor, {
     postId: postId,
     postType: postType
-  }), id);
+  });
 }
 //# sourceMappingURL=index.native.js.map

package/build-module/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-post/src/index.native.js"],"names":["render","store","Editor","editorInitialized","initializeEditor","id","postType","postId"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,sBAAP;AACA,OAAO,2BAAP;AACA,SAASA,MAAT,QAAuB,oBAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,IAAIC,iBAAiB,GAAG,KAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,gBAAT,CAA2BC,EAA3B,EAA+BC,QAA/B,EAAyCC,MAAzC,EAAkD;AACxD,MAAKJ,iBAAL,EAAyB;AACxB;AACA;;AAEDA,EAAAA,iBAAiB,GAAG,IAApB;AAEAH,EAAAA,MAAM,CAAE,cAAC,MAAD;AAAQ,IAAA,MAAM,EAAGO,MAAjB;AAA0B,IAAA,QAAQ,EAAGD;AAArC,IAAF,EAAsDD,EAAtD,CAAN;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport '@wordpress/core-data';\nimport '@wordpress/format-library';\nimport { render } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nexport { store } from './store';\nimport Editor from './editor';\n\nlet editorInitialized = false;\n\n/**\n * Initializes the Editor and returns a componentProvider\n * that can be registered with `AppRegistry.registerComponent`\n *\n * @param {string} id       Unique identifier for editor instance.\n * @param {Object} postType Post type of the post to edit.\n * @param {Object} postId   ID of the post to edit (unused right now)\n */\nexport function initializeEditor( id, postType, postId ) {\n\tif ( editorInitialized ) {\n\t\treturn;\n\t}\n\n\teditorInitialized = true;\n\n\trender( <Editor postId={ postId } postType={ postType } />, id );\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-post/src/index.native.js"],"names":["store","Editor","initializeEditor","id","postType","postId"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,sBAAP;AACA,OAAO,2BAAP;AAEA;AACA;AACA;;AACA,SAASA,KAAT,QAAsB,SAAtB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,gBAAT,CAA2BC,EAA3B,EAA+BC,QAA/B,EAAyCC,MAAzC,EAAkD;AACxD,SAAO,cAAC,MAAD;AAAQ,IAAA,MAAM,EAAGA,MAAjB;AAA0B,IAAA,QAAQ,EAAGD;AAArC,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport '@wordpress/core-data';\nimport '@wordpress/format-library';\n\n/**\n * Internal dependencies\n */\nexport { store } from './store';\nimport Editor from './editor';\n\n/**\n * Initializes the Editor and returns a componentProvider\n * that can be registered with `AppRegistry.registerComponent`\n *\n * @param {string} id       Unique identifier for editor instance.\n * @param {Object} postType Post type of the post to edit.\n * @param {Object} postId   ID of the post to edit (unused right now)\n */\nexport function initializeEditor( id, postType, postId ) {\n\treturn <Editor postId={ postId } postType={ postType } />;\n}\n"]}

package/build-style/style-rtl.css

@@ -925,7 +925,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 1080px) {
   .edit-post-template-top-area .edit-post-template-post-title {
-    max-width: none;
+    max-width: 400px;
   }
 }
 
@@ -1415,11 +1415,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   display: flex;
   justify-content: flex-end;
 }
-@media (min-width: 782px) {
-  .edit-post-editor__inserter-panel-header {
-    display: none;
-  }
-}
 
 .edit-post-editor__inserter-panel-content,
 .edit-post-editor__list-view-panel-content {
@@ -1650,6 +1645,13 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   }
 }
 
+.edit-post-template__notice {
+  margin: 0 0 8px 0;
+}
+.edit-post-template__notice .components-notice__content {
+  margin: 0;
+}
+
 .edit-post-template__actions button:not(:last-child) {
   margin-left: 8px;
 }
@@ -1768,41 +1770,52 @@ h2.edit-post-template-summary__title {
   width: 100%;
   height: 100%;
   position: relative;
+  box-sizing: border-box;
   display: flex;
   flex-grow: 1;
 }
 
-.edit-post-welcome-guide {
+.edit-post-welcome-guide,
+.edit-template-welcome-guide {
   width: 312px;
 }
-.edit-post-welcome-guide__image {
+.edit-post-welcome-guide__image,
+.edit-template-welcome-guide__image {
   background: #00a0d2;
   margin: 0 0 16px;
 }
-.edit-post-welcome-guide__image > img {
+.edit-post-welcome-guide__image > img,
+.edit-template-welcome-guide__image > img {
   display: block;
   max-width: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
-.edit-post-welcome-guide__heading {
+.edit-post-welcome-guide__heading,
+.edit-template-welcome-guide__heading {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 24px;
   line-height: 1.4;
   margin: 16px 0 16px 0;
   padding: 0 32px;
 }
-.edit-post-welcome-guide__text {
+.edit-post-welcome-guide__text,
+.edit-template-welcome-guide__text {
   font-size: 13px;
   line-height: 1.4;
   margin: 0 0 24px 0;
   padding: 0 32px;
 }
-.edit-post-welcome-guide__inserter-icon {
+.edit-post-welcome-guide__inserter-icon,
+.edit-template-welcome-guide__inserter-icon {
   margin: 0 4px;
   vertical-align: text-top;
 }
 
+.edit-template-welcome-guide .components-button svg {
+  fill: #fff;
+}
+
 /**
  * Animations
  */
@@ -1858,7 +1871,6 @@ body.block-editor-page .media-frame select.attachment-filters:last-of-type {
 }
 
 .edit-post-header,
-.edit-post-visual-editor,
 .edit-post-text-editor,
 .edit-post-sidebar,
 .editor-post-publish-panel,
@@ -1870,9 +1882,6 @@ body.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .edit-post-header *,
 .edit-post-header *::before,
 .edit-post-header *::after,
-.edit-post-visual-editor *,
-.edit-post-visual-editor *::before,
-.edit-post-visual-editor *::after,
 .edit-post-text-editor *,
 .edit-post-text-editor *::before,
 .edit-post-text-editor *::after,

package/build-style/style.css

@@ -925,7 +925,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 1080px) {
   .edit-post-template-top-area .edit-post-template-post-title {
-    max-width: none;
+    max-width: 400px;
   }
 }
 
@@ -1415,11 +1415,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   display: flex;
   justify-content: flex-end;
 }
-@media (min-width: 782px) {
-  .edit-post-editor__inserter-panel-header {
-    display: none;
-  }
-}
 
 .edit-post-editor__inserter-panel-content,
 .edit-post-editor__list-view-panel-content {
@@ -1654,6 +1649,13 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   }
 }
 
+.edit-post-template__notice {
+  margin: 0 0 8px 0;
+}
+.edit-post-template__notice .components-notice__content {
+  margin: 0;
+}
+
 .edit-post-template__actions button:not(:last-child) {
   margin-right: 8px;
 }
@@ -1772,41 +1774,52 @@ h2.edit-post-template-summary__title {
   width: 100%;
   height: 100%;
   position: relative;
+  box-sizing: border-box;
   display: flex;
   flex-grow: 1;
 }
 
-.edit-post-welcome-guide {
+.edit-post-welcome-guide,
+.edit-template-welcome-guide {
   width: 312px;
 }
-.edit-post-welcome-guide__image {
+.edit-post-welcome-guide__image,
+.edit-template-welcome-guide__image {
   background: #00a0d2;
   margin: 0 0 16px;
 }
-.edit-post-welcome-guide__image > img {
+.edit-post-welcome-guide__image > img,
+.edit-template-welcome-guide__image > img {
   display: block;
   max-width: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
-.edit-post-welcome-guide__heading {
+.edit-post-welcome-guide__heading,
+.edit-template-welcome-guide__heading {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 24px;
   line-height: 1.4;
   margin: 16px 0 16px 0;
   padding: 0 32px;
 }
-.edit-post-welcome-guide__text {
+.edit-post-welcome-guide__text,
+.edit-template-welcome-guide__text {
   font-size: 13px;
   line-height: 1.4;
   margin: 0 0 24px 0;
   padding: 0 32px;
 }
-.edit-post-welcome-guide__inserter-icon {
+.edit-post-welcome-guide__inserter-icon,
+.edit-template-welcome-guide__inserter-icon {
   margin: 0 4px;
   vertical-align: text-top;
 }
 
+.edit-template-welcome-guide .components-button svg {
+  fill: #fff;
+}
+
 /**
  * Animations
  */
@@ -1862,7 +1875,6 @@ body.block-editor-page .media-frame select.attachment-filters:last-of-type {
 }
 
 .edit-post-header,
-.edit-post-visual-editor,
 .edit-post-text-editor,
 .edit-post-sidebar,
 .editor-post-publish-panel,
@@ -1874,9 +1886,6 @@ body.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .edit-post-header *,
 .edit-post-header *::before,
 .edit-post-header *::after,
-.edit-post-visual-editor *,
-.edit-post-visual-editor *::before,
-.edit-post-visual-editor *::after,
 .edit-post-text-editor *,
 .edit-post-text-editor *::before,
 .edit-post-text-editor *::after,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "5.0.27",
+	"version": "6.0.1-next.f435e9e01b.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,39 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/block-editor": "^8.0.17",
-		"@wordpress/block-library": "^6.0.26",
-		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.3",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/core-data": "^4.0.10",
-		"@wordpress/data": "^6.1.5",
-		"@wordpress/data-controls": "^2.2.8",
-		"@wordpress/editor": "^12.0.21",
-		"@wordpress/element": "^4.0.4",
-		"@wordpress/hooks": "^3.2.2",
-		"@wordpress/i18n": "^4.2.4",
-		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.18",
-		"@wordpress/keyboard-shortcuts": "^3.0.7",
-		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/media-utils": "^3.0.5",
-		"@wordpress/notices": "^3.2.8",
-		"@wordpress/plugins": "^4.0.7",
-		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/url": "^3.3.1",
-		"@wordpress/viewport": "^4.0.7",
-		"@wordpress/warning": "^2.2.2",
+		"@wordpress/a11y": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/block-editor": "^8.1.2-next.f435e9e01b.0",
+		"@wordpress/block-library": "^7.0.1-next.f435e9e01b.0",
+		"@wordpress/blocks": "^11.2.1-next.f435e9e01b.0",
+		"@wordpress/components": "^19.4.1-next.f435e9e01b.0",
+		"@wordpress/compose": "^5.1.1-next.f435e9e01b.0",
+		"@wordpress/core-data": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/data": "^6.2.2-next.f435e9e01b.0",
+		"@wordpress/data-controls": "^2.3.1-next.f435e9e01b.0",
+		"@wordpress/editor": "^12.2.1-next.f435e9e01b.0",
+		"@wordpress/element": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/hooks": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/i18n": "^4.3.1-next.f435e9e01b.0",
+		"@wordpress/icons": "^6.3.1-next.f435e9e01b.0",
+		"@wordpress/interface": "^4.2.2-next.f435e9e01b.0",
+		"@wordpress/keyboard-shortcuts": "^3.1.2-next.f435e9e01b.0",
+		"@wordpress/keycodes": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/media-utils": "^3.1.1-next.f435e9e01b.0",
+		"@wordpress/notices": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/plugins": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/url": "^3.4.1-next.f435e9e01b.0",
+		"@wordpress/viewport": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/warning": "^2.3.1-next.f435e9e01b.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
-		"rememo": "^3.0.0",
-		"uuid": "8.3.0"
+		"rememo": "^3.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1246a52b9fdfecf592a9fa1d33a2804a6cc2d257"
+	"gitHead": "14b2846015dfb1b440ce93accdd03842ebe5f1cd"
 }

package/src/components/block-manager/category.js

@@ -6,36 +6,59 @@ import { includes, map, without } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo } from '@wordpress/element';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, withInstanceId } from '@wordpress/compose';
+import { useMemo, useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 import { CheckboxControl } from '@wordpress/components';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import BlockTypesChecklist from './checklist';
-import EditPostSettings from '../edit-post-settings';
 import { store as editPostStore } from '../../store';
 
-function BlockManagerCategory( {
-	instanceId,
-	title,
-	blockTypes,
-	hiddenBlockTypes,
-	toggleVisible,
-	toggleAllVisible,
-} ) {
-	const settings = useContext( EditPostSettings );
-	const { allowedBlockTypes } = settings;
+function BlockManagerCategory( { title, blockTypes } ) {
+	const instanceId = useInstanceId( BlockManagerCategory );
+	const { defaultAllowedBlockTypes, hiddenBlockTypes } = useSelect(
+		( select ) => {
+			const { getEditorSettings } = select( editorStore );
+			const { getPreference } = select( editPostStore );
+			return {
+				defaultAllowedBlockTypes: getEditorSettings()
+					.defaultAllowedBlockTypes,
+				hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
+			};
+		},
+		[]
+	);
 	const filteredBlockTypes = useMemo( () => {
-		if ( allowedBlockTypes === true ) {
+		if ( defaultAllowedBlockTypes === true ) {
 			return blockTypes;
 		}
 		return blockTypes.filter( ( { name } ) => {
-			return includes( allowedBlockTypes || [], name );
+			return includes( defaultAllowedBlockTypes || [], name );
 		} );
-	}, [ allowedBlockTypes, blockTypes ] );
+	}, [ defaultAllowedBlockTypes, blockTypes ] );
+	const { showBlockTypes, hideBlockTypes } = useDispatch( editPostStore );
+	const toggleVisible = useCallback( ( blockName, nextIsChecked ) => {
+		if ( nextIsChecked ) {
+			showBlockTypes( blockName );
+		} else {
+			hideBlockTypes( blockName );
+		}
+	}, [] );
+	const toggleAllVisible = useCallback(
+		( nextIsChecked ) => {
+			const blockNames = map( blockTypes, 'name' );
+			if ( nextIsChecked ) {
+				showBlockTypes( blockNames );
+			} else {
+				hideBlockTypes( blockNames );
+			}
+		},
+		[ blockTypes ]
+	);
 
 	if ( ! filteredBlockTypes.length ) {
 		return null;
@@ -81,34 +104,4 @@ function BlockManagerCategory( {
 	);
 }
 
-export default compose( [
-	withInstanceId,
-	withSelect( ( select ) => {
-		const { getPreference } = select( editPostStore );
-
-		return {
-			hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => {
-		const { showBlockTypes, hideBlockTypes } = dispatch( editPostStore );
-
-		return {
-			toggleVisible( blockName, nextIsChecked ) {
-				if ( nextIsChecked ) {
-					showBlockTypes( blockName );
-				} else {
-					hideBlockTypes( blockName );
-				}
-			},
-			toggleAllVisible( nextIsChecked ) {
-				const blockNames = map( ownProps.blockTypes, 'name' );
-				if ( nextIsChecked ) {
-					showBlockTypes( blockNames );
-				} else {
-					hideBlockTypes( blockNames );
-				}
-			},
-		};
-	} ),
-] )( BlockManagerCategory );
+export default BlockManagerCategory;

package/src/components/block-manager/index.js

@@ -10,7 +10,9 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { withSelect } from '@wordpress/data';
 import { SearchControl } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -25,6 +27,7 @@ function BlockManager( {
 	isMatchingSearchTerm,
 	numberOfHiddenBlocks,
 } ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ search, setSearch ] = useState( '' );
 
 	// Filtering occurs here (as opposed to `withSelect`) to avoid
@@ -38,6 +41,20 @@ function BlockManager( {
 				includes( blockType.parent, 'core/post-content' ) )
 	);
 
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! search ) {
+			return;
+		}
+		const count = blockTypes.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ blockTypes.length, search, debouncedSpeak ] );
+
 	return (
 		<div className="edit-post-block-manager__content">
 			{ !! numberOfHiddenBlocks && (

package/src/components/header/index.native.js

@@ -27,13 +27,19 @@ export default class Header extends Component {
 	}
 
 	componentDidMount() {
-		Keyboard.addListener( 'keyboardDidShow', this.keyboardDidShow );
-		Keyboard.addListener( 'keyboardDidHide', this.keyboardDidHide );
+		this.keyboardShowSubscription = Keyboard.addListener(
+			'keyboardDidShow',
+			this.keyboardDidShow
+		);
+		this.keyboardHideSubscription = Keyboard.addListener(
+			'keyboardDidHide',
+			this.keyboardDidHide
+		);
 	}
 
 	componentWillUnmount() {
-		Keyboard.removeListener( 'keyboardDidShow', this.keyboardDidShow );
-		Keyboard.removeListener( 'keyboardDidHide', this.keyboardDidHide );
+		this.keyboardShowSubscription.remove();
+		this.keyboardHideSubscription.remove();
 	}
 
 	keyboardDidShow() {

package/src/components/header/plugin-more-menu-item/index.js

@@ -13,7 +13,7 @@ import { withPluginContext } from '@wordpress/plugins';
  * @param {string}                [props.href]                          When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
  * @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 to the left of the menu item label.
  * @param {Function}              [props.onClick=noop]                  The callback function to be executed when the user clicks the menu item.
- * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying [MenuItem](/packages/components/src/menu-item/README.md) component.
+ * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying [MenuItem](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components/src/menu-item/README.md) component.
  *
  * @example
  * ```js

package/src/components/header/template-title/style.scss

@@ -41,7 +41,7 @@
 		}
 
 		@include break-xlarge() {
-			max-width: none;
+			max-width: 400px;
 		}
 	}
 }

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is active 1`] = `
-<Modal
+<ForwardRef(Modal)
   className="edit-post-keyboard-shortcut-help-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -80,7 +80,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
     }
     title="Text formatting"
   />
-</Modal>
+</ForwardRef(Modal)>
 `;
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is not active 1`] = `""`;

package/src/components/layout/index.js

@@ -16,11 +16,11 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockBreadcrumb } from '@wordpress/block-editor';
+import { BlockBreadcrumb, BlockStyles } from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import {
 	ComplementaryArea,
 	FullscreenMode,
@@ -29,6 +29,7 @@ import {
 } from '@wordpress/interface';
 import { useState, useEffect, useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -70,6 +71,7 @@ function Layout( { styles } ) {
 		closeGeneralSidebar,
 		setIsInserterOpened,
 	} = useDispatch( editPostStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		mode,
 		isFullscreenActive,
@@ -178,6 +180,18 @@ function Layout( { styles } ) {
 		return null;
 	};
 
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
 	return (
 		<>
 			<FullscreenMode isActive={ isFullscreenActive } />
@@ -239,6 +253,7 @@ function Layout( { styles } ) {
 						{ isMobileViewport && sidebarIsOpened && (
 							<ScrollLock />
 						) }
+						<BlockStyles.Slot scope="core/block-inspector" />
 					</>
 				}
 				footer={
@@ -272,7 +287,7 @@ function Layout( { styles } ) {
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
 			<Popover.Slot />
-			<PluginArea />
+			<PluginArea onError={ onPluginAreaError } />
 		</>
 	);
 }

package/src/components/layout/index.native.js

@@ -53,17 +53,14 @@ class Layout extends Component {
 
 	componentDidMount() {
 		this._isMounted = true;
-		SafeArea.addEventListener(
+		this.safeAreaSubscription = SafeArea.addEventListener(
 			'safeAreaInsetsForRootViewDidChange',
 			this.onSafeAreaInsetsUpdate
 		);
 	}
 
 	componentWillUnmount() {
-		SafeArea.removeEventListener(
-			'safeAreaInsetsForRootViewDidChange',
-			this.onSafeAreaInsetsUpdate
-		);
+		this.safeAreaSubscription?.remove();
 		this._isMounted = false;
 	}