Fix issue that breaks the WooCommerce Home Page when Gutenberg 15.5 is active (#37641)
Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com>
This commit is contained in:
parent
4cc6644c8b
commit
50593c5257
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Fix incorrect usage of dispatch, useSelect, and setState calls in homescreen along with settings and onboarding package
|
|
@ -2,15 +2,14 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { createHigherOrderComponent } from '@wordpress/compose';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { createElement, useRef } from '@wordpress/element';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { createElement, useEffect, useRef } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { STORE_NAME } from './constants';
|
||||
import { ProfileItems } from './types';
|
||||
import { OnboardingSelector } from './';
|
||||
|
||||
export const withOnboardingHydration = ( data: {
|
||||
profileItems: ProfileItems;
|
||||
|
@ -21,39 +20,54 @@ export const withOnboardingHydration = ( data: {
|
|||
( OriginalComponent ) => ( props ) => {
|
||||
const onboardingRef = useRef( data );
|
||||
|
||||
useSelect(
|
||||
// @ts-expect-error // @ts-expect-error registry is not defined in the wp.data typings
|
||||
( select: ( s: string ) => OnboardingSelector, registry ) => {
|
||||
if ( ! onboardingRef.current ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { isResolvingGroup, hasFinishedResolutionGroup } = useSelect(
|
||||
( select ) => {
|
||||
const { isResolving, hasFinishedResolution } =
|
||||
select( STORE_NAME );
|
||||
const {
|
||||
startResolution,
|
||||
finishResolution,
|
||||
setProfileItems,
|
||||
} = registry.dispatch( STORE_NAME );
|
||||
|
||||
const { profileItems } = onboardingRef.current;
|
||||
|
||||
if (
|
||||
profileItems &&
|
||||
! hydratedProfileItems &&
|
||||
! isResolving( 'getProfileItems', [] ) &&
|
||||
! hasFinishedResolution( 'getProfileItems', [] )
|
||||
) {
|
||||
startResolution( 'getProfileItems', [] );
|
||||
setProfileItems( profileItems, true );
|
||||
finishResolution( 'getProfileItems', [] );
|
||||
|
||||
hydratedProfileItems = true;
|
||||
}
|
||||
},
|
||||
[]
|
||||
return {
|
||||
isResolvingGroup: isResolving( 'getProfileItems', [] ),
|
||||
hasFinishedResolutionGroup: hasFinishedResolution(
|
||||
'getProfileItems',
|
||||
[]
|
||||
),
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
const { startResolution, finishResolution, setProfileItems } =
|
||||
useDispatch( STORE_NAME );
|
||||
|
||||
useEffect( () => {
|
||||
if ( ! onboardingRef.current ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { profileItems } = onboardingRef.current;
|
||||
if ( ! profileItems ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
profileItems &&
|
||||
! hydratedProfileItems &&
|
||||
// Ensure that profile items have finished resolving to prevent race conditions
|
||||
! isResolvingGroup &&
|
||||
! hasFinishedResolutionGroup
|
||||
) {
|
||||
startResolution( 'getProfileItems', [] );
|
||||
setProfileItems( profileItems, true );
|
||||
finishResolution( 'getProfileItems', [] );
|
||||
|
||||
hydratedProfileItems = true;
|
||||
}
|
||||
}, [
|
||||
finishResolution,
|
||||
setProfileItems,
|
||||
startResolution,
|
||||
isResolvingGroup,
|
||||
hasFinishedResolutionGroup,
|
||||
] );
|
||||
|
||||
return <OriginalComponent { ...props } />;
|
||||
},
|
||||
'withOnboardingHydration'
|
||||
|
|
|
@ -10,7 +10,7 @@ import { SelectFromMap, DispatchFromMap } from '@automattic/data-stores';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { WPDataSelectors } from '../types';
|
||||
import { WPDataSelectors, WPDataActions } from '../types';
|
||||
import { STORE_NAME } from './constants';
|
||||
import * as selectors from './selectors';
|
||||
import * as actions from './actions';
|
||||
|
@ -33,7 +33,7 @@ export const SETTINGS_STORE_NAME = STORE_NAME;
|
|||
declare module '@wordpress/data' {
|
||||
function dispatch(
|
||||
key: typeof STORE_NAME
|
||||
): DispatchFromMap< typeof actions >;
|
||||
): DispatchFromMap< typeof actions > & WPDataActions;
|
||||
function select(
|
||||
key: typeof STORE_NAME
|
||||
): SelectFromMap< typeof selectors > & WPDataSelectors;
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { createHigherOrderComponent } from '@wordpress/compose';
|
||||
import { useSelect, select as wpSelect } from '@wordpress/data';
|
||||
import { createElement, useRef } from '@wordpress/element';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { createElement, useRef, useEffect } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
@ -16,31 +16,46 @@ export const withSettingsHydration = ( group: string, settings: Settings ) =>
|
|||
( OriginalComponent ) => ( props ) => {
|
||||
const settingsRef = useRef( settings );
|
||||
|
||||
// @ts-expect-error registry is not defined in the wp.data typings
|
||||
useSelect( ( select: typeof wpSelect, registry ) => {
|
||||
const {
|
||||
startResolution,
|
||||
finishResolution,
|
||||
updateSettingsForGroup,
|
||||
clearIsDirty,
|
||||
} = useDispatch( STORE_NAME );
|
||||
const { isResolvingGroup, hasFinishedResolutionGroup } = useSelect(
|
||||
( select ) => {
|
||||
const { isResolving, hasFinishedResolution } =
|
||||
select( STORE_NAME );
|
||||
return {
|
||||
isResolvingGroup: isResolving( 'getSettings', [
|
||||
group,
|
||||
] ),
|
||||
hasFinishedResolutionGroup: hasFinishedResolution(
|
||||
'getSettings',
|
||||
[ group ]
|
||||
),
|
||||
};
|
||||
},
|
||||
[]
|
||||
);
|
||||
useEffect( () => {
|
||||
if ( ! settingsRef.current ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { isResolving, hasFinishedResolution } =
|
||||
select( STORE_NAME );
|
||||
const {
|
||||
startResolution,
|
||||
finishResolution,
|
||||
updateSettingsForGroup,
|
||||
clearIsDirty,
|
||||
} = registry.dispatch( STORE_NAME );
|
||||
|
||||
if (
|
||||
! isResolving( 'getSettings', [ group ] ) &&
|
||||
! hasFinishedResolution( 'getSettings', [ group ] )
|
||||
) {
|
||||
if ( ! isResolvingGroup && ! hasFinishedResolutionGroup ) {
|
||||
startResolution( 'getSettings', [ group ] );
|
||||
updateSettingsForGroup( group, settingsRef.current );
|
||||
clearIsDirty( group );
|
||||
finishResolution( 'getSettings', [ group ] );
|
||||
}
|
||||
}, [] );
|
||||
}, [
|
||||
isResolvingGroup,
|
||||
hasFinishedResolutionGroup,
|
||||
finishResolution,
|
||||
updateSettingsForGroup,
|
||||
startResolution,
|
||||
clearIsDirty,
|
||||
] );
|
||||
|
||||
return <OriginalComponent { ...props } />;
|
||||
},
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
*/
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { withSelect } from '@wordpress/data';
|
||||
import { identity } from 'lodash';
|
||||
import {
|
||||
ONBOARDING_STORE_NAME,
|
||||
withOnboardingHydration,
|
||||
|
@ -50,10 +49,8 @@ const withSelectHandler = ( select: WCDataSelector ) => {
|
|||
};
|
||||
|
||||
export default compose(
|
||||
onboardingData.profile
|
||||
? withOnboardingHydration( {
|
||||
profileItems: onboardingData.profile,
|
||||
} )
|
||||
: identity,
|
||||
withOnboardingHydration( {
|
||||
profileItems: onboardingData.profile,
|
||||
} ),
|
||||
withSelect( withSelectHandler )
|
||||
)( Homescreen );
|
||||
|
|
|
@ -7,7 +7,6 @@ import {
|
|||
useCallback,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from '@wordpress/element';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { withDispatch, withSelect } from '@wordpress/data';
|
||||
|
@ -53,7 +52,6 @@ const Tasks = lazy( () =>
|
|||
|
||||
export const Layout = ( {
|
||||
defaultHomescreenLayout,
|
||||
isBatchUpdating,
|
||||
query,
|
||||
taskListComplete,
|
||||
hasTaskList,
|
||||
|
@ -68,7 +66,6 @@ export const Layout = ( {
|
|||
const shouldShowStoreLinks = taskListComplete || isTaskListHidden;
|
||||
const hasTwoColumnContent =
|
||||
shouldShowStoreLinks || window.wcAdminFeatures.analytics;
|
||||
const [ showInbox, setShowInbox ] = useState( true );
|
||||
const isDashboardShown = ! query.task; // ?&task=<x> query param is used to show tasks instead of the homescreen
|
||||
const activeSetupTaskList = useActiveSetupTasklist();
|
||||
|
||||
|
@ -76,10 +73,6 @@ export const Layout = ( {
|
|||
( userPrefs.homepage_layout || defaultHomescreenLayout ) ===
|
||||
'two_columns' && hasTwoColumnContent;
|
||||
|
||||
if ( isBatchUpdating && ! showInbox ) {
|
||||
setShowInbox( true );
|
||||
}
|
||||
|
||||
const isWideViewport = useRef( true );
|
||||
const maybeToggleColumns = useCallback( () => {
|
||||
isWideViewport.current = window.innerWidth >= 782;
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Fix incorrect usage of dispatch, useSelect, and setState calls in homescreen along with settings and onboarding package
|
Loading…
Reference in New Issue