Skip to content

Fix: Receipt header heading and description nested elements. #8216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gilbert-hernandez wants to merge 3 commits into
base: develop
Choose a base branch
from
+5 −4
Open

Fix: Receipt header heading and description nested elements. #8216

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd8bbc6
GIVE-3061 Strip nested p tags from receipt header heading and descrip…
gilbert-hernandez Feb 12, 2026
4981324
KAD-3061 Requested changes. Remove hardcoded elements and update style.
gilbert-hernandez Feb 12, 2026
08dd6d9
GIVE-3061 Add unreleased tag to docblock
gilbert-hernandez Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions src/DonationForms/resources/registrars/templates/layouts/DonationReceipt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,24 @@ import {ReceiptDetail} from '@givewp/forms/types';
import {DonationReceiptProps} from '@givewp/forms/propTypes';
import {Interweave} from 'interweave';

/**
* Strips a single wrapping <p> tag from HTML so content can be safely placed inside
* a block-level tag (e.g. h1 or p) without invalid nested paragraphs.
*
*/
function stripWrappingParagraph(html: string): string {
if (!html || typeof html !== 'string') {
return html ?? '';
}
const trimmed = html.trim();
const openTag = /^\s*<p(?:\s[^>]*)?>\s*/i;
const closeTag = /\s*<\/p>\s*$/i;
if (openTag.test(trimmed) && closeTag.test(trimmed)) {
return trimmed.replace(openTag, '').replace(closeTag, '').trim();
}
return html;
}

/**
* @since 4.3.2 include aria-live and role attributes to the secure badge for screen readers.
* @since 3.0.0
Expand Down Expand Up @@ -61,8 +79,8 @@ export default function DonationReceipt({
<div className="receipt-header">
<div className="receipt-header-top-wrap">
<SecureBadge />
<Interweave tagName="h1" className="receipt-header-heading" content={heading} />
<Interweave tagName="p" className="receipt-header-description" content={description} />
<Interweave tagName="h1" className="receipt-header-heading" content={stripWrappingParagraph(heading)} />
<Interweave tagName="p" className="receipt-header-description" content={stripWrappingParagraph(description)} />
Copy link
Contributor

@jonwaldstein jonwaldstein Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gilbert-hernandez i'd like to suggest a different approach. Although this will sort of fix the issue, it will hinder the intended flexibility of these fields. The idea here is customers can use the rich text field to edit the heading and description fields for the donation confirmation - but as you can see we hardcoded the tagName which kind of defeats the purpose of using a rich text 😏

People may want to add additional information to the donation confirmation that should actually render whatever tags they want to use (including p tags)

So what I would suggest, is we make these both wrapped in divs and let the rich text editor determine their tag. Then, we can update the initial styling here to target any tag. (people can always use custom css later to get specific).

I also don't like the fact we are hardcoding an h1 anyway.

We did something similar with the styling of the Form Header

Suggested change
<Interweave tagName="h1" className="receipt-header-heading" content={stripWrappingParagraph(heading)} />
<Interweave tagName="p" className="receipt-header-description" content={stripWrappingParagraph(description)} />
<Interweave tagName="div" className="receipt-header-heading" content={heading} />
<Interweave tagName="div" className="receipt-header-description" content={description} />

Copy link
Author

@gilbert-hernandez gilbert-hernandez Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jonwaldstein

That makes sense. I see now that the heading and description are wysiwyg components and the inline styles there will overrule the default style, which are applied to any child element with this update.

Copy link
Contributor

@jonwaldstein jonwaldstein Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gilbert-hernandez yup! thanks for the update.

Copy link
Contributor

@jonwaldstein jonwaldstein Feb 12, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gilbert-hernandez oh one more thing - we typically add @unreleased above an existing @since tag to mark the change. You should be able to add one to this file

</div>
</div>

Expand Down