Block Support: Add border radius support #25791

aaronrobertshaw · 2020-10-02T13:47:54Z

Description

Background

To allow designers to produce different kinds of patterns using different blocks there is a need to provide control over a block's border radius. Some example use cases are:

Initially, this was attempted via an adhoc approach adding the feature directly to the search block #25553. This PR adds border radius to the block support tools so that it may be leveraged by other blocks.

The intention is to also expand this to include border width and style options. There is also the possibility to allow selection of which borders show i.e. all, top, right, bottom, left, none.

Changes

Adds new block support for borders similar to the typography and color tools
Adds border radius hook to the borders support providing; inspector controls, attributes and styles

How has this been tested?

Tests:

packages/block-editor/src/hooks/tests/style.js

Manually, by opting in to border radius support for test blocks such as the group and image blocks.

Testing Setup

To be able to manually test this you will need a block that has opted into the border radius support. The group block is probably easiest to do this with and will be used in the testing instructions that follow.

To opt into border radius support for the group block simply add into the supports setting in
packages/block-library/src/group/block.json the following code:

        "__experimentalBorder": {
            "radius": true
        }

Testing Instructions

Create a new post and add a group block, setting a prominent background color on the group
Selecting the group block, in the inspector panel, drag the border radius slider and confirm the block reflects this
Type a border radius value into the text input and confirm that is reflected
Click the reset button and there should no longer be a border radius applied to the block
Set a border radius value again and then save the post
Confirm border radius values are present on the frontend

Screenshots

Types of changes

New feature.

Next Step

Update docs/designers-developers/developers/block-api/block-supports.md once stable.

Future Iterations:

Add support for border width
Add support for border style
Add support for top, right, bottom, left borders

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

simison · 2020-10-06T07:44:02Z

This will be fantastic for gallery block 🎉

glendaviesnz · 2020-10-06T22:08:03Z

This tests well for me. Although it does make for a large PR by including the Search block changes I think this makes it easier for testing to have an implementation included.

aaronrobertshaw · 2020-10-06T23:26:14Z

Agreed. The PR did grow larger than expected. I can split this into two to make it easier to review if you'd like.

glendaviesnz · 2020-10-06T23:50:39Z

Agreed. The PR did grow larger than expected. I can split this into two to make it easier to review if you'd like.

I find it easier to review with the search block implementation included.

lib/experimental-default-theme.json

packages/block-library/src/search/block.json

stokesman · 2020-10-30T05:34:15Z

Seems like something that really ought to be implemented. For one thing, this is how the border-radius on buttons should be made available since some folks definitely want to be able to disable that #19796.

Also, here's a few feature requests that would be facilitated by the block supports work in this PR: #26556 #26559.

aaronrobertshaw · 2020-10-30T07:06:48Z

Since this PR was created, block support has evolved quite a bit. I've rebased this and updated it to work with the latest approach to providing block support.

It would be great if someone can give this another review.

aaronrobertshaw · 2020-11-10T05:03:58Z

Additional collapsible panels are added when an existing one doesn't seem appropriate
In being given a whole panel with just one control inside, those controls are given prominence that isn't deserved

For a little background here, the border settings panel was added to contain more than just the border radius in the future. The idea being we might allow for border width, style and so on as well. The block support feature was also structured with this future in mind.

In the meantime, I can correct the panel title to use sentence case. The ordering of the panel to match other blocks might be a little trickier

I've updated this to use sentence case for the border radius panel title, its field label and the "Display settings" panel for consistency.

Unfortunately, I do not see an easy solution at the moment for standardising the order or position of the panels in the inspector controls.

Besides different blocks requiring display of differing settings panels, the addition of these panels is segmented. Presently, any panels being injected via hooks appear before those added ad-hoc per block. Block styles are slightly different but they will be added before any other panels, if the block defines them.

I don't think this should block this PR but we can certainly put a hold on future additions until we have a resolution on how to proceed in a consistent, scalable manner.

apeatling · 2020-11-10T15:31:28Z

I would not do this, though. The block itself is the primary interface, and anything you put in the sidebar should be considered secondary. While there's an argument to be made that some of those configurations could be secondary. So I'd keep the items in the toolbar as they are now, even if those options could use some systematization and cleanup separately.

+1 on considering the sidebar as secondary. We've seen in almost all user tests on WordPress.com that users have a hard time finding anything for a block in the sidebar. They go scanning the block toolbar looking for anything related to block settings. Making the block toolbar the primary interface and only falling back to the sidebar for lesser used or power settings makes the most sense to me. /cc @paaljoachim

aaronrobertshaw · 2020-11-24T07:42:01Z

@aristath I've created a PR (#27220) to add a "rounded" block style for the search block. Does this fit with what you envisioned?

