Paragraph: Add border support

[aaronrobertshaw]

Part of: #43241

What?

Adopts border support for Paragraph block.

Why?

• Offers greater design flexibility
• Improves consistency in design tooling with other blocks

How?

• Adopts all the available border block supports

Testing Instructions

• In the site editor, add a paragraph block to a page
• Style via Global Styles and confirm the editor and frontend display correctly
• Override the global styles on the block instance and confirm they display appropriately in the editor and frontend

Screenshots or screencast

Screen.Recording.2024-07-15.at.12.56.52.PM.mp4

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[andrewserong]

I went back and forth a little bit on the idea of exposing border controls for individual paragraph blocks, but overall the more I play with this, the more I like it!

My gut feeling is that in the vast majority of cases, folks won't be setting all paragraphs to have a border style of any kind in global styles, but it gets pretty fun once you start including it in block style variations. Here's a very quick demo of playing around adding a couple of style variations for notice-like paragraphs:

2024-07-17.14.55.03.mp4

A couple of block style variations for notices

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"slug": "notice-warning",
    "title": "Notice Warning",
	"blockTypes": [ "core/group", "core/paragraph" ],
	"styles": {
        "border": {
            "left": {
                "color": "red",
                "style": "solid",
                "width": "5px"
            }
        },        
		"color": {
            "background": "#fff0f0",
            "text": "#333"
		},
        "spacing": {
            "padding": {
                "top": "20px",
                "right": "20px",
                "bottom": "20px",
                "left": "20px"
            }
        }
    }
}

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"slug": "notice-success",
    "title": "Notice Success",
	"blockTypes": [ "core/group", "core/paragraph" ],
	"styles": {
        "border": {
            "left": {
                "color": "green",
                "style": "solid",
                "width": "5px"
            }
        },        
		"color": {
            "background": "#f0fff0",
            "text": "#333"
		},
        "spacing": {
            "padding": {
                "top": "20px",
                "right": "20px",
                "bottom": "20px",
                "left": "20px"
            }
        }
    }
}

Depending on the theme, it might be easier for folks to have these sorts of styles at the click of a button rather than users needing to wrap their paragraphs in Group blocks to achieve a similar result.

So this gets a 👍 vote from me. Since enabling any controls in the paragraph block makes them quite visible as it's such a common block, I'll just ping @WordPress/gutenberg-design for visibility on this one.

But particularly with theme.json-shaped block style variations now being supported in core, I think including border support for paragraphs is a great idea. And technically it's working well for me (works in global styles in the site editor, in the post editor with overrides at the instance level, and in the site frontend).

LGTM!

[aaronrobertshaw]

Thanks for the review @andrewserong, bonus points for playing with block style variations! 🥇

I had the same initial reaction regarding adopting border support on paragraphs but quickly came around as well.

A few points worth listing are:

• Not requiring users to wrap everything in a group block to get the design tooling they want is a win.
• There's a benefit to keeping the display of border controls by default the same across blocks. Without that consistency, it can be confusing for some users as what is default for one block suddenly disappears and looks to be missing on another.
• If the display of border controls are okay for other common blocks like the Group block, they should be okay here. If they aren't, perhaps there's an opportunity to improve them across the board

Just my two cents of course 🙂

[paaljoachim]

It is great to see the consistency steam engine rolling on to add additional design tools to additional blocks! Thank you @aaronrobertshaw and @andrewserong

It looks good in local Paragraph blocks as well as global Paragraph blocks!

[carolinan]

I would prefer if no more style support were added before the paragraph block has its wp-block class. Because just like the list block before it, it will affect all paragraphs, not only the paragraph block.

For example if I set a border on the paragraph block using theme.json, it affects the paragraphs used around the textarea and button in the comments/comment form blocks.

[jameskoster]

I appreciate how this increases design flexibility, it's annoying having to wrap a paragraph in a Group to achieve this.

However it is fairly niche. I wonder if the controls should be hidden by default, similar to the Dimensions panel?

[richtabor]

However it is fairly niche. I wonder if the controls should be hidden by default, similar to the Dimensions panel?

I was going to suggest the same. To set them as hidden by default, where you press the + to add a border or radius.

[aaronrobertshaw]

I would prefer if no more style support were added before the paragraph block has its wp-block class.

Thanks for the feedback @carolinan 👍

It's a little confusing but the adoption of block support in block.json for block instances is actually separate from being able to style certain features (color, typography, border etc) via theme.json. You can already style any block with any feature in theme.json.

Using trunk, add the following to your theme.json and you'll see the border:

	"styles": {
		"blocks": {
			"core/paragraph": {
				"border": {
					"width": "1em",
					"color": "blue",
					"style": "solid"
				}
			}
		}
	}

Long story short, I don't think this PR really accentuates the issue you raised.

However it is fairly niche. I wonder if the controls should be hidden by default, similar to the Dimensions panel?

I've made that change in ffe8ce7

Screen.Recording.2024-07-18.at.3.39.36.PM.mp4

With that latest tweak, any objections to landing this one?

[andrewserong]

With that latest tweak, any objections to landing this one?

None from me, I like how tucked away it is now 👍

2024-07-18.16.15.11.mp4

[aaronrobertshaw]

None from me, I like how tucked away it is now 👍

Thanks, I'll get this merged then.

Regarding the theme.json styling of paragraph blocks and its element-only selector, I'll happily help out on that as a follow-up.

[carolinan]

I would like to see a dedicated effort to getting the class name added to the block. The PR has been open for over a year without a final decision #47282

I don't think that adding new features knowing that they are not working as intended is a good idea.

[aaronrobertshaw]

I would like to see a dedicated effort to getting the class name added to the block

No arguments here 🙂

I don't think that adding new features knowing that they are not working as intended is a good idea.

I agree with not landing new features if we know they aren't working. That's part of what I was trying to explain in my last reply, the adoption of the border block support, such as in this PR, is specific to a block instance. It does work as intended.

The ability to style borders through theme.json isn't being introduced by this PR and already exists. As you note, once we can get a class name injected into the paragraph block, like heading blocks had done, the theme.json issue will be resolved. It is outside the scope of this PR though.