PoC bugfix for broken setup CTA layouts

assets/js/components/FeatureToursDesktop.js

@@ -19,7 +19,8 @@
 /**
  * External dependencies
  */
-import { useWindowWidth } from '@react-hook/window-size/throttled';
+// import { useWindowWidth } from '@react-hook/window-size/throttled';
+import { useWindowWidth } from '../hooks/useWindowWidth';
 
 /**
  * Internal dependencies

assets/js/components/KeyMetrics/KeyMetricsCTAContent.js

@@ -22,7 +22,8 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useIntersection } from 'react-use';
-import { useWindowWidth } from '@react-hook/window-size/throttled';
+// import { useWindowWidth } from '@react-hook/window-size/throttled';
+import { useWindowWidth } from '../../hooks/useWindowWidth';
 
 /**
  * WordPress dependencies
@@ -79,6 +80,17 @@ export default function KeyMetricsCTAContent( {
 		isSmallDesktopBreakpoint = onlyWidth >= 800 && onlyWidth < 1280;
 	}
 
+	// eslint-disable-next-line no-console
+	console.log( {
+		breakpoint,
+		onlyWidth,
+		ga4Connected,
+		isMobileBreakpoint,
+		isTabletBreakpoint,
+		isSmallDesktopBreakpoint,
+		isDesktopBreakpoint,
+	} );
+
 	const intersectionEntry = useIntersection( trackingRef, {
 		threshold: 0.25,
 	} );

assets/js/components/notifications/BannerNotification/index.js

@@ -22,7 +22,8 @@
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useMount, useMountedState, useIntersection } from 'react-use';
-import { useWindowWidth } from '@react-hook/window-size/throttled';
+// import { useWindowWidth } from '@react-hook/window-size/throttled';
+import { useWindowWidth } from '../../../hooks/useWindowWidth';
 
 /*
  * WordPress dependencies

assets/js/googlesitekit/widgets/components/WidgetAreaHeader.js

@@ -20,7 +20,8 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import { useWindowWidth } from '@react-hook/window-size/throttled';
+// import { useWindowWidth } from '@react-hook/window-size/throttled';
+import { useWindowWidth } from '../../../hooks/useWindowWidth';
 
 /**
  * WordPress dependencies

assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js

@@ -21,7 +21,8 @@
  */
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useWindowWidth } from '@react-hook/window-size/throttled';
+// import { useWindowWidth } from '@react-hook/window-size/throttled';
+import { useWindowWidth } from '../../../hooks/useWindowWidth';
 
 /**
  * WordPress dependencies

assets/js/hooks/useBreakpoint.js

@@ -19,7 +19,8 @@
 /**
  * External dependencies
  */
-import { useWindowWidth } from '@react-hook/window-size/throttled';
+// import { useWindowWidth } from '@react-hook/window-size/throttled';
+import { useWindowWidth } from './useWindowWidth';
 
 export const BREAKPOINT_XLARGE = 'xlarge';
 export const BREAKPOINT_DESKTOP = 'desktop';

assets/js/hooks/useWindowWidth.js

@@ -0,0 +1,37 @@
+// Copied from https://github.com/jaredLunde/react-hook/blob/b8ac9515e26937e838a36a27001dc46c7f46a390/packages/window-size/throttled/src/index.tsx
+// Modified to use global.innerWidth and global.innerHeight instead of document.documentElement.clientWidth and document.documentElement.clientHeight.
+
+import { useThrottle } from '@react-hook/throttle';
+import useEvent from '@react-hook/event';
+
+const emptyObj = {};
+
+const win = typeof global === 'undefined' ? null : global;
+const getSize = () => [
+	// document.documentElement.clientWidth,
+	// document.documentElement.clientHeight,
+	global.innerWidth,
+	global.innerHeight,
+];
+
+export const useWindowSize = ( options = emptyObj ) => {
+	const { fps, leading, initialWidth = 0, initialHeight = 0 } = options;
+	const [ size, setThrottledSize ] = useThrottle(
+		/* istanbul ignore next */
+		typeof document === 'undefined'
+			? [ initialWidth, initialHeight ]
+			: getSize,
+		fps,
+		leading
+	);
+	const setSize = () => setThrottledSize( getSize );
+
+	useEvent( win, 'resize', setSize );
+	useEvent( win, 'orientationchange', setSize );
+
+	return size;
+};
+
+export const useWindowHeight = ( options ) => useWindowSize( options )[ 1 ];
+
+export const useWindowWidth = ( options ) => useWindowSize( options )[ 0 ];