Cherrypîck 9.5.1 commits (#27580)

Co-authored-by: Vicente Canales <1157901+vcanales@users.noreply.github.com>
Co-authored-by: Jon Surrell <jon.surrell@automattic.com>
Co-authored-by: Kai Hao <kevin830726@gmail.com>

packages/components/src/popover/index.js

@@ -71,11 +71,17 @@ function computeAnchorRect(
 			return;
 		}
 
-		if ( anchorRef instanceof window.Range ) {
+		// Duck-type to check if `anchorRef` is an instance of Range
+		// `anchorRef instanceof window.Range` checks will break across document boundaries
+		// such as in an iframe
+		if ( typeof anchorRef?.cloneRange === 'function' ) {
 			return getRectangleFromRange( anchorRef );
 		}
 
-		if ( anchorRef instanceof window.Element ) {
+		// Duck-type to check if `anchorRef` is an instance of Element
+		// `anchorRef instanceof window.Element` checks will break across document boundaries
+		// such as in an iframe
+		if ( typeof anchorRef?.getBoundingClientRect === 'function' ) {
 			const rect = anchorRef.getBoundingClientRect();
 
 			if ( shouldAnchorIncludePadding ) {

packages/data/src/components/use-select/test/index.js

@@ -283,6 +283,9 @@ describe( 'useSelect', () => {
 			expect( selectCount2 ).toHaveBeenCalledTimes( 3 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 3 );
 			expect( testInstance.findByType( 'div' ).props.data ).toBe( 1 );
+
+			// Test if the unsubscribers get called correctly.
+			renderer.unmount();
 		} );
 
 		it( 'can subscribe to multiple stores at once', () => {
@@ -565,5 +568,156 @@ describe( 'useSelect', () => {
 				childCount: 0,
 			} );
 		} );
+
+		it( 'handles non-existing stores', () => {
+			registry.registerStore( 'store-1', counterStore );
+
+			let renderer;
+
+			const TestComponent = jest.fn( () => {
+				const state = useSelect(
+					( select ) => ( {
+						count1: select( 'store-1' ).getCounter(),
+						blank: select( 'non-existing-store' )?.getCounter(),
+					} ),
+					[]
+				);
+
+				return <div data={ state } />;
+			} );
+
+			act( () => {
+				renderer = TestRenderer.create(
+					<RegistryProvider value={ registry }>
+						<TestComponent />
+					</RegistryProvider>
+				);
+			} );
+
+			const testInstance = renderer.root;
+
+			expect( testInstance.findByType( 'div' ).props.data ).toEqual( {
+				count1: 0,
+				blank: undefined,
+			} );
+
+			act( () => {
+				registry.dispatch( 'store-1' ).increment();
+			} );
+
+			expect( testInstance.findByType( 'div' ).props.data ).toEqual( {
+				count1: 1,
+				blank: undefined,
+			} );
+
+			// Test if the unsubscribers get called correctly.
+			renderer.unmount();
+		} );
+
+		it( 'handles registration of a non-existing store during rendering', () => {
+			let renderer;
+
+			const TestComponent = jest.fn( () => {
+				const state = useSelect(
+					( select ) =>
+						select( 'not-yet-registered-store' )?.getCounter(),
+					[]
+				);
+
+				return <div data={ state } />;
+			} );
+
+			act( () => {
+				renderer = TestRenderer.create(
+					<RegistryProvider value={ registry }>
+						<TestComponent />
+					</RegistryProvider>
+				);
+			} );
+
+			const testInstance = renderer.root;
+
+			expect( testInstance.findByType( 'div' ).props.data ).toBe(
+				undefined
+			);
+
+			act( () => {
+				registry.registerStore(
+					'not-yet-registered-store',
+					counterStore
+				);
+			} );
+
+			// This is not ideal, but is the way it's working before and we want to prevent breaking changes.
+			expect( testInstance.findByType( 'div' ).props.data ).toBe(
+				undefined
+			);
+
+			act( () => {
+				registry.dispatch( 'not-yet-registered-store' ).increment();
+			} );
+
+			expect( testInstance.findByType( 'div' ).props.data ).toBe( 1 );
+
+			// Test if the unsubscribers get called correctly.
+			renderer.unmount();
+		} );
+
+		it( 'handles registration of a non-existing store of sub-registry during rendering', () => {
+			let renderer;
+
+			const subRegistry = createRegistry( {}, registry );
+
+			const TestComponent = jest.fn( () => {
+				const state = useSelect(
+					( select ) =>
+						select(
+							'not-yet-registered-child-store'
+						)?.getCounter(),
+					[]
+				);
+
+				return <div data={ state } />;
+			} );
+
+			act( () => {
+				renderer = TestRenderer.create(
+					<RegistryProvider value={ registry }>
+						<RegistryProvider value={ subRegistry }>
+							<TestComponent />
+						</RegistryProvider>
+					</RegistryProvider>
+				);
+			} );
+
+			const testInstance = renderer.root;
+
+			expect( testInstance.findByType( 'div' ).props.data ).toBe(
+				undefined
+			);
+
+			act( () => {
+				registry.registerStore(
+					'not-yet-registered-child-store',
+					counterStore
+				);
+			} );
+
+			// This is not ideal, but is the way it's working before and we want to prevent breaking changes.
+			expect( testInstance.findByType( 'div' ).props.data ).toBe(
+				undefined
+			);
+
+			act( () => {
+				registry
+					.dispatch( 'not-yet-registered-child-store' )
+					.increment();
+			} );
+
+			expect( testInstance.findByType( 'div' ).props.data ).toBe( 1 );
+
+			// Test if the unsubscribers get called correctly.
+			renderer.unmount();
+		} );
 	} );
 } );

packages/data/src/registry.js

@@ -234,6 +234,14 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 			return stores[ storeName ].subscribe( handler );
 		}
 
