Refactor: Add data component for editor initialization to replace __unstableInitialize action. (fixes #15403)

packages/edit-post/CHANGELOG.md

@@ -1,3 +1,9 @@
+## Master
+
+### Refactor
+
+- Create EditorInitializer component and implement for various things to initialize as the editor is loaded. This replaces the `__unstableInitialize` refactor done in #14740. ([#15444](https://github.com/WordPress/gutenberg/pull/15444))
+
 ## 3.4.0 (2019-05-21)
 
 ### New Feature
@@ -8,7 +14,6 @@
 
 - convert `INIT` effect to controls & actions [#14740](https://github.com/WordPress/gutenberg/pull/14740)
 
-
 ## 3.2.0 (2019-03-06)
 
 ### Polish

packages/edit-post/src/components/editor-initialization/index.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useAdjustSidebarListener,
+	useBlockSelectionListener,
+	useUpdatePostLinkListener,
+} from './listener-hooks';
+
+/**
+ * Data component used for initializing the editor and re-initializes
+ * when postId changes or on unmount.
+ *
+ * @param {number} postId  The id of the post.
+ * @return {null} This is a data component so does not render any ui.
+ */
+export default function( { postId } ) {
+	useAdjustSidebarListener( postId );
+	useBlockSelectionListener( postId );
+	useUpdatePostLinkListener( postId );
+	const { triggerGuide } = useDispatch( 'core/nux' );
+	useEffect( () => {
+		triggerGuide( [
+			'core/editor.inserter',
+			'core/editor.settings',
+			'core/editor.preview',
+			'core/editor.publish',
+		] );
+	}, [ triggerGuide ] );
+	return null;
+}

packages/edit-post/src/components/editor-initialization/listener-hooks.js

@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	STORE_KEY,
+	VIEW_AS_LINK_SELECTOR,
+	VIEW_AS_PREVIEW_LINK_SELECTOR,
+} from '../../store/constants';
+
+/**
+ * This listener hook monitors for block selection and triggers the appropriate
+ * sidebar state.
+ *
+ * @param {number} postId  The current post id.
+ */
+export const useBlockSelectionListener = ( postId ) => {
+	const {
+		hasBlockSelection,
+		isEditorSidebarOpened,
+	} = useSelect(
+		( select ) => ( {
+			hasBlockSelection: !! select(
+				'core/block-editor'
+			).getBlockSelectionStart(),
+			isEditorSidebarOpened: select( STORE_KEY ).isEditorSidebarOpened(),
+		} ),
+		[ postId ]
+	);
+
+	const { openGeneralSidebar } = useDispatch( STORE_KEY );
+
+	useEffect( () => {
+		if ( ! isEditorSidebarOpened ) {
+			return;
+		}
+		if ( hasBlockSelection ) {
+			openGeneralSidebar( 'edit-post/block' );
+		} else {
+			openGeneralSidebar( 'edit-post/document' );
+		}
+	}, [ hasBlockSelection, isEditorSidebarOpened ] );
+};
+
+/**
+ * This listener hook is used to monitor viewport size and adjust the sidebar
+ * accordingly.
+ *
+ * @param {number} postId  The current post id.
+ */
+export const useAdjustSidebarListener = ( postId ) => {
+	const { isSmall, sidebarToReOpenOnExpand } = useSelect(
+		( select ) => ( {
+			isSmall: select( 'core/viewport' ).isViewportMatch( '< medium' ),
+			sidebarToReOpenOnExpand: select( STORE_KEY ).getActiveGeneralSidebarName(),
+		} ),
+		[ postId ]
+	);
+
+	const { openGeneralSidebar, closeGeneralSidebar } = useDispatch( STORE_KEY );
+
+	const previousOpenedSidebar = useRef( '' );
+
+	useEffect( () => {
+		if ( isSmall && sidebarToReOpenOnExpand ) {
+			previousOpenedSidebar.current = sidebarToReOpenOnExpand;
+			closeGeneralSidebar();
+		} else if ( ! isSmall && previousOpenedSidebar.current ) {
+			openGeneralSidebar( previousOpenedSidebar.current );
+			previousOpenedSidebar.current = '';
+		}
+	}, [ isSmall, sidebarToReOpenOnExpand ] );
+};
+
+/**
+ * This listener hook monitors any change in permalink and updates the view
+ * post link in the admin bar.
+ *
+ * @param {number} postId
+ */
+export const useUpdatePostLinkListener = ( postId ) => {
+	const { newPermalink } = useSelect(
+		( select ) => ( {
+			newPermalink: select( 'core/editor' ).getCurrentPost().link,
+		} ),
+		[ postId ]
+	);
+	const nodeToUpdate = useRef();
+
+	useEffect( () => {
+		nodeToUpdate.current = document.querySelector( VIEW_AS_PREVIEW_LINK_SELECTOR ) ||
+			document.querySelector( VIEW_AS_LINK_SELECTOR );
+	}, [ postId ] );
+
+	useEffect( () => {
+		if ( ! newPermalink || ! nodeToUpdate.current ) {
+			return;
+		}
+		nodeToUpdate.current.setAttribute( 'href', newPermalink );
+	}, [ newPermalink ] );
+};