If the block style approach is acceptable, I can remove the search block related changes from this PR. The question then is should we still add border radius block support? Others have expressed some interest in this and it does provide an initial base to which border width support etc can also be added.

Ultimately, do we proceed with this PR or abandon it?

cc @apeatling @glendaviesnz

paaljoachim · 2020-11-24T10:30:33Z

(If I understood this correctly...)

Border radius control feels more like a standard control that can be added to various blocks where the user can choose how much by slider or number to curve the corners of a block.

I feel that styles is more of a unique layout option not easily accomplished by separate controls.
One could of course adjust the Social Links icon block and remove the pill shape and instead add in a border radius control.

Here is an example from the Buttons block using Twenty Twenty theme:

It uses the Border Radius slider control.

The Search block could also add the slider control.

aristath · 2020-11-24T11:17:16Z

@aristath I've created a PR (#27220) to add a "rounded" block style for the search block. Does this fit with what you envisioned?

Yes, that is exactly what I envisioned! ❤️

apeatling · 2020-12-04T16:08:38Z

I think we should completely separate adding border radius block support to Gutenberg, and how it is used on the search block. Let's merge the block support here and remove search block changes.

From my perspective the border support is very important to allow designers to produce different kinds of patterns using different blocks (examples here). I would include the search block in that as well, as more patterns are created for site headers for example.

Border block support has been added following the examples set by the Typography tools and Colors support. This is intended to be extended later to include border width as an option as well.

aaronrobertshaw · 2020-12-07T05:59:12Z

I've rebased this again and removed the changes to the search block. The PR description has been updated to reflect the current state of the PR along with new testing instructions.

aaronrobertshaw · 2020-12-07T08:03:27Z

There is now also a new PR containing the changes to the search block for it to opt into the border radius support and adjust inner radii etc. aaronrobertshaw#1

Once this PR is accepted and merged I'll update the new PR accordingly.

mcsf

@aaronrobertshaw: nice work, thanks for moving the Search Block work out of this PR and keeping it to the point. I'm tempted to 👍 this, but would like a second opinion before merging.

mcsf · 2020-12-09T11:41:42Z

packages/block-editor/src/hooks/border.js

+ const configs = [ useIsBorderRadiusDisabled( props ) ];
+ return configs.filter( Boolean ).length === configs.length;


Suggested change

const configs = [ useIsBorderRadiusDisabled( props ) ];

return configs.filter( Boolean ).length === configs.length;

return [ useIsBorderRadiusDisabled( props ) ].every( Boolean );

mcsf · 2020-12-09T11:43:22Z

packages/block-editor/src/hooks/border.js

+
+ // Further border properties to be added in future iterations.
+ // e.g. support && ( support.radius || support.width || support.style )
+ return true === support || ( support && support.radius );


Suggested change

return true === support || ( support && support.radius );

return true === support || support?.radius;

If you care about the return type being boolean:

Suggested change

return true === support || ( support && support.radius );

return !! ( true === support || support?.radius );

mcsf · 2020-12-09T11:45:30Z

packages/block-editor/src/hooks/border-radius.js

