Make BlockPopover component public (#61529)

Co-authored-by: gigitux <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: noisysocks <[email protected]>
WordPress · May 13, 2024 · 363d375 · 363d375
1 parent 0a10502
commit 363d375
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 8 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -207,6 +207,12 @@ _Related_
 
 Undocumented declaration.
 
+### BlockPopover
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md>
+
 ### BlockPreview
 
 BlockPreview renders a preview of a block or array of blocks.

diff --git a/packages/block-editor/src/components/block-popover/README.md b/packages/block-editor/src/components/block-popover/README.md
@@ -30,7 +30,7 @@ This determines whether the block popover always shifts into the viewport or rem
 -	Required: No
 -	Default: `true`
 
-## BlockPopoverInbetween
+## BlockPopoverInbetween - Private Component
 
 ### Props
 

diff --git a/packages/block-editor/src/components/block-popover/cover.js b/packages/block-editor/src/components/block-popover/cover.js
@@ -7,7 +7,7 @@ import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import BlockPopover from '.';
+import { PrivateBlockPopover } from '.';
 
 function BlockPopoverCover(
 	{
@@ -25,7 +25,7 @@ function BlockPopoverCover(
 	const selectedElement = useBlockElement( clientId );
 
 	return (
-		<BlockPopover
+		<PrivateBlockPopover
 			ref={ ref }
 			clientId={ clientId }
 			bottomClientId={ bottomClientId }
@@ -42,7 +42,7 @@ function BlockPopoverCover(
 			) : (
 				children
 			) }
-		</BlockPopover>
+		</PrivateBlockPopover>
 	);
 }
 

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
@@ -152,4 +152,25 @@ function BlockPopover(
 	);
 }
 
-export default forwardRef( BlockPopover );
+export const PrivateBlockPopover = forwardRef( BlockPopover );
+
+const PublicBlockPopover = (
+	{ clientId, bottomClientId, children, ...props },
+	ref
+) => (
+	<PrivateBlockPopover
+		{ ...props }
+		bottomClientId={ bottomClientId }
+		clientId={ clientId }
+		__unstableContentRef={ undefined }
+		__unstablePopoverSlot={ undefined }
+		ref={ ref }
+	>
+		{ children }
+	</PrivateBlockPopover>
+);
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md
+ */
+export default forwardRef( PublicBlockPopover );
diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import BlockSelectionButton from './block-selection-button';
-import BlockPopover from '../block-popover';
+import { PrivateBlockPopover } from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
 
@@ -28,7 +28,7 @@ export default function BlockToolbarBreadcrumb( {
 	} );
 
 	return (
-		<BlockPopover
+		<PrivateBlockPopover
 			clientId={ capturingClientId || clientId }
 			bottomClientId={ lastClientId }
 			className={ clsx( 'block-editor-block-list__block-popover', {
@@ -41,6 +41,6 @@ export default function BlockToolbarBreadcrumb( {
 				clientId={ clientId }
 				rootClientId={ rootClientId }
 			/>
-		</BlockPopover>
+		</PrivateBlockPopover>
 	);
 }
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -160,6 +160,7 @@ export {
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
+export { default as BlockPopover } from './block-popover';
 export { useBlockEditingMode } from './block-editing-mode';
 
 /*

diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
@@ -39,6 +39,7 @@ import {
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
+import { PrivateBlockPopover } from './components/block-popover';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -78,4 +79,5 @@ lock( privateApis, {
 	requiresWrapperOnCopy,
 	PrivateRichText,
 	reusableBlocksSelectKey,
+	PrivateBlockPopover,
 } );