Try improved spacing styles (#509)

* Add entry-content

* Styling

* Update image.css

* Update alignments.css

* Update vertical-rhythm.css

* margin fixes

* Update alignments.css

* Clean up styles more

* Try removing wp-block-styles

* More style improvements

* Minor gallery tweaks

* Account for last alignfull.px

.dev/assets/design-styles/playful/css/style-playful.css

@@ -12,7 +12,7 @@
 	border: none;
 	height: 9pt;
 	mask-image: url("../../../dist/images/design-styles/playful/cross-stich-border.svg");
-	max-width: 113px;
+	max-width: 113px !important;
 }
 
 .wp-block-separator.is-style-dots:not(.has-text-color)::before {

.dev/assets/design-styles/trendy/css/style-trendy.css

@@ -15,5 +15,5 @@ body {
 }
 
 .has-footer-1 .footer-navigation a {
-	color: var(--go-footer--color--text, intial);
+	color: var(--go-footer--color--text, initial);
 }

.dev/assets/shared/css/blocks/gallery.css

@@ -30,40 +30,12 @@ body.rtl .wp-block-gallery {
 	}
 }
 
-#page.site .content-area__wrapper .content-area .wp-block-gallery.mb-0 {
-	margin-bottom: 0 !important;
-}
-
-.site .content-area__wrapper .content-area .wp-block-gallery {
-	margin-bottom: calc(var(--go--spacing--vertical) - 16px) !important;
-}
-
-.site .content-area__wrapper .content-area .wp-block-gallery.alignfull,
-.site .content-area__wrapper .content-area .wp-block-gallery.alignwide {
-	margin-bottom: calc(var(--go--spacing--vertical--lg) - 16px) !important;
-	margin-top: calc(var(--go--spacing--vertical--lg) - 16px) !important;
-}
-
-.site .content-area__wrapper .content-area .wp-block-gallery .mb-0 {
-	margin-bottom: -16px !important;
-}
-
-.site .content-area__wrapper .wp-block-gallery.alignfull + .wp-block-cover.alignfull {
-	margin-top: 16px !important;
-}
-
-.site .content-area__wrapper .wp-block-gallery.alignfull + .wp-block-image.alignfull {
-	margin-top: calc(var(--go--spacing--vertical--lg) * -1 + 16px) !important;
-}
-
-.site .content-area__wrapper .wp-block-image.alignfull + .wp-block-gallery.alignfull {
-	margin-top: calc(var(--go--spacing--vertical--lg) * -1 + 16px) !important;
+.wp-block-gallery.alignfull + .wp-block-image.alignfull,
+.wp-block-gallery.alignfull + .wp-block-group.alignfull.has-background,
+.wp-block-image.alignfull + .wp-block-group.alignfull.has-background {
+	margin-top: calc(var(--go--spacing--vertical--lg) * -1);
 }
 
-.site .content-area__wrapper .wp-block-group.alignfull + .wp-block-gallery.alignfull {
-	margin-top: calc(var(--go--spacing--vertical--lg) * -1 + 16px) !important;
-}
-
-.site .content-area__wrapper .wp-block-gallery.alignfull + .wp-block-group.alignfull {
-	margin-top: calc(var(--go--spacing--vertical--lg) * -1 + 16px) !important;
+#page.site .content-area__wrapper .content-area .wp-block-gallery.mb-0 {
+	margin-bottom: 0 !important;
 }

.dev/assets/shared/css/blocks/group.css

@@ -14,7 +14,7 @@
 		}
 
 		&.alignfull + .alignfull:not(.wp-block-gallery) {
-			margin-top: 0 !important;
+			margin-top: calc(var(--go--spacing--vertical--lg) * -1);
 		}
 	}
 

.dev/assets/shared/css/blocks/image.css

@@ -1,12 +1,6 @@
 /*! Image */
 .wp-block-image {
 
-	&.alignfull,
-	&.alignwide {
-		margin-bottom: var(--go--spacing--vertical--lg);
-		margin-top: var(--go--spacing--vertical--lg);
-	}
-
 	& img {
 		display: block;
 	}
@@ -31,5 +25,5 @@
 }
 
 .wp-block-image.alignfull + .wp-block-gallery {
-	margin-top: 16px !important;
+	margin-top: calc(var(--go--spacing--vertical--lg) * -1 + 16px);
 }

.dev/assets/shared/css/blocks/separator.css

@@ -1,8 +1,16 @@
 /*! Separator */
 .wp-block-separator {
 	border-bottom-color: var(--go-separator--color--border, var(--go-heading--color--text));
+	border-style: solid;
+	border-width: 1px;
+	margin-left: auto;
+	margin-right: auto;
 
 	&.is-style-dots::before {
 		font-size: var(--go-separator--size, 2rem);
 	}
+
+	&:not(.is-style-wide):not(.is-style-dots) {
+		max-width: 100px !important;
+	}
 }

.dev/assets/shared/css/editor/vertical-rhythm.css

