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

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();
+	}
+}

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

@@ -0,0 +1,158 @@
+<?php
+/**
+ * Tests the Style Engine class and associated functionality.
+ *
+ * @package    Gutenberg
+ * @subpackage style-engine
+ */
+
+require __DIR__ . '/../class-wp-style-engine.php';
+
+/**
+ * Tests for registering, storing and generating styles.
+ */
+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::get_instance();
+		$generated_styles = $style_engine->generate(
+			$block_styles,
+			$options
+		);
+		$this->assertSame( $expected_output, $generated_styles );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_block_styles_fixtures() {
+		return array(
+			'default_return_value'                         => array(
+				'block_styles'    => array(),
+				'options'         => null,
+				'expected_output' => '',
+			),
+
+			'inline_invalid_block_styles_empty'            => array(
+				'block_styles'    => array(),
+				'options'         => array(
+					'path'   => array( 'spacing', 'padding' ),
+					'inline' => true,
+				),
+				'expected_output' => '',
+			),
+
+			'inline_invalid_block_styles_unknown_style'    => array(
+				'block_styles'    => array(
+					'pageBreakAfter' => 'verso',
+				),
+				'options'         => array(
+					'inline' => true,
+				),
+				'expected_output' => '',
+			),
+
+			'inline_invalid_block_styles_unknown_definition' => array(
+				'block_styles'    => array(
+					'pageBreakAfter' => 'verso',
+				),
+				'options'         => array(
+					'path'   => array( 'pageBreakAfter', 'verso' ),
+					'inline' => true,
+				),
+				'expected_output' => '',
+			),
+
+			'inline_invalid_block_styles_unknown_property' => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'gap' => '1000vw',
+					),
+				),
+				'options'         => array(
+					'path'   => array( 'spacing', 'padding' ),
+					'inline' => true,
+				),
+				'expected_output' => '',
+			),
+
+			'inline_invalid_multiple_style_unknown_property' => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'gavin' => '1000vw',
+					),
+				),
+				'options'         => array(
+					'inline' => true,
+				),
+				'expected_output' => '',
+			),
+
+			'inline_valid_single_style_string'             => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'margin' => '111px',
+					),
+				),
+				'options'         => array(
+					'path'   => array( 'spacing', 'margin' ),
+					'inline' => true,
+				),
+				'expected_output' => 'margin:111px;',
+			),
+
+			'inline_valid_single_style'                    => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'padding' => array(
+							'top'    => '42px',
+							'left'   => '2%',
+							'bottom' => '44px',
+							'right'  => '5rem',
+						),
+						'margin'  => array(
+							'top'    => '12rem',
+							'left'   => '2vh',
+							'bottom' => '2px',
+							'right'  => '10em',
+						),
+					),
+				),
+				'options'         => array(
+					'path'   => array( 'spacing', 'padding' ),
+					'inline' => true,
+				),
+				'expected_output' => 'padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;',
+			),
+
+			'inline_valid_multiple_style'                  => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'padding' => array(
+							'top'    => '42px',
+							'left'   => '2%',
+							'bottom' => '44px',
+							'right'  => '5rem',
+						),
+						'margin'  => array(
+							'top'    => '12rem',
+							'left'   => '2vh',
+							'bottom' => '2px',
+							'right'  => '10em',
+						),
+					),
+				),
+				'options'         => array(
+					'inline' => true,
+				),
+				'expected_output' => 'padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;margin-top:12rem;margin-left:2vh;margin-bottom:2px;margin-right:10em;',
+			),
+		);
+	}
+}

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 ),