Embed block: add lazy-load iframe option

[sidharthpandita1]

What?

Closes <!#77594>

Adds an optional Lazy-load toggle to the Embed block's Media settings inspector panel. When enabled, the block's iframe is rendered with loading="lazy", deferring the load of offscreen embeds (e.g. YouTube videos below the fold). The feature is opt-in and off by default, so all existing embeds are unaffected.

---

Why?

Pages with multiple video embeds — especially YouTube — can suffer significant performance penalties because all iframes load eagerly on page load, regardless of whether they are visible. Native loading="lazy" on iframes is well-supported and recommended by modern web performance guidelines (Core Web Vitals, Lighthouse). Currently there is no built-in way to enable this in the Embed block without custom code or a third-party plugin.

---

How?

• block.json — Registers a new lazyLoad boolean attribute (default false).
• embed-controls.js — Adds a Lazy-load ToggleControl inside the existing Media settings ToolsPanel in the block inspector. The panel now renders for all embeds (not only responsive ones) so the toggle is always accessible.
• edit.js — Destructures lazyLoad from attributes, defines toggleLazyLoad(), and passes both down to EmbedControls.
• index.php — Introduces a PHP render_callback (render_block_core_embed) that uses WP_HTML_Tag_Processor to inject loading="lazy" on every <iframe> in the rendered block HTML when lazyLoad is true. When false, content is returned unchanged.

No changes to save.js — the attribute is stored only in the block comment delimiter and applied entirely server-side, keeping the feature backward-compatible.

---

Testing Instructions

1. Open a post or page in the block editor.
2. Insert a YouTube Embed block (or any Embed block).
3. Paste a YouTube URL (e.g. https://www.youtube.com/watch?v=dQw4w9WgXcQ) and click Embed.
4. With the block selected, open the Block tab in the right sidebar.
5. Scroll down to the Media settings panel — confirm a new Lazy-load toggle is present and defaults to off.
6. Toggle Lazy-load on and click Save.
7. View the page on the frontend and inspect the embed's <iframe> element — it should have loading="lazy".
8. Toggle Lazy-load back off, save, and re-inspect — loading="lazy" should be absent.
9. Verify existing embeds (with no lazyLoad attribute saved) render without loading="lazy" (backward compat).

Testing Instructions for Keyboard

1. Navigate to the block using Tab / arrow keys.
2. Open the Block sidebar with Ctrl+Shift+, (or via the toolbar options menu).
3. Tab through the Media settings panel to reach the Lazy-load toggle.
4. Press Space to toggle it on/off — confirm the state changes correctly.
5. Save the post with Ctrl+S and verify the result on the frontend as above.

---

Screenshots or screencast

Before | After -- | -- Media settings panel — only "Resize for smaller devices" shown (when responsive theme) | Media settings panel — "Lazy-load" toggle visible for all embed types

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sidharthpandita1 <sidharthpandita@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR, but did you know that WordPress, by default, adds the loading attribute to img and iframe elements based on specific rules? This is achieved through functions such as wp_filter_content_tags() and wp_omit_loading_attr_threshold().

Therefore, we do not recommend adding specific functionalities to specific blocks. It is already possible to control how the loading attribute is applied through various filters.