fix: default pullquote borders (#2630)

chickenn00dle · web-flow · commit 5eb0b76723e1 · 2026-03-10T09:28:59.000-04:00
This PR overrides the default pullquote block styles coming from the block library to fix the pullquote styles for our various themes.
diff --git a/newspack-joseph/sass/style-editor.scss b/newspack-joseph/sass/style-editor.scss
@@ -48,14 +48,17 @@ Newspack Joseph Editor Styles
 
 /* Pullquote */
 .wp-block-pullquote {
-	border: 0;
-	border-bottom: 2px solid;
-	border-top: 1px solid;
 	font-family: var(--newspack-theme-font-heading);
 	font-style: normal;
 	font-weight: bold;
 	text-align: center;
 
+	&:not([style*='border']) {
+		border: 0;
+		border-bottom: 2px solid;
+		border-top: 1px solid;
+	}
+
 	p {
 		font-style: inherit;
 
diff --git a/newspack-joseph/sass/style.scss b/newspack-joseph/sass/style.scss
@@ -359,14 +359,17 @@ textarea {
 
 //! Pullquote
 .wp-block-pullquote {
-	border: 0;
-	border-bottom: 2px solid;
-	border-top: 1px solid;
 	font-family: var(--newspack-theme-font-heading);
 	font-style: normal;
 	font-weight: bold;
 	text-align: center;
 
+	&:not([style*='border']) {
+		border: 0;
+		border-bottom: 2px solid;
+		border-top: 1px solid;
+	}
+
 	p {
 		font-style: inherit;
 
diff --git a/newspack-katharine/sass/style-editor.scss b/newspack-katharine/sass/style-editor.scss
@@ -113,15 +113,15 @@ figure.wp-block-pullquote {
 	font-weight: bold;
 	position: relative;
 
-	&:not(.is-style-solid-color):not(.has-background) {
+	&:not(.is-style-solid-color):not(.has-background):not([style*="border-"]) {
 		blockquote {
 			padding-left: #{2 * structure.$size__spacing-unit};
 		}
 
 		&::before {
 			border-top: 8px solid;
 			border-left: 8px solid;
-			border-color: inherit;
+			border-color: var(--newspack-theme-color-primary);
 			content: "";
 			display: block;
 			height: 40px;
diff --git a/newspack-katharine/sass/style.scss b/newspack-katharine/sass/style.scss
@@ -357,15 +357,15 @@ figcaption,
 		text-transform: uppercase;
 	}
 
-	&:not(.is-style-solid-color):not(.has-background) {
+	&:not(.is-style-solid-color):not(.has-background):not([style*="border-"]) {
 		blockquote {
 			padding-left: #{2 * structure.$size__spacing-unit};
 		}
 
 		&::before {
 			border-top: 8px solid;
 			border-left: 8px solid;
-			border-color: inherit;
+			border-color: var(--newspack-theme-color-primary);
 			content: "";
 			display: block;
 			height: 40px;
diff --git a/newspack-nelson/sass/style-editor.scss b/newspack-nelson/sass/style-editor.scss
@@ -87,7 +87,6 @@ blockquote {
 }
 
 .wp-block-pullquote {
-	border-width: 16px 0 4px;
 	font-weight: bold;
 
 	blockquote {
@@ -117,6 +116,11 @@ blockquote {
 		opacity: 0.9;
 		text-transform: uppercase;
 	}
+
+	&:not([style*="border-"]) {
+		border-width: 16px 0 4px;
+		border-color: currentcolor;
+	}
 }
 
 [data-align="left"] .wp-block-pullquote,
@@ -146,7 +150,7 @@ blockquote {
 	}
 
 	&.is-style-solid-color::before,
-	&[style*="border-width"]::before {
+	&[style*="border-"]::before {
 		display: none;
 	}
 }
diff --git a/newspack-nelson/sass/style.scss b/newspack-nelson/sass/style.scss
@@ -400,9 +400,13 @@ blockquote {
 
 //! Pullquote
 .wp-block-pullquote {
-	border-width: 16px 0 4px;
 	font-weight: bold;
 
+	&:not([style*="border-"]) {
+		border-width: 16px 0 4px;
+		border-color: currentcolor;
+	}
+
 	blockquote p,
 	&.is-style-solid-color blockquote p {
 		@include utilities.media( tablet ) {
@@ -469,7 +473,7 @@ blockquote {
 		}
 
 		&.is-style-solid-color::before,
-		&[style*="border-width"]::before {
+		&[style*="border-"]::before {
 			display: none;
 		}
 	}
diff --git a/newspack-scott/sass/style-editor.scss b/newspack-scott/sass/style-editor.scss
@@ -56,6 +56,7 @@ Newspack Scott Editor Styles
 	border-width: 0;
 	font-weight: bold;
 	padding-top: #{3 * structure.$size__spacing-unit};
+	padding-bottom: 0;
 	position: relative;
 	text-align: center;
 
@@ -220,7 +221,7 @@ Newspack Scott Editor Styles
 		}
 	}
 
-	&[style*="border-width"] {
+	&[style*="border-"] {
 		blockquote {
 			margin-top: 0;
 		}
diff --git a/newspack-scott/sass/style.scss b/newspack-scott/sass/style.scss
@@ -128,6 +128,7 @@ div.wpnbha .article-section-title {
 	font-family: var(--newspack-theme-font-heading);
 	font-weight: bold;
 	padding-top: #{4 * structure.$size__spacing-unit};
+	padding-bottom: 0;
 	position: relative;
 	text-align: center;
 
@@ -323,6 +324,10 @@ div.wpnbha .article-section-title {
 			padding-top: #{3 * structure.$size__spacing-unit};
 		}
 
+		&[style*="border-"] {
+			padding-top: structure.$size__spacing-unit;
+		}
+
 		p:first-of-type::before {
 			font-size: calc(1rem * 5);
 			left: 0;
@@ -342,8 +347,10 @@ div.wpnbha .article-section-title {
 		}
 	}
 
-	&[style*="border-width"] {
-		padding-top: structure.$size__spacing-unit;
+	&[style*="border-"] {
+		blockquote {
+			margin-top: 0;
+		}
 
 		p:first-of-type::before,
 		blockquote::before,
diff --git a/newspack-theme/sass/blocks/_blocks.scss b/newspack-theme/sass/blocks/_blocks.scss
@@ -631,6 +631,13 @@ p.has-background {
 	}
 }
 
+// Override Gutenberg's default pullquote border color for themes that don't have a pullquote border defined.
+body:not(.wp-child-theme-newspack-joseph):not(.wp-child-theme-newspack-nelson) .wp-block-pullquote {
+	&.wp-block-pullquote:not([style*='border']) {
+		border-color: transparent !important;
+	}
+}
+
 //! Latest Comments
 .wp-block-latest-comments {
 	padding-left: 0;
diff --git a/newspack-theme/sass/style-editor-base.scss b/newspack-theme/sass/style-editor-base.scss
@@ -639,10 +639,6 @@ html :where(.wp-block)[data-align="right"] {
 		max-width: 50%;
 		width: 50%;
 
-		@include utilities.media( tablet ) {
-			border-bottom: 0;
-		}
-
 		&:not(.is-style-solid-color) {
 			padding: 0;
 		}
diff --git a/newspack-theme/sass/styles/style-default/style-default.scss b/newspack-theme/sass/styles/style-default/style-default.scss
@@ -129,6 +129,10 @@
 	}
 }
 
+.wp-block-pullquote blockquote {
+	text-align: left;
+}
+
 .featured-image-behind .cat-links {
 	font-size: var(--newspack-theme-font-size-sm);
 	a,

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,6 @@ blockquote {`
`87`	`87`	`}`
`88`	`88`
`89`	`89`	`.wp-block-pullquote {`
`90`		`- border-width: 16px 0 4px;`
`91`	`90`	`font-weight: bold;`
`92`	`91`
`93`	`92`	`blockquote {`
`@@ -117,6 +116,11 @@ blockquote {`
`117`	`116`	`opacity: 0.9;`
`118`	`117`	`text-transform: uppercase;`
`119`	`118`	`}`
	`119`	`+`
	`120`	`+ &:not([style*="border-"]) {`
	`121`	`+ border-width: 16px 0 4px;`
	`122`	`+ border-color: currentcolor;`
	`123`	`+ }`
`120`	`124`	`}`
`121`	`125`
`122`	`126`	`[data-align="left"] .wp-block-pullquote,`
`@@ -146,7 +150,7 @@ blockquote {`
`146`	`150`	`}`
`147`	`151`
`148`	`152`	`&.is-style-solid-color::before,`
`149`		`- &[style*="border-width"]::before {`
	`153`	`+ &[style*="border-"]::before {`
`150`	`154`	`display: none;`
`151`	`155`	`}`
`152`	`156`	`}`
Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,7 @@ Newspack Scott Editor Styles`
`56`	`56`	`border-width: 0;`
`57`	`57`	`font-weight: bold;`
`58`	`58`	`padding-top: #{3 * structure.$size__spacing-unit};`
	`59`	`+ padding-bottom: 0;`
`59`	`60`	`position: relative;`
`60`	`61`	`text-align: center;`
`61`	`62`
`@@ -220,7 +221,7 @@ Newspack Scott Editor Styles`
`220`	`221`	`}`
`221`	`222`	`}`
`222`	`223`
`223`		`- &[style*="border-width"] {`
	`224`	`+ &[style*="border-"] {`
`224`	`225`	`blockquote {`
`225`	`226`	`margin-top: 0;`
`226`	`227`	`}`
Original file line number	Diff line number	Diff line change
`@@ -631,6 +631,13 @@ p.has-background {`
`631`	`631`	`}`
`632`	`632`	`}`
`633`	`633`
	`634`	`+// Override Gutenberg's default pullquote border color for themes that don't have a pullquote border defined.`
	`635`	`+body:not(.wp-child-theme-newspack-joseph):not(.wp-child-theme-newspack-nelson) .wp-block-pullquote {`
	`636`	`+ &.wp-block-pullquote:not([style*='border']) {`
	`637`	`+ border-color: transparent !important;`
	`638`	`+ }`
	`639`	`+}`
	`640`	`+`
`634`	`641`	`//! Latest Comments`
`635`	`642`	`.wp-block-latest-comments {`
`636`	`643`	`padding-left: 0;`