WIP - Make it work with ComplementaryArea which is the wrong abstraction

.wp-env.json

@@ -1,6 +1,9 @@
 {
 	"core": "WordPress/WordPress",
-	"plugins": [ "." ],
+	"plugins": [
+		".",
+		"/home/matta8c/h20/misc/plugin-3"
+	],
 	"env": {
 		"tests": {
 			"mappings": {

packages/block-editor/README.md

@@ -447,6 +447,14 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/plain-text/README.md>
 
+<a name="PluginPreview" href="#PluginPreview">#</a> **PluginPreview**
+
+Undocumented declaration.
+
+<a name="PluginPreviewMoreMenuItem" href="#PluginPreviewMoreMenuItem">#</a> **PluginPreviewMoreMenuItem**
+
+Undocumented declaration.
+
 <a name="PreserveScrollInReorder" href="#PreserveScrollInReorder">#</a> **PreserveScrollInReorder**
 
 Undocumented declaration.

packages/block-editor/package.json

@@ -41,6 +41,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/interface": "file:../interface",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",

packages/block-editor/src/components/preview-options/index.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { useViewportMatch } from '@wordpress/compose';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { ActionItem } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
 
@@ -67,6 +68,12 @@ export default function PreviewOptions( {
 							{ __( 'Mobile' ) }
 						</MenuItem>
 					</MenuGroup>
+					<ActionItem.Slot
+						name="core/block-editor/plugin-more-menu"
+						label={ __( 'Plugins' ) }
+						as={ [ MenuGroup, MenuItem ] }
+					/>
+					{ /* fillProps={ { onClick: onClose } } */ }
 					{ children }
 				</>
 			) }

packages/block-editor/src/components/preview-options/plugin-preview-more-menu-item/index.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
+
+export default function PluginPreviewMoreMenuItem( props ) {
+	return (
+		<ComplementaryAreaMoreMenuItem scope="core/block-editor" { ...props } />
+	);
+}

packages/block-editor/src/components/preview-options/plugin-preview/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { ComplementaryArea } from '@wordpress/interface';
+//import { useSelect } from '@wordpress/data';
+//import { __ } from '@wordpress/i18n';
+
+/*
+export default function PluginSidebarEditPost( { className, ...props } ) {
+	const { postTitle, shortcut, showIconLabels } = useSelect( ( select ) => {
+		return {
+			postTitle: select( 'core/editor' ).getEditedPostAttribute(
+				'title'
+			),
+			shortcut: select(
+				'core/keyboard-shortcuts'
+			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
+			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
+				'showIconLabels'
+			),
+		};
+	} );
+	return (
+		<ComplementaryArea
+			panelClassName={ className }
+			className="edit-post-sidebar"
+			smallScreenTitle={ postTitle || __( '(no title)' ) }
+			scope="core/edit-post"
+			toggleShortcut={ shortcut }
+			showIconLabels={ showIconLabels }
+			{ ...props }
+		/>
+	);
+}
+*/
+
+export default function PluginPreview( props ) {
+	return <ComplementaryArea scope="core/block-editor" { ...props } />;
+}

packages/block-editor/src/index.js

@@ -16,3 +16,5 @@ export * from './components';
 export * from './utils';
 export { storeConfig } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';
+export { default as PluginPreviewMoreMenuItem } from './components/preview-options/plugin-preview-more-menu-item';
+export { default as PluginPreview } from './components/preview-options/plugin-preview';

packages/edit-post/src/components/layout/index.js

@@ -246,7 +246,11 @@ function Layout() {
 								<TextEditor />
 							) }
 							{ isRichEditingEnabled && mode === 'visual' && (
-								<VisualEditor />
+								<div>
+									<div>Hello4 :)</div>
+									<ComplementaryArea.Slot scope="core/block-editor" />
+									<VisualEditor />
+								</div>
 							) }
 							<div className="edit-post-layout__metaboxes">
 								<MetaBoxes location="normal" />