From 336a4b479cf5ff6df25718403a0c7f543049ea2d Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 6 Sep 2022 11:26:27 +0200
Subject: [PATCH] Edit Post: use Popover's new anchor prop (#43808)

* Edit Post: use Popover s new anchor prop

* Update comment

* SImplify code

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

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* Allow passing a `null` anchor

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
---
 .../src/components/sidebar/post-schedule/index.js  | 14 ++++++++++----
 .../components/sidebar/post-schedule/style.scss    |  2 +-
 .../src/components/sidebar/post-template/index.js  | 10 ++++++----
 .../src/components/sidebar/post-url/index.js       | 11 +++++++----
 .../components/sidebar/post-visibility/index.js    | 14 ++++++++++----
 5 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/sidebar/post-schedule/index.js
index f8b96fe6669e7b..cf1c64fa792894 100644
--- a/packages/edit-post/src/components/sidebar/post-schedule/index.js
+++ b/packages/edit-post/src/components/sidebar/post-schedule/index.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
-import { useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	PostSchedule as PostScheduleForm,
 	PostScheduleCheck,
@@ -11,13 +11,19 @@ import {
 } 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 the anchor's ref updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+
 	return (
 		<PostScheduleCheck>
-			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
+			<PanelRow
+				className="edit-post-post-schedule"
+				ref={ setPopoverAnchor }
+			>
 				<span>{ __( 'Publish' ) }</span>
 				<Dropdown
-					popoverProps={ { anchorRef } }
+					popoverProps={ { anchor: popoverAnchor } }
 					position="bottom left"
 					contentClassName="edit-post-post-schedule__dialog"
 					focusOnMount
diff --git a/packages/edit-post/src/components/sidebar/post-schedule/style.scss b/packages/edit-post/src/components/sidebar/post-schedule/style.scss
index 8e251f47f58574..e1d6c4cd09f950 100644
--- a/packages/edit-post/src/components/sidebar/post-schedule/style.scss
+++ b/packages/edit-post/src/components/sidebar/post-schedule/style.scss
@@ -15,7 +15,7 @@
 	white-space: normal;
 	height: auto;
 
-	// This span is added by the Popover in Tooltip when no anchorRef is
+	// This span is added by the Popover in Tooltip when no anchor is
 	// provided. We set its width to 0 so that it does not cause the button text
 	// to wrap to a new line when displaying the tooltip. A better fix would be
 	// to pass anchorRef and avoid the need for a span alltogether, which is
diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js
index b16330a0350f96..496ab9d7025565 100644
--- a/packages/edit-post/src/components/sidebar/post-template/index.js
+++ b/packages/edit-post/src/components/sidebar/post-template/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -15,7 +15,9 @@ 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( null );
 
 	const isVisible = useSelect( ( select ) => {
 		const postTypeSlug = select( editorStore ).getCurrentPostType();
@@ -46,10 +48,10 @@ export default function PostTemplate() {
 	}
 
 	return (
-		<PanelRow className="edit-post-post-template" ref={ anchorRef }>
+		<PanelRow className="edit-post-post-template" ref={ setPopoverAnchor }>
 			<span>{ __( 'Template' ) }</span>
 			<Dropdown
-				popoverProps={ { anchorRef } }
+				popoverProps={ { anchor: popoverAnchor } }
 				position="bottom left"
 				className="edit-post-post-template__dropdown"
 				contentClassName="edit-post-post-template__dialog"
diff --git a/packages/edit-post/src/components/sidebar/post-url/index.js b/packages/edit-post/src/components/sidebar/post-url/index.js
index e7b3db09d94219..2efa79085e62ce 100644
--- a/packages/edit-post/src/components/sidebar/post-url/index.js
+++ b/packages/edit-post/src/components/sidebar/post-url/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import {
@@ -11,13 +11,16 @@ 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( null );
+
 	return (
 		<PostURLCheck>
-			<PanelRow className="edit-post-post-url" ref={ anchorRef }>
+			<PanelRow className="edit-post-post-url" ref={ setPopoverAnchor }>
 				<span>{ __( 'URL' ) }</span>
 				<Dropdown
-					popoverProps={ { anchorRef } }
+					popoverProps={ { anchor: popoverAnchor } }
 					position="bottom left"
 					className="edit-post-post-url__dropdown"
 					contentClassName="edit-post-post-url__dialog"
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
index f7c38ee45f86bd..07cfcb58707c6a 100644
--- a/packages/edit-post/src/components/sidebar/post-visibility/index.js
+++ b/packages/edit-post/src/components/sidebar/post-visibility/index.js
@@ -9,14 +9,20 @@ import {
 	PostVisibilityCheck,
 	usePostVisibilityLabel,
 } from '@wordpress/editor';
-import { useRef } from '@wordpress/element';
+import { 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( null );
+
 	return (
 		<PostVisibilityCheck
 			render={ ( { canEdit } ) => (
-				<PanelRow ref={ rowRef } className="edit-post-post-visibility">
+				<PanelRow
+					ref={ setPopoverAnchor }
+					className="edit-post-post-visibility"
+				>
 					<span>{ __( 'Visibility' ) }</span>
 					{ ! canEdit && (
 						<span>
@@ -31,7 +37,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 } ) => (