search

impress-org / givewp-next-gen

GiveWP 3.0.0 Feature Plugin
https://givewp.com/
GNU General Public License v3.0
10 stars 1 forks source link

Feature: add focus ring for blocks #211

Closed glaubersilva closed 1 year ago

glaubersilva commented 1 year ago

Description

This PR adds a focus ring for the blocks when they are selected. This feature is helpful because provides UI feedback about which block is selected.

Affects

The form builder

Visuals

image

image

Testing Instructions

Click on any block in the form builder and you should see a blue focus ring indicating that the block is selected, check the attached screenshot for reference.

Pre-review Checklist

glaubersilva commented 1 year ago

@jonwaldstein Thanks for the explanations, now I better understand your concerns in regard to this. I did implement your suggestion with a slight difference, let me know if there is anything else.

jonwaldstein commented 1 year ago

@glaubersilva thanks! looks good to me but i'm also not the designer. I'm thinking since this will affect all block selections we should do a quick screen share with @jdghinson to get his thoughts. I think in his earlier designs he had a selected ring but there was no padding - so we'll want to see how this interacts with different block types.

glaubersilva commented 1 year ago

@jonwaldstein Thanks! I already create a new zip with these last changes and send it to @jdghinson via Slack for a re-review.

glaubersilva commented 1 year ago

@jonwaldstein After @jdghinson reviewed it, we implemented a couple of cosmetic changes, but one specific required a bit of JS. So, I recorded a video to better explain why it was necessary, let me know your thoughts on it. Thanks!

Video: https://www.loom.com/share/6031260278924155b4289a856a0417d1

glaubersilva commented 1 year ago

@jonwaldstein This is ready for re-review.