Opens the block inspector automatically when the block is selected (#…

…5882)

edit-post/store/effects.js

@@ -17,9 +17,12 @@ import {
 	metaBoxUpdatesSuccess,
 	setMetaBoxSavedData,
 	requestMetaBoxUpdates,
+	openGeneralSidebar,
+	closeGeneralSidebar,
 } from './actions';
 import { getMetaBoxes } from './selectors';
 import { getMetaBoxContainer } from '../utils/meta-boxes';
+import { onChangeListener } from './utils';
 
 const effects = {
 	INITIALIZE_META_BOX_STATE( action, store ) {
@@ -41,15 +44,11 @@ const effects = {
 		store.dispatch( setMetaBoxSavedData( dataPerLocation ) );
 
 		// Saving metaboxes when saving posts
-		let previousIsSaving = select( 'core/editor' ).isSavingPost();
-		subscribe( () => {
-			const isSavingPost = select( 'core/editor' ).isSavingPost();
-			const shouldTriggerSaving = ! isSavingPost && previousIsSaving;
-			previousIsSaving = isSavingPost;
-			if ( shouldTriggerSaving ) {
+		subscribe( onChangeListener( select( 'core/editor' ).isSavingPost, ( isSavingPost ) => {
+			if ( ! isSavingPost ) {
 				store.dispatch( requestMetaBoxUpdates() );
 			}
-		} );
+		} ) );
 	},
 	REQUEST_META_BOX_UPDATES( action, store ) {
 		const state = store.getState();
@@ -90,6 +89,33 @@ const effects = {
 		const message = action.mode === 'visual' ? __( 'Visual editor selected' ) : __( 'Code editor selected' );
 		speak( message, 'assertive' );
 	},
+	INIT( _, store ) {
+		// Select the block settings tab when the selected block changes
+		subscribe( onChangeListener(
+			() => select( 'core/editor' ).getBlockSelectionStart(),
+			( selectionStart ) => {
+				if ( ! select( 'core/edit-post' ).isEditorSidebarOpened() ) {
+					return;
+				}
+				if ( selectionStart ) {
+					store.dispatch( openGeneralSidebar( 'edit-post/block' ) );
+				} else {
+					store.dispatch( openGeneralSidebar( 'edit-post/document' ) );
+				}
+			} )
+		);
+
+		// Collapse sidebar when viewport shrinks.
+		subscribe( onChangeListener(
+			() => select( 'core/viewport' ).isViewportMatch( '< medium' ),
+			( isSmall ) => {
+				if ( isSmall ) {
+					store.dispatch( closeGeneralSidebar() );
+				}
+			}
+		) );
+	},
+
 };
 
 export default effects;

edit-post/store/index.js

@@ -5,9 +5,6 @@ import {
 	registerStore,
 	withRehydratation,
 	loadAndPersist,
-	subscribe,
-	dispatch,
-	select,
 } from '@wordpress/data';
 
 /**
@@ -31,17 +28,6 @@ const store = registerStore( 'core/edit-post', {
 
 applyMiddlewares( store );
 loadAndPersist( store, reducer, 'preferences', STORAGE_KEY );
-
-let lastIsSmall;
-subscribe( () => {
-	const isSmall = select( 'core/viewport' ).isViewportMatch( '< medium' );
-	const hasViewportShrunk = isSmall && ! lastIsSmall;
-	lastIsSmall = isSmall;
-
-	// Collapse sidebar when viewport shrinks.
-	if ( hasViewportShrunk ) {
-		dispatch( 'core/edit-post' ).closeGeneralSidebar();
-	}
-} );
+store.dispatch( { type: 'INIT' } );
 
 export default store;

edit-post/store/utils.js

@@ -0,0 +1,18 @@
+/**
+ * Given a selector returns a functions that returns the listener only
+ * if the returned value from the selector changes.
+ *
+ * @param  {function} selector Selector.
+ * @param  {function} listener Listener.
+ * @return {function}          Listener creator.
+ */
+export const onChangeListener = ( selector, listener ) => {
+	let previousValue = selector();
+	return () => {
+		const selectedValue = selector();
+		if ( selectedValue !== previousValue ) {
+			previousValue = selectedValue;
+			listener( selectedValue );
+		}
+	};
+};