Add block to extract embeds from post content in query loops

client-side-extract-embed/.editorconfig

@@ -0,0 +1,18 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[*.{yml,yaml}]
+indent_style = space
+indent_size = 2

client-side-extract-embed/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Output of `npm pack`
+*.tgz
+
+# Output of `wp-scripts plugin-zip`
+*.zip
+
+# dotenv environment variables file
+.env

client-side-extract-embed/client-side-extract-embed.php

@@ -0,0 +1,87 @@
+<?php
+
+/**
+ * Plugin Name:       Client Side Extract Embed
+ * Description:       Extracts an embed URL from post content and renders it
+ *                    as an embed block. For use in query loop post templates
+ *                    with region-based client side navigation enabled,
+ *                    where one is unable to read from the post content directly.
+ * Requires at least: 6.1
+ * Requires PHP:      7.0
+ * Version:           0.1.0
+ * Author:            WordPress.com Special Projects Team
+ * License:           GPL-2.0-or-later
+ * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+ * Text Domain:       client-side-extract-embed
+ *
+ * @package CreateBlock
+ */
+
+/**
+ * Retrieves an embed URL from the post content
+ * and dynamically renders it as an embed block.
+ * Borrows heavily from the core/embed block.
+ *
+ * @since 5.0.0
+ *
+ * @param array $attributes The block attributes.
+ * @param string $content The block content.
+ * @param WP_Block $block The block object.
+ *
+ * @return string Returns the embed block content.
+ */
+function render_block_client_side_extract_embed( $attributes, $content, $block ) {
+	$post_id       = $block->context['postId'];
+	$post          = get_post( $post_id );
+	$content       = $post->post_content;
+	$parsed_blocks = parse_blocks( $content );
+	$embed_url     = '';
+
+	foreach ( $parsed_blocks as $block ) {
+		if ( isset( $block['blockName'] ) && 'core/embed' === $block['blockName'] ) {
+			if ( isset( $block['attrs']['url'] ) ) {
+				$embed_url = $block['attrs']['url'];
+				break; // Stop the loop once the first embed URL is found
+			}
+		}
+	}
+
+	if ( ! $embed_url ) {
+		return ''; // Return empty if no embed URL found
+	}
+
+	// Create an embed block content as a string
+	$youtube_block =
+	'<!-- wp:embed {"url":"' . $embed_url . '","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
+		<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
+			<div class="wp-block-embed__wrapper">
+				' . $embed_url . '
+			</div>
+	</figure>
+	<!-- /wp:embed -->';
+
+	$parsed = do_blocks( $youtube_block );
+
+	// Create iframe embeds
+	global $wp_embed;
+	$content = $wp_embed->autoembed( $parsed );
+
+	return $content;
+}
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @return void
+ */
+function create_block_client_side_extract_embed_block_init() {
+	register_block_type(
+		__DIR__ . '/build',
+		array(
+			'render_callback' => 'render_block_client_side_extract_embed',
+		)
+	);
+}
+add_action( 'init', 'create_block_client_side_extract_embed_block_init' );