Blockbase: Remove CSS to bring up the page content and instead remove the bottom margin from post titles (#4738)

* Blockbase: Remove CSS to bring up the page content and instead remove the bottom margin from post titles

* Change the paragraph spacing to use block gap

* Remove extra space on the figure.

* spaces to tabs.

* Change gap baseline to 15px.

* Reset paragraph margins.

* Add specific selectors to target paragraphs in the editor

* Add a comment to point to the GB issue

* Increase specificity of paragraph override.

* Ensure we provide a default paragraph margin too.

* Comment related Gutenberg issue.

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>

blockbase/assets/ponyfill.css

@@ -205,10 +205,6 @@ pre {
 	flex-direction: column;
 }
 
-.wp-site-blocks > main {
-	margin-top: 0;
-}
-
 .site-footer-container {
 	margin-top: auto;
 }
@@ -223,9 +219,11 @@ body.admin-bar .wp-site-blocks {
 	min-height: calc( 100vh - var(--wpadmin-bar--height));
 }
 
+p.wp-block.wp-block-paragraph,
+*[class^="wp-container"] > * + p,
 p {
-	margin-top: var(--wp--custom--gap--vertical);
-	margin-bottom: var(--wp--custom--gap--vertical);
+	margin-top: 1em;
+	margin-bottom: 1em;
 }
 
 .wp-block-column :first-child, .wp-block-group :first-child {
@@ -661,6 +659,10 @@ p.has-drop-cap:not(:focus):first-letter {
 	margin-bottom: 0;
 }
 
+.wp-block-post-template .wp-block-post-featured-image {
+	line-height: 0;
+}
+
 .wp-block-pullquote.is-style-solid-color,
 .wp-block-pullquote {
 	text-align: var(--wp--custom--pullquote--typography--text-align);

blockbase/sass/base/_layout.scss

@@ -6,9 +6,6 @@
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
-	> main {
-		margin-top: 0;
-	}
 }
 
 .site-footer-container {
@@ -23,4 +20,4 @@ body.admin-bar {
 	.wp-site-blocks {
 		min-height: calc( 100vh - var(--wpadmin-bar--height) );
 	}
-}
+}

blockbase/sass/base/_text.scss

@@ -1,6 +1,9 @@
+// Needed until https://github.com/WordPress/gutenberg/issues/35267 is resolved.
+p.wp-block.wp-block-paragraph, // This selector has been made extra specific to override the block gap being set in the editor.
+*[class^="wp-container"] > * + p,
 p {
-	margin-top: var(--wp--custom--gap--vertical);
-	margin-bottom: var(--wp--custom--gap--vertical);
+	margin-top: 1em;
+	margin-bottom: 1em;
 }
 
 .wp-block-column, .wp-block-group {

blockbase/sass/blocks/_post-template.scss

@@ -1,5 +1,9 @@
 // Needed until https://github.com/WordPress/gutenberg/pull/35193 is merged.
 .wp-block-post-template {
-    margin-top: 0;
-    margin-bottom: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+	// Needed until https://github.com/WordPress/gutenberg/pull/35273 is merged.
+	.wp-block-post-featured-image {
+		line-height: 0;
+	}
 }

blockbase/theme.json

@@ -238,7 +238,7 @@
 				}
 			},
 			"gap": {
-				"baseline": "10px",
+				"baseline": "15px",
 				"horizontal": "min(30px, 5vw)",
 				"vertical": "min(30px, 5vw)"
 			},
@@ -414,6 +414,11 @@
 				}
 			},
 			"core/post-title": {
+				"spacing": {
+					"margin": {
+						"bottom": "0"
+					}
+				},
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--system-font)",
 					"fontSize": "var(--wp--preset--font-size--large)",