Skip to content

Handle <br> elements in SubheadingBlockComponent #13874

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

Jump to bottom
Merged
merged 1 commit into from
Apr 30, 2025
Merged

Handle <br> elements in SubheadingBlockComponent #13874

merged 1 commit into from
Apr 30, 2025

Conversation

jamesmockett
Copy link
Contributor

What does this change?

Explicitly handles <br> elements in subheadings

Why?

<br> is caught by the default statement which creates a JSX element from the node's tag name, but also passes in child nodes. <br> is a self-closing tag and should not have any child elements.

This doesn't cause any issues in Preact, but when rendering with React an error is thrown which prevents the page from being rendered.

Error: br is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`

https://www.theguardian.com/technology/2015/oct/24/seat-ibiza-car-review-zoe-williams

Screenshot 2025-04-29 at 15 09 35

@jamesmockett jamesmockett self-assigned this Apr 30, 2025
@github-actions GitHub Actions
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@jamesmockett jamesmockett linked an issue Apr 30, 2025 that may be closed by this pull request
[Bug]: Interactives : Articles not loading in dev env on DCR #9141
Closed
@github-actions GitHub Actions
Copy link

github-actions bot commented Apr 30, 2025 •
edited
Loading

Deploy build 18174 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

github-actions bot commented Apr 30, 2025 •
edited
Loading

Size Change: 0 B

Total Size: 973 kB

ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1032.client.web.********************.js 3.31 kB
dotcom-rendering/dist/117.client.web.********************.js 2.87 kB
dotcom-rendering/dist/1244.client.web.********************.js 16.5 kB
dotcom-rendering/dist/1656.client.web.********************.js 50.2 kB
dotcom-rendering/dist/2045.client.web.********************.js 2.63 kB
dotcom-rendering/dist/2161.client.web.********************.js 3.88 kB
dotcom-rendering/dist/223.client.web.********************.js 527 B
dotcom-rendering/dist/2270.client.web.********************.js 3.65 kB
dotcom-rendering/dist/2309.client.web.********************.js 3.27 kB
dotcom-rendering/dist/2345.client.web.********************.js 3.38 kB
dotcom-rendering/dist/2360.client.web.********************.js 19.9 kB
dotcom-rendering/dist/2375.client.web.********************.js 2.77 kB
dotcom-rendering/dist/302.client.web.********************.js 8.84 kB
dotcom-rendering/dist/3226.client.web.********************.js 2.85 kB
dotcom-rendering/dist/3292.client.web.********************.js 2.11 kB
dotcom-rendering/dist/3485.client.web.********************.js 4.67 kB
dotcom-rendering/dist/3598.client.web.********************.js 3.65 kB
dotcom-rendering/dist/3605.client.web.********************.js 15.1 kB
dotcom-rendering/dist/3619.client.web.********************.js 4.46 kB
dotcom-rendering/dist/3950.client.web.********************.js 3.36 kB
dotcom-rendering/dist/4258.client.web.********************.js 4.08 kB
dotcom-rendering/dist/4306.client.web.********************.js 22.7 kB
dotcom-rendering/dist/4308.client.web.********************.js 3.57 kB
dotcom-rendering/dist/4324.client.web.********************.js 619 B
dotcom-rendering/dist/4457.client.web.********************.js 6.25 kB
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB
dotcom-rendering/dist/4577.client.web.********************.js 3.13 kB
dotcom-rendering/dist/4684.client.web.********************.js 20.3 kB
dotcom-rendering/dist/4685.client.web.********************.js 3.12 kB
dotcom-rendering/dist/4900.client.web.********************.js 2.88 kB
dotcom-rendering/dist/4958.client.web.********************.js 3.9 kB
dotcom-rendering/dist/5144.client.web.********************.js 2.55 kB
dotcom-rendering/dist/5448.client.web.********************.js 4.37 kB
dotcom-rendering/dist/545.client.web.********************.js 531 B
dotcom-rendering/dist/5455.client.web.********************.js 7.15 kB
dotcom-rendering/dist/547.client.web.********************.js 5.42 kB
dotcom-rendering/dist/5612.client.web.********************.js 7.98 kB
dotcom-rendering/dist/562.client.web.********************.js 11.5 kB
dotcom-rendering/dist/5734.client.web.********************.js 2.62 kB
dotcom-rendering/dist/6038.client.web.********************.js 2.76 kB
dotcom-rendering/dist/610.client.web.********************.js 2.67 kB
dotcom-rendering/dist/6217.client.web.********************.js 3.75 kB
dotcom-rendering/dist/6548.client.web.********************.js 3.29 kB
dotcom-rendering/dist/6562.client.web.********************.js 439 B
dotcom-rendering/dist/6722.client.web.********************.js 3.03 kB
dotcom-rendering/dist/6802.client.web.********************.js 2.51 kB
dotcom-rendering/dist/6873.client.web.********************.js 4.13 kB
dotcom-rendering/dist/695.client.web.********************.js 4.51 kB
dotcom-rendering/dist/6966.client.web.********************.js 3.68 kB
dotcom-rendering/dist/7116.client.web.********************.js 23.2 kB
dotcom-rendering/dist/732.client.web.********************.js 3.07 kB
dotcom-rendering/dist/7398.client.web.********************.js 3.57 kB
dotcom-rendering/dist/7487.client.web.********************.js 4.23 kB
dotcom-rendering/dist/781.client.web.********************.js 156 B
dotcom-rendering/dist/7927.client.web.********************.js 2.77 kB
dotcom-rendering/dist/8050.client.web.********************.js 3.1 kB
dotcom-rendering/dist/8151.client.web.********************.js 4.17 kB
dotcom-rendering/dist/8212.client.web.********************.js 5.04 kB
dotcom-rendering/dist/8385.client.web.********************.js 3.88 kB
dotcom-rendering/dist/8436.client.web.********************.js 3.63 kB
dotcom-rendering/dist/8602.client.web.********************.js 3.39 kB
dotcom-rendering/dist/8619.client.web.********************.js 4.44 kB
dotcom-rendering/dist/864.client.web.********************.js 3.17 kB
dotcom-rendering/dist/8942.client.web.********************.js 4.44 kB
dotcom-rendering/dist/8985.client.web.********************.js 11.1 kB
dotcom-rendering/dist/9018.client.web.********************.js 3.73 kB
dotcom-rendering/dist/9135.client.web.********************.js 3.54 kB
dotcom-rendering/dist/9209.client.web.********************.js 2.91 kB
dotcom-rendering/dist/9376.client.web.********************.js 2.52 kB
dotcom-rendering/dist/967.client.web.********************.js 2.87 kB
dotcom-rendering/dist/9709.client.web.********************.js 2.73 kB
dotcom-rendering/dist/9822.client.web.********************.js 7.63 kB
dotcom-rendering/dist/9870.client.web.********************.js 4.77 kB
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.42 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.99 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.76 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 426 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.61 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.69 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.61 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.61 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.61 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.89 kB
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 67.7 kB
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.68 kB
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.67 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.55 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.3 kB
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.87 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.07 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.41 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 3.46 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.85 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.42 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.98 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.93 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.71 kB
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 618 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.53 kB
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.2 kB
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.26 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 364 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.43 kB
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.51 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.29 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.5 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.1 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.6 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B
dotcom-rendering/dist/index.client.web.********************.js 46.2 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 854 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.82 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.76 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.69 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.19 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.95 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.56 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.56 kB
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.49 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.84 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.71 kB
dotcom-rendering/dist/LoopVideo-importable.client.web.********************.js 3.54 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.68 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.04 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.98 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.25 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.37 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.35 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 751 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.7 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.56 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.15 kB
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.62 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 7.27 kB
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.11 kB
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.17 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.21 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB
dotcom-rendering/dist/sentry.client.web.********************.js 802 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.91 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 488 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.18 kB
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 899 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 919 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.35 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.46 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 6.67 kB
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.56 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.91 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.8 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.04 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.44 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.52 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.6 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.85 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.49 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.92 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.06 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.32 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 843 B

compressed-size-action

@jamesmockett jamesmockett force-pushed the jm/subheading-br-element branch from 90dd1cd to 4b75299 Compare April 30, 2025 13:09
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Apr 30, 2025
@github-actions GitHub Actions
Copy link

Deploy build 42377 of Mobile::mobile-apps-rendering to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Apr 30, 2025
@jamesmockett jamesmockett merged commit 9951edb into main Apr 30, 2025
32 checks passed
@jamesmockett jamesmockett deleted the jm/subheading-br-element branch April 30, 2025 13:26
@prout-bot
Copy link

Seen on PROD (merged by @jamesmockett 11 minutes and 15 seconds ago) Please check your changes!

@jamesmockett jamesmockett mentioned this pull request May 1, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JamieB-gu JamieB-gu JamieB-gu approved these changes

Assignees

@jamesmockett jamesmockett

Labels
dotcom-rendering Seen-on-PROD
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug]: Interactives : Articles not loading in dev env on DCR
3 participants
@jamesmockett @prout-bot @JamieB-gu