initial commit

Migrate get_block_classes to 6.1 Add prettify option Testing rule generation for get_styles_for_block Let the style engine take care of margin: 0 on the body
WordPress · Jun 22, 2022 · 754d127 · 754d127
1 parent 7f8ff80
commit 754d127
Show file tree

Hide file tree

Showing 4 changed files with 408 additions and 12 deletions.
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -263,11 +263,23 @@ public function get_styles_for_block( $block_metadata ) {
 		 * @link https://github.com/WordPress/gutenberg/issues/36147.
 		 */
 		if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
-			$block_rules .= 'body { margin: 0; }';
+			$node['spacing']['margin'] = '0px';
 		}
 
 		// 2. Generate the rules that use the general selector.
-		$block_rules .= static::to_ruleset( $selector, $declarations );
+		//$block_rules .= static::to_ruleset( $selector, $declarations );
+		// @TODO check duotone
+		$styles = gutenberg_style_engine_generate(
+			$node,
+			array(
+				'selector' => $selector,
+				'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG,
+			)
+		);
+
+		if ( isset( $styles['css'] ) ) {
+			$block_rules .= $styles['css'];
+		}
 
 		// 3. Generate the rules that use the duotone selector.
 		if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
@@ -290,6 +302,7 @@ public function get_styles_for_block( $block_metadata ) {
 		return $block_rules;
 	}
 
+	/**
 	/**
 	 * Converts each style section into a list of rulesets
 	 * containing the block styles to be appended to the stylesheet.

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
@@ -397,16 +397,21 @@ public function generate( $block_styles, $options ) {
 		}
 
 		// Build CSS rules output.
-		$selector      = isset( $options['selector'] ) ? $options['selector'] : null;
-		$css           = array();
-		$styles_output = array();
+		$selector        = isset( $options['selector'] ) ? $options['selector'] : null;
+		$should_prettify = isset( $options['prettify'] ) ? $options['prettify'] : null;
+		$css             = array();
+		$styles_output   = array();
 
 		if ( ! empty( $css_rules ) ) {
 			// Generate inline style rules.
 			foreach ( $css_rules as $rule => $value ) {
 				$filtered_css = esc_html( safecss_filter_attr( "{$rule}: {$value}" ) );
 				if ( ! empty( $filtered_css ) ) {
-					$css[] = $filtered_css . ';';
+					if ( $should_prettify ) {
+						$css[] = "\t$filtered_css;\n";
+					} else {
+						$css[] = $filtered_css . ';';
+					}
 				}
 			}
 		}
@@ -415,9 +420,15 @@ public function generate( $block_styles, $options ) {
 		if ( ! empty( $css ) ) {
 			// Return an entire rule if there is a selector.
 			if ( $selector ) {
-				$style_block          = "$selector { ";
-				$style_block         .= implode( ' ', $css );
-				$style_block         .= ' }';
+				if ( $should_prettify ) {
+					$style_block  = "$selector {\n";
+					$style_block .= implode( '', $css );
+					$style_block .= "}\n";
+				} else {
+					$style_block  = "$selector { ";
+					$style_block .= implode( ' ', $css );
+					$style_block .= ' }';
+				}
 				$styles_output['css'] = $style_block;
 			} else {
 				$styles_output['css'] = implode( ' ', $css );

diff --git a/packages/style-engine/phpunit/class-wp-style-engine-test.php b/packages/style-engine/phpunit/class-wp-style-engine-test.php
@@ -156,6 +156,32 @@ public function data_generate_styles_fixtures() {
 				),
 			),
 
+			'style_block_with_selector_and_pretty_css'     => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'padding' => array(
+							'top'    => '42px',
+							'left'   => '2%',
+							'bottom' => '44px',
+							'right'  => '5rem',
+						),
+					),
+				),
+				'options'         => array(
+					'selector' => '.wp-selector > p',
+					'prettify' => true,
+				),
+				'expected_output' => array(
+					'css' => '.wp-selector > p {
+	padding-top: 42px;
+	padding-left: 2%;
+	padding-bottom: 44px;
+	padding-right: 5rem;
+}
+',
+				),
+			),
+
 			'elements_with_css_var_value'                  => array(
 				'block_styles'    => array(
 					'color' => array(