Fixed style flickering caused by the border

[aktasfatih]

Description

In block-preview, when a style is selected, the style gets a 2px wide border, which causes a small flickering effect. This PR adds a transparent 2px border so that the style doesn't flicker with the new is-active border.
Closes #24740

How has this been tested?

Tested it on ubuntu firefox.
1- Add an image
2- Click in between styles

Screenshots

Before:

After:

Types of changes

Added a new line of style for the border.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[youknowriad]

Makes sense to me

[jasmussen]

Thanks for the ping Riad.

Is there any other way we can address this shift, than using a transparent border? I ask because in Windows high contrast mode, the transparent border will be made opaque effectively making it impossible to see which style is active or not.

[youknowriad]

Maybe the active style could use an outline instead of borders.

[talldan]

This may also fix #24611, although that does seem to be happening without the style selection changing, possibly still worth testing though.

[aktasfatih]

I realized this when I was looking at #24611 haha. However, I couldn't replicate that scrollbar issue even though I tried exactly the same resolution given in that issue.

@jasmussen, Yes you are right. It is impossible to see the selected one. I didn't know we had to think about high contrast. Thanks!

The table below shows how it looks like with the outline instead of the border. (Which is my last commit) What do you think?

Normal	High Contrast

[jasmussen]

Thank you for trying high contrast mode!

With the outline we're losing the border radius on the active item. Is there any way we could avoid that? Could we use a contextual padding on the preview so it doesn't rerender when unselected?

Thanks for your patience!

[aktasfatih]

Padding	Margins
	)

That's smart. However, paddings created gaps. Margins seem to work without creating gaps between the component and the borders. How does it look? The image at the right is my last commit.

[jasmussen]

That seems alright to me! Does the non-highcontrast mode still look good? Thanks!

[aktasfatih]

Non-highcontrast is pretty much the same.

[jasmussen]

Ship it!

[youknowriad]

Let's get that in. Thanks for the fix @aktasfatih