Add provider and settings

WordPress · Nov 11, 2024 · 43629ca · 43629ca
1 parent 64878ea
commit 43629ca
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js
@@ -19,7 +19,11 @@ import {
 } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useResizeObserver } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	BlockEditorProvider,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -28,7 +32,7 @@ import './hooks';
 import { store as editSiteStore } from './store';
 import Layout from './components/layout';
 import { unlock } from './lock-unlock';
-import SidebarNavigationScreenMain from './components/sidebar-navigation-screen-main/index.js';
+import SidebarNavigationScreen from './components/sidebar-navigation-screen/index.js';
 import { StyleBookBody } from './components/style-book';
 import { getExamples } from './components/style-book/examples';
 
@@ -46,7 +50,12 @@ function ClassicStylebookLayout() {
 	const route = {
 		name: 'stylebook',
 		areas: {
-			sidebar: <SidebarNavigationScreenMain />,
+			sidebar: (
+				<SidebarNavigationScreen
+					title={ __( 'Styles' ) }
+					description={ __( 'Overview of styled blocks.' ) }
+				/>
+			),
 			preview: (
 				<StyleBookBody
 					enableResizing={ false }
@@ -104,7 +113,9 @@ export function initializeClassicStylebook( id, settings ) {
 			<GlobalStylesProvider>
 				<UnsavedChangesWarning />
 				<RouterProvider>
-					<ClassicStylebookLayout />
+					<BlockEditorProvider settings={ settings }>
+						<ClassicStylebookLayout />
+					</BlockEditorProvider>
 				</RouterProvider>
 			</GlobalStylesProvider>
 		</StrictMode>

diff --git a/packages/edit-site/src/classic-stylebook.scss b/packages/edit-site/src/classic-stylebook.scss
@@ -13,3 +13,9 @@ body.js #wpbody {
 body {
 	@include wp-admin-reset("#gutenberg-classic-stylebook");
 }
+
+.edit-site-style-book__iframe {
+	display: block;
+	height: 100%;
+	width: 100%;
+}