Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add/button block border support #41147

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from
Open

Add/button block border support #41147

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4aff99a
Button block: add border support
tellthemachines Jan 17, 2025
f1393dd
changelog
tellthemachines Jan 17, 2025
14d93ac
Add per-side support and remove duplicate radius
tellthemachines Jan 21, 2025
a18d0de
Fix shorthand properties output.
tellthemachines Jan 21, 2025
fb6550a
Fix preset colors
tellthemachines Jan 21, 2025
1b98857
make PHPs more nicer
tellthemachines Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/add-button-block-border-support
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: enhancement

Added support for border width, style and color to Button block.
36 changes: 36 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/button/button.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,12 @@
$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'] );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The border block support also allows "per-side" or split borders e.g. border-top, border-left etc.

The style engine's get styles function will convert a style object to the appropriate CSS classes and inline styles. Here's core's version, wp_style_engine_get_styles, and Gutenberg's.

An example of its use can be found in the border block support linked above. The results are effectively the same as those on the JS side via useBorderProps.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated to add styles for each individual side, based on the Gutenberg border supports you linked above.

$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'] );
Expand Down Expand Up @@ -211,6 +217,36 @@
$styles[] = 'max-width: 100%';
}

if ( $has_named_border_color ) {
$border_styles['color'] = "var:preset|color|{$attributes['borderColor']}";
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem to be working, although looking at the style engine output, $attributes['borderColor'] only contains the last bit of the preset string.
Looking at what's happening over in core, that particular style doesn't seem to be output by the border support either; for preset colors the front end styling depends on the preset classname and its corresponding CSS rule.

I think we'll have to ensure the classname is output on the front end instead.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I've fixed it to output classname instead of styles.

} elseif ( $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' => isset( $border['width'] ) ? $border['width'] : null,

Check failure on line 238 in projects/plugins/jetpack/extensions/blocks/button/button.php

View workflow job for this annotation

GitHub Actions / Static analysis 

Plugin PhanPluginDuplicateConditionalNullCoalescing "isset(X) ? X : Y" can usually be simplified to "X ?? Y" in PHP 7. The duplicated expression X was $border['width']
'color' => isset( $border['color'] ) ? $border['color'] : null,

Check failure on line 239 in projects/plugins/jetpack/extensions/blocks/button/button.php

View workflow job for this annotation

GitHub Actions / Static analysis 

Plugin PhanPluginDuplicateConditionalNullCoalescing "isset(X) ? X : Y" can usually be simplified to "X ?? Y" in PHP 7. The duplicated expression X was $border['color']
'style' => isset( $border['style'] ) ? $border['style'] : null,

Check failure on line 240 in projects/plugins/jetpack/extensions/blocks/button/button.php

View workflow job for this annotation

GitHub Actions / Static analysis 

Plugin PhanPluginDuplicateConditionalNullCoalescing "isset(X) ? X : Y" can usually be simplified to "X ?? Y" in PHP 7. The duplicated expression X was $border['style']
);
$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 );
}

Expand Down
7 changes: 5 additions & 2 deletions projects/plugins/jetpack/extensions/blocks/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 } );

Expand All @@ -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,
Expand All @@ -61,6 +63,7 @@ export function ButtonEdit( props ) {
color: textColor.color,
borderRadius: borderRadius ? borderRadius + 'px' : undefined,
width,
...borderProps.style,
};

return (
Expand Down
11 changes: 11 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,17 @@ 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 },
Expand Down
5 changes: 5 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/button/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 );
Expand All @@ -39,6 +42,7 @@ export default function ButtonSave( { attributes, blockName, uniqueId } ) {
'jetpack-submit-button',
className,
blockProps?.className,
borderProps.className,
{
[ `wp-block-jetpack-${ blockName }` ]: blockName,
}
Expand All @@ -64,6 +68,7 @@ export default function ButtonSave( { attributes, blockName, uniqueId } ) {
color: textClass ? undefined : customTextColor,
borderRadius: borderRadius ? borderRadius + 'px' : undefined,
width,
...borderProps.style,
};

return (
Expand Down
Loading