Edit Site: Integrate quick inserter. (#23516)

* Edit Site: Integrate quick inserter. * Edit Site: Update unit tests.
WordPress · Jul 7, 2020 · f237978 · f237978
1 parent 0506ca1
commit f237978
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 28 deletions.
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -20,17 +20,20 @@ import {
 import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar';
 
-export default function BlockEditor() {
-	const { settings, templateType, page } = useSelect( ( select ) => {
-		const { getSettings, getTemplateType, getPage } = select(
-			'core/edit-site'
-		);
-		return {
-			settings: getSettings(),
-			templateType: getTemplateType(),
-			page: getPage(),
-		};
-	}, [] );
+export default function BlockEditor( { setIsInserterOpen } ) {
+	const { settings, templateType, page } = useSelect(
+		( select ) => {
+			const { getSettings, getTemplateType, getPage } = select(
+				'core/edit-site'
+			);
+			return {
+				settings: getSettings( setIsInserterOpen ),
+				templateType: getTemplateType(),
+				page: getPage(),
+			};
+		},
+		[ setIsInserterOpen ]
+	);
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		templateType

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -223,7 +223,13 @@ function Editor() {
 											>
 												<Notices />
 												<Popover.Slot name="block-toolbar" />
-												{ template && <BlockEditor /> }
+												{ template && (
+													<BlockEditor
+														setIsInserterOpen={
+															setIsInserterOpen
+														}
+													/>
+												) }
 												<KeyboardShortcuts />
 											</BlockSelectionClearer>
 										}

diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
@@ -47,29 +47,33 @@ export const getCanUserCreateMedia = createRegistrySelector( ( select ) => () =>
 /**
  * Returns the settings, taking into account active features and permissions.
  *
- * @param {Object} state Global application state.
+ * @param {Object}   state             Global application state.
+ * @param {Function} setIsInserterOpen Setter for the open state of the global inserter.
  *
  * @return {Object} Settings.
  */
 export const getSettings = createSelector(
-	( state ) => {
+	( state, setIsInserterOpen ) => {
+		const settings = {
+			...state.settings,
+			focusMode: isFeatureActive( state, 'focusMode' ),
+			hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
+			__experimentalSetIsInserterOpened: setIsInserterOpen,
+		};
+
 		const canUserCreateMedia = getCanUserCreateMedia( state );
 		if ( ! canUserCreateMedia ) {
-			return state.settings;
+			return settings;
 		}
 
-		return {
-			...state.settings,
-			focusMode: isFeatureActive( state, 'focusMode' ),
-			hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
-			mediaUpload( { onError, ...rest } ) {
-				uploadMedia( {
-					wpAllowedMimeTypes: state.settings.allowedMimeTypes,
-					onError: ( { message } ) => onError( message ),
-					...rest,
-				} );
-			},
+		settings.mediaUpload = ( { onError, ...rest } ) => {
+			uploadMedia( {
+				wpAllowedMimeTypes: state.settings.allowedMimeTypes,
+				onError: ( { message } ) => onError( message ),
+				...rest,
+			} );
 		};
+		return settings;
 	},
 	( state ) => [
 		getCanUserCreateMedia( state ),

diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js
@@ -79,7 +79,12 @@ describe( 'selectors', () => {
 			canUser.mockReturnValueOnce( false );
 			canUser.mockReturnValueOnce( false );
 			const state = { settings: {}, preferences: {} };
-			expect( getSettings( state ) ).toBe( state.settings );
+			const setInserterOpened = () => {};
+			expect( getSettings( state, setInserterOpened ) ).toEqual( {
+				focusMode: false,
+				hasFixedToolbar: false,
+				__experimentalSetIsInserterOpened: setInserterOpened,
+			} );
 		} );
 
 		it( 'returns the extended settings when the user can create media', () => {
@@ -92,10 +97,12 @@ describe( 'selectors', () => {
 					},
 				},
 			};
-			expect( getSettings( state ) ).toEqual( {
+			const setInserterOpened = () => {};
+			expect( getSettings( state, setInserterOpened ) ).toEqual( {
 				key: 'value',
 				focusMode: true,
 				hasFixedToolbar: true,
+				__experimentalSetIsInserterOpened: setInserterOpened,
 				mediaUpload: expect.any( Function ),
 			} );
 		} );