@wordpress/edit-site 4.3.10 → 4.6.0

package/build-style/style-rtl.css

@@ -416,7 +416,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 480px) {
   .interface-more-menu-dropdown__content .components-popover__content {
-    width: auto;
     max-width: 480px;
   }
 }
@@ -430,6 +429,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .interface-pinned-items {
   display: flex;
+  gap: 4px;
+  margin-left: -4px;
 }
 .interface-pinned-items .components-button:not(:first-child) {
   display: none;
@@ -440,7 +441,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .interface-pinned-items .components-button {
-  margin-right: 4px;
+  margin: 0;
 }
 .interface-pinned-items .components-button svg {
   max-width: 24px;
@@ -900,42 +901,30 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 }
 
 /**
- * Buttons in the Toolbar
+ * Buttons on the right side
  */
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
   padding-left: 4px;
+  gap: 4px;
 }
-.edit-site-header__actions .interface-pinned-items {
-  display: none;
-}
-@media (min-width: 782px) {
-  .edit-site-header__actions .interface-pinned-items {
-    display: inline-flex;
+@media (min-width: 600px) {
+  .edit-site-header__actions {
+    padding-left: 10px;
   }
 }
-.edit-site-header__actions .editor-post-saved-state,
-.edit-site-header__actions .components-button.components-button {
-  margin-left: 4px;
-}
 @media (min-width: 600px) {
-  .edit-site-header__actions .editor-post-saved-state,
-.edit-site-header__actions .components-button.components-button {
-    margin-left: 12px;
+  .edit-site-header__actions {
+    gap: 8px;
   }
 }
-.edit-site-header__actions .editor-post-saved-state,
-.edit-site-header__actions .components-button.is-tertiary {
-  padding: 0 6px;
-}
-.edit-site-header__actions .edit-site-more-menu .components-button,
-.edit-site-header__actions .interface-pinned-items .components-button {
-  margin-left: 0;
+.edit-site-header__actions .interface-pinned-items {
+  display: none;
 }
-@media (min-width: 600px) {
-  .edit-site-header__actions {
-    padding-left: 16px;
+@media (min-width: 782px) {
+  .edit-site-header__actions .interface-pinned-items {
+    display: inline-flex;
   }
 }
 
@@ -974,10 +963,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .show-icon-labels .edit-site-header .edit-site-save-button__button {
   padding-right: 6px;
   padding-left: 6px;
-  margin-left: 4px;
-}
-.show-icon-labels .edit-site-header .block-editor-post-preview__button-toggle {
-  margin-left: 4px;
 }
 .show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
 .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
@@ -1045,7 +1030,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   margin-right: 6px;
 }
 
-.edit-site-document-actions__info-dropdown > .components-popover__content > div {
+.edit-site-document-actions__info-dropdown > .components-popover__content {
   padding: 0;
   min-width: 240px;
 }
@@ -1368,6 +1353,7 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 .edit-site-list-table tr .edit-site-list-table-column:nth-child(2) {
   width: calc(40% - 18px);
+  word-break: break-word;
 }
 .edit-site-list-table tr .edit-site-list-table-column:nth-child(3) {
   min-width: 36px;
@@ -1542,6 +1528,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 16px;
 }
 
+.edit-site-navigation-sidebar__beta,
 .edit-site-global-styles-sidebar__beta {
   display: inline-flex;
   margin-right: 8px;
@@ -1555,6 +1542,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   line-height: 1;
 }
 
+.edit-site-global-styles-sidebar hr {
+  margin: 0;
+}
+
 .components-panel__header.edit-site-sidebar__panel-tabs {
   justify-content: flex-start;
   padding-right: 0;
@@ -1603,7 +1594,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   visibility: hidden;
 }
 .components-button.edit-site-sidebar__panel-tab.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
   position: relative;
   z-index: 1;
 }
@@ -1614,7 +1605,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   bottom: 1px;
   left: 0;
   right: 0;
-  border-bottom: 4px solid transparent;
+  border-bottom: 1.5px solid transparent;
 }
 .components-button.edit-site-sidebar__panel-tab:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1622,7 +1613,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   z-index: 1;
 }
 .components-button.edit-site-sidebar__panel-tab.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
 }
 
 @keyframes loadingpulse {

package/build-style/style.css

@@ -416,7 +416,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 480px) {
   .interface-more-menu-dropdown__content .components-popover__content {
-    width: auto;
     max-width: 480px;
   }
 }
@@ -430,6 +429,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .interface-pinned-items {
   display: flex;
+  gap: 4px;
+  margin-right: -4px;
 }
 .interface-pinned-items .components-button:not(:first-child) {
   display: none;
@@ -440,7 +441,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .interface-pinned-items .components-button {
-  margin-left: 4px;
+  margin: 0;
 }
 .interface-pinned-items .components-button svg {
   max-width: 24px;
@@ -900,42 +901,30 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 }
 
 /**
- * Buttons in the Toolbar
+ * Buttons on the right side
  */
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
   padding-right: 4px;
+  gap: 4px;
 }
-.edit-site-header__actions .interface-pinned-items {
-  display: none;
-}
-@media (min-width: 782px) {
-  .edit-site-header__actions .interface-pinned-items {
-    display: inline-flex;
+@media (min-width: 600px) {
+  .edit-site-header__actions {
+    padding-right: 10px;
   }
 }
-.edit-site-header__actions .editor-post-saved-state,
-.edit-site-header__actions .components-button.components-button {
-  margin-right: 4px;
-}
 @media (min-width: 600px) {
-  .edit-site-header__actions .editor-post-saved-state,
-.edit-site-header__actions .components-button.components-button {
-    margin-right: 12px;
+  .edit-site-header__actions {
+    gap: 8px;
   }
 }
-.edit-site-header__actions .editor-post-saved-state,
-.edit-site-header__actions .components-button.is-tertiary {
-  padding: 0 6px;
-}
-.edit-site-header__actions .edit-site-more-menu .components-button,
-.edit-site-header__actions .interface-pinned-items .components-button {
-  margin-right: 0;
+.edit-site-header__actions .interface-pinned-items {
+  display: none;
 }
-@media (min-width: 600px) {
-  .edit-site-header__actions {
-    padding-right: 16px;
+@media (min-width: 782px) {
+  .edit-site-header__actions .interface-pinned-items {
+    display: inline-flex;
   }
 }
 
@@ -974,10 +963,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .show-icon-labels .edit-site-header .edit-site-save-button__button {
   padding-left: 6px;
   padding-right: 6px;
-  margin-right: 4px;
-}
-.show-icon-labels .edit-site-header .block-editor-post-preview__button-toggle {
-  margin-right: 4px;
 }
 .show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
 .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
@@ -1045,7 +1030,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   margin-left: 6px;
 }
 
-.edit-site-document-actions__info-dropdown > .components-popover__content > div {
+.edit-site-document-actions__info-dropdown > .components-popover__content {
   padding: 0;
   min-width: 240px;
 }
@@ -1368,6 +1353,7 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 .edit-site-list-table tr .edit-site-list-table-column:nth-child(2) {
   width: calc(40% - 18px);
+  word-break: break-word;
 }
 .edit-site-list-table tr .edit-site-list-table-column:nth-child(3) {
   min-width: 36px;
@@ -1542,6 +1528,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 16px;
 }
 
+.edit-site-navigation-sidebar__beta,
 .edit-site-global-styles-sidebar__beta {
   display: inline-flex;
   margin-left: 8px;
@@ -1555,6 +1542,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   line-height: 1;
 }
 
+.edit-site-global-styles-sidebar hr {
+  margin: 0;
+}
+
 .components-panel__header.edit-site-sidebar__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;
@@ -1603,7 +1594,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   visibility: hidden;
 }
 .components-button.edit-site-sidebar__panel-tab.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
   position: relative;
   z-index: 1;
 }
@@ -1614,7 +1605,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   bottom: 1px;
   right: 0;
   left: 0;
-  border-bottom: 4px solid transparent;
+  border-bottom: 1.5px solid transparent;
 }
 .components-button.edit-site-sidebar__panel-tab:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1622,7 +1613,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   z-index: 1;
 }
 .components-button.edit-site-sidebar__panel-tab.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
 }
 
 @keyframes loadingpulse {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.3.10",
+	"version": "4.6.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.6.1",
-		"@wordpress/api-fetch": "^6.3.1",
-		"@wordpress/block-editor": "^8.5.7",
-		"@wordpress/block-library": "^7.3.10",
-		"@wordpress/blocks": "^11.5.3",
-		"@wordpress/components": "^19.8.4",
-		"@wordpress/compose": "^5.4.1",
-		"@wordpress/core-data": "^4.4.5",
-		"@wordpress/data": "^6.6.1",
-		"@wordpress/deprecated": "^3.6.1",
-		"@wordpress/editor": "^12.5.7",
-		"@wordpress/element": "^4.4.1",
-		"@wordpress/hooks": "^3.6.1",
-		"@wordpress/html-entities": "^3.6.1",
-		"@wordpress/i18n": "^4.6.1",
-		"@wordpress/icons": "^8.2.2",
-		"@wordpress/interface": "^4.5.5",
-		"@wordpress/keyboard-shortcuts": "^3.4.1",
-		"@wordpress/keycodes": "^3.6.1",
-		"@wordpress/media-utils": "^3.4.1",
-		"@wordpress/notices": "^3.6.1",
-		"@wordpress/plugins": "^4.4.2",
-		"@wordpress/preferences": "^1.2.4",
-		"@wordpress/reusable-blocks": "^3.4.7",
-		"@wordpress/style-engine": "^0.5.1",
-		"@wordpress/url": "^3.7.1",
-		"@wordpress/viewport": "^4.4.1",
+		"@wordpress/a11y": "^3.9.0",
+		"@wordpress/api-fetch": "^6.6.0",
+		"@wordpress/block-editor": "^9.1.0",
+		"@wordpress/block-library": "^7.6.0",
+		"@wordpress/blocks": "^11.8.0",
+		"@wordpress/components": "^19.11.0",
+		"@wordpress/compose": "^5.7.0",
+		"@wordpress/core-data": "^4.7.0",
+		"@wordpress/data": "^6.9.0",
+		"@wordpress/deprecated": "^3.9.0",
+		"@wordpress/editor": "^12.8.0",
+		"@wordpress/element": "^4.7.0",
+		"@wordpress/hooks": "^3.9.0",
+		"@wordpress/html-entities": "^3.9.0",
+		"@wordpress/i18n": "^4.9.0",
+		"@wordpress/icons": "^9.0.0",
+		"@wordpress/interface": "^4.8.0",
+		"@wordpress/keyboard-shortcuts": "^3.7.0",
+		"@wordpress/keycodes": "^3.9.0",
+		"@wordpress/media-utils": "^4.0.0",
+		"@wordpress/notices": "^3.9.0",
+		"@wordpress/plugins": "^4.7.0",
+		"@wordpress/preferences": "^2.1.0",
+		"@wordpress/reusable-blocks": "^3.7.0",
+		"@wordpress/style-engine": "^0.8.0",
+		"@wordpress/url": "^3.10.0",
+		"@wordpress/viewport": "^4.7.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d9042594d77ee2d9e28326266de078a505fdf645"
+	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
 }

package/src/components/add-new-template/new-template.js

@@ -41,7 +41,7 @@ import { store as editSiteStore } from '../../store';
 
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
-	'single-post',
+	'single',
 	'page',
 	'index',
 	'archive',
@@ -56,7 +56,7 @@ const DEFAULT_TEMPLATE_SLUGS = [
 
 const TEMPLATE_ICONS = {
 	'front-page': home,
-	'single-post': post,
+	single: post,
 	page,
 	archive,
 	search,

package/src/components/global-styles/border-panel.js

@@ -1,17 +1,15 @@
 /**
  * WordPress dependencies
  */
+import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
 import {
-	__experimentalBorderRadiusControl as BorderRadiusControl,
-	__experimentalBorderStyleControl as BorderStyleControl,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-} from '@wordpress/block-editor';
-import {
+	__experimentalBorderBoxControl as BorderBoxControl,
+	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalUnitControl as UnitControl,
-	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -24,8 +22,6 @@ import {
 	useStyle,
 } from './hooks';
 
-const MIN_BORDER_WIDTH = 0;
-
 export function useHasBorderPanel( name ) {
 	const controls = [
 		useHasBorderColorControl( name ),
@@ -69,63 +65,45 @@ function useHasBorderWidthControl( name ) {
 	);
 }
 
-export default function BorderPanel( { name } ) {
-	// To better reflect if the user has customized a value we need to
-	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
-	const createHasValueCallback = ( feature ) => () =>
-		!! userBorderStyles?.[ feature ];
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
 
-	const createResetCallback = ( setStyle ) => () => setStyle( undefined );
-
-	const handleOnChange = ( setStyle ) => ( value ) => {
-		setStyle( value || undefined );
-	};
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' )[ 0 ] || [
-			'px',
-			'em',
-			'rem',
-		],
-	} );
-
-	// Border width.
-	const showBorderWidth = useHasBorderWidthControl( name );
-	const [ borderWidthValue, setBorderWidth ] = useStyle(
-		'border.width',
-		name
-	);
+	if ( ! border.style && ( border.color || border.width ) ) {
+		return { ...border, style: 'solid' };
+	}
 
-	// Border style.
-	const showBorderStyle = useHasBorderStyleControl( name );
-	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
+	return border;
+}
 
-	// When we set a border color or width ensure we have a style so the user
-	// can see a visible border.
-	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
-		if ( !! value && ! borderStyle ) {
-			setBorderStyle( 'solid' );
-		}
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
 
-		setStyle( value || undefined );
-	};
+export default function BorderPanel( { name } ) {
+	// To better reflect if the user has customized a value we need to
+	// ensure the style value being checked is from the `user` origin.
+	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
+	const [ border, setBorder ] = useStyle( 'border', name );
+	const colors = useColorsPerOrigin( name );
 
-	// Border color.
 	const showBorderColor = useHasBorderColorControl( name );
-	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
-	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
-	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
-
-	const borderColorSettings = [
-		{
-			label: __( 'Color' ),
-			colors: useColorsPerOrigin( name ),
-			colorValue: borderColor,
-			onColorChange: handleOnChangeWithStyle( setBorderColor ),
-			clearable: false,
-		},
-	];
+	const showBorderStyle = useHasBorderStyleControl( name );
+	const showBorderWidth = useHasBorderWidthControl( name );
 
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
@@ -141,60 +119,73 @@ export default function BorderPanel( { name } ) {
 		return !! borderValues;
 	};
 
-	const resetAll = () => {
-		setBorderColor( undefined );
-		setBorderRadius( undefined );
-		setBorderStyle( undefined );
-		setBorderWidth( undefined );
+	const resetBorder = () => {
+		if ( hasBorderRadius() ) {
+			return setBorder( { radius: userBorderStyles.radius } );
+		}
+
+		setBorder( undefined );
 	};
 
+	const resetAll = useCallback( () => setBorder( undefined ), [ setBorder ] );
+	const onBorderChange = useCallback(
+		( newBorder ) => {
+			// Ensure we have a visible border style when a border width or
+			// color is being selected.
+			const newBorderWithStyle = applyAllFallbackStyles( newBorder );
+
+			// As we can't conditionally generate styles based on if other
+			// style properties have been set we need to force split border
+			// definitions for user set border styles. Border radius is derived
+			// from the same property i.e. `border.radius` if it is a string
+			// that is used. The longhand border radii styles are only generated
+			// if that property is an object.
+			//
+			// For borders (color, style, and width) those are all properties on
+			// the `border` style property. This means if the theme.json defined
+			// split borders and the user condenses them into a flat border or
+			// vice-versa we'd get both sets of styles which would conflict.
+			const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
+				? {
+						top: newBorderWithStyle,
+						right: newBorderWithStyle,
+						bottom: newBorderWithStyle,
+						left: newBorderWithStyle,
+				  }
+				: {
+						color: null,
+						style: null,
+						width: null,
+						...newBorderWithStyle,
+				  };
+
+			// As radius is maintained separately to color, style, and width
+			// maintain its value. Undefined values here will be cleaned when
+			// global styles are saved.
+			setBorder( { radius: border?.radius, ...updatedBorder } );
+		},
+		[ setBorder ]
+	);
+
 	return (
 		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
-			{ showBorderWidth && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ createHasValueCallback( 'width' ) }
-					label={ __( 'Width' ) }
-					onDeselect={ createResetCallback( setBorderWidth ) }
-					isShownByDefault={ true }
-				>
-					<UnitControl
-						value={ borderWidthValue }
-						label={ __( 'Width' ) }
-						min={ MIN_BORDER_WIDTH }
-						onChange={ handleOnChangeWithStyle( setBorderWidth ) }
-						units={ units }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ showBorderStyle && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ createHasValueCallback( 'style' ) }
-					label={ __( 'Style' ) }
-					onDeselect={ createResetCallback( setBorderStyle ) }
-					isShownByDefault={ true }
-				>
-					<BorderStyleControl
-						value={ borderStyle }
-						onChange={ handleOnChange( setBorderStyle ) }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ showBorderColor && (
+			{ ( showBorderWidth || showBorderColor ) && (
 				<ToolsPanelItem
-					hasValue={ createHasValueCallback( 'color' ) }
-					label={ __( 'Color' ) }
-					onDeselect={ createResetCallback( setBorderColor ) }
+					hasValue={ () => isDefinedBorder( userBorderStyles ) }
+					label={ __( 'Border' ) }
+					onDeselect={ () => resetBorder() }
 					isShownByDefault={ true }
 				>
-					<ColorGradientSettingsDropdown
-						__experimentalHasMultipleOrigins
-						__experimentalIsRenderedInSidebar
-						disableCustomColors={ disableCustomColors }
-						disableCustomGradients={ disableCustomGradients }
-						enableAlpha
-						settings={ borderColorSettings }
+					<BorderBoxControl
+						colors={ colors }
+						enableAlpha={ true }
+						onChange={ onBorderChange }
+						showStyle={ showBorderStyle }
+						value={ border }
+						popoverPlacement="left-start"
+						popoverOffset={ 40 }
+						__experimentalHasMultipleOrigins={ true }
+						__experimentalIsRenderedInSidebar={ true }
 					/>
 				</ToolsPanelItem>
 			) }
@@ -202,12 +193,14 @@ export default function BorderPanel( { name } ) {
 				<ToolsPanelItem
 					hasValue={ hasBorderRadius }
 					label={ __( 'Radius' ) }
-					onDeselect={ createResetCallback( setBorderRadius ) }
+					onDeselect={ () => setBorderRadius( undefined ) }
 					isShownByDefault={ true }
 				>
 					<BorderRadiusControl
 						values={ borderRadiusValues }
-						onChange={ handleOnChange( setBorderRadius ) }
+						onChange={ ( value ) => {
+							setBorderRadius( value || undefined );
+						} }
 					/>
 				</ToolsPanelItem>
 			) }