Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edit Post: use Popover's new anchor prop #43808

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions packages/edit-post/src/components/sidebar/post-schedule/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 6 additions & 4 deletions packages/edit-post/src/components/sidebar/post-template/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -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"
Expand Down
11 changes: 7 additions & 4 deletions packages/edit-post/src/components/sidebar/post-url/index.js
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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"
Expand Down
14 changes: 10 additions & 4 deletions packages/edit-post/src/components/sidebar/post-visibility/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 } ) => (
Expand Down