Copy border box style helpers to a module in block-editor, remove t…

…he external re-export from `@wordpress-components` and start replacing app consumers to import it from `block-editor`

Start with `hasSplitBorders`

packages/block-editor/src/components/border-box-utils/index.ts

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	Border,
+	AnyBorder,
+	Borders,
+	BorderProp,
+	BorderSide,
+} from './types';
+
+const sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];
+const borderProps: BorderProp[] = [ 'color', 'style', 'width' ];
+
+const isEmptyBorder = ( border?: Border ) => {
+	if ( ! border ) {
+		return true;
+	}
+	return ! borderProps.some( ( prop ) => border[ prop ] !== undefined );
+};
+
+export const isDefinedBorder = ( border: AnyBorder ) => {
+	// No border, no worries :)
+	if ( ! border ) {
+		return false;
+	}
+
+	// If we have individual borders per side within the border object we
+	// need to check whether any of those side borders have been set.
+	if ( hasSplitBorders( border ) ) {
+		const allSidesEmpty = sides.every( ( side ) =>
+			isEmptyBorder( ( border as Borders )[ side ] )
+		);
+
+		return ! allSidesEmpty;
+	}
+
+	// If we have a top-level border only, check if that is empty. e.g.
+	// { color: undefined, style: undefined, width: undefined }
+	// Border radius can still be set within the border object as it is
+	// handled separately.
+	return ! isEmptyBorder( border as Border );
+};
+
+export const hasSplitBorders = ( border: AnyBorder = {} ) => {
+	return Object.keys( border ).some(
+		( side ) => sides.indexOf( side as BorderSide ) !== -1
+	);
+};

packages/block-editor/src/components/border-box-utils/types.ts

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type Border = {
+	color?: CSSProperties[ 'borderColor' ];
+	style?: CSSProperties[ 'borderStyle' ];
+	width?: CSSProperties[ 'borderWidth' ];
+};
+
+export type Borders = {
+	top?: Border;
+	right?: Border;
+	bottom?: Border;
+	left?: Border;
+};
+
+export type AnyBorder = Border | Borders | undefined;
+export type BorderProp = keyof Border;
+export type BorderSide = keyof Borders;

packages/block-editor/src/components/global-styles/border-panel.js

@@ -3,13 +3,12 @@
  */
 import {
 	__experimentalBorderBoxControl as BorderBoxControl,
-	__experimentalHasSplitBorders as hasSplitBorders,
-	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalItemGroup as ItemGroup,
 	BaseControl,
 } from '@wordpress/components';
+
 import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -22,6 +21,7 @@ import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 import { useBorderPanelLabel } from '../../hooks/border';
 import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
+import { hasSplitBorders, isDefinedBorder } from '../border-box-utils';
 
 export function useHasBorderPanel( settings ) {
 	const controls = Object.values( useHasBorderPanelControls( settings ) );

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

@@ -175,3 +175,5 @@ export { useBlockCommands } from './use-block-commands';
  * The following rename hint component can be removed in 6.4.
  */
 export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';
+
+export * from './border-box-utils';

packages/block-editor/src/hooks/border.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
-import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
 import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
@@ -30,6 +29,7 @@ import {
 } from '../components/global-styles';
 import { store as blockEditorStore } from '../store';
 import { __ } from '@wordpress/i18n';
+import { hasSplitBorders } from '../components/border-box-utils';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 export const SHADOW_SUPPORT_KEY = 'shadow';

packages/block-editor/tsconfig.json

@@ -35,5 +35,8 @@
 	// NOTE: This package is being progressively typed. You are encouraged to
 	// expand this array with files which can be type-checked. At some point in
 	// the future, this can be simplified to an `includes` of `src/**/*`.
-	"files": [ "src/components/block-context/index.js", "src/utils/dom.js" ]
+	"files": [ "src/components/block-context/index.js", "src/utils/dom.js" ],
+	"include": [
+		"src/components/border-box-utils/**/*"
+	]
 }

packages/block-library/src/table/edit.js

@@ -14,6 +14,7 @@ import {
 	BlockIcon,
 	AlignmentControl,
 	useBlockProps,
+	hasSplitBorders,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetElementClassName,
@@ -26,7 +27,6 @@ import {
 	TextControl,
 	ToggleControl,
 	ToolbarDropdownMenu,
-	__experimentalHasSplitBorders as hasSplitBorders,
 } from '@wordpress/components';
 import {
 	alignLeft,

packages/components/src/index.native.js

@@ -35,6 +35,7 @@ export {
 
 export { default as __experimentalStyleProvider } from './style-provider';
 export { default as BaseControl } from './base-control';
+// @todo review this RN export
 export { hasSplitBorders as __experimentalHasSplitBorders } from './border-box-control/utils';
 export { default as TextareaControl } from './textarea-control';
 export { default as PanelBody } from './panel/body';

packages/components/src/index.ts

@@ -28,12 +28,7 @@ export {
 	useAutocompleteProps as __unstableUseAutocompleteProps,
 } from './autocomplete';
 export { default as BaseControl, useBaseControlProps } from './base-control';
-export {
-	BorderBoxControl as __experimentalBorderBoxControl,
-	hasSplitBorders as __experimentalHasSplitBorders,
-	isDefinedBorder as __experimentalIsDefinedBorder,
-	isEmptyBorder as __experimentalIsEmptyBorder,
-} from './border-box-control';
+export { BorderBoxControl as __experimentalBorderBoxControl } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
 export {
 	default as __experimentalBoxControl,

packages/edit-site/src/components/global-styles/screen-block.js

@@ -2,14 +2,16 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	hasSplitBorders,
+} from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	PanelBody,
 	__experimentalVStack as VStack,
-	__experimentalHasSplitBorders as hasSplitBorders,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';