From 305d9ca16e833df93ecc3dc723f00c5d0a4f9da7 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 29 Jul 2019 09:49:05 -0400 Subject: [PATCH 1/4] Use larger buttons when we can. --- .../block-library/src/gallery/editor.scss | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 910bed783e67f..c4d893c6f1425 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -60,12 +60,24 @@ ul.wp-block-gallery { .components-button { color: $white; + padding: 2px; + width: $icon-button-size-small; + height: $icon-button-size-small; + + @include break-small() { + // Use smaller buttons to fit when there are many columns. + .columns-7 &, + .columns-8 & { + padding: 0; + width: inherit; + height: inherit; + } + } } .components-button:focus { color: inherit; } - } .block-editor-rich-text figcaption { @@ -80,13 +92,21 @@ ul.wp-block-gallery { .block-library-gallery-item__move-menu, .block-library-gallery-item__inline-menu { - padding: 2px; + padding: $grid-size-small; display: inline-flex; z-index: z-index(".block-library-gallery-item__inline-menu"); .components-button { color: transparent; } + + @include break-small() { + // Use smaller buttons to fit when there are many columns. + .columns-7 &, + .columns-8 & { + padding: $grid-size-small / 2; + } + } } .block-library-gallery-item__inline-menu { From db05d10a1a3d24126f3b881659cc62ddf83d2179 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 29 Jul 2019 09:51:53 -0400 Subject: [PATCH 2/4] Avoid adding selected border to the caption section of the image. --- packages/block-library/src/gallery/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index c4d893c6f1425..8599e1a3ff818 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -19,7 +19,7 @@ ul.wp-block-gallery { outline: none; } - .is-selected { + > .is-selected { outline: 4px solid theme(primary); } From 2a16378cce93483538e3ab801de3aa6f654b76e1 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 29 Jul 2019 09:55:59 -0400 Subject: [PATCH 3/4] Remove hover/focus box shadows because they clash with the blue background. --- packages/block-library/src/gallery/editor.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 8599e1a3ff818..a193b7ec00bc8 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -64,6 +64,12 @@ ul.wp-block-gallery { width: $icon-button-size-small; height: $icon-button-size-small; + // Remove hover/focus box shadows, since they clash with the blue background. + &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover, + &:focus:not(:disabled) { + box-shadow: none; + } + @include break-small() { // Use smaller buttons to fit when there are many columns. .columns-7 &, From 694e5e0163490f2929d7c3361c5a510bcb51587f Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 30 Jul 2019 12:01:13 -0400 Subject: [PATCH 4/4] Revise method of specifying the .is-selected class. --- packages/block-library/src/gallery/editor.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index a193b7ec00bc8..9452f917298f6 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -19,11 +19,11 @@ ul.wp-block-gallery { outline: none; } - > .is-selected { + figure.is-selected { outline: 4px solid theme(primary); } - .is-transient img { + figure.is-transient img { opacity: 0.3; }