diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php index bb24d3d7b052f0..c23e58ca30e80c 100644 --- 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 index 5d1933c16738e9..368d7b87117c9c 100644 --- 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/lib/style-engine/class-wp-style-engine-gutenberg.php b/packages/style-engine/class-wp-style-engine.php similarity index 80% rename from lib/style-engine/class-wp-style-engine-gutenberg.php rename to packages/style-engine/class-wp-style-engine.php index 671130a1322c17..0b2770625fc062 100644 --- a/lib/style-engine/class-wp-style-engine-gutenberg.php +++ b/packages/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 index a3e017d0b87444..3c422758e80bf6 100644 --- 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 index 4d02b4b6e2f817..b2781379159afe 100644 --- 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 ), };