Try:

- move style engine into `/packages/style-engine` - create webpack copy pattern for packages with classes - switched class methods to static so we don't have to get the instance
WordPress · Mar 25, 2022 · 47cecb1 · 47cecb1
1 parent 343c53f
commit 47cecb1
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 43 deletions.
diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
@@ -51,11 +51,10 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
 		return $attributes;
 	}
 
-	$style_engine                    = WP_Style_Engine_Gutenberg::get_instance();
 	$spacing_block_styles            = array();
 	$spacing_block_styles['padding'] = $has_padding_support ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
 	$spacing_block_styles['margin']  = $has_margin_support ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
-	$inline_styles                   = $style_engine->generate(
+	$inline_styles                   = WP_Style_Engine_Gutenberg::generate(
 		array( 'spacing' => $spacing_block_styles ),
 		array(
 			'inline' => true,

diff --git a/lib/load.php b/lib/load.php
@@ -121,10 +121,10 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/global-styles.php';
 require __DIR__ . '/pwa.php';
 
-// TODO: Before this PR merges, move this to be a part of the style engine package.
-// 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__ . '/style-engine/class-wp-style-engine-gutenberg.php';
+// Copied package PHP files .
+if ( file_exists( __DIR__ . '/style-engine/class-wp-style-engine-gutenberg.php' ) ) {
+	require __DIR__ . '/style-engine/class-wp-style-engine-gutenberg.php';
+}
 
 require __DIR__ . '/block-supports/elements.php';
 require __DIR__ . '/block-supports/colors.php';

diff --git a/...ngine/class-wp-style-engine-gutenberg.php → ...es/style-engine/class-wp-style-engine.php b/...ngine/class-wp-style-engine-gutenberg.php → ...es/style-engine/class-wp-style-engine.php
@@ -7,6 +7,10 @@
  * @package Gutenberg
  */
 
+if ( class_exists( 'WP_Style_Engine' ) ) {
+	return;
+}
+
 /**
  * Singleton class representing the style engine.
  *
@@ -15,14 +19,7 @@
  *
  * @since 6.0.0
  */
-class WP_Style_Engine_Gutenberg {
-	/**
-	 * Container for the main instance of the class.
-	 *
-	 * @var WP_Style_Engine_Gutenberg|null
-	 */
-	private static $instance = null;
-
+class WP_Style_Engine {
 	/**
 	 * Style definitions that contain the instructions to
 	 * parse/output valid Gutenberg styles from a block's attributes.
@@ -38,31 +35,16 @@ class WP_Style_Engine_Gutenberg {
 			'padding' => array(
 				'property_key' => 'padding',
 				'path'         => array( 'spacing', 'padding' ),
-				'value_func'   => 'self::get_css_box_rules',
+				'value_func'   => 'static::get_css_box_rules',
 			),
 			'margin'  => array(
 				'property_key' => 'margin',
 				'path'         => array( 'spacing', 'margin' ),
-				'value_func'   => 'self::get_css_box_rules',
+				'value_func'   => 'static::get_css_box_rules',
 			),
 		),
 	);
 
-	/**
-	 * Utility method to retrieve the main instance of the class.
-	 *
-	 * The instance will be created if it does not exist yet.
-	 *
-	 * @return WP_Style_Engine_Gutenberg The main instance.
-	 */
-	public static function get_instance() {
-		if ( null === self::$instance ) {
-			self::$instance = new self();
-		}
-
-		return self::$instance;
-	}
-
 	/**
 	 * Returns a CSS ruleset based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
 	 *
@@ -71,7 +53,7 @@ public static function get_instance() {
 	 *
 	 * @return array A CSS ruleset compatible with generate().
 	 */
-	protected function get_block_style_css_rules( $style_value, $path ) {
+	protected static function get_block_style_css_rules( $style_value, $path ) {
 		$style_definition = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $path, null );
 
 		if ( ! empty( $style_definition ) ) {
@@ -98,7 +80,7 @@ protected function get_block_style_css_rules( $style_value, $path ) {
 	 *
 	 * @return string A CSS ruleset formatted to be placed in an HTML `style` attribute.
 	 */
-	public function generate( $block_styles, $options = array() ) {
+	public static function generate( $block_styles, $options = array() ) {
 		$output = '';
 
 		if ( empty( $block_styles ) ) {
@@ -113,7 +95,7 @@ public function generate( $block_styles, $options = array() ) {
 			if ( empty( $style_value ) ) {
 				return $output;
 			}
-			$rules = array_merge( $rules, $this->get_block_style_css_rules( $style_value, $options['path'] ) );
+			$rules = array_merge( $rules, static::get_block_style_css_rules( $style_value, $options['path'] ) );
 		} else {
 			// Otherwise build them all.
 			foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) {
@@ -122,7 +104,7 @@ public function generate( $block_styles, $options = array() ) {
 					if ( empty( $style_value ) ) {
 						continue;
 					}
-					$rules = array_merge( $rules, $this->get_block_style_css_rules( $style_value, $style_definition['path'] ) );
+					$rules = array_merge( $rules, static::get_block_style_css_rules( $style_value, $style_definition['path'] ) );
 				}
 			}
 		}
@@ -150,7 +132,7 @@ public function generate( $block_styles, $options = array() ) {
 	 *
 	 * @return array The class name for the added style.
 	 */
-	public static function get_css_box_rules( $style_value, $style_property ) {
+	protected static function get_css_box_rules( $style_value, $style_property ) {
 		$rules = array();
 
 		if ( ! $style_value ) {

diff --git a/phpunit/style-engine/class-wp-style-engine-gutenberg-test.php b/phpunit/style-engine/class-wp-style-engine-gutenberg-test.php
@@ -16,8 +16,7 @@ class WP_Style_Engine_Gutenberg_Test extends WP_UnitTestCase {
 	 * @dataProvider data_block_styles_fixtures
 	 */
 	function test_generate_css( $block_styles, $options, $expected_output ) {
-		$style_engine     = WP_Style_Engine_Gutenberg::get_instance();
-		$generated_styles = $style_engine->generate(
+		$generated_styles = WP_Style_Engine_Gutenberg::generate(
 			$block_styles,
 			$options
 		);

diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
@@ -26,6 +26,15 @@ const BUNDLED_PACKAGES = [
 	'@wordpress/style-engine',
 ];
 
+// PHP files in packages that have to be copied over to /lib.
+const BUNDLED_PACKAGES_PHP = [
+	{
+		from: './packages/style-engine/',
+		to: 'lib/style-engine/',
+		replaceClasses: [ 'WP_Style_Engine' ],
+	},
+];
+
 const gutenbergPackages = Object.keys( dependencies )
 	.filter(
 		( packageName ) =>
@@ -99,15 +108,38 @@ module.exports = {
 		...plugins,
 		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
 		new CopyWebpackPlugin( {
-			patterns: gutenbergPackages
-				.map( ( packageName ) => ( {
+			patterns: [].concat(
+				gutenbergPackages.map( ( packageName ) => ( {
 					from: '*.css',
-					context: `./packages/${ packageName }/build-style`,
 					to: `./build/${ packageName }`,
 					transform: stylesTransform,
 					noErrorOnMissing: true,
-				} ) )
-				.concat( vendorsCopyConfig ),
+				} ) ),
+				// Packages with PHP files to be parsed and copied to ./lib.
+				BUNDLED_PACKAGES_PHP.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';
+							content = content.toString();
+							// Replace class names.
+							content = content.replace(
+								new RegExp( replaceClasses.join( '|' ), 'g' ),
+								( match ) => `${ match }${ classSuffix }`
+							);
+							return content;
+						},
+						noErrorOnMissing: true,
+					} )
+				),
+				vendorsCopyConfig
+			),
 		} ),
 	].filter( Boolean ),
 };