Add/button block border support

projects/plugins/jetpack/changelog/add-button-block-border-support

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Added support for border width, style and color to Button block.

projects/plugins/jetpack/extensions/blocks/button/button.php

@@ -26,6 +26,9 @@ function register_block() {
 		array(
 			'render_callback' => __NAMESPACE__ . '\render_block',
 			'uses_context'    => array( 'jetpack/parentBlockWidth' ),
+			'selectors'       => array(
+				'border' => '.wp-block-jetpack-button .wp-block-button__link',
+			),
 		)
 	);
 }
@@ -110,6 +113,7 @@ function get_button_classes( $attributes ) {
 	$has_custom_gradient         = array_key_exists( 'customGradient', $attributes );
 	$has_border_radius           = array_key_exists( 'borderRadius', $attributes );
 	$has_font_size               = array_key_exists( 'fontSize', $attributes );
+	$has_named_border_color      = array_key_exists( 'borderColor', $attributes );
 
 	if ( $has_font_size ) {
 		$classes[] = 'has-' . $attributes['fontSize'] . '-font-size';
@@ -127,6 +131,10 @@ function get_button_classes( $attributes ) {
 		$classes[] = sprintf( 'has-%s-color', $attributes['textColor'] );
 	}
 
+	if ( $has_named_border_color ) {
+		$classes[] = sprintf( 'has-%s-border-color', $attributes['borderColor'] );
+	}
+
 	if (
 		$has_named_background_color ||
 		$has_custom_background_color ||
@@ -170,6 +178,11 @@ function get_button_styles( $attributes ) {
 	$has_typography_styles       = array_key_exists( 'style', $attributes ) && array_key_exists( 'typography', $attributes['style'] );
 	$has_custom_font_size        = $has_typography_styles && array_key_exists( 'fontSize', $attributes['style']['typography'] );
 	$has_custom_text_transform   = $has_typography_styles && array_key_exists( 'textTransform', $attributes['style']['typography'] );
+	$border_styles               = array();
+	$has_custom_border_color     = array_key_exists( 'style', $attributes ) && array_key_exists( 'border', $attributes['style'] ) && array_key_exists( 'color', $attributes['style']['border'] );
+	$has_border_style            = array_key_exists( 'style', $attributes ) && array_key_exists( 'border', $attributes['style'] ) && array_key_exists( 'style', $attributes['style']['border'] );
+	$has_border_width            = array_key_exists( 'style', $attributes ) && array_key_exists( 'border', $attributes['style'] ) && array_key_exists( 'width', $attributes['style']['border'] );
+	$has_individual_borders      = array_key_exists( 'style', $attributes ) && array_key_exists( 'border', $attributes['style'] ) && ( array_key_exists( 'top', $attributes['style']['border'] ) || array_key_exists( 'right', $attributes['style']['border'] ) || array_key_exists( 'bottom', $attributes['style']['border'] ) || array_key_exists( 'left', $attributes['style']['border'] ) );
 
 	if ( $has_font_family ) {
 		$styles[] = sprintf( 'font-family: %s;', $attributes['fontFamily'] );
@@ -205,6 +218,35 @@ function get_button_styles( $attributes ) {
 		$styles[] = sprintf( 'border-radius: %spx;', $attributes['borderRadius'] );
 	}
 
+	if ( $has_custom_border_color ) {
+		$border_styles['color'] = $attributes['style']['border']['color'];
+	}
+
+	if ( $has_border_style ) {
+		$border_styles['style'] = $attributes['style']['border']['style'];
+	}
+
+	if ( $has_border_width ) {
+		$border_styles['width'] = $attributes['style']['border']['width'];
+	}
+
+	if ( $has_individual_borders ) {
+		foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) {
+			$border                 = $attributes['style']['border'][ $side ] ?? null;
+			$border_side_values     = array(
+				'width' => $border['width'] ?? null,
+				'color' => $border['color'] ?? null,
+				'style' => $border['style'] ?? null,
+			);
+			$border_styles[ $side ] = $border_side_values;
+		}
+	}
+
+	$border_styles = wp_style_engine_get_styles( array( 'border' => $border_styles ) );
+	if ( isset( $border_styles['css'] ) ) {
+		$styles[] = $border_styles['css'];
+	}
+
 	return implode( ' ', $styles );
 }
 

projects/plugins/jetpack/extensions/blocks/button/edit.js

@@ -2,6 +2,7 @@ import {
 	InspectorControls,
 	RichText,
 	__experimentalUseGradient as useGradient, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalUseBorderProps as useBorderProps, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	withColors,
 	useBlockProps,
 } from '@wordpress/block-editor';
@@ -17,7 +18,6 @@ import './editor.scss';
 export function ButtonEdit( props ) {
 	const { attributes, backgroundColor, className, clientId, setAttributes, textColor } = props;
 	const { borderRadius, element, placeholder, text, width, fontSize } = attributes;
-
 	usePassthroughAttributes( { attributes, clientId, setAttributes } );
 
 	/* eslint-disable react-hooks/rules-of-hooks */
@@ -40,7 +40,9 @@ export function ButtonEdit( props ) {
 
 	const [ fallbackColors, textRef ] = useFallbackColors();
 
-	const buttonClasses = clsx( 'wp-block-button__link', {
+	const borderProps = useBorderProps( attributes );
+
+	const buttonClasses = clsx( 'wp-block-button__link', borderProps.className, {
 		'has-background': backgroundColor.color || gradientValue,
 		[ backgroundColor.class ]: ! gradientValue && backgroundColor.class,
 		'has-text-color': textColor.color,
@@ -58,6 +60,7 @@ export function ButtonEdit( props ) {
 		fontSize: attributes.style?.typography?.fontSize,
 		color: textColor.color,
 		borderRadius: borderRadius ? borderRadius + 'px' : undefined,
+		...borderProps.style,
 	};
 
 	return (

projects/plugins/jetpack/extensions/blocks/button/index.js

@@ -25,11 +25,25 @@ export const settings = {
 				fontSize: true,
 			},
 		},
+		__experimentalBorder: {
+			color: true,
+			style: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				style: true,
+				width: true,
+			},
+		},
 	},
 	styles: [
 		{ name: 'fill', label: __( 'Fill', 'jetpack' ), isDefault: true },
 		{ name: 'outline', label: __( 'Outline', 'jetpack' ) },
 	],
+	selectors: {
+		border: '.wp-block-jetpack-button .wp-block-button__link',
+	},
 	attributes,
 	edit,
 	save,

projects/plugins/jetpack/extensions/blocks/button/save.js

@@ -1,6 +1,7 @@
 import {
 	getColorClassName,
 	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
@@ -30,6 +31,8 @@ export default function ButtonSave( { attributes, blockName, uniqueId } ) {
 
 	const blockProps = useBlockProps.save();
 
+	const borderProps = getBorderClassesAndStyles( attributes );
+
 	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
 	const gradientClass = IS_GRADIENT_AVAILABLE ? getGradientClass( gradient ) : undefined;
 	const textClass = getColorClassName( 'color', textColor );
@@ -39,6 +42,7 @@ export default function ButtonSave( { attributes, blockName, uniqueId } ) {
 		'jetpack-submit-button',
 		className,
 		blockProps?.className,
+		borderProps.className,
 		{
 			[ `wp-block-jetpack-${ blockName }` ]: blockName,
 		}
@@ -64,6 +68,7 @@ export default function ButtonSave( { attributes, blockName, uniqueId } ) {
 		color: textClass ? undefined : customTextColor,
 		borderRadius: borderRadius ? borderRadius + 'px' : undefined,
 		width,
+		...borderProps.style,
 	};
 
 	return (

projects/plugins/jetpack/extensions/blocks/button/view.scss

@@ -17,8 +17,8 @@
 		border: solid 1px currentColor;
 		color: currentColor;
 	}
-
-	&:not(.is-style-outline) button {
-		border: none;
-	}
+	
+	:where(&:not(.is-style-outline) button) {
+ 		border: none;
+ 	}
 }