Edit Post: use Popover s new anchor prop

packages/edit-post/src/components/sidebar/post-schedule/index.js

@@ -3,21 +3,31 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
-import { useRef } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import {
 	PostSchedule as PostScheduleForm,
 	PostScheduleCheck,
 	usePostScheduleLabel,
 } from '@wordpress/editor';
 
 export default function PostSchedule() {
-	const anchorRef = useRef();
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when then anchor's ref updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState();
+	const rowCallbackRef = useCallback( ( node ) => {
+		// Fall back to `undefined` in case the ref is `null`.
+		setPopoverAnchor( node ?? undefined );
+	}, [] );
+
 	return (
 		<PostScheduleCheck>
-			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
+			<PanelRow
+				className="edit-post-post-schedule"
+				ref={ rowCallbackRef }
+			>
 				<span>{ __( 'Publish' ) }</span>
 				<Dropdown
-					popoverProps={ { anchorRef } }
+					popoverProps={ { anchor: popoverAnchor } }
 					position="bottom left"
 					contentClassName="edit-post-post-schedule__dialog"
 					focusOnMount

packages/edit-post/src/components/sidebar/post-template/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -15,7 +15,13 @@ import PostTemplateForm from './form';
 import { store as editPostStore } from '../../../store';
 
 export default function PostTemplate() {
-	const anchorRef = useRef();
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when then anchor's ref updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState();
+	const rowCallbackRef = useCallback( ( node ) => {
+		// Fall back to `undefined` in case the ref is `null`.
+		setPopoverAnchor( node ?? undefined );
+	}, [] );
 
 	const isVisible = useSelect( ( select ) => {
 		const postTypeSlug = select( editorStore ).getCurrentPostType();
@@ -46,10 +52,10 @@ export default function PostTemplate() {
 	}
 
 	return (
-		<PanelRow className="edit-post-post-template" ref={ anchorRef }>
+		<PanelRow className="edit-post-post-template" ref={ rowCallbackRef }>
 			<span>{ __( 'Template' ) }</span>
 			<Dropdown
-				popoverProps={ { anchorRef } }
+				popoverProps={ { anchor: popoverAnchor } }
 				position="bottom left"
 				className="edit-post-post-template__dropdown"
 				contentClassName="edit-post-post-template__dialog"

packages/edit-post/src/components/sidebar/post-url/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import {
@@ -11,13 +11,20 @@ import {
 } from '@wordpress/editor';
 
 export default function PostURL() {
-	const anchorRef = useRef();
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when then anchor's ref updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState();
+	const rowCallbackRef = useCallback( ( node ) => {
+		// Fall back to `undefined` in case the ref is `null`.
+		setPopoverAnchor( node ?? undefined );
+	}, [] );
+
 	return (
 		<PostURLCheck>
-			<PanelRow className="edit-post-post-url" ref={ anchorRef }>
+			<PanelRow className="edit-post-post-url" ref={ rowCallbackRef }>
 				<span>{ __( 'URL' ) }</span>
 				<Dropdown
-					popoverProps={ { anchorRef } }
+					popoverProps={ { anchor: popoverAnchor } }
 					position="bottom left"
 					className="edit-post-post-url__dropdown"
 					contentClassName="edit-post-post-url__dialog"

packages/edit-post/src/components/sidebar/post-visibility/index.js

@@ -9,14 +9,24 @@ import {
 	PostVisibilityCheck,
 	usePostVisibilityLabel,
 } from '@wordpress/editor';
-import { useRef } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 export function PostVisibility() {
-	const rowRef = useRef();
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when then anchor's ref updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState();
+	const rowCallbackRef = useCallback( ( node ) => {
+		// Fall back to `undefined` in case the ref is `null`.
+		setPopoverAnchor( node ?? undefined );
+	}, [] );
+
 	return (
 		<PostVisibilityCheck
 			render={ ( { canEdit } ) => (
-				<PanelRow ref={ rowRef } className="edit-post-post-visibility">
+				<PanelRow
+					ref={ rowCallbackRef }
+					className="edit-post-post-visibility"
+				>
 					<span>{ __( 'Visibility' ) }</span>
 					{ ! canEdit && (
 						<span>
@@ -31,7 +41,7 @@ export function PostVisibility() {
 								// Anchor the popover to the middle of the
 								// entire row so that it doesn't move around
 								// when the label changes.
-								anchorRef: rowRef.current,
+								anchor: popoverAnchor,
 							} }
 							focusOnMount
 							renderToggle={ ( { isOpen, onToggle } ) => (