fix: default to transparent pullquote border

[chickenn00dle]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Closes https://linear.app/a8c/issue/NPPM-2605/pullquote-styling-changed-on-investigate-midwest

This PR overrides the default pullquote block styles coming from the block library to use a transparent border color unless otherwise specified in block settings:

How to test the changes in this Pull Request:

1. Add a pullquote block to any post or page and save
2. On the frontend, view the post or page
3. On trunk the pullquote block will have a border at the top and bottom. On this branch it will not.
4. Back in the editor, add any arrangement of borders to the pullquote block
5. On the frontend, verify the block respects the border settings.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

This PR aims to restore prior Newspack pullquote styling by overriding Gutenberg’s default pullquote border so it is transparent unless a border is explicitly configured via block settings (ref: NPPM-2605).

Changes:

• Updates pullquote border-color styling in frontend block styles.
• Updates pullquote border-color styling in editor base styles.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
newspack-theme/sass/style-editor-base.scss	Adjusts editor-side pullquote border-color default/override behavior.
newspack-theme/sass/blocks/_blocks.scss	Adjusts frontend pullquote border-color default/override behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[laurelfulford]

Thanks for looking at this, @chickenn00dle!

I'm still getting the borders 😕 The border-color: inherit !important looks like it's picking up the border-color: currentColor for me -- that also means if I've customized the borders colours with the settings, they're all getting changed to black:

I think we might need to do something excluding the inline styles (like :not([style*='border'])). Some of the themes (Joseph, Nelson) also add borders in their default styles that will need to be accounted for.

I apologize in advance for the gnarliness 😅 Let me know if I can help with this one!

[chickenn00dle]

Thanks for the review @laurelfulford!

I think we might need to do something excluding the inline styles (like :not([style*='border'])). Some of the themes (Joseph, Nelson) also add borders in their default styles that will need to be accounted for.

Good call! This seems to do the trick. I've pushed up ac6601b which forces a transparent border for any of our themes that are not joseph or nelson. I had a look through our other themes and didn't see any others that needed to be skipped, but let me know if I've missed some!

One other note, there is some funkiness when you add inline borders to pullquotes in the joseph theme that are unrelated to gutenberg styles, but I fixed in e1e6020 since its somewhat related to the overall issue of borders.

[laurelfulford]

Thanks @chickenn00dle! Ugh, I forgot how fussy all the different Pullquote styles are.

I picked them apart and I think I figured out what the original styles looked like -- some still aren't quite working:

Newspack Joseph:

Newspack Katharine:

Newspack Nelson:

Newspack Sacha

Newspack Scott:

Newspack - Default:

I hope you don't mind, but I made a diff of the changes I had to make on top of this PR to get the above. I think we'll probably want to bring in a third person to test, unless it's okay if we validate each other's work? Things I think we need to test:

• The diff actually looks like the above
• When border styles are applied, they can still override this stuff (I think in all cases, any time a border is added, it should override the unique childtheme border).
• Other styles -- like text alignment -- can be applied and override the theme defaults.
• None of the changes are so strong in general (not a bunch of CSS selectors added, not a bunch of !important) that they're likely to override most Custom CSS.
• That Newspack Scott and Katharine actually pick up the primary colour for their accents, and that doesn't interfere with custom border colour styles

Here's the diff -- GitHub doesn't like the .diff file extension so I changed it: pullquotes.txt

Just let me know if you have any questions at all about this!

[chickenn00dle]

Hey @laurelfulford, the diff file (pullquote.txt) is not opening for me. The link is Not Found. Can you go ahead and push up a commit with your changes instead? IMO if your diff makes a bulk of the changes, I should be fine to review your work.

[laurelfulford]

That's fair, @chickenn00dle! I've pushed up the changes in cd85795.

The above screenshot should show what each theme's pullquotes should look like either the default alignment, or when aligned left/right (in some cases the accent becomes smaller when the block is aligned left/right).

To test:

1. Add at least 6 pullquotes to a page with the following settings:
   • Two with the default styles, one aligned left/right, one with the default alignment
   • Two with a simpler border style (1-2 sides), one aligned left/right, one with the default alignment
   • Two with an all-around border style, one left/right, one with the default alignment
2. Open a tab with the page in the editor, and one with the page on the front end
3. In a third tab cycle through the themes and check the pullquotes on the front-end and in the editor; the styles should roughly match the screenshots, with the theme-specific accents only applied when you don't use borders.

[chickenn00dle]

Nice! Just tested this and it all looks good on my end 👍

I think we can move forward with this, but can't approve my own PR. I'll re-request review from you so you can approve then I'll merge or if you prefer doing it more officially, feel free to open a new PR with your changes and I'll approve there for you to merge!

[laurelfulford]

I'm good with going about this in a bit of an unusual way, since it's just CSS - approved! 🙂

[github-actions]

Hey @chickenn00dle, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️