+		// Trying to access a store that hasn't been registered,
+		// this is a pattern rarely used but seen in some places.
+		// We fallback to regular `subscribe` here for backward-compatibility for now.
+		// See https://github.com/WordPress/gutenberg/pull/27466 for more info.
+		if ( ! parent ) {
+			return subscribe( handler );
+		}
+
 		return parent.__experimentalSubscribeStore( storeName, handler );
 	}
 

packages/date/README.md

@@ -28,7 +28,7 @@ _Related_
 _Parameters_
 
 -   _dateFormat_ `string`: PHP-style formatting string. See php.net/date.
--   _dateValue_ `(Date|string|null)`: Date object or ISO string, parsable by moment.js.
+-   _dateValue_ `(Date|string|Moment|null)`: Date object or string, parsable by moment.js.
 -   _timezone_ `(string|number|null)`: Timezone to output result in or a UTC offset. Defaults to timezone from site.
 
 _Returns_
@@ -50,7 +50,7 @@ _Related_
 _Parameters_
 
 -   _dateFormat_ `string`: PHP-style formatting string. See php.net/date.
--   _dateValue_ `(Date|string|null)`: Date object or string, parsable by moment.js.
+-   _dateValue_ `(Date|string|Moment|null)`: Date object or string, parsable by moment.js.
 -   _timezone_ `(string|number|boolean|null)`: Timezone to output result in or a UTC offset. Defaults to timezone from site. Notice: `boolean` is effectively deprecated, but still supported for backward compatibility reasons.
 
 _Returns_
@@ -64,7 +64,7 @@ Formats a date. Does not alter the date's timezone.
 _Parameters_
 
 -   _dateFormat_ `string`: PHP-style formatting string. See php.net/date.
--   _dateValue_ `(Date|string|null)`: Date object or ISO string.
+-   _dateValue_ `(Date|string|Moment|null)`: Date object or string, parsable by moment.js.
 
 _Returns_
 
@@ -89,7 +89,7 @@ Formats a date (like `date()` in PHP), in the UTC timezone.
 _Parameters_
 
 -   _dateFormat_ `string`: PHP-style formatting string. See php.net/date.
--   _dateValue_ `(Date|string|null)`: Date object or ISO string.
+-   _dateValue_ `(Date|string|Moment|null)`: Date object or string, parsable by moment.js.
 
 _Returns_
 
@@ -103,7 +103,7 @@ and using the UTC timezone.
 _Parameters_
 
 -   _dateFormat_ `string`: PHP-style formatting string. See php.net/date.
--   _dateValue_ `(Date|string|null)`: Date object or ISO string.
+-   _dateValue_ `(Date|string|Moment|null)`: Date object or string, parsable by moment.js.
 
 _Returns_
 
@@ -115,7 +115,7 @@ Check whether a date is considered in the future according to the WordPress sett
 
 _Parameters_
 
--   _dateValue_ `(string|Date)`: Date String or Date object in the Defined WP Timezone.
+-   _dateValue_ `string`: Date String or Date object in the Defined WP Timezone.
 
 _Returns_
 
@@ -129,10 +129,6 @@ _Parameters_
 
 -   _dateSettings_ `Object`: Settings, including locale data.
 
-<a name="zonedTimeToUtc" href="#zonedTimeToUtc">#</a> **zonedTimeToUtc**
-
-Undocumented declaration.
-
 
 <!-- END TOKEN(Autogenerated API docs) -->
 

packages/date/package.json

@@ -23,8 +23,6 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.11.2",
-		"date-fns": "^2.16.1",
-		"date-fns-tz": "^1.0.12",
 		"moment": "^2.22.1",
 		"moment-timezone": "^0.5.31"
 	},