URLPopover: use new placement prop instead of legacy position prop (#…

…44391)

* URLPopover: use new placement prop instead of legacy position prop

* Restore (and deprecate) position prop, while still introducing `placement` prop

* Remove `position`s default value

* Give priority to `placement` when both `placement` and `position` are defined

packages/block-editor/src/components/url-popover/README.md

@@ -94,13 +94,13 @@ class MyURLPopover extends Component {
 
 The component accepts the following props. Any other props are passed through to the underlying `Popover` component ([refer to props documentation](/packages/components/src/popover/README.md)).
 
-### position
+### placement
 
-Where the Popover should be positioned relative to its parent. Defaults to "bottom center".
+Where the Popover should be positioned relative to its parent. Defaults to "bottom".
 
 -   Type: `String`
 -   Required: No
--   Default: "bottom center"
+-   Default: "bottom"
 
 ### focusOnMount
 
@@ -194,3 +194,12 @@ Reference passed to the auto complete element of the ([URLInput component](/pack
 
 -   Type: `Object`
 -   Required: no
+
+### position
+
+_Note: this prop is deprecated. Please use the `placement` prop instead._
+
+Where the Popover should be positioned relative to its parent.
+
+-   Type: `String`
+-   Required: No

packages/block-editor/src/components/url-popover/index.js

@@ -3,23 +3,53 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { Button, Popover } from '@wordpress/components';
+import {
+	Button,
+	Popover,
+	__experimentalPopoverPositionToPlacement as positionToPlacement,
+} from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import LinkViewer from './link-viewer';
 import LinkEditor from './link-editor';
 
+const DEFAULT_PLACEMENT = 'bottom';
+
 function URLPopover( {
 	additionalControls,
 	children,
 	renderSettings,
-	position = 'bottom center',
+	// The DEFAULT_PLACEMENT value is assigned inside the function's body
+	placement,
 	focusOnMount = 'firstElement',
+	// Deprecated
+	position,
+	// Rest
 	...popoverProps
 } ) {
+	if ( position !== undefined ) {
+		deprecated( '`position` prop in wp.blockEditor.URLPopover', {
+			since: '6.2',
+			alternative: '`placement` prop',
+		} );
+	}
+
+	// Compute popover's placement:
+	// - give priority to `placement` prop, if defined
+	// - otherwise, compute it from the legacy `position` prop (if defined)
+	// - finally, fallback to the DEFAULT_PLACEMENT.
+	let computedPlacement;
+	if ( placement !== undefined ) {
+		computedPlacement = placement;
+	} else if ( position !== undefined ) {
+		computedPlacement = positionToPlacement( position );
+	}
+	computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
+
 	const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
 
 	const showSettings = !! renderSettings && isSettingsExpanded;
@@ -32,7 +62,7 @@ function URLPopover( {
 		<Popover
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
-			position={ position }
+			placement={ computedPlacement }
 			shift
 			{ ...popoverProps }
 		>

packages/components/src/index.js

@@ -126,6 +126,7 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { positionToPlacement as __experimentalPopoverPositionToPlacement } from './popover/utils';
 export { default as QueryControls } from './query-controls';
 export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';