Merge pull request #117 from bigbite/feature/border-radius-setting

[#113] - Radius not an option

src/editor/components/StylesBorder.js

@@ -1,7 +1,11 @@
 import { set } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+import {
+	Flex,
+	__experimentalBorderBoxControl as BorderBoxControl,
+} from '@wordpress/components';
+import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
 
 import getThemeOption from '../../utils/get-theme-option';
 import EditorContext from '../context/EditorContext';
@@ -22,9 +26,48 @@ const Border = ( { selector } ) => {
 		themeConfig
 	);
 
+	/**
+	 * General handler for border changes
+	 *
+	 * @param {Object} newValue - Updated border values
+	 */
 	const onChange = ( newValue ) => {
+		// If the value has a radius, we need to merge it with the new value
+		const valueRadius = value?.radius;
+		let updatedValue = newValue;
+		if ( valueRadius ) {
+			updatedValue = {
+				...newValue,
+				radius: valueRadius,
+			};
+		}
+
+		// Set the new value in the user config
+		let config = structuredClone( userConfig );
+		config = set( config, selector, updatedValue );
+		setUserConfig( config );
+	};
+
+	/**
+	 * Specific handler for radius changes
+	 *
+	 * @param {Object} newValue - Updated radius values
+	 */
+	const onRadiusChange = ( newValue ) => {
+		/**
+		 * If the updated value is an object, ensure a value is present for each radius point.
+		 * If no value is present, set it to 0.
+		 * This avoids display issues when a radius value is missing.
+		 */
+		if ( typeof newValue === 'object' ) {
+			newValue.topLeft = newValue.topLeft ?? 0;
+			newValue.topRight = newValue.topRight ?? 0;
+			newValue.bottomRight = newValue.bottomRight ?? 0;
+			newValue.bottomLeft = newValue.bottomLeft ?? 0;
+		}
+
 		let config = structuredClone( userConfig );
-		config = set( config, selector, newValue );
+		config = set( config, `${ selector }.radius`, newValue );
 		setUserConfig( config );
 	};
 
@@ -33,11 +76,24 @@ const Border = ( { selector } ) => {
 			<span className="themer--styles__item__title">
 				{ __( 'Border', 'themer' ) }
 			</span>
-			<BorderBoxControl
-				colors={ themePalette }
-				onChange={ onChange }
-				value={ value }
-			/>
+			<div className="themer--styles__item__columns themer--styles__item__columns--2">
+				<Flex direction="column" justify="flex-start">
+					<span className="themer--styles__item__label">
+						{ __( 'Border', 'themer' ) }
+					</span>
+					<BorderBoxControl
+						colors={ themePalette }
+						onChange={ onChange }
+						value={ value }
+					/>
+				</Flex>
+				<div>
+					<BorderRadiusControl
+						values={ value?.radius }
+						onChange={ ( newValue ) => onRadiusChange( newValue ) }
+					/>
+				</div>
+			</div>
 		</>
 	);
 };

src/editor/styles/components/styles.scss

@@ -53,7 +53,7 @@
 }
 
 .themer--styles__item__label {
-	font-weight: 600;
+	font-weight: 500;
 	font-size: 11px;
 	line-height: 25.4px;
 	text-transform: uppercase;