Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up Gallery block move/remove UI #16793

Merged
merged 4 commits into from Jul 30, 2019

Conversation

@kjellr
Copy link
Contributor

commented Jul 29, 2019

This PR tidies up a couple small visual bugs with the Gallery block's individual image controls. It also switches the buttons to appear larger when possible. This is helpful (especially on mobile) to create a more visible hit area for these previously-tiny controls.

1. Button size improvements:

Before

Screen Shot 2019-07-29 at 9 25 00 AM

After

Screen Shot 2019-07-29 at 9 24 18 AM

The buttons increase from 20 to 24px. Note that on larger screens, these buttons will shrink back down if there are more than 7 columns present. Is to prevent overlap:

number-of-columns

2. Clean up extra is-selected border on the caption field.

I'm not sure when this made its first appearance, but I believe it's unintentional?

Before

Screen Shot 2019-07-29 at 10 03 14 AM

After

Screen Shot 2019-07-29 at 9 48 00 AM

3. Removes box shadow from move/remove controls on hover and focus

These borders weren't working against the blue background.

Before

Screen Shot 2019-07-29 at 9 56 47 AM

After

Screen Shot 2019-07-29 at 9 56 26 AM

@@ -19,7 +19,7 @@ ul.wp-block-gallery {
outline: none;
}

.is-selected {
> .is-selected {

This comment has been minimized.

Copy link
@nosolosw

nosolosw Jul 30, 2019

Member

This works and I'm fine with it. Wanted to run by you a different approach to see what you think: figure.is-selected (I'd also apply this to the is-transient rule below for clarification). Those seem to be the only two rules that don't have a block/element class along with the modifier class.

This comment has been minimized.

Copy link
@kjellr

kjellr Jul 30, 2019

Author Contributor

Sure, that makes sense. I'll push a quick update to do that.

@nosolosw
Copy link
Member

left a comment

Left one suggestion, in case you think it makes sense. Otherwise, this is good to go.

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Jul 30, 2019

Thanks, everyone!

@kjellr kjellr merged commit 6f56a7a into master Jul 30, 2019

1 of 2 checks passed

Milestone It Milestone It
Details
Travis CI - Pull Request Build Passed
Details

@kjellr kjellr deleted the update/gallery-block-ui branch Jul 30, 2019

@kjellr kjellr added this to the Gutenberg 6.3 milestone Jul 30, 2019

gziolo added a commit that referenced this pull request Aug 29, 2019
Clean up Gallery block move/remove UI (#16793)
* Use larger buttons when we can.

* Avoid adding selected border to the caption section of the image.

* Remove hover/focus box shadows because they clash with the blue background.

* Revise method of specifying the .is-selected class.
gziolo added a commit that referenced this pull request Aug 29, 2019
Clean up Gallery block move/remove UI (#16793)
* Use larger buttons when we can.

* Avoid adding selected border to the caption section of the image.

* Remove hover/focus box shadows because they clash with the blue background.

* Revise method of specifying the .is-selected class.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.