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.

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;
  }
 
@@ -60,12 +60,30 @@ ul.wp-block-gallery {
 
  .components-button {
  color: $white;
+ padding: 2px;
+ 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 &,
+ .columns-8 & {
+ padding: 0;
+ width: inherit;
+ height: inherit;
+ }
+ }
  }
 
  .components-button:focus {
  color: inherit;
  }
-
  }
 
  .block-editor-rich-text figcaption {
@@ -80,13 +98,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 {