Edit Site: Refactor business logic into store. (#22844)

* Edit Site: Refactor business logic into store. * URL: Update changelog. * Edit Site: Finish refactor for template overwriting.
WordPress · Jun 3, 2020 · 655475a · 655475a
1 parent 6fd5b93
commit 655475a
Show file tree

Hide file tree

Showing 31 changed files with 1,428 additions and 494 deletions.
diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php
@@ -142,6 +142,7 @@ function gutenberg_edit_site_init( $hook ) {
 	if ( false !== $font_sizes ) {
 		$settings['fontSizes'] = $font_sizes;
 	}
+	$settings['styles'] = gutenberg_get_editor_styles();
 
 	$template_ids      = array();
 	$template_part_ids = array();
@@ -161,17 +162,18 @@ function gutenberg_edit_site_init( $hook ) {
 
 	$current_template_id = $template_ids['front-page'];
 
-	$settings['templateId']      = $current_template_id;
-	$settings['homeTemplateId']  = $current_template_id;
-	$settings['templateType']    = 'wp_template';
-	$settings['templateIds']     = array_values( $template_ids );
-	$settings['templatePartIds'] = array_values( $template_part_ids );
-	$settings['styles']          = gutenberg_get_editor_styles();
+	$settings['editSiteInitialState'] = array();
 
-	$settings['showOnFront'] = get_option( 'show_on_front' );
-	$settings['page']        = array(
+	$settings['editSiteInitialState']['homeTemplateId']  = $current_template_id;
+	$settings['editSiteInitialState']['templateId']      = $current_template_id;
+	$settings['editSiteInitialState']['templateType']    = 'wp_template';
+	$settings['editSiteInitialState']['templateIds']     = array_values( $template_ids );
+	$settings['editSiteInitialState']['templatePartIds'] = array_values( $template_part_ids );
+
+	$settings['editSiteInitialState']['showOnFront'] = get_option( 'show_on_front' );
+	$settings['editSiteInitialState']['page']        = array(
 		'path'    => '/',
-		'context' => 'page' === $settings['showOnFront'] ? array(
+		'context' => 'page' === $settings['editSiteInitialState']['showOnFront'] ? array(
 			'postType' => 'page',
 			'postId'   => get_option( 'page_on_front' ),
 		) : array(),

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/provider/use-block-sync.js b/packages/block-editor/src/components/provider/use-block-sync.js
@@ -106,6 +106,8 @@ export default function useBlockSync( {
 	// have been made. This lets us inform the data source of changes. This
 	// is an effect so that the subscriber can run synchronously without
 	// waiting for React renders for changes.
+	const onInputRef = useRef( onInput );
+	const onChangeRef = useRef( onChange );
 	useEffect( () => {
 		const {
 			getSelectionStart,
@@ -118,7 +120,17 @@ export default function useBlockSync( {
 		let isPersistent = isLastBlockChangePersistent();
 		let previousAreBlocksDifferent = false;
 
+		onInputRef.current = onInput;
+		onChangeRef.current = onChange;
 		const unsubscribe = registry.subscribe( () => {
+			// Sometimes, subscriptions might trigger with stale callbacks
+			// before they are cleaned up. Avoid running them.
+			if (
+				onInputRef.current !== onInput ||
+				onChangeRef.current !== onChange
+			)
+				return;
+
 			// Sometimes, when changing block lists, lingering subscriptions
 			// might trigger before they are cleaned up. If the block for which
 			// the subscription runs is no longer in the store, this would clear

diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js
@@ -181,7 +181,7 @@ function persistencePlugin( registry, pluginOptions ) {
 			// Load from persistence to use as initial state.
 			const persistedState = persistence.get()[ reducerKey ];
 			if ( persistedState !== undefined ) {
-				let initialState = options.reducer( undefined, {
+				let initialState = options.reducer( options.initialState, {
 					type: '@@WP/PERSISTENCE_RESTORE',
 				} );
 

diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
@@ -33,6 +33,7 @@
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
+		"@wordpress/data-controls": "file:../data-controls",
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
@@ -48,7 +49,8 @@
 		"@wordpress/url": "file:../url",
 		"file-saver": "^2.0.2",
 		"jszip": "^3.2.2",
-		"lodash": "^4.17.15"
+		"lodash": "^4.17.15",
+		"rememo": "^3.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useMemo, useCallback } from '@wordpress/element';
-import { uploadMedia } from '@wordpress/media-utils';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	BlockEditorProvider,
@@ -19,62 +18,26 @@ import {
 /**
  * Internal dependencies
  */
-import { useEditorContext } from '../editor';
 import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar';
 
 export default function BlockEditor() {
-	const { settings: _settings, setSettings } = useEditorContext();
-	const { canUserCreateMedia, focusMode, hasFixedToolbar } = useSelect(
-		( select ) => {
-			const { isFeatureActive } = select( 'core/edit-site' );
-			const _canUserCreateMedia = select( 'core' ).canUser(
-				'create',
-				'media'
-			);
-			return {
-				canUserCreateMedia:
-					_canUserCreateMedia || _canUserCreateMedia !== false,
-				focusMode: isFeatureActive( 'focusMode' ),
-				hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
-			};
-		},
-		[]
-	);
-
-	const settings = useMemo( () => {
-		if ( ! canUserCreateMedia ) {
-			return _settings;
-		}
+	const { settings, templateType, page } = useSelect( ( select ) => {
+		const { getSettings, getTemplateType, getPage } = select(
+			'core/edit-site'
+		);
 		return {
-			..._settings,
-			focusMode,
-			hasFixedToolbar,
-			mediaUpload( { onError, ...rest } ) {
-				uploadMedia( {
-					wpAllowedMimeTypes: _settings.allowedMimeTypes,
-					onError: ( { message } ) => onError( message ),
-					...rest,
-				} );
-			},
+			settings: getSettings(),
+			templateType: getTemplateType(),
+			page: getPage(),
 		};
-	}, [ canUserCreateMedia, _settings, focusMode, hasFixedToolbar ] );
-
+	}, [] );
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
-		settings.templateType
-	);
-	const setActivePageAndTemplateId = useCallback(
-		( { page, templateId } ) =>
-			setSettings( ( prevSettings ) => ( {
-				...prevSettings,
-				page,
-				templateId,
-				templateType: 'wp_template',
-			} ) ),
-		[]
+		templateType
 	);
 
+	const { setPage } = useDispatch( 'core/edit-site' );
 	return (
 		<BlockEditorProvider
 			settings={ settings }
@@ -89,13 +52,11 @@ export default function BlockEditor() {
 					( fillProps ) => (
 						<NavigateToLink
 							{ ...fillProps }
-							activePage={ settings.page }
-							onActivePageAndTemplateIdChange={
-								setActivePageAndTemplateId
-							}
+							activePage={ page }
+							onActivePageChange={ setPage }
 						/>
 					),
-					[ settings.page, setActivePageAndTemplateId ]
+					[ page ]
 				) }
 			</__experimentalLinkControl.ViewerFill>
 			<SidebarInspectorFill>