Button block border does not appear properly in editor side.

[viralsampat-multidots]

Description

Hello,

I have reviewed the button block and found that its "Outline" border does not appear properly on the editor side. I have checked this issue with two different themes(Twenty Twenty Two & Twenty Twenty-Four).

Here, I have attached its screenshots.

Step-by-step reproduction instructions

• Type / to choose a block
• Select Button block
• Add button text.
• Change the button style to "Outline"
• Change button text color & button background color.
• Save the changes and publish the page.
• Then open the page "Preview in new tab"

Screenshots, screen recording, code snippet

Editor-end:

Front-end:

Environment info

• WordPress version: WordPress 6.5-beta2 running,
• Theme: Twenty Twenty-Four Version: 1.0
• Browser: Google Chrome, Version 121.0.6167.184 (Official Build) (arm64)
• Device: MacBook Air M1
• OS: macOS 14.3.1 (23D60)
• Gutenberg plugin: Version 17.7.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

Thanks for the report.

I tested it with WordPress Beta2 and TT4 theme, and it seems to work correctly in my environment.

Could you send us the HTML that is causing the problem? Switch to the code editor and you should be able to see the HTML.

[carolinan]

The only thing I can reproduce is that in Twenty Twenty-Four, on both 6.4 and 6.5 beta2, the outline is dark grey when the button is selected, like when you are editing the button text. That is because of the theme's focus styles.

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[viralsampat-multidots]

Hello @carolinan

I will recheck from my end and I will provide detailed updates for the same.

Thanks,

[carolinan]

@viralsampat-multidots Thank you for reminding me about this issue, I think this is the same issue as in https://core.trac.wordpress.org/ticket/60614, which I'm sure you have also followed along with.

The different test results seems to be depending on if the block editor has the custom fields UI open or not, see the trac ticket. It does not need further testing right now until there is a patch to test.

[viralsampat-multidots]

Hello @carolinan

Thank you so much for your feedback.

Okay, let's wait for its patch.

Thanks,

[yankiara]

Hi all,

I'm creating a block theme from scratch with WP 6.5 and I have a similar issue when editing a page: border does not appear because of wrong rules order for border-width.
Everything is OK when editing a template.

Page:

Template:

In my case, it seems totally independent from custom field panel.

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[t-hamano]

This issue appears to have been fixed already, as I can't reproduce the issue even with custom fields enabled.

@yankiara Could you confirm if the issue you reported has been resolved as well?