Add/button block border support #41147

tellthemachines · 2025-01-17T05:09:05Z

Fixes #40696

Proposed changes:

Adds border support to the Buttons block.

WIP - perhaps should add shadow support too? It's not explicit in the original issue.

Not sure if tests are applicable for this change. Guidance appreciated! It's my first PR to this repo 😊

I tested these changes locally by building the Jetpack env as per these instructions.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Open the post editor and add a Form block. Choose any variation.
Select the submit button, and in the block sidebar switch to the "Styles" tab.
Check that the Border controls are there, and try adding some values.
Save and check that the border displays the same in editor and front end.

github-actions · 2025-01-17T05:09:50Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/button-block-border-support branch.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/button-block-border-support

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-01-17T05:10:01Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Choose a review path based on your changes:
- A. Team Review: add the "[Status] Needs Team Review" label
  - For most changes, including minor cross-team impacts.
  - Example: Updating a team-specific component or a small change to a shared library.
- B. Crew Review: add the "[Status] Needs Review" label
  - For significant changes to core functionality.
  - Example: Major updates to a shared library or complex features.
- C. Both: Start with Team, then request Crew
  - For complex changes or when you need extra confidence.
  - Example: Refactor affecting multiple systems.
Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly. The next release is scheduled for February 4, 2025 (scheduled code freeze on February 4, 2025).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

aaronrobertshaw · 2025-01-17T05:36:25Z

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

+	$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'] );


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.

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

tellthemachines · 2025-01-21T00:16:51Z

I can't get the Jetpack Beta tester plugin to recognise this branch, so I'm going to switch the PR to ready to review to see if it makes a difference.

tellthemachines · 2025-01-21T05:54:35Z

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

@@ -211,6 +217,36 @@ function get_button_styles( $attributes ) {
 		$styles[] = 'max-width: 100%';
 	}

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


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.

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

tellthemachines · 2025-01-21T06:11:31Z

I've iterated on the feedback and tested the editor changes in wp.com, both on simple and atomic.

A design question about these changes: should I attempt to scrap the existing border radius control in the settings tab in favour of the native block support one? I'm not sure what back compat issues that might create.
Alternatively, it might be possible to move the existing border radius control into the styles tab. Or we could do nothing :)

tellthemachines added 2 commits January 17, 2025 16:00

Button block: add border support

4aff99a

changelog

f1393dd

github-actions bot added [Block] Button [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] In Progress labels Jan 17, 2025

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Jan 17, 2025

aaronrobertshaw reviewed Jan 17, 2025

View reviewed changes

tellthemachines added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Team Review labels Jan 20, 2025

tellthemachines marked this pull request as ready for review January 21, 2025 00:16

tellthemachines added 2 commits January 21, 2025 16:23

Add per-side support and remove duplicate radius

14d93ac

Fix shorthand properties output.

a18d0de

tellthemachines commented Jan 21, 2025

View reviewed changes

Fix preset colors

fb6550a

make PHPs more nicer

1b98857

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add/button block border support #41147

Add/button block border support #41147

tellthemachines commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

aaronrobertshaw Jan 17, 2025

tellthemachines Jan 21, 2025

tellthemachines commented Jan 21, 2025

tellthemachines Jan 21, 2025

tellthemachines Jan 21, 2025

tellthemachines commented Jan 21, 2025

Add/button block border support #41147

Are you sure you want to change the base?

Add/button block border support #41147

Conversation

tellthemachines commented Jan 17, 2025 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Jan 17, 2025 • edited Loading

github-actions bot commented Jan 17, 2025 • edited Loading

aaronrobertshaw Jan 17, 2025

Choose a reason for hiding this comment

tellthemachines Jan 21, 2025

Choose a reason for hiding this comment

tellthemachines commented Jan 21, 2025

tellthemachines Jan 21, 2025

Choose a reason for hiding this comment

tellthemachines Jan 21, 2025

Choose a reason for hiding this comment

tellthemachines commented Jan 21, 2025

tellthemachines commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading