Refactor: move core/edit-post INIT effect to use action-generators …

…and controls (#14740) * move constants into constants file * move init effect into action-generators and controls * add tests for new functionality * update docs build * update changelog * clarify controls/actions that are experimental/unstable This leaves room for future refactors that could eliminate these. * fix reference for version in changelog * move dispatch of initialize action to initializeEditor execution * add js docs for constants * doc change * Add flag for triggering initial invoking of listener props @aduth * eliminate ADJUST_SIDEBAR control and move logic into action * update tests * update docs
WordPress · May 2, 2019 · 920b8f0 · 920b8f0
1 parent 77b8234
commit 920b8f0
Show file tree

Hide file tree

Showing 10 changed files with 335 additions and 78 deletions.
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
@@ -1,9 +1,13 @@
-## V.V.V (Unreleased)
+## Master
 
 ### New Features
 
 - Implement the `addToGallery` option in the `MediaUpload` hook. The option allows users to open the media modal in the `gallery-library`instead of `gallery-edit` state.
 
+### Refactor
+
+- convert `INIT` effect to controls & actions [#14740](https://github.com/WordPress/gutenberg/pull/14740)
+
 
 ## 3.2.0 (2019-03-06)
 

diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
@@ -76,6 +76,7 @@ export function initializeEditor( id, postType, postId, settings, initialEdits )
 		console.warn( "Your browser is using Quirks Mode. \nThis can cause rendering issues such as blocks overlaying meta boxes in the editor. Quirks Mode can be triggered by PHP errors or HTML code appearing before the opening <!DOCTYPE html>. Try checking the raw page source or your site's PHP error log and resolving errors there, removing any HTML before the doctype, or disabling plugins." );
 	}
 
+	dispatch( 'core/edit-post' ).__unstableInitialize();
 	dispatch( 'core/nux' ).triggerGuide( [
 		'core/editor.inserter',
 		'core/editor.settings',

diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
@@ -3,6 +3,13 @@
  */
 import { castArray } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import { __unstableSubscribe } from './controls';
+import { onChangeListener } from './utils';
+import { STORE_KEY, VIEW_AS_LINK_SELECTOR } from './constants';
+
 /**
  * Returns an action object used in signalling that the user opened an editor sidebar.
  *
@@ -232,3 +239,74 @@ export function metaBoxUpdatesSuccess() {
 	};
 }
 
+/**
+ * Returns an action generator used to initialize some subscriptions for the
+ * post editor:
+ *
+ * - subscription for toggling the `edit-post/block` general sidebar when a
+ *   block is selected.
+ * - subscription for hiding/showing the sidebar depending on size of viewport.
+ * - subscription for updating the "View Post" link in the admin bar when
+ *   permalink is updated.
+ */
+export function* __unstableInitialize() {
+	// Select the block settings tab when the selected block changes
+	yield __unstableSubscribe( ( registry ) => onChangeListener(
+		() => !! registry.select( 'core/block-editor' )
+			.getBlockSelectionStart(),
+		( hasBlockSelection ) => {
+			if ( ! registry.select( 'core/edit-post' ).isEditorSidebarOpened() ) {
+				return;
+			}
+			if ( hasBlockSelection ) {
+				registry.dispatch( STORE_KEY )
+					.openGeneralSidebar( 'edit-post/block' );
+			} else {
+				registry.dispatch( STORE_KEY )
+					.openGeneralSidebar( 'edit-post/document' );
+			}
+		}
+	) );
+	// hide/show the sidebar depending on size of viewport.
+	yield __unstableSubscribe( ( registry ) => onChangeListener(
+		() => registry.select( 'core/viewport' )
+			.isViewportMatch( '< medium' ),
+		( () => {
+			let sidebarToReOpenOnExpand = null;
+			return ( isSmall ) => {
+				const { getActiveGeneralSidebarName } = registry.select( STORE_KEY );
+				const {
+					closeGeneralSidebar: closeSidebar,
+					openGeneralSidebar: openSidebar,
+				} = registry.dispatch( STORE_KEY );
+				if ( isSmall ) {
+					sidebarToReOpenOnExpand = getActiveGeneralSidebarName();
+					if ( sidebarToReOpenOnExpand ) {
+						closeSidebar();
+					}
+				} else if (
+					sidebarToReOpenOnExpand &&
+					! getActiveGeneralSidebarName()
+				) {
+					openSidebar( sidebarToReOpenOnExpand );
+				}
+			};
+		} )(),
+		true
+	) );
+	// Update View Post link in the admin bar when permalink is updated.
+	yield __unstableSubscribe( ( registry ) => onChangeListener(
+		() => registry.select( 'core/editor' ).getCurrentPost().link,
+		( newPermalink ) => {
+			if ( ! newPermalink ) {
+				return;
+			}
+			const nodeToUpdate = document.querySelector( VIEW_AS_LINK_SELECTOR );
+			if ( ! nodeToUpdate ) {
+				return;
+			}
+			nodeToUpdate.setAttribute( 'href', newPermalink );
+		}
+	) );
+}
+
diff --git a/packages/edit-post/src/store/constants.js b/packages/edit-post/src/store/constants.js
@@ -0,0 +1,11 @@
+/**
+ * The identifier for the data store.
+ * @type {string}
+ */
+export const STORE_KEY = 'core/edit-post';
+
+/**
+ * CSS selector string for the admin bar view post link anchor tag.
+ * @type {string}
+ */
+export const VIEW_AS_LINK_SELECTOR = '#wp-admin-bar-view a';
diff --git a/packages/edit-post/src/store/controls.js b/packages/edit-post/src/store/controls.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { createRegistryControl } from '@wordpress/data';
+
+/**
+ * Calls a selector using the current state.
+ *
+ * @param {string} storeName    Store name.
+ * @param {string} selectorName Selector name.
+ * @param  {Array} args         Selector arguments.
+ *
+ * @return {Object} control descriptor.
+ */
+export function select( storeName, selectorName, ...args ) {
+	return {
+		type: 'SELECT',
+		storeName,
+		selectorName,
+		args,
+	};
+}
+
+/**
+ * Calls a subscriber using the current state.
+ *
+ * @param {function} listenerCallback  A callback for the subscriber that
+ *                                     receives the registry.
+ * @return {Object} control descriptor.
+ */
+export function __unstableSubscribe( listenerCallback ) {
+	return { type: 'SUBSCRIBE', listenerCallback };
+}
+
+const controls = {
+	SELECT: createRegistryControl(
+		( registry ) => ( { storeName, selectorName, args } ) => {
+			return registry.select( storeName )[ selectorName ]( ...args );
+		}
+	),
+	SUBSCRIBE: createRegistryControl(
+		( registry ) => ( { listenerCallback } ) => {
+			return registry.subscribe( listenerCallback( registry ) );
+		}
+	),
+};
+
+export default controls;
diff --git a/packages/edit-post/src/store/effects.js b/packages/edit-post/src/store/effects.js
@@ -14,20 +14,9 @@ import apiFetch from '@wordpress/api-fetch';
 /**
  * Internal dependencies
  */
-import {
-	metaBoxUpdatesSuccess,
-	requestMetaBoxUpdates,
-	openGeneralSidebar,
-	closeGeneralSidebar,
-} from './actions';
-import {
-	getActiveMetaBoxLocations,
-	getActiveGeneralSidebarName,
-} from './selectors';
+import { metaBoxUpdatesSuccess, requestMetaBoxUpdates } from './actions';
+import { getActiveMetaBoxLocations } from './selectors';
 import { getMetaBoxContainer } from '../utils/meta-boxes';
-import { onChangeListener } from './utils';
-
-const VIEW_AS_LINK_SELECTOR = '#wp-admin-bar-view a';
 
 const effects = {
 	SET_META_BOXES_PER_LOCATIONS( action, store ) {
@@ -126,66 +115,6 @@ 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/block-editor' ).getBlockSelectionStart(),
-			( hasBlockSelection ) => {
-				if ( ! select( 'core/edit-post' ).isEditorSidebarOpened() ) {
-					return;
-				}
-				if ( hasBlockSelection ) {
-					store.dispatch( openGeneralSidebar( 'edit-post/block' ) );
-				} else {
-					store.dispatch( openGeneralSidebar( 'edit-post/document' ) );
-				}
-			} )
-		);
-
-		const isMobileViewPort = () => select( 'core/viewport' ).isViewportMatch( '< medium' );
-		const adjustSidebar = ( () => {
-			// contains the sidebar we close when going to viewport sizes lower than medium.
-			// This allows to reopen it when going again to viewport sizes greater than medium.
-			let sidebarToReOpenOnExpand = null;
-			return ( isSmall ) => {
-				if ( isSmall ) {
-					sidebarToReOpenOnExpand = getActiveGeneralSidebarName( store.getState() );
-					if ( sidebarToReOpenOnExpand ) {
-						store.dispatch( closeGeneralSidebar() );
-					}
-				} else if ( sidebarToReOpenOnExpand && ! getActiveGeneralSidebarName( store.getState() ) ) {
-					store.dispatch( openGeneralSidebar( sidebarToReOpenOnExpand ) );
-				}
-			};
-		} )();
-
-		adjustSidebar( isMobileViewPort() );
-
-		// Collapse sidebar when viewport shrinks.
-		// Reopen sidebar it if viewport expands and it was closed because of a previous shrink.
-		subscribe( onChangeListener( isMobileViewPort, adjustSidebar ) );
-
-		// Update View as link when currentPost link changes
-		const updateViewAsLink = ( newPermalink ) => {
-			if ( ! newPermalink ) {
-				return;
-			}
-
-			const nodeToUpdate = document.querySelector(
-				VIEW_AS_LINK_SELECTOR
-			);
-			if ( ! nodeToUpdate ) {
-				return;
-			}
-			nodeToUpdate.setAttribute( 'href', newPermalink );
-		};
-
-		subscribe( onChangeListener(
-			() => select( 'core/editor' ).getCurrentPost().link,
-			updateViewAsLink
-		) );
-	},
-
 };
 
 export default effects;
diff --git a/packages/edit-post/src/store/index.js b/packages/edit-post/src/store/index.js
@@ -10,15 +10,17 @@ import reducer from './reducer';
 import applyMiddlewares from './middlewares';
 import * as actions from './actions';
 import * as selectors from './selectors';
+import controls from './controls';
+import { STORE_KEY } from './constants';
 
-const store = registerStore( 'core/edit-post', {
+const store = registerStore( STORE_KEY, {
 	reducer,
 	actions,
 	selectors,
+	controls,
 	persist: [ 'preferences' ],
 } );
 
 applyMiddlewares( store );
-store.dispatch( { type: 'INIT' } );
 
 export default store;
diff --git a/packages/edit-post/src/store/index.native.js b/packages/edit-post/src/store/index.native.js
@@ -10,8 +10,9 @@ import reducer from './reducer';
 import applyMiddlewares from './middlewares';
 import * as actions from './actions';
 import * as selectors from './selectors';
+import { STORE_KEY } from './constants';
 
-const store = registerStore( 'core/edit-post', {
+const store = registerStore( STORE_KEY, {
 	reducer,
 	actions,
 	selectors,