Try a simpler spacing setup for gallery items (#10027)

* Try a simpler spacing setup for gallery items

The stock gallery features white gutters between items. Currently in `master`, every item has an even 8px margin all around. We then compensate for this, left and right, of the gallery, to make sure items in the gallery align correctly with text width above and below the gallery.

This PR attempts a different approach. It sets only the right and bottom margin on gallery items, and then unsets the right margin on the rightmost item in each row.

This is a little more complex in the rules that are output, but it solves the issue presented here: #9670 (comment)

Let me know your thoughts.

* Clean up the mess.

Remove debug comments. Sorry, long day.

Clarify comments.

* Address feedback.

* Address feedback.

* Bugfix.

* Adjust gallery css layout math, and ensure margin is reset correctly at mobile breakpoints

Co-authored-by: Sofia Sousa <[email protected]>

* Fix odd rule

Props @SofiaSousa

* Add fixed rule

packages/block-library/src/cover-image/editor.scss

@@ -1,6 +1,4 @@
 .wp-block-cover-image {
-	margin: 0;
-
 	.editor-rich-text__tinymce[data-is-empty="true"]::before {
 		position: inherit;
 	}

packages/block-library/src/gallery/editor.scss

@@ -1,19 +1,3 @@
-.wp-block-gallery.components-placeholder {
-	margin: 0;
-}
-
-// Allow gallery items to go edge to edge.
-.gutenberg .wp-block-gallery:not(.components-placeholder) {
-	margin-left: -8px;
-	margin-right: -8px;
-}
-
-// Don't use negative margins when full-wide.
-.gutenberg [data-align="full"] .wp-block-gallery:not(.components-placeholder) {
-	margin-left: auto;
-	margin-right: auto;
-}
-
 .blocks-gallery-item {
 
 	// Hide the focus outline that otherwise briefly appears when selecting a block.

packages/block-library/src/gallery/style.scss

@@ -4,12 +4,10 @@
 	list-style-type: none;
 	padding: 0;
 
-	// Allow gallery items to go edge to edge.
-	margin: 0 -8px 0 -8px;
-
 	.blocks-gallery-image,
 	.blocks-gallery-item {
-		margin: 8px;
+		// Add space between thumbnails, and unset right most thumbnails later.
+		margin: 0 $grid-size-large $grid-size-large 0;
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
@@ -80,24 +78,48 @@
 		}
 	}
 
-	// Responsive fallback value, 2 columns
+	// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
 	& .blocks-gallery-image,
 	& .blocks-gallery-item {
-		width: calc(100% / 2 - 16px);
+		width: calc((100% - #{ $grid-size-large }) / 2);
+
+		&:nth-of-type(even) {
+			margin-right: 0;
+		}
 	}
 
 	&.columns-1 .blocks-gallery-image,
 	&.columns-1 .blocks-gallery-item {
-		width: calc(100% / 1 - 16px);
+		width: 100%;
+		margin-right: 0;
 	}
 
+	// Beyond mobile viewports, we allow up to 8 columns.
 	@include break-small {
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } .blocks-gallery-image,
 			&.columns-#{ $i } .blocks-gallery-item {
-				width: calc(100% / #{ $i } - 16px);
+				width: calc((100% - #{ $grid-size-large } * #{ $i - 1 }) / #{ $i });
+				margin-right: 16px;
 			}
 		}
+
+		// Unset the right margin on every rightmost gallery item to ensure center balance.
+		@for $column-count from 1 through 8 {
+			&.columns-#{ $column-count } .blocks-gallery-image:nth-of-type(#{ $column-count }n),
+			&.columns-#{ $column-count } .blocks-gallery-item:nth-of-type(#{ $column-count }n) {
+				margin-right: 0;
+			}
+		}
+	}
+
+	// Last item always needs margins reset.
+	// When block is selected, only reset the right margin of the 2nd to last item.
+	.blocks-gallery-image:last-child,
+	.blocks-gallery-item:last-child,
+	.is-selected & .blocks-gallery-image:nth-last-child(2),
+	.is-selected & .blocks-gallery-item:nth-last-child(2) {
+		margin-right: 0;
 	}
 
 	// Make the "Add new Gallery item" button full-width (so it always appears
@@ -108,7 +130,7 @@
 		}
 	}
 
-	// Apply max-width to floated items that have no intrinsic width
+	// Apply max-width to floated items that have no intrinsic width.
 	[data-align="left"] &,
 	[data-align="right"] &,
 	&.alignleft,

packages/block-library/src/image/editor.scss

@@ -1,6 +1,5 @@
 .wp-block-image {
 	position: relative;
-	margin: 0;
 
 	&.is-transient img {
 		@include loading_fade;

packages/components/src/placeholder/style.scss

@@ -1,4 +1,5 @@
 .components-placeholder {
+	margin: 0;
 	display: flex;
 	flex-direction: column;
 	align-items: center;