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>
WordPress · Sep 14, 2022 · c787c54 · c787c54
1 parent aadd730
commit c787c54
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 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
@@ -3,21 +3,27 @@
  */
 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,
 	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 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
@@ -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
@@ -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
@@ -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
@@ -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 } ) => (