+ */
+export function hasBorderRadiusSupport( blockType ) {
+ const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
+ return true === support || ( support && !! support.radius );


Suggested change

return true === support || ( support && !! support.radius );

return !! ( true === support || support?.radius );

apeatling

Looks great @aaronrobertshaw, thanks for separating out the search block implementation.

oandregal · 2020-12-23T09:54:12Z

I've added the "Needs Dev Note" in this issue so we don't forget to create a Dev Note for WP 5.7 for this kind of change: list all the new style properties that were added to blocks and users can update. This should be useful for themes and plugins to check whether they need to adapt anything. Hat tip to Riad for the suggestion.

oandregal · 2021-01-19T10:48:33Z

lib/class-wp-theme-json.php

@@ -50,6 +50,7 @@ class WP_Theme_JSON {
 '--wp--style--color--link',
 'background',
 'backgroundColor',
+ 'border',


The values on this array need to be the name of the property as they appear in the PROPERTIES_METADATA, so this should have been borderRadius. There's a couple of other things I'd like to share:

these styles are attached to the :root element, so I'm not sure borderRadius makes a lot of sense here

the global styles sidebar doesn't have a corresponding UI control for the user to tweak this property ― neither for the global or the group block.

In #28320 I'm removing the support for borderRadius for the root element but could also just rename the property to fix the issue.

@aaronrobertshaw would you be available to create a follow-up PR that adds the radius control to the global styles sidebar if the block supports it?

@nosolosw thank you for the explanation. I agree, a border-radius value on :root doesn't make a lot of sense.

It was suggested via feedback on other border radius related PRs that there should be a "global" border radius value that themes could use or supply to achieve a more consistent visual result. I mention this as having the border radius as a CSS variable on the :root selector would help achieve this.

In #27991 I've used a similar approach adding a CSS variable for the border radius so that inner elements could adjust the value to keep uniform spacing between their border and their parent's.

It would be great to get your thoughts on that PR if you can spare the time.

@aaronrobertshaw would you be available to create a follow-up PR that adds the radius control to the global styles sidebar if the block supports it?

I can do however I had been advised to avoid adding any further sidebar controls until #27331 lands. Complicating matters and the UI, there are also requests to include support for other border properties such as width and style. I realise these aren't in place at the moment, just mentioning as they seemed to have contributed to the decision to hold off adding extra controls.

Again, I'm happy to do the follow-up if you can confirm I'm ok to do so.

I've left my comments on #27991 and #27664 (comment)

I can do however I had been advised to avoid adding any further sidebar controls until #27331 lands. Complicating matters and the UI, there are also requests to include support for other border properties such as width and style. I realise these aren't in place at the moment, just mentioning as they seemed to have contributed to the decision to hold off adding extra controls.

Can you fill me up a bit on this?

Would it work if we add the UI control for the GS sidebar but we keep the customRadius to false? That way we have the support built-in, themes can use it via theme.json but users won't see the controls. Same for the other border properties.

I have a PR up adding the border radius controls to the global styles sidebar #28346

Can you fill me up a bit on this?

Some extra background on past discussions regarding controls for border related support can be found in #21540 (comment).

I'm happy to change approach. Whatever we need to get the best result.

oandregal · 2021-01-29T11:41:49Z

As per #28539 (comment) I've removed the "needs dev note" label from this note. Sorry about the confusion!

aaronrobertshaw force-pushed the try/border-radius-block-support branch from ab98b18 to c0b6ac0 Compare October 6, 2020 00:23

aaronrobertshaw changed the title ~~[WIP] Block Support Flag: Add border radius support and use for search block~~ Block Support: Add border radius support and use for search block Oct 6, 2020

aaronrobertshaw marked this pull request as ready for review October 6, 2020 07:22

aaronrobertshaw requested review from ajitbohra, ellatrix, Soean, spacedmonkey, talldan, TimothyBJacobs and youknowriad as code owners October 6, 2020 07:22

aaronrobertshaw mentioned this pull request Oct 6, 2020

Search Block: Add support for setting the border radius #25553

Closed

6 tasks

This comment has been minimized.

Sign in to view

apeatling requested review from oandregal and youknowriad and removed request for youknowriad October 7, 2020 23:11

apeatling assigned aaronrobertshaw Oct 7, 2020

apeatling added Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Block] Search Affects the Search Block - used to display a search field [Type] Enhancement A suggestion for improvement. labels Oct 7, 2020

oandregal added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Oct 8, 2020

oandregal reviewed Oct 8, 2020

View reviewed changes

lib/experimental-default-theme.json Outdated Show resolved Hide resolved

oandregal reviewed Oct 8, 2020

View reviewed changes

packages/block-library/src/search/block.json Outdated Show resolved Hide resolved

stacimc mentioned this pull request Oct 12, 2020

Add initial block support for width #26045

Closed

7 tasks

aaronrobertshaw force-pushed the try/border-radius-block-support branch from ae08944 to 092af28 Compare October 30, 2020 06:57

aaronrobertshaw mentioned this pull request Nov 24, 2020

Search Block: Add rounded block style #27220

Closed

6 tasks

aaronrobertshaw force-pushed the try/border-radius-block-support branch from c8d807b to 1d91e59 Compare November 25, 2020 05:27

scruffian mentioned this pull request Nov 26, 2020

Twenty Twenty-One Blocks: Migrate over default block styles as theme.json settings. WordPress/theme-experiments#82

Open

53 tasks

Add block support for borders

9ab1671

Border block support has been added following the examples set by the Typography tools and Colors support. This is intended to be extended later to include border width as an option as well.

aaronrobertshaw force-pushed the try/border-radius-block-support branch from 225b0d6 to 9ab1671 Compare December 7, 2020 05:43

aaronrobertshaw changed the title ~~Block Support: Add border radius support and use for search block~~ Block Support: Add border radius support Dec 7, 2020

aaronrobertshaw mentioned this pull request Dec 7, 2020

Search Block: Add border radius aaronrobertshaw/gutenberg#1

Closed

6 tasks

pbking mentioned this pull request Dec 8, 2020

Migrate CSS for Code block for TT1-block theme WordPress/theme-experiments#113

Merged

mcsf approved these changes Dec 9, 2020

View reviewed changes

apeatling approved these changes Dec 10, 2020

View reviewed changes

pbking mentioned this pull request Dec 10, 2020

TT1 Blocks: Button Block: Migrate CSS to theme.json WordPress/theme-experiments#114

Open

aaronrobertshaw merged commit 229beaa into WordPress:master Dec 11, 2020

github-actions bot added this to the Gutenberg 9.6 milestone Dec 11, 2020

aaronrobertshaw mentioned this pull request Dec 11, 2020

Search Block: Add border radius #27664

Closed

6 tasks

pbking mentioned this pull request Dec 16, 2020

Allow borders on image, group, cover blocks #21540

Closed

oandregal added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Dec 23, 2020

oandregal reviewed Jan 19, 2021

View reviewed changes

noisysocks mentioned this pull request Jan 28, 2021

WP 5.7 Dev Notes #28539

Closed

9 tasks

oandregal removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jan 29, 2021

oandregal mentioned this pull request Mar 8, 2021

Support for border properties #29616

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Block Support: Add border radius support #25791

Block Support: Add border radius support #25791

aaronrobertshaw commented Oct 2, 2020 •

edited

Loading

simison commented Oct 6, 2020

glendaviesnz commented Oct 6, 2020

aaronrobertshaw commented Oct 6, 2020

glendaviesnz commented Oct 6, 2020

This comment has been minimized.

stokesman commented Oct 30, 2020 •

edited

Loading

aaronrobertshaw commented Oct 30, 2020

aaronrobertshaw commented Nov 10, 2020

apeatling commented Nov 10, 2020 •

edited

Loading

aaronrobertshaw commented Nov 24, 2020

paaljoachim commented Nov 24, 2020 •

edited

Loading

aristath commented Nov 24, 2020

apeatling commented Dec 4, 2020 •

edited

Loading

aaronrobertshaw commented Dec 7, 2020

aaronrobertshaw commented Dec 7, 2020

mcsf left a comment

mcsf Dec 9, 2020

mcsf Dec 9, 2020

mcsf Dec 9, 2020

apeatling left a comment

oandregal commented Dec 23, 2020

oandregal Jan 19, 2021

aaronrobertshaw Jan 19, 2021

oandregal Jan 19, 2021

aaronrobertshaw Jan 20, 2021

oandregal commented Jan 29, 2021

		const configs = [ useIsBorderRadiusDisabled( props ) ];
		return configs.filter( Boolean ).length === configs.length;

	const configs = [ useIsBorderRadiusDisabled( props ) ];
	return configs.filter( Boolean ).length === configs.length;
	return [ useIsBorderRadiusDisabled( props ) ].every( Boolean );

	return true === support \|\| ( support && support.radius );
	return true === support \|\| support?.radius;

	return true === support \|\| ( support && support.radius );
	return !! ( true === support \|\| support?.radius );

Block Support: Add border radius support #25791

Block Support: Add border radius support #25791

Conversation

aaronrobertshaw commented Oct 2, 2020 • edited Loading

Description

Background

Changes

How has this been tested?

Testing Setup

Testing Instructions

Screenshots

Types of changes

Next Step

Future Iterations:

Checklist:

simison commented Oct 6, 2020

glendaviesnz commented Oct 6, 2020

aaronrobertshaw commented Oct 6, 2020

glendaviesnz commented Oct 6, 2020

This comment has been minimized.

stokesman commented Oct 30, 2020 • edited Loading

aaronrobertshaw commented Oct 30, 2020

aaronrobertshaw commented Nov 10, 2020

apeatling commented Nov 10, 2020 • edited Loading

aaronrobertshaw commented Nov 24, 2020

paaljoachim commented Nov 24, 2020 • edited Loading

aristath commented Nov 24, 2020

apeatling commented Dec 4, 2020 • edited Loading

aaronrobertshaw commented Dec 7, 2020

aaronrobertshaw commented Dec 7, 2020

mcsf left a comment

Choose a reason for hiding this comment

mcsf Dec 9, 2020

Choose a reason for hiding this comment

mcsf Dec 9, 2020

Choose a reason for hiding this comment

mcsf Dec 9, 2020

Choose a reason for hiding this comment

apeatling left a comment

Choose a reason for hiding this comment

oandregal commented Dec 23, 2020

oandregal Jan 19, 2021

Choose a reason for hiding this comment

aaronrobertshaw Jan 19, 2021

Choose a reason for hiding this comment

oandregal Jan 19, 2021

Choose a reason for hiding this comment

aaronrobertshaw Jan 20, 2021

Choose a reason for hiding this comment

oandregal commented Jan 29, 2021

aaronrobertshaw commented Oct 2, 2020 •

edited

Loading

stokesman commented Oct 30, 2020 •

edited

Loading

apeatling commented Nov 10, 2020 •

edited

Loading

paaljoachim commented Nov 24, 2020 •

edited

Loading

apeatling commented Dec 4, 2020 •

edited

Loading