@@ -1,46 +1,18 @@
 /* Vertical Spacing */
 .block-editor-writing-flow > div > div > div > div > .block-editor-block-list__layout > .wp-block:not(.editor-post-title__block):not([data-type="core/list"]):not([data-type="core/paragraph"]):not([data-type="core/spacer"]):not([data-type="core/image"]):not([data-type="core/file"]):not([data-type="core/preformatted"]):not([data-type="core/verse"]):not([data-type="core/archives-dropdown"]):not([data-type="core/categories-dropdown"]):not([data-type="core/code"]):not([data-type="coblocks/alert"]):not([data-type="coblocks/alert"]):not([data-type="coblocks/accordion"]):not([data-type="coblocks/accordion-item"]):not([data-type="coblocks/author"]):not([data-type="core/gallery"]) {
-	margin-bottom: var(--go--spacing--vertical--lg);
-	margin-top: var(--go--spacing--vertical--lg);
-}
-
-.block-editor-writing-flow > div > div > div > div > .block-editor-block-list__layout > {
-
-	& [data-type="core/heading"] + [data-type="core/paragraph"] {
-		margin-top: calc(-0.825 * var(--go--spacing--vertical--lg)) !important;
-	}
-
-	& [data-type="core/heading"] + [data-type="core/button"],
-	& [data-type="core/heading"] + [data-type="coblocks/buttons"],
-	& [data-type="core/heading"] + [data-type="coblocks/logos"] {
-		margin-top: calc(-0.65 * var(--go--spacing--vertical--lg)) !important;
-	}
-
-	& [data-type="core/paragraph"] + [data-type="core/button"],
-	& [data-type="core/paragraph"] + [data-type="coblocks/buttons"],
-	& [data-type="core/paragraph"] + [data-type="coblocks/form"] {
-		margin-top: calc(0.35 * var(--go--spacing--vertical--lg)) !important;
-	}
-
-	& [data-type="core/heading"] + [data-type="coblocks/features"] {
-		margin-top: calc(-0.65 * var(--go--spacing--vertical--lg)) !important;
-	}
-}
-
-.wp-block[data-type="core/columns"],
-.wp-block[data-type="core/cover"][data-align="wide"],
-.wp-block[data-type="core/image"][data-align="full"],
-.wp-block[data-type="core/image"][data-align="wide"],
-.wp-block[data-type="core/gallery"][data-align="full"],
-.wp-block[data-type="core/gallery"][data-align="wide"] {
-	margin-bottom: var(--go--spacing--vertical--lg);
-	margin-top: var(--go--spacing--vertical--lg);
+	margin-bottom: 1.5rem;
+	margin-top: 1.5rem;
 }
 
 .wp-block {
 	max-width: var(--editor-max-w-base);
 }
 
+.wp-block[data-align="wide"] .wp-block[data-align="wide"],
+.wp-block[data-align="full"] .wp-block[data-align="wide"] {
+	max-width: var(--editor-max-w-wide);
+}
+
 .wp-block.alignwide {
 	max-width: var(--editor-max-w-wide);
 }
@@ -49,6 +21,18 @@
 	max-width: none;
 }
 
+.wp-block .wp-block[data-type="core/group"]:not([data-align="full"]):not([data-align="wide"]):not([data-align="left"]):not([data-align="right"]),
+.wp-block .wp-block[data-type="core/cover"]:not([data-align="full"]):not([data-align="wide"]):not([data-align="left"]):not([data-align="right"]) {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: var(--editor-max-w-base);
+}
+
+.wp-block .wp-block[data-align="full"] {
+	margin-left: 0;
+	margin-right: 0;
+}
+
 .wp-block .wp-block {
 	width: 100%;
 }
@@ -61,10 +45,19 @@
 	max-width: none;
 }
 
+*[data-align="right"] .wp-block-edit,
+*[data-align="left"] .wp-block-edit {
+	max-width: 50%;
+}
+
 .components-placeholder {
 	margin-bottom: 0;
 }
 
+.block-editor-block-list__block:last-child {
+	margin-bottom: 0 !important;
+}
+
 /* Remove spacing from the first and last blocks */
 .block-editor-block-list__layout .wp-block.block-editor-block-list__block:first-of-type {
 	margin-top: 0 !important;

.dev/assets/shared/css/footer/footer-2.css

@@ -1,18 +1,12 @@
 /*! Footer: Footer 2 */
 .has-footer-2 {
 
-	& .content-area > .alignfull:last-child {
-		margin-bottom: calc(var(--go--spacing--vertical--lg) / 1.5) !important;
-
-		@media (--medium) {
-			margin-bottom: calc(var(--go--spacing--vertical--lg) / 2) !important;
-		}
-	}
-
 	& .site-footer {
+		margin-top: calc(var(--go--spacing--vertical--lg) / 1.5);
 		padding-bottom: calc(var(--go--spacing--vertical--lg) / 1.5);
 
 		@media (--medium) {
+			margin-top: calc(var(--go--spacing--vertical--lg) / 2);
 			padding-bottom: calc(var(--go--spacing--vertical--lg) / 2);
 		}
 
@@ -46,7 +40,6 @@
 		}
 
 		& a {
-			color: var(--go-footer-navigation--color--text, var(--go-navigation--color--text));
 			display: block;
 			font-family: var(--go-navigation--font-family);
 			font-size: var(--go-navigation--font-size);

.dev/assets/shared/css/footer/footer-4.css

@@ -2,6 +2,7 @@
 .has-footer-4 {
 
 	& .site-footer {
+		margin-top: calc(var(--go--spacing--vertical--lg) * 0.7);
 		padding-bottom: calc(var(--go--spacing--vertical--lg) * 0.5);
 	}
 

.dev/assets/shared/css/footer/site-footer.css

@@ -1,19 +1,21 @@
 /*! Footer */
 .site-footer {
 	background-color: var(--go-footer--color--background);
-	color: var(--go-footer--color--text, intial);
+	color: var(--go-footer--color--text, initial);
 	font-family: var(--go-footer--font-family, inherit);
+	margin-top: var(--go--spacing--vertical--lg);
 
 	& .site-info {
-		color: var(--go-footer--color--text, intial);
+		color: var(--go-footer--color--text, initial);
 	}
 
 	&.has-background {
+		margin-top: 0;
 		padding-top: var(--go--spacing--vertical--lg);
 	}
 
 	& a {
-		color: var(--go-footer--color--text, intial);
+		color: var(--go-footer--color--text, initial);
 		text-decoration: none;
 
 		&:hover {