Theme-specific border color options for Pullquote block

[kajalgohel]

In Twenty Twenty Theme, when we add Pullquote block in editor side and add any border style after that choose border color, We can see that border color is seen in editor side. But when we see the same Pullquote block at front side, border color is not reflected.

Steps to replicate:
1: Activate the Twenty Twenty Theme
2: Add Pullquote block
3: Add border style
4: choose border color
5: Save Page/Post
6: View the page/post at front side

For better understanding I provide video attachment link.
Video URL : ​https://share.cleanshot.com/bqZzSHG6AGVy2hslSIqc

Thanks

[sabernhardt]

Out of all the bundled themes, only Twenty Twenty-Two and Twenty Seventeen show border colors from preset selections. Twenty Twenty-Two defines border colors based on global styles, and Twenty Seventeen uses the default options instead of making its own color palette.

And Twenty Nineteen specifically sets the pullquote block border color to transparent:

.entry .entry-content .wp-block-pullquote {
  border-color: transparent;
}

(If you create a custom color, though, that applies to the block as an inline style.)

This PR fixes issues in the bundled themes with block border colors, in particular the Pullquote block. In Twenty Twenty One, Twenty Twenty and Twenty Nineteen themes when a border color is set for this block, it is either not applied in the editor or the frontend, or both.

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

Testing
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
5. Repeat for each of the available default color options

Custom colors

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

[adamwood]

#57339 was marked as a duplicate.

[adamwood]

#57338 was marked as a duplicate.

[adamwood]

Retested with 6.2, state is the same:

Twenty Twenty Three

• Supports both preset colors and custom colors in editor and frontend. No fixes required.

Twenty Twenty Two

• Supports both preset colors and custom colors in editor and frontend. No fixes required.

Twenty Twenty One

• Supports custom colors in editor and frontend
• Supports preset colors (doesn't allow customizer) in editor but not frontend

Twenty Twenty

• Supports custom colors in editor and frontend
• Supports preset colors (including customizer set) in editor but not frontend

Twenty Nineteen

• Supports custom colors in editor and frontend
• Supports preset colors (including customizer set) in editor but not frontend

Twenty Seventeen

• Supports both preset colors and custom colors in editor and frontend. No fixes required.

Twenty Sixteen

• Supports custom colors in editor and frontend
• Supports preset colors in editor but not frontend

Twenty Fifteen

• Supports custom colors in editor and frontend
• Supports preset colors in editor but not frontend

[SergeyBiryukov]

Thanks for the refreshed PR! Moving to 6.2 for visibility.

[poena]

Hi!
I added some notes on the PR.

Twenty Twenty-One changes the foreground color depending on the dark mode and background color settings. This functionality should be updated to work for the border, but it can be done in a separate ticket once classic themes fully support the border controls for blocks.

[poena]

Sergey, I moved it to future release again since the PR needs to be updated, and we are already at beta 3.

[adamwood]

#58624 was marked as a duplicate.

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

The CSS changes are still needed. I have opened a related issue in the Gutenberg GitHbu repo:
​https://github.com/WordPress/gutenberg/issues/52864

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?

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?

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

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

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.

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

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. Or we could allow it 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 ?

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.

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?

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

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

[poena]

The following blocks support border:
Avatar
Button
Code
Column
Columns
Comments Title
Group
Image
Post Featured Image
Pullquote
Read More
Search
Table
Verse

Twenty Nineteen testing results

Open a terminal in the theme folder. Use the commands to build the CSS:
npm install
npm run build

Pullquote test:
Custom color selected with the color picker works well.

• Default color settings in customizer works well.
• When I change the color in the customizer option:
  • The color palette in the actual setting in the editor is correctly updated.
  • Blocks that had the primary color applied does not update to the new color. The old color is added inline without using the CSS class name.
  • Blocks that had the secondary color applied does update to the new color. The new color is added with the help of the CSS class name.

[poena]

Twenty Twenty testing results

Pullquote test:
Custom colors selected with the color picker work well.
Colors from the theme palette (the default color settings in the customizer) work well.
When I change the colors in the customizer options, the colors work well.

[poena]

Twenty Twenty-One testing results

Open a terminal in the theme folder. Use the commands to build the CSS:
npm install
npm run build

I tested the pull quote with:

• the default background color,
• dark mode enabled.
• custom background color selected in the customizer.

Colors from the color picker work well
Colors from the palette work well

[adamwood]

Thanks @poena! So is this Twenty Nineteen issue the only defect?

Blocks that had the primary color applied does not update to the new color. The old color is added inline without using the CSS class name.

[poena]

Yes, but I only tested one block.

[poena]

#58618 was marked as a duplicate.

[poena]

Related: Twenty Fifteen https://core.trac.wordpress.org/ticket/58565

[adamwood]

Replying to poena:

Yes, but I only tested one block.

I can't reproduce this unfortunately, maybe I'm missing something.

Here's the behaviour I see:

The color is applied via the [code from functions.php](​https://github.com/WordPress/wordpress-develop/pull/2944/files#diff-56ba742c278e04ff8ab72489847c46915c2c4ae6d6a247a46dca81950bfdeb18L159)

Please let me know if I'm testing this wrong.

[poena]

In the video I am adding the blue color to the pullqoute block, but in the border color setting, this color is *not* called primary which may be a bug.

[poena]

In the video, I am doing the following:

I select a pullquote block in the block editor and add a border width, border color, and border-radius.

When I select the first color in the color palette, the palette does not actually use the name or label "primary", which I would expect.
Visually, the border is applied correctly in the editor.

I save the post and view the block on the front. Visually, the border is applied correctly.
I open the customizer, select the color panel, and change the primary color to "custom".
I adjust the slider in the color selector, but the border color does not change.
Now, I am thinking that maybe I need to publish the changes for them to work, so I press the publish button in the customizer.
Nothing changes; the border stays the same color.
I try a few more colors, and then I scroll down the page and see that a link color has been changed, so the color has been updated, just not for the pullquote border.

I close the customizer and return to editing the post.
I confirm that the color palette in the block color setting has been updated.
I hover over the color palette and notice that the color is still not labeled "Primary".

I open the code editor mode in the block editor and find that the color referenced uses a hex code.
I close the code editor mode and change the border color to the first color in the palette.
Then I open the code editor mode again and find that the color referenced is "primary".

<!-- wp:pullquote {"style":{"border":{"radius":"30px","width":"20px"}},"borderColor":"primary"} -->
<figure class="wp-block-pullquote has-border-color has-primary-border-color" style="border-width:20px;border-radius:30px">