Block Library: Improve view script integration to account for WordPre…

…ss Core (#32977)

lib/blocks.php

@@ -165,37 +165,15 @@ function gutenberg_reregister_core_block_types() {
  * @return void
  */
 function gutenberg_register_core_block_assets( $block_name ) {
+	if ( ! wp_should_load_separate_core_block_assets() ) {
+		return;
+	}
+
 	$block_name = str_replace( 'core/', '', $block_name );
 
 	// When in production, use the plugin's version as the default asset version;
 	// else (for development or test) default to use the current time.
 	$default_version = defined( 'GUTENBERG_VERSION' ) && ! ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? GUTENBERG_VERSION : time();
-	$script_suffix   = '.min.js';
-
-	$view_script_path = "build/block-library/blocks/$block_name/view$script_suffix";
-	if ( file_exists( gutenberg_dir_path() . $view_script_path ) ) {
-		$view_script_handle = "wp-block-{$block_name}-view";
-		wp_deregister_script( $view_script_handle );
-
-		// Replace suffix and extension with `.asset.php` to find the generated dependencies file.
-		$view_asset_file          = substr( $view_script_path, 0, -( strlen( $script_suffix ) ) ) . '.asset.php';
-		$view_asset               = file_exists( gutenberg_dir_path() . $view_asset_file )
-			? require( gutenberg_dir_path() . $view_asset_file )
-			: null;
-		$view_script_dependencies = isset( $view_asset['dependencies'] ) ? $view_asset['dependencies'] : array();
-		$view_script_version      = isset( $view_asset['version'] ) ? $view_asset['version'] : $default_version;
-
-		wp_register_script(
-			$view_script_handle,
-			gutenberg_url( $view_script_path ),
-			$view_script_dependencies,
-			$view_script_version
-		);
-	}
-
-	if ( ! wp_should_load_separate_core_block_assets() ) {
-		return;
-	}
 
 	$style_path        = "build/block-library/blocks/$block_name/style.css";
 	$editor_style_path = "build/block-library/blocks/$block_name/style-editor.css";

lib/client-assets.php

@@ -236,15 +236,14 @@ function gutenberg_register_packages_scripts( $scripts ) {
 	// When in production, use the plugin's version as the default asset version;
 	// else (for development or test) default to use the current time.
 	$default_version = defined( 'GUTENBERG_VERSION' ) && ! ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? GUTENBERG_VERSION : time();
-	$suffix          = '.min.js';
 
-	foreach ( glob( gutenberg_dir_path() . "build/*/index$suffix" ) as $path ) {
+	foreach ( glob( gutenberg_dir_path() . 'build/*/index.min.js' ) as $path ) {
 		// Prefix `wp-` to package directory to get script handle.
 		// For example, `…/build/a11y/index.min.js` becomes `wp-a11y`.
 		$handle = 'wp-' . basename( dirname( $path ) );
 
-		// Replace suffix and extension with `.asset.php` to find the generated dependencies file.
-		$asset_file   = substr( $path, 0, -( strlen( $suffix ) ) ) . '.asset.php';
+		// Replace extension with `.asset.php` to find the generated dependencies file.
+		$asset_file   = substr( $path, 0, -( strlen( '.js' ) ) ) . '.asset.php';
 		$asset        = file_exists( $asset_file )
 			? require( $asset_file )
 			: null;

lib/compat/wordpress-5.8/blocks.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Blocks.
+ *
+ * @package Gutenberg
+ * @subpackage Editor
+ * @since 11.0.0
+ */
+
+/**
+ * Registers view scripts for core blocks if handling is missing in WordPress core.
+ *
+ * This is a temporary solution until the Gutenberg plugin sets
+ * the required WordPress version to 5.8.
+ *
+ * @param array $settings Array of determined settings for registering a block type.
+ * @param array $metadata Metadata provided for registering a block type.
+ *
+ * @return array Array of settings for registering a block type.
+ */
+function gutenberg_block_type_metadata_view_script( $settings, $metadata ) {
+	if (
+		! isset( $metadata['viewScript'] ) ||
+		! empty( $settings['view_script'] ) ||
+		! isset( $metadata['file'] ) ||
+		strpos( $metadata['file'], gutenberg_dir_path() ) !== 0
+	) {
+		return $settings;
+	}
+
+	$view_script_path = realpath( dirname( $metadata['file'] ) . '/' . remove_block_asset_path_prefix( $metadata['viewScript'] ) );
+	if ( file_exists( $view_script_path ) ) {
+		$view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-view';
+		wp_deregister_script( $view_script_handle );
+
+		// Replace suffix and extension with `.asset.php` to find the generated dependencies file.
+		$view_asset_file          = substr( $view_script_path, 0, -( strlen( '.js' ) ) ) . '.asset.php';
+		$view_asset               = file_exists( $view_asset_file ) ? require( $view_asset_file ) : null;
+		$view_script_dependencies = isset( $view_asset['dependencies'] ) ? $view_asset['dependencies'] : array();
+		$view_script_version      = isset( $view_asset['version'] ) ? $view_asset['version'] : false;
+
+		$result = wp_register_script(
+			$view_script_handle,
+			gutenberg_url( str_replace( gutenberg_dir_path(), '', $view_script_path ) ),
+			$view_script_dependencies,
+			$view_script_version,
+			true
+		);
+		if ( $result ) {
+			$settings['view_script'] = $view_script_handle;
+		}
+	}
+
+	return $settings;
+}
+
+add_filter( 'block_type_metadata_settings', 'gutenberg_block_type_metadata_view_script', 10, 2 );

lib/compat/wordpress-5.8/index.php

@@ -12,6 +12,7 @@
 }
 
 require_once __DIR__ . '/block-editor.php';
+require_once __DIR__ . '/blocks.php';
 
 if ( ! function_exists( 'build_query_vars_from_query_block' ) ) {
 	/**

packages/block-library/src/file/block.json

@@ -51,6 +51,7 @@
 		"anchor": true,
 		"align": true
 	},
+	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",
 	"style": "wp-block-file"
 }

packages/block-library/src/navigation/block.json

@@ -70,6 +70,7 @@
 		},
 		"color": true
 	},
+	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

packages/dependency-extraction-webpack-plugin/lib/index.js

@@ -179,7 +179,7 @@ class DependencyExtractionWebpackPlugin {
 				}
 
 				const assetFilename = buildFilename.replace(
-					/(\.min)?\.js$/i,
+					/\.js$/i,
 					'.asset.' + ( outputFormat === 'php' ? 'php' : 'json' )
 				);