Style engine: move backend scripts to package (#39736)

* Initial commit:
- moving Style Engine class and tests to packages
- updating build script to copy package PHP into the build folder
- rename methods and classes

* Removing style engine from Gutenberg's phpunit suite since it's based in the package now.

lib/load.php

@@ -127,10 +127,10 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-5.9/kses.php';
 require __DIR__ . '/pwa.php';
 
-// TODO: Move this to be loaded from the style engine package, via the build directory.
-// Part of the build process should be to copy the PHP file to the correct location,
-// similar to the loading behaviour in `blocks.php`.
-require __DIR__ . '/experimental/style-engine/class-wp-style-engine-gutenberg.php';
+// Copied package PHP files.
+if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php';
+}
 
 require __DIR__ . '/block-supports/utils.php';
 require __DIR__ . '/block-supports/elements.php';

lib/experimental/style-engine/class-wp-style-engine-gutenberg.php → packages/style-engine/class-wp-style-engine.php

@@ -1,13 +1,13 @@
 <?php
 /**
- * WP_Style_Engine_Gutenberg class
+ * WP_Style_Engine
  *
  * Generates classnames and block styles.
  *
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine_Gutenberg' ) ) {
+if ( class_exists( 'WP_Style_Engine' ) ) {
 	return;
 }
 
@@ -17,11 +17,11 @@
  * Consolidates rendering block styles to reduce duplication and streamline
  * CSS styles generation.
  */
-class WP_Style_Engine_Gutenberg {
+class WP_Style_Engine {
 	/**
 	 * Container for the main instance of the class.
 	 *
-	 * @var WP_Style_Engine_Gutenberg|null
+	 * @var WP_Style_Engine|null
 	 */
 	private static $instance = null;
 
@@ -55,7 +55,7 @@ class WP_Style_Engine_Gutenberg {
 	 *
 	 * The instance will be created if it does not exist yet.
 	 *
-	 * @return WP_Style_Engine_Gutenberg The main instance.
+	 * @return WP_Style_Engine The main instance.
 	 */
 	public static function get_instance() {
 		if ( null === self::$instance ) {
@@ -169,3 +169,14 @@ public static function get_css_box_rules( $style_value, $style_property ) {
 		return $rules;
 	}
 }
+
+/**
+ * This function returns the Style Engine instance.
+ *
+ * @return WP_Style_Engine
+ */
+function wp_get_style_engine() {
+	if ( class_exists( 'WP_Style_Engine' ) ) {
+		return WP_Style_Engine::get_instance();
+	}
+}

phpunit/style-engine/class-wp-style-engine-gutenberg-test.php → packages/style-engine/phpunit/class-wp-style-engine-test.php

@@ -6,17 +6,19 @@
  * @subpackage style-engine
  */
 
+require __DIR__ . '/../class-wp-style-engine.php';
+
 /**
  * Tests for registering, storing and generating styles.
  */
-class WP_Style_Engine_Gutenberg_Test extends WP_UnitTestCase {
+class WP_Style_Engine_Test extends WP_UnitTestCase {
 	/**
 	 * Tests various manifestations of the $block_styles argument.
 	 *
 	 * @dataProvider data_block_styles_fixtures
 	 */
 	function test_generate_css( $block_styles, $options, $expected_output ) {
-		$style_engine     = WP_Style_Engine_Gutenberg::get_instance();
+		$style_engine     = WP_Style_Engine::get_instance();
 		$generated_styles = $style_engine->generate(
 			$block_styles,
 			$options

phpunit.xml.dist

@@ -10,6 +10,9 @@
 		<testsuite name="default">
 			<directory suffix="-test.php">./phpunit/</directory>
 		</testsuite>
+		<testsuite name="packages">
+			<directory suffix="-test.php">./packages/**/phpunit/</directory>
+		</testsuite>
 	</testsuites>
 	<groups>
 		<exclude>

tools/webpack/packages.js

@@ -20,12 +20,55 @@ const { dependencies } = require( '../../package' );
 const { baseConfig, plugins, stylesTransform } = require( './shared' );
 
 const WORDPRESS_NAMESPACE = '@wordpress/';
+
+// Experimental or other packages that should be private are bundled when used.
+// That way, we can iterate on these package without making them part of the public API.
+// See: https://github.com/WordPress/gutenberg/pull/19809
 const BUNDLED_PACKAGES = [
 	'@wordpress/icons',
 	'@wordpress/interface',
 	'@wordpress/style-engine',
 ];
 
+// PHP files in packages that have to be copied during build.
+const bundledPackagesPhpConfig = [
+	{
+		from: './packages/style-engine/',
+		to: 'build/style-engine/',
+		replaceClasses: [ 'WP_Style_Engine' ],
+	},
+].map( ( { from, to, replaceClasses } ) => ( {
+	from: `${ from }/*.php`,
+	to( { absoluteFilename } ) {
+		const [ , filename ] = absoluteFilename.match(
+			/([\w-]+)(\.php){1,1}$/
+		);
+		return join( to, `${ filename }-gutenberg.php` );
+	},
+	transform: ( content ) => {
+		const classSuffix = '_Gutenberg';
+		const functionPrefix = 'gutenberg_';
+		content = content.toString();
+		// Replace class names.
+		content = content.replace(
+			new RegExp( replaceClasses.join( '|' ), 'g' ),
+			( match ) => `${ match }${ classSuffix }`
+		);
+		// Replace function names.
+		content = Array.from(
+			content.matchAll( /^\s*function ([^\(]+)/gm )
+		).reduce( ( result, [ , functionName ] ) => {
+			// Prepend the Gutenberg prefix, substituting any
+			// other core prefix (e.g. "wp_").
+			return result.replace(
+				new RegExp( functionName, 'g' ),
+				( match ) => functionPrefix + match.replace( /^wp_/, '' )
+			);
+		}, content );
+		return content;
+	},
+} ) );
+
 const gutenbergPackages = Object.keys( dependencies )
 	.filter(
 		( packageName ) =>
@@ -107,6 +150,7 @@ module.exports = {
 					transform: stylesTransform,
 					noErrorOnMissing: true,
 				} ) )
+				.concat( bundledPackagesPhpConfig )
 				.concat( vendorsCopyConfig ),
 		} ),
 	].filter( Boolean ),