HighlightBlockElement

[oliverlloyd]

What does this change?

Adds a new element HighlightBlockComponent to support unquoted blockquote text

type Props = {
    html: string;
};

We've branched from the style in frontend slightly here to align better with Source

Example: https://www.theguardian.com/uk-news/2020/apr/22/eddies-last-farewell-a-funeral-in-the-time-of-coronavirus-photo-essay?dcr=false

Why?

Because we sometimes want to highlight a piece of text but it might not be a quote

[PRBuilds]

PRbuilds results:

💚 AMP validation
amp-report.txt

LightHouse Reporting
1592981507.report.html

--automated message

[github-actions]

Size Change: +2.88 kB (0%)

Total Size: 544 kB

Filename	Size	Change
dist/frontend.server.js	204 kB	+1.81 kB (0%)
dist/react.js	98.9 kB	+471 B (0%)
dist/react.legacy.js	101 kB	+594 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
dist/dynamicImport.js	1.89 kB	0 B
dist/dynamicImport.legacy.js	1.94 kB	0 B
dist/ga.js	1.95 kB	0 B
dist/ga.legacy.js	2.44 kB	0 B
dist/GetMatchStats.js	3.44 kB	0 B
dist/GetMatchStats.legacy.js	3.52 kB	0 B
dist/lotame.js	1.08 kB	0 B
dist/lotame.legacy.js	1.07 kB	0 B
dist/MostViewedFooterData.js	5.63 kB	0 B
dist/MostViewedFooterData.legacy.js	5.84 kB	0 B
dist/MostViewedRightWrapper.js	6.25 kB	0 B
dist/MostViewedRightWrapper.legacy.js	6.48 kB	0 B
dist/OnwardsLower.js	10.6 kB	0 B
dist/OnwardsLower.legacy.js	10.9 kB	0 B
dist/OnwardsUpper.js	11.2 kB	0 B
dist/OnwardsUpper.legacy.js	11.4 kB	0 B
dist/ophan.js	5.45 kB	0 B
dist/ophan.legacy.js	5.43 kB	0 B
dist/sentry.js	18.7 kB	0 B
dist/sentry.legacy.js	18.3 kB	0 B
dist/shimport.js	3.19 kB	0 B
dist/shimport.legacy.js	3.2 kB	0 B

_{compressed-size-action}

[gtrufitt]

This looks semantically incorrect to me? As in, it's not used for quotes.

I'm assuming there's some logic for how this works in photo essays, but my preference would be we re-write the element in enhanceCapi (or Frontend?) and send through as a different blockElement type. Something like 'highlight' maybe.

[oliverlloyd]

This looks semantically incorrect to me? As in, it's not used for quotes.

I'm assuming there's some logic for how this works in photo essays, but my preference would be we re-write the element in enhanceCapi (or Frontend?) and send through as a different blockElement type. Something like 'highlight' maybe.

You're right, a blockquote should contain a quote. To have a quoted: boolean prop or class breaks this. I've brokwn this out into a new element

[oliverlloyd]

HighlightBlockElement