Plugin Directory: Try using core Gallery & Image blocks for screenshots

wordpress.org/public_html/wp-content/plugins/plugin-directory/class-plugin-directory.php

@@ -1711,7 +1711,7 @@ public function oembed_whitelist( $providers ) {
 	public function split_post_content_into_pages( $content ) {
 		$_pages        = preg_split( '#<!--section=(.+?)-->#', ltrim( $content ), - 1, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY );
 		$content_pages = array(
-			'screenshots' => '[wporg-plugins-screenshots]',
+			'screenshots' => '<!-- wp:pattern {"slug":"wporg-plugins-2024/section-screenshots"} /-->',
 			'developers'  => '[wporg-plugins-developers]',
 			'reviews'     => '[wporg-plugins-reviews]',
 		);

wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/client/styles/components/_components.scss

@@ -18,7 +18,6 @@
 @import "../../components/plugin/sections-faq";
 @import "../../components/plugin/sections-image-gallery";
 @import "../../components/plugin/sections-reviews";
-@import "../../components/plugin/sections-screenshots";
 @import "../../components/plugin/sections-stats";
 @import "../../components/plugin/sections";
 @import "../../components/plugin/style";

wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/functions.php

@@ -139,33 +139,6 @@ function scripts() {
 		wp_enqueue_script( 'wporg-plugins-upload', get_stylesheet_directory_uri() . '/js/upload.js', array( 'wp-api', 'jquery' ), filemtime( __DIR__ . '/js/upload.js' ), true );
 	}
 
-	// React is currently only used on detail pages.
-	if ( is_single() ) {
-		$assets_path = dirname( __FILE__ ) . '/js/build/theme.asset.php';
-		if ( file_exists( $assets_path ) ) {
-			$script_info = require( $assets_path );
-			wp_enqueue_script(
-				'wporg-plugins-client',
-				get_stylesheet_directory_uri() . '/js/build/theme.js',
-				$script_info['dependencies'],
-				$script_info['version'],
-				true
-			);
-			wp_localize_script(
-				'wporg-plugins-client',
-				'localeData',
-				array(
-					'' => array(
-						'Plural-Forms' => _x( 'nplurals=2; plural=n != 1;', 'plural forms', 'wporg-plugins' ),
-						'Language'     => _x( 'en', 'language (fr, fr_CA)', 'wporg-plugins' ),
-						'localeSlug'   => _x( 'en', 'locale slug', 'wporg-plugins' ),
-					),
-					'screenshots' => __( 'Screenshots', 'wporg-plugins' ),
-				)
-			);
-		}
-	}
-
 	// No Jetpack scripts needed.
 	add_filter( 'jetpack_implode_frontend_css', '__return_false' );
 	wp_dequeue_script( 'devicepx' );
@@ -196,7 +169,6 @@ function loader_src( $src, $handle ) {
 		'wporg-plugins-popover',
 		'wporg-plugins-locale-banner',
 		'wporg-plugins-stats',
-		'wporg-plugins-client',
 		'wporg-plugins-faq',
 	];
 

wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/patterns/section-plugin-screenshots.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Title: Screenshots Section
+ * Slug: wporg-plugins-2024/section-screenshots
+ * Inserter: no
+ *
+ * This is dynamically included by the sectioning code in `split_post_content_into_pages`.
+ */
+
+namespace WordPressdotorg\Plugin_Directory\Theme\Pattern\Screenshot;
+
+use WordPressdotorg\Plugin_Directory\Template;
+
+$screenshots = Template::get_screenshots();
+?>
+<!-- wp:gallery {"linkTo":"lightbox","sizeSlug":"full","align":"wide"} -->
+<figure class="wp-block-gallery alignwide has-nested-images columns-default is-cropped">
+
+<?php foreach ( $screenshots as $image ) : ?>
+	<!-- wp:image {"lightbox":{"enabled":true},"id":null,"sizeSlug":"full","linkDestination":"none"} -->
+	<figure class="wp-block-image size-full">
+		<?php
+			printf(
+				'<img class="wp-image-55474" src="%1$s" alt="" />',
+				esc_url( $image['src'] )
+			);
+		?>
+		<?php if ( ! empty( $image['caption'] ) ) : ?>
+			<figcaption class="wp-element-caption"><?php echo esc_html( $image['caption'] ); ?></figcaption>
+		<?php endif; ?>
+	</figure>
+	<!-- /wp:image -->
+<?php endforeach; ?>
+
+</figure>
+<!-- /wp:gallery -->