From 4aff99a54578c29d8ec0129a65acd5b5fea89d96 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 17 Jan 2025 16:00:15 +1100 Subject: [PATCH 1/6] Button block: add border support --- .../extensions/blocks/button/button.php | 20 +++++++++++++++++++ .../jetpack/extensions/blocks/button/edit.js | 7 +++++-- .../jetpack/extensions/blocks/button/index.js | 13 ++++++++++++ .../jetpack/extensions/blocks/button/save.js | 5 +++++ 4 files changed, 43 insertions(+), 2 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/button/button.php b/projects/plugins/jetpack/extensions/blocks/button/button.php index cca7a513bc229..68cf7521e85c0 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/button.php +++ b/projects/plugins/jetpack/extensions/blocks/button/button.php @@ -171,6 +171,10 @@ 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'] ); + $has_named_border_color = array_key_exists( 'borderColor', $attributes ); + $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'] ); if ( $has_font_family ) { $styles[] = sprintf( 'font-family: %s;', $attributes['fontFamily'] ); @@ -211,6 +215,22 @@ function get_button_styles( $attributes ) { $styles[] = 'max-width: 100%'; } + if ( $has_named_border_color ) { + $styles[] = sprintf( 'border-color: %s;', $attributes['borderColor'] ); + } + + if ( $has_custom_border_color ) { + $styles[] = sprintf( 'border-color: %s;', $attributes['style']['border']['color'] ); + } + + if ( $has_border_style ) { + $styles[] = sprintf( 'border-style: %s;', $attributes['style']['border']['style'] ); + } + + if ( $has_border_width ) { + $styles[] = sprintf( 'border-width: %s;', $attributes['style']['border']['width'] ); + } + return implode( ' ', $styles ); } diff --git a/projects/plugins/jetpack/extensions/blocks/button/edit.js b/projects/plugins/jetpack/extensions/blocks/button/edit.js index c1d57607b21c3..7143ef8ca9e8f 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/edit.js +++ b/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'; @@ -20,7 +21,6 @@ export function ButtonEdit( props ) { props; const { borderRadius, element, placeholder, text, width, fontSize } = attributes; const isWidthSetOnParentBlock = 'jetpack/parentBlockWidth' in context; - usePassthroughAttributes( { attributes, clientId, setAttributes } ); useWidth( { attributes, disableEffects: isWidthSetOnParentBlock, setAttributes } ); @@ -41,7 +41,9 @@ export function ButtonEdit( props ) { className: clsx( 'wp-block-button', className ), } ); - 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, @@ -61,6 +63,7 @@ export function ButtonEdit( props ) { color: textColor.color, borderRadius: borderRadius ? borderRadius + 'px' : undefined, width, + ...borderProps.style, }; return ( diff --git a/projects/plugins/jetpack/extensions/blocks/button/index.js b/projects/plugins/jetpack/extensions/blocks/button/index.js index 43349a3b60fa1..fd66f5cc0d9ba 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/index.js +++ b/projects/plugins/jetpack/extensions/blocks/button/index.js @@ -25,6 +25,19 @@ export const settings = { fontSize: true, }, }, + __experimentalBorder: { + color: true, + radius: true, + style: true, + width: true, + __experimentalSkipSerialization: true, + __experimentalDefaultControls: { + color: true, + radius: true, + style: true, + width: true, + }, + }, }, styles: [ { name: 'fill', label: __( 'Fill', 'jetpack' ), isDefault: true }, diff --git a/projects/plugins/jetpack/extensions/blocks/button/save.js b/projects/plugins/jetpack/extensions/blocks/button/save.js index 62c8b05500fee..8c3cdbc1c7fa7 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/save.js +++ b/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 ( From f1393dd9db45f5707334890f74ae2be0e11c9047 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 17 Jan 2025 16:03:49 +1100 Subject: [PATCH 2/6] changelog --- .../plugins/jetpack/changelog/add-button-block-border-support | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/add-button-block-border-support diff --git a/projects/plugins/jetpack/changelog/add-button-block-border-support b/projects/plugins/jetpack/changelog/add-button-block-border-support new file mode 100644 index 0000000000000..d5622183ae081 --- /dev/null +++ b/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. From 14d93ac20fed92231c1fedbfb679921698af2822 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 21 Jan 2025 16:23:05 +1100 Subject: [PATCH 3/6] Add per-side support and remove duplicate radius --- .../extensions/blocks/button/button.php | 30 ++++++++++++++----- .../jetpack/extensions/blocks/button/index.js | 2 -- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/button/button.php b/projects/plugins/jetpack/extensions/blocks/button/button.php index 68cf7521e85c0..5567e6a960189 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/button.php +++ b/projects/plugins/jetpack/extensions/blocks/button/button.php @@ -171,10 +171,12 @@ 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_named_border_color = array_key_exists( 'borderColor', $attributes ); $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'] ); @@ -216,19 +218,33 @@ function get_button_styles( $attributes ) { } if ( $has_named_border_color ) { - $styles[] = sprintf( 'border-color: %s;', $attributes['borderColor'] ); - } - - if ( $has_custom_border_color ) { - $styles[] = sprintf( 'border-color: %s;', $attributes['style']['border']['color'] ); + $border_styles['color'] = sprintf( 'border-color: %s;', $attributes['borderColor'] ); + } elseif ( $has_custom_border_color ) { + $border_styles['color'] = sprintf( 'border-color: %s;', $attributes['style']['border']['color'] ); } if ( $has_border_style ) { - $styles[] = sprintf( 'border-style: %s;', $attributes['style']['border']['style'] ); + $border_styles['style'] = sprintf( 'border-style: %s;', $attributes['style']['border']['style'] ); } if ( $has_border_width ) { - $styles[] = sprintf( 'border-width: %s;', $attributes['style']['border']['width'] ); + $border_styles['width'] = sprintf( 'border-width: %s;', $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' => isset( $border['width'] ) ? $border['width'] : null, + 'color' => isset( $border['color'] ) ? $border['color'] : null, + 'style' => isset( $border['style'] ) ? $border['style'] : null, + ); + $border_styles[ $side ] = $border_side_values; + } + } + + if ( isset( wp_style_engine_get_styles( array( 'border' => $border_styles ) )['css'] ) ) { + $styles[] = wp_style_engine_get_styles( array( 'border' => $border_styles ) )['css']; } return implode( ' ', $styles ); diff --git a/projects/plugins/jetpack/extensions/blocks/button/index.js b/projects/plugins/jetpack/extensions/blocks/button/index.js index fd66f5cc0d9ba..7b5cbeea5b247 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/index.js +++ b/projects/plugins/jetpack/extensions/blocks/button/index.js @@ -27,13 +27,11 @@ export const settings = { }, __experimentalBorder: { color: true, - radius: true, style: true, width: true, __experimentalSkipSerialization: true, __experimentalDefaultControls: { color: true, - radius: true, style: true, width: true, }, From a18d0de01b49e00096d4562053a74fa923289384 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 21 Jan 2025 16:41:21 +1100 Subject: [PATCH 4/6] Fix shorthand properties output. --- .../plugins/jetpack/extensions/blocks/button/button.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/button/button.php b/projects/plugins/jetpack/extensions/blocks/button/button.php index 5567e6a960189..c223f70ef53a9 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/button.php +++ b/projects/plugins/jetpack/extensions/blocks/button/button.php @@ -218,17 +218,17 @@ function get_button_styles( $attributes ) { } if ( $has_named_border_color ) { - $border_styles['color'] = sprintf( 'border-color: %s;', $attributes['borderColor'] ); + $border_styles['color'] = "var:preset|color|{$attributes['borderColor']}"; } elseif ( $has_custom_border_color ) { - $border_styles['color'] = sprintf( 'border-color: %s;', $attributes['style']['border']['color'] ); + $border_styles['color'] = $attributes['style']['border']['color']; } if ( $has_border_style ) { - $border_styles['style'] = sprintf( 'border-style: %s;', $attributes['style']['border']['style'] ); + $border_styles['style'] = $attributes['style']['border']['style']; } if ( $has_border_width ) { - $border_styles['width'] = sprintf( 'border-width: %s;', $attributes['style']['border']['width'] ); + $border_styles['width'] = $attributes['style']['border']['width']; } if ( $has_individual_borders ) { From fb6550a74afcf48935f82423efd06fe1853a2bf2 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 21 Jan 2025 17:02:26 +1100 Subject: [PATCH 5/6] Fix preset colors --- .../jetpack/extensions/blocks/button/button.php | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/button/button.php b/projects/plugins/jetpack/extensions/blocks/button/button.php index c223f70ef53a9..08a398d17ea7a 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/button.php +++ b/projects/plugins/jetpack/extensions/blocks/button/button.php @@ -110,6 +110,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 +128,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 || @@ -172,7 +177,6 @@ function get_button_styles( $attributes ) { $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_named_border_color = array_key_exists( 'borderColor', $attributes ); $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'] ); @@ -217,9 +221,7 @@ function get_button_styles( $attributes ) { $styles[] = 'max-width: 100%'; } - if ( $has_named_border_color ) { - $border_styles['color'] = "var:preset|color|{$attributes['borderColor']}"; - } elseif ( $has_custom_border_color ) { + if ( $has_custom_border_color ) { $border_styles['color'] = $attributes['style']['border']['color']; } From 1b988576f4e45848b628e25b440b055b43f4f817 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 22 Jan 2025 14:08:10 +1100 Subject: [PATCH 6/6] make PHPs more nicer --- .../plugins/jetpack/extensions/blocks/button/button.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/button/button.php b/projects/plugins/jetpack/extensions/blocks/button/button.php index 08a398d17ea7a..ff55e42069453 100644 --- a/projects/plugins/jetpack/extensions/blocks/button/button.php +++ b/projects/plugins/jetpack/extensions/blocks/button/button.php @@ -237,9 +237,9 @@ function get_button_styles( $attributes ) { foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) { $border = $attributes['style']['border'][ $side ] ?? null; $border_side_values = array( - 'width' => isset( $border['width'] ) ? $border['width'] : null, - 'color' => isset( $border['color'] ) ? $border['color'] : null, - 'style' => isset( $border['style'] ) ? $border['style'] : null, + 'width' => $border['width'] ?? null, + 'color' => $border['color'] ?? null, + 'style' => $border['style'] ?? null, ); $border_styles[ $side ] = $border_side_values; }