Update EmbedBlock to support additional providers and improve rendering logic

[sjoerdbeentjes]

Description

• Enhance EmbedBlock to correctly render Twitter, YouTube, and Vimeo embeds.
• Add specific tests for Twitter, YouTube, Vimeo, and others.
• Refactor EmbedBlock.astro and embeds/Default.astro for improved readability and structure.
• Add support for EmbedBlock in TextBlock.fragment.graphql.

Changes

• Adds test coverage for major embed providers: Twitter, YouTube, Vimeo, Flickr, CodePen.
• Improves internal logic of EmbedBlock.astro to handle provider-specific data safely.
• Refactors embed placeholder rendering and iframe logic with fallback options.
• Updates the embed block's HTML/CSS for better accessibility and styling.
• Adds the EmbedBlock fragment to TextBlock.fragment.graphql.

Associated issue

https://trello.com/c/jSFaAg3D/105-iframe-spotify

How to test

1. Run the project with datocmsEnvironment set to embed-test.
2. Visit a page that includes embedded content (e.g. a TextBlock).
3. Verify that:
   • Twitter embeds render correctly, including script and fallback.
   • YouTube and Vimeo videos render in iframe with correct styling and dimensions.
   • Embed placeholders are shown correctly for slow-loading or disabled JavaScript.
4. Check tests:
   • Run vitest or relevant command to confirm all new EmbedBlock tests pass.

Checklist

• I have performed a self-review of my own code
• I have made sure that my PR is easy to review (not too big, includes comments)
• I have updated relevant documentation files (in project README, docs/, etc)
• I have added a decision log entry if the change affects the architecture or changes a significant technology
• I have notified a reviewer

[cloudflare-workers-and-pages]

Deploying dda-website with    Cloudflare Pages

Latest commit:	2019c8a
Status:	✅  Deploy successful!
Preview URL:	https://6cb5a325.dda-website.pages.dev
Branch Preview URL:	https://embeds.dda-website.pages.dev

View logs

[Copilot]

Pull Request Overview

This PR extends EmbedBlock to support Twitter, YouTube, and Vimeo embeds, refactors rendering logic for better readability, and integrates the new fragment into TextBlock.

• Imports and includes the EmbedBlock fragment in TextBlock.fragment.graphql
• Refactors Default.astro conditional rendering and styling
• Adds tests for Twitter, YouTube, and Vimeo embeds
• Updates destructuring in EmbedBlock.astro and temporarily switches the environment in datocms-environment.ts

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/blocks/TextBlock/TextBlock.fragment.graphql	Imported and added the EmbedBlock fragment to the TextBlock query
src/blocks/EmbedBlock/embeds/Default.astro	Reformatted imports, updated conditional <template> logic, adjusted CSS
src/blocks/EmbedBlock/EmbedBlock.test.ts	Added tests for Twitter, YouTube, and Vimeo embed rendering
src/blocks/EmbedBlock/EmbedBlock.astro	Introduced explicit type cast on block destructuring
datocms-environment.ts	Changed datocmsEnvironment to embed-test (likely unintended)

Comments suppressed due to low confidence (3)

src/blocks/EmbedBlock/embeds/Default.astro:44

• The <template> tag no longer uses set:html, so the HTML snippet may not be injected as intended. Consider restoring the original <template set:html={html}></template> syntax or ensure the inner <div set:html={html}/> within <template> is supported.

<template>

datocms-environment.ts:6

• Committing a test environment value (embed-test) here may override production settings unexpectedly. Revert to the default environment or make this conditional to avoid configuration leaks.

export const datocmsEnvironment = 'embed-test';

src/blocks/EmbedBlock/EmbedBlock.test.ts:127

• The Twitter test checks data-provider="Twitter" (capital T) but this YouTube test expects lowercase youtube. Verify that the attribute value casing is consistent or adjust the selector to match the actual output.

expect(fragment.querySelector('[data-provider="youtube"]')).toBeTruthy();

[Copilot]

[nitpick] The explicit type cast on block is redundant if EmbedBlockFragment already defines data and url. Consider simplifying to const { data, url } = block; for clarity.

Suggested change

	const { data, url }: { data: OEmbedAny; url: string } = block as {
	data: OEmbedAny;
	url: string;
	};
	const { data, url } = block;