Search Block: Global border style settings mismatch with block style

[benazeer-ben]

Description

When applying global border style settings to the Search Block in WordPress, the styles set in the global settings do not align with the actual styles applied to the block on the page.

This mismatch results in inconsistent styling, causing the border styles (e.g., width, color, radius) defined globally to differ from those displayed on the block.

Step-by-step reproduction instructions

1. Enable Global Styles:

• Navigate to the WordPress Site Editor (Appearance > Editor).
• Click on the "Styles" icon in the top-right corner.

2. Modify Global Border Settings:

• Select the "Blocks" tab.
• Choose the Search Block.
• In the block settings panel, go to the Border section.
• Set border properties such as:
• Border Width: e.g., 4px.
• Border Color: e.g., #000000.
• Border Radius: e.g., 8px.

3. Apply and Save Changes:

• Click "Save" to apply the global style changes.

4. Add a Search Block to a Page:

• Navigate to the WordPress block editor and add a Search Block to a post or page.
• View the block's border style in the editor.

5. Preview the Page:

• Save the post or page.
• Preview it in the front-end of the website.

6. Compare Global Styles with Block Styles:

• Check the block's rendered styles in the browser.
• Verify the global border settings and block styles applied to the block.

Screenshots, screen recording, code snippet

Screenshare.-.2024-12-20.7_22_07.PM.mp4

Environment info

No response

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[hanneslsm]

Related (/same?): #51617

[Vedant-Gandhi]

Hi @benazeer-ben,
I have solved the above problem by adding selectors in search block in the following PR - #68515

Can you please review it?