Testing out adding editor/block context around canvas container with …

…style-book loaded

packages/edit-site/src/components/page-styles/index.js

@@ -1,155 +1,54 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import {
-	getBlockTypes,
-	getBlockFromExample,
-	createBlock,
-} from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useResizeObserver } from '@wordpress/compose';
-import { EntityProvider } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
 /**
  * Internal dependencies
  */
 import Page from '../page';
-import { StyleBookBody } from '../style-book';
-import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
-// import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
+import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 import { unlock } from '../../lock-unlock';
-import { useInitEditedEntity } from '../sync-state-with-url/use-init-edited-entity-from-url';
-
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-
-function getExamples() {
-	// Use our own example for the Heading block so that we can show multiple
-	// heading levels.
-	const headingsExample = {
-		name: 'core/heading',
-		title: __( 'Headings' ),
-		category: 'text',
-		blocks: [
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 1,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 2,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 3,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 4,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 5,
-			} ),
-		],
-	};
-
-	const otherExamples = getBlockTypes()
-		.filter( ( blockType ) => {
-			const { name, example, supports } = blockType;
-			return (
-				name !== 'core/heading' &&
-				!! example &&
-				supports.inserter !== false
-			);
-		} )
-		.map( ( blockType ) => ( {
-			name: blockType.name,
-			title: blockType.title,
-			category: blockType.category,
-			blocks: getBlockFromExample( blockType.name, blockType.example ),
-		} ) );
-
-	return [ headingsExample, ...otherExamples ];
-}
+import GlobalStylesUI from '../global-styles/ui';
+import useEditedEntityRecord from '../use-edited-entity-record';
+import EditorCanvasContainer from '../editor-canvas-container';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
 
-function StyleBookPanel() {
-	const history = useHistory();
-	const {
-		params: { path, activeView },
-	} = useLocation();
-	const examples = useMemo( getExamples, [] );
-
-	const originalSettings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings(),
-		[]
-	);
-
-	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
-		[ originalSettings ]
-	);
-
-	// const settings = useSpecificEditorSettings();
-
-	const [ resizeObserver, sizes ] = useResizeObserver();
-
-	return (
-		<>
-			{ resizeObserver }
-
-			<StyleBookBody
-				examples={ examples }
-				onSelect={ ( blockName ) => {
-					// Now go to the selected block.
-					history.push( {
-						path,
-						activeView:
-							'/blocks/' + encodeURIComponent( blockName ),
-					} );
-				} }
-				sizes={ sizes }
-				settings={ settings }
-				isSelected={ ( blockName ) =>
-					// Match '/blocks/core%2Fbutton' and
-					// '/blocks/core%2Fbutton/typography', but not
-					// '/blocks/core%2Fbuttons'.
-					activeView ===
-						`/blocks/${ encodeURIComponent( blockName ) }` ||
-					activeView.startsWith(
-						`/blocks/${ encodeURIComponent( blockName ) }/`
-					)
-				}
-			/>
-		</>
-	);
-}
+const { useLocation } = unlock( routerPrivateApis );
+const { ExperimentalEditorProvider: EditorProvider } =
+	unlock( editorPrivateApis );
 
 export default function PageStyles() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-
+	const { record: editedPost } = useEditedEntityRecord();
+	const editorSettings = useSpecificEditorSettings();
 	// Clear the editor canvas container view when accessing the main navigation screen.
 	useEffect( () => {
-		setEditorCanvasContainerView( undefined );
+		setEditorCanvasContainerView( 'style-book' );
+		return () => {
+			setEditorCanvasContainerView( undefined );
+		};
 	}, [ setEditorCanvasContainerView ] );
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	const {
 		params: { activeView },
 	} = useLocation();
 
-	useInitEditedEntity( {
-		postId: '1298',
-		postType: 'page',
-	} );
-
 	return (
 		<>
-			<EntityProvider kind="root" type="site">
+			<EditorProvider
+				post={ editedPost }
+				__unstableTemplate={ editedPost }
+				settings={ editorSettings }
+				useSubRegistry={ false }
+			>
+				<GlobalStylesRenderer />
 				{ activeView && (
 					<Page small>
 						<GlobalStylesUI
@@ -159,12 +58,17 @@ export default function PageStyles() {
 					</Page>
 				) }
 				<Page>
-					<div className="edit-site-page-pages-preview">
-						<StyleBookPanel />
-						{ /* <Editor /> */ }
-					</div>
+					<EditorCanvasContainer.Slot>
+						{ ( [ editorCanvasView ] ) =>
+							editorCanvasView && (
+								<div className="edit-site-visual-editor is-focus-mode">
+									{ editorCanvasView }
+								</div>
+							)
+						}
+					</EditorCanvasContainer.Slot>
 				</Page>
-			</EntityProvider>
+			</EditorProvider>
 		</>
 	);
 }