Fix block border color issues in bundled themes (Pullquote)

[adamwoodnz]

This PR fixes issues with block border colors in the bundled Twenty Twenty One, Twenty Twenty and Twenty Nineteen themes, in particular the Pullquote block.

Currently when a border color is set from the theme color palette for a Pullquote block, it is shown in the editor but not on the frontend. This includes when these colors are changed through the customizer. Custom colors selected through the border color block setting are applied correctly.

Style rules have been added targeting classes already applied to the blocks, eg. .has-primary-border-color. As such the effects will not be limited to the Pullquote block, but I'm yet to find another block affected.

Closes https://core.trac.wordpress.org/ticket/55974

NOTE: Testing notes on the ticket also mention that there are issues with Twenty Sixteen and Twenty Fifteen, but this PR does not address those.

Screenshots

Twenty Twenty One

Editor default	Frontend default

Twenty Twenty

Editor default	Frontend default	Editor customized	Frontend customized

Twenty Nineteen

Editor default	Frontend default	Editor customized	Frontend customized

Testing

Tested in Chrome, Firefox, Safari and Edge on MacOS.

Steps
For each of the themes Twenty Twenty One, Twenty Twenty and Twenty Nineteen:

Default colors

1. Create a post with a Pullquote block
2. Set the border color of the Pullquote using the block options
3. Ensure the border color is displayed in the editor
4. Publish the post and ensure the border color is displayed in the frontend

Customized theme colors (not supported in Twenty Twenty One)

1. Go to the theme customizer and customize any of the colors allowed by the theme
2. Return to your post and check that both the editor and the published post use the customized theme color

Custom block colors

1. Set a custom color for the selected block using the block border settings, eg. enter #FF0000
2. Return to your post and check that both the editor and frontend use the same custom color

[github-actions]

Hi @adamwoodnz! 👋

Thank you for your contribution to WordPress! 💖

It looks like this is your first pull request to wordpress-develop. Here are a few things to be aware of that may help you out!

No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description.

Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making.

More information about how GitHub pull requests can be used to contribute to WordPress can be found in this blog post.

Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook.

If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook.

The Developer Hub also documents the various coding standards that are followed:

• PHP Coding Standards
• CSS Coding Standards
• HTML Coding Standards
• JavaScript Coding Standards
• Accessibility Coding Standards
• Inline Documentation Standards

Thank you,
The WordPress Project

[carolinan]

Thank you for continuing the work on this feature.
I want to add that from WordPress 6.3, themes can opt-in to the block border support with: add_theme_support( 'border' );
I think the default themes (non block themes) should use this theme support.

The CSS changes are still needed. I have opened a related issue in the Gutenberg GitHub repo:
WordPress/gutenberg#52864

[adamwoodnz]

You're welcome!

I want to add that from WordPress 6.3, themes can opt-in to the block border support with: add_theme_support( 'border' );
I think the default themes (non block themes) should use this theme support.

To be clear; do you mean there is more work to do in this PR?

[carolinan]

Yes I think the theme support should be added to the functions.php files setup functions. Otherwise the user can not take full advantage of the CSS border changes?

[adamwoodnz]

Otherwise the user can not take full advantage of the CSS border changes?

So will that mean that any block that supports border added in these themes, will now get border controls displayed? How far back do you think we should add this support.. beyond twentynineteen?

[adamwoodnz]

So will that mean that any block that supports border added in these themes, will now get border controls displayed?

Ah yes I can see this working after adding it.

[carolinan]

Lets start with these 3 themes because the PR has the potential to grow too big.

[adamwoodnz]

Discovered that twentytwenty actually has border styles off for the pullquote block. It seems that the fix should be to disable the controls in that scenario.

It also has no padding so if you change background color it doesn't look great:

We could allow border and improve the styling by changing the styles to something like:

.editor-styles-wrapper .wp-block-pullquote {
	color: inherit;
	position: relative;
	text-align: center;
}

.editor-styles-wrapper .wp-block-pullquote:not(.has-border-color):not([style*=border-width]) {
	border: none;
	padding: 0;
}

Thoughts @carolinan ?

[adamwoodnz]

Discovered that twentytwenty actually has border styles off for the pullquote block. It seems that the fix should be to disable the controls in that scenario.

I was wrong this was only in the editor. Added a fix to add editor support. Haven't addressed padding.

[adamwoodnz]

I've now tested the 3 themes with pullquote and group blocks, including changing colors with customizer and custom block colors, and I believe all are working as expected. Are there any other blocks in particular that you think warrant testing?

[adamwoodnz]

These E2E tests seem very flaky; failures due to TimeoutError: Navigation timeout of 30000 ms exceeded seem very common on https://github.com/WordPress/wordpress-develop/actions/workflows/end-to-end-tests.yml

[adamwoodnz]

I've just rebased again @carolinan, are you able to give this another review please? Pretty keen to get this wrapped up 🙂