From c7bce1db6df6314cf80ffb58b4f8c539a96b5e5b Mon Sep 17 00:00:00 2001
From: Matthew Reishus <mreishus@users.noreply.github.com>
Date: Thu, 17 Sep 2020 10:45:56 -0500
Subject: [PATCH] WIP - Make it work with ComplementaryArea which is the wrong
 abstraction

---
 .wp-env.json                                  |  5 ++-
 package-lock.json                             |  1 +
 packages/block-editor/README.md               |  8 ++++
 packages/block-editor/package.json            |  1 +
 .../src/components/preview-options/index.js   |  7 ++++
 .../plugin-preview-more-menu-item/index.js    | 10 +++++
 .../preview-options/plugin-preview/index.js   | 39 +++++++++++++++++++
 packages/block-editor/src/index.js            |  2 +
 .../edit-post/src/components/layout/index.js  |  6 ++-
 9 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 packages/block-editor/src/components/preview-options/plugin-preview-more-menu-item/index.js
 create mode 100644 packages/block-editor/src/components/preview-options/plugin-preview/index.js

diff --git a/.wp-env.json b/.wp-env.json
index 0f9c8d4670f678..eeab7e8ba4705d 100644
--- a/.wp-env.json
+++ b/.wp-env.json
@@ -1,6 +1,9 @@
 {
 	"core": "WordPress/WordPress",
-	"plugins": [ "." ],
+	"plugins": [
+		".",
+		"/home/matta8c/h20/misc/plugin-3"
+	],
 	"env": {
 		"tests": {
 			"mappings": {
diff --git a/package-lock.json b/package-lock.json
index 2b506b15ae9a09..ee3ddbd5086578 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15546,6 +15546,7 @@
 				"@wordpress/html-entities": "file:packages/html-entities",
 				"@wordpress/i18n": "file:packages/i18n",
 				"@wordpress/icons": "file:packages/icons",
+				"@wordpress/interface": "file:packages/interface",
 				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
 				"@wordpress/keycodes": "file:packages/keycodes",
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 5c6e48105bd337..b35aa2ee6dbe32 100644
--- a/packages/block-editor/README.md
+++ b/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.
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 83b23f07f01a91..f7e4b8e1b32c1b 100644
--- a/packages/block-editor/package.json
+++ b/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",
diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
index 122c85d852d0d2..d1661600742224 100644
--- a/packages/block-editor/src/components/preview-options/index.js
+++ b/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 }
 				</>
 			) }
diff --git a/packages/block-editor/src/components/preview-options/plugin-preview-more-menu-item/index.js b/packages/block-editor/src/components/preview-options/plugin-preview-more-menu-item/index.js
new file mode 100644
index 00000000000000..af8cc4b4a9726e
--- /dev/null
+++ b/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 } />
+	);
+}
diff --git a/packages/block-editor/src/components/preview-options/plugin-preview/index.js b/packages/block-editor/src/components/preview-options/plugin-preview/index.js
new file mode 100644
index 00000000000000..22b12a4dcc6a89
--- /dev/null
+++ b/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 } />;
+}
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index add6f5a5f9910e..5ddc576b0424dd 100644
--- a/packages/block-editor/src/index.js
+++ b/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';
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 7c99697738b4e4..4ffa309533d763 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/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" />