From fdf7abffdc62ba33e306149fc7d83eb7e0016150 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 12 Jul 2022 14:58:48 +0300 Subject: [PATCH 01/10] use WP_Style_Engine_CSS_Declarations_Gutenberg in layout.php --- lib/block-supports/layout.php | 64 ++++++++++++++++++++--------------- 1 file changed, 36 insertions(+), 28 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index b26ed9df659c28..2256dc890ca0a5 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -41,7 +41,7 @@ function gutenberg_register_layout_support( $block_type ) { function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) { $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; - $style = ''; + $declarations = array( $selector => array() ); if ( 'default' === $layout_type ) { $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : ''; $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : ''; @@ -55,14 +55,14 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] ); if ( $content_size || $wide_size ) { - $style = "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {"; - $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; - $style .= 'margin-left: auto !important;'; - $style .= 'margin-right: auto !important;'; - $style .= '}'; + $declarations[ "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))" ] = array( + 'max-width' => $all_max_width_value, + 'margin-left' => 'auto !important', + 'margin-right' => 'auto !important', + ); - $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; - $style .= "$selector .alignfull { max-width: none; }"; + $declarations[ "$selector > .alignwide" ] = array( 'max-width' => $wide_max_width_value ); + $declarations[ "$selector .alignfull" ] = array( 'max-width' => 'none' ); if ( isset( $block_spacing ) ) { $block_spacing_values = gutenberg_style_engine_get_block_supports_styles( @@ -73,13 +73,14 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support // Handle negative margins for alignfull children of blocks with custom padding set. // They're added separately because padding might only be set on one side. + $declarations[ "$selector > .alignfull" ] = array(); if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) { $padding_right = $block_spacing_values['declarations']['padding-right']; - $style .= "$selector > .alignfull { margin-right:calc($padding_right * -1); }"; + $declarations[ "$selector > .alignfull" ]['margin-right'] = "calc($padding_right * -1)"; } if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) { $padding_left = $block_spacing_values['declarations']['padding-left']; - $style .= "$selector > .alignfull { margin-left: calc($padding_left * -1); }"; + $declarations[ "$selector > .alignfull" ]['margin-left'] = "calc($padding_left * -1)"; } } } @@ -89,8 +90,14 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null; } if ( $gap_value && ! $should_skip_gap_serialization ) { - $style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }"; - $style .= "$selector > * + * { margin-block-start: $gap_value; margin-block-end: 0; }"; + $declarations[ "$selector > *" ] = array( + 'margin-block-start' => '0', + 'margin-block-end' => '0', + ); + $declarations[ "$selector > * + *" ] = array( + 'margin-block-start' => $gap_value, + 'margin-block-end' => '0', + ); } } } elseif ( 'flex' === $layout_type ) { @@ -113,7 +120,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) { - $style .= "$selector { flex-wrap: nowrap; }"; + $declarations[ $selector ] = array( 'flex-wrap' => 'nowrap' ); } if ( $has_block_gap_support ) { @@ -123,9 +130,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column; } if ( $gap_value && ! $should_skip_gap_serialization ) { - $style .= "$selector {"; - $style .= "gap: $gap_value;"; - $style .= '}'; + $declarations[ $selector ] = isset( $declarations[ $selector ] ) ? $declarations[ $selector ] : array(); + $declarations[ $selector ]['gap'] = $gap_value; } } @@ -136,28 +142,30 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support * by custom css. */ if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { - $style .= "$selector {"; - $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};"; - $style .= '}'; + $declarations[ $selector ]['justify-content'] = $justify_content_options[ $layout['justifyContent'] ]; } if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) { - $style .= "$selector {"; - $style .= "align-items: {$vertical_alignment_options[ $layout['verticalAlignment'] ]};"; - $style .= '}'; + $declarations[ $selector ]['align-items'] = $vertical_alignment_options[ $layout['verticalAlignment'] ]; } } else { - $style .= "$selector {"; - $style .= 'flex-direction: column;'; + $declarations[ $selector ]['flex-direction'] = 'column'; + $declarations[ $selector ]['align-items'] = 'flex-start'; if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { - $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};"; - } else { - $style .= 'align-items: flex-start;'; + $declarations[ $selector ]['align-items'] = $justify_content_options[ $layout['justifyContent'] ]; } - $style .= '}'; } } + $style = ''; + foreach ( $declarations as $css_selector => $item_declarations ) { + if ( empty( $item_declarations ) ) { + continue; + } + $declarations_obj = new WP_Style_Engine_CSS_Declarations_Gutenberg( $item_declarations ); + $css = $declarations_obj->get_declarations_string(); + $style .= $css_selector . '{' . $css . '}'; + } return $style; } From 27ed2c69c10f3c63d61b621a63f4ba2ee5c6eee5 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 12 Jul 2022 15:04:43 +0300 Subject: [PATCH 02/10] say what the array is --- lib/block-supports/layout.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 2256dc890ca0a5..6b6412f2528fe1 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -41,7 +41,9 @@ function gutenberg_register_layout_support( $block_type ) { function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) { $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; + // An array of CSS declarations (selector => [ property => value ] pairs). $declarations = array( $selector => array() ); + if ( 'default' === $layout_type ) { $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : ''; $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : ''; From 29b4874b8990b47567feb85a868e421c0da5cbb8 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 12 Jul 2022 15:08:57 +0300 Subject: [PATCH 03/10] cleanup: this is not necessary, moved $selector to the initial array --- lib/block-supports/layout.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 6b6412f2528fe1..d24031edce4bc7 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -132,7 +132,6 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column; } if ( $gap_value && ! $should_skip_gap_serialization ) { - $declarations[ $selector ] = isset( $declarations[ $selector ] ) ? $declarations[ $selector ] : array(); $declarations[ $selector ]['gap'] = $gap_value; } } From 96ecea34cc5e34935be86fbed057eeb4a03a9734 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 15 Jul 2022 11:00:42 +0300 Subject: [PATCH 04/10] $selector is already defined in the array init --- lib/block-supports/layout.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index d24031edce4bc7..ab3fb1c944e647 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -122,7 +122,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) { - $declarations[ $selector ] = array( 'flex-wrap' => 'nowrap' ); + $declarations[ $selector ]['flex-wrap'] = 'nowrap'; } if ( $has_block_gap_support ) { From 20f45b0bb824df11e22809db457d71c43dcb16b7 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 15 Jul 2022 11:25:34 +0300 Subject: [PATCH 05/10] Use the style-engine store --- lib/block-supports/layout.php | 68 +++++++++++++++++++---------------- 1 file changed, 37 insertions(+), 31 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index ab3fb1c944e647..3e5b84db4b2bda 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -41,8 +41,8 @@ function gutenberg_register_layout_support( $block_type ) { function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) { $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; - // An array of CSS declarations (selector => [ property => value ] pairs). - $declarations = array( $selector => array() ); + // Get the block-supports Style-Engine Store. + $store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'block-supports' ); if ( 'default' === $layout_type ) { $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : ''; @@ -57,14 +57,16 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] ); if ( $content_size || $wide_size ) { - $declarations[ "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))" ] = array( - 'max-width' => $all_max_width_value, - 'margin-left' => 'auto !important', - 'margin-right' => 'auto !important', + $store->add_rule( "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))" )->set_declarations( + array( + 'max-width' => $all_max_width_value, + 'margin-left' => 'auto !important', + 'margin-right' => 'auto !important', + ) ); - $declarations[ "$selector > .alignwide" ] = array( 'max-width' => $wide_max_width_value ); - $declarations[ "$selector .alignfull" ] = array( 'max-width' => 'none' ); + $store->add_rule( "$selector > .alignwide" )->set_declarations( array( 'max-width' => $wide_max_width_value ) ); + $store->add_rule( "$selector .alignfull" )->set_declarations( array( 'max-width' => 'none' ) ); if ( isset( $block_spacing ) ) { $block_spacing_values = gutenberg_style_engine_get_block_supports_styles( @@ -75,14 +77,13 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support // Handle negative margins for alignfull children of blocks with custom padding set. // They're added separately because padding might only be set on one side. - $declarations[ "$selector > .alignfull" ] = array(); if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) { $padding_right = $block_spacing_values['declarations']['padding-right']; - $declarations[ "$selector > .alignfull" ]['margin-right'] = "calc($padding_right * -1)"; + $store->add_rule( "$selector > .alignfull" )->set_declarations( array( 'margin-right' => "calc($padding_right * -1)" ) ); } if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) { $padding_left = $block_spacing_values['declarations']['padding-left']; - $declarations[ "$selector > .alignfull" ]['margin-left'] = "calc($padding_left * -1)"; + $store->add_rule( "$selector > .alignfull" )->set_declarations( array( 'margin-left' => "calc($padding_left * -1)" ) ); } } } @@ -92,13 +93,17 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null; } if ( $gap_value && ! $should_skip_gap_serialization ) { - $declarations[ "$selector > *" ] = array( - 'margin-block-start' => '0', - 'margin-block-end' => '0', + $store->add_rule( "$selector > *" )->set_declarations( + array( + 'margin-block-start' => '0', + 'margin-block-end' => '0', + ) ); - $declarations[ "$selector > * + *" ] = array( - 'margin-block-start' => $gap_value, - 'margin-block-end' => '0', + $store->add_rule( "$selector > * + *" )->set_declarations( + array( + 'margin-block-start' => $gap_value, + 'margin-block-end' => '0', + ) ); } } @@ -122,7 +127,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) { - $declarations[ $selector ]['flex-wrap'] = 'nowrap'; + $store->add_rule( $selector )->set_declarations( array( 'flex-wrap' => 'nowrap' ) ); } if ( $has_block_gap_support ) { @@ -132,7 +137,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column; } if ( $gap_value && ! $should_skip_gap_serialization ) { - $declarations[ $selector ]['gap'] = $gap_value; + $store->add_rule( $selector )->set_declarations( array( 'gap' => $gap_value ) ); } } @@ -143,30 +148,31 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support * by custom css. */ if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { - $declarations[ $selector ]['justify-content'] = $justify_content_options[ $layout['justifyContent'] ]; + $store->add_rule( $selector )->set_declarations( array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ) ); } if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) { - $declarations[ $selector ]['align-items'] = $vertical_alignment_options[ $layout['verticalAlignment'] ]; + $store->add_rule( $selector )->set_declarations( array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ) ); } } else { - $declarations[ $selector ]['flex-direction'] = 'column'; - $declarations[ $selector ]['align-items'] = 'flex-start'; + $store->add_rule( $selector )->set_declarations( + array( + 'flex-direction' => 'column', + 'align-items' => 'flex-start', + ) + ); if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { - $declarations[ $selector ]['align-items'] = $justify_content_options[ $layout['justifyContent'] ]; + $store->add_rule( $selector )->set_declarations( array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ) ); } } } $style = ''; - foreach ( $declarations as $css_selector => $item_declarations ) { - if ( empty( $item_declarations ) ) { - continue; - } - $declarations_obj = new WP_Style_Engine_CSS_Declarations_Gutenberg( $item_declarations ); - $css = $declarations_obj->get_declarations_string(); - $style .= $css_selector . '{' . $css . '}'; + $rules = $store->get_all_rules(); + foreach ( $rules as $rule ) { + $style .= $rule->get_css(); } + return $style; } From 76fa947f48d9ee0b47c55ec3c734ae83db061288 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 19 Jul 2022 11:22:39 +0300 Subject: [PATCH 06/10] set_declarations was renamed to add_declarations --- lib/block-supports/layout.php | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 3e5b84db4b2bda..e9f9a234253a15 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -57,7 +57,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] ); if ( $content_size || $wide_size ) { - $store->add_rule( "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))" )->set_declarations( + $store->add_rule( "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))" )->add_declarations( array( 'max-width' => $all_max_width_value, 'margin-left' => 'auto !important', @@ -65,8 +65,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support ) ); - $store->add_rule( "$selector > .alignwide" )->set_declarations( array( 'max-width' => $wide_max_width_value ) ); - $store->add_rule( "$selector .alignfull" )->set_declarations( array( 'max-width' => 'none' ) ); + $store->add_rule( "$selector > .alignwide" )->add_declarations( array( 'max-width' => $wide_max_width_value ) ); + $store->add_rule( "$selector .alignfull" )->add_declarations( array( 'max-width' => 'none' ) ); if ( isset( $block_spacing ) ) { $block_spacing_values = gutenberg_style_engine_get_block_supports_styles( @@ -79,11 +79,11 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support // They're added separately because padding might only be set on one side. if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) { $padding_right = $block_spacing_values['declarations']['padding-right']; - $store->add_rule( "$selector > .alignfull" )->set_declarations( array( 'margin-right' => "calc($padding_right * -1)" ) ); + $store->add_rule( "$selector > .alignfull" )->add_declarations( array( 'margin-right' => "calc($padding_right * -1)" ) ); } if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) { $padding_left = $block_spacing_values['declarations']['padding-left']; - $store->add_rule( "$selector > .alignfull" )->set_declarations( array( 'margin-left' => "calc($padding_left * -1)" ) ); + $store->add_rule( "$selector > .alignfull" )->add_declarations( array( 'margin-left' => "calc($padding_left * -1)" ) ); } } } @@ -93,13 +93,13 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null; } if ( $gap_value && ! $should_skip_gap_serialization ) { - $store->add_rule( "$selector > *" )->set_declarations( + $store->add_rule( "$selector > *" )->add_declarations( array( 'margin-block-start' => '0', 'margin-block-end' => '0', ) ); - $store->add_rule( "$selector > * + *" )->set_declarations( + $store->add_rule( "$selector > * + *" )->add_declarations( array( 'margin-block-start' => $gap_value, 'margin-block-end' => '0', @@ -127,7 +127,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) { - $store->add_rule( $selector )->set_declarations( array( 'flex-wrap' => 'nowrap' ) ); + $store->add_rule( $selector )->add_declarations( array( 'flex-wrap' => 'nowrap' ) ); } if ( $has_block_gap_support ) { @@ -137,7 +137,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column; } if ( $gap_value && ! $should_skip_gap_serialization ) { - $store->add_rule( $selector )->set_declarations( array( 'gap' => $gap_value ) ); + $store->add_rule( $selector )->add_declarations( array( 'gap' => $gap_value ) ); } } @@ -148,21 +148,21 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support * by custom css. */ if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { - $store->add_rule( $selector )->set_declarations( array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ) ); + $store->add_rule( $selector )->add_declarations( array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ) ); } if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) { - $store->add_rule( $selector )->set_declarations( array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ) ); + $store->add_rule( $selector )->add_declarations( array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ) ); } } else { - $store->add_rule( $selector )->set_declarations( + $store->add_rule( $selector )->add_declarations( array( 'flex-direction' => 'column', 'align-items' => 'flex-start', ) ); if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { - $store->add_rule( $selector )->set_declarations( array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ) ); + $store->add_rule( $selector )->add_declarations( array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ) ); } } } From 4d6f59cb401042490c836696baf19a087f9b0c77 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 19 Jul 2022 11:23:37 +0300 Subject: [PATCH 07/10] Remove selectors from a store once we generate CSS --- packages/style-engine/class-wp-style-engine-processor.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php index 646ea43e7261a8..2f00635c2b98b8 100644 --- a/packages/style-engine/class-wp-style-engine-processor.php +++ b/packages/style-engine/class-wp-style-engine-processor.php @@ -47,7 +47,10 @@ public function get_css() { $css = ''; $rules = $this->store->get_all_rules(); foreach ( $rules as $rule ) { + // Add the CSS. $css .= $rule->get_css(); + // Remove the rule from the store to avoid double-rendering. + $this->store->remove_rule( $rule->get_selector() ); } return $css; } From b760d782980f6a6c3414c4b4b4d0ece24dc4e184 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 19 Jul 2022 11:24:40 +0300 Subject: [PATCH 08/10] Shazam --- lib/block-supports/layout.php | 38 +++++++++++++++------- lib/compat/wordpress-6.1/script-loader.php | 24 ++++++++++++++ 2 files changed, 51 insertions(+), 11 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index e9f9a234253a15..708b1563248f3f 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -39,10 +39,32 @@ function gutenberg_register_layout_support( $block_type ) { * @return string CSS style. */ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) { + gutenberg_set_layout_style( $selector, $layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_spacing ); + + // Use a unique store to avoid conflicts with other stores and implementations. + $store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'block-supports/layout/' . md5( $selector ) ); + $processor = new WP_Style_Engine_Processor_Gutenberg( $store ); + return $processor->get_css(); +} + +/** + * Adds the provided layout to the "block-supports/layout" Style-Engine store. + * + * @param string $selector CSS selector. + * @param array $layout Layout object. The one that is passed has already checked the existence of default block layout. + * @param boolean $has_block_gap_support Whether the theme has support for the block gap. + * @param string $gap_value The block gap value to apply. + * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor. + * @param string $fallback_gap_value The block gap value to apply. + * @param array $block_spacing Custom spacing set on the block. + * + * @return bool Returns true if the layout style was successfully generated, otherwise false. + */ +function gutenberg_set_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) { $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; // Get the block-supports Style-Engine Store. - $store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'block-supports' ); + $store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'block-supports/layout' ); if ( 'default' === $layout_type ) { $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : ''; @@ -167,13 +189,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } } - $style = ''; - $rules = $store->get_all_rules(); - foreach ( $rules as $rule ) { - $style .= $rule->get_css(); - } - - return $style; + return ! empty( $store->get_all_rules() ); } /** @@ -259,12 +275,12 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { // If a block's block.json skips serialization for spacing or spacing.blockGap, // don't apply the user-defined value to the styles. $should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); - $style = gutenberg_get_layout_style( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_spacing ); + $has_style = gutenberg_set_layout_style( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_spacing ); // Only add container class and enqueue block support styles if unique styles were generated. - if ( ! empty( $style ) ) { + if ( $has_style ) { $class_names[] = $container_class; - wp_enqueue_block_support_styles( $style ); + gutenberg_enqueue_style_engine_store( 'block-supports/layout' ); } // This assumes the hook only applies to blocks with a single wrapper. diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php index b3995178431e90..11b0382ac38211 100644 --- a/lib/compat/wordpress-6.1/script-loader.php +++ b/lib/compat/wordpress-6.1/script-loader.php @@ -36,6 +36,30 @@ static function () use ( $style ) { ); } +/** + * This function takes care of adding inline styles + * from a Style-Engine store. + * + * @param string $store_name The name of the store. + */ +function gutenberg_enqueue_style_engine_store( $store_name ) { + $action_hook_name = 'wp_footer'; + if ( wp_is_block_theme() ) { + $action_hook_name = 'wp_head'; + } + add_action( + $action_hook_name, + static function () use ( $store_name ) { + $store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( $store_name ); + $processor = new WP_Style_Engine_Processor_Gutenberg( $store ); + $css = $processor->get_css(); + if ( $css ) { + echo ''; + } + } + ); +} + /** * This applies a filter to the list of style nodes that comes from `get_style_nodes` in WP_Theme_JSON. * This particular filter removes all of the blocks from the array. From 7aa60b5a9b6e96dc76fcf30eb8ab7c2fd77595b9 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 19 Jul 2022 12:33:50 +0300 Subject: [PATCH 09/10] Added a param to the get_css() method --- lib/block-supports/layout.php | 2 +- lib/compat/wordpress-6.1/script-loader.php | 2 +- .../style-engine/class-wp-style-engine-processor.php | 10 +++++++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 708b1563248f3f..01ad8cae629451 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -44,7 +44,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support // Use a unique store to avoid conflicts with other stores and implementations. $store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'block-supports/layout/' . md5( $selector ) ); $processor = new WP_Style_Engine_Processor_Gutenberg( $store ); - return $processor->get_css(); + return $processor->get_css( true ); } /** diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php index 11b0382ac38211..c63db102bf243e 100644 --- a/lib/compat/wordpress-6.1/script-loader.php +++ b/lib/compat/wordpress-6.1/script-loader.php @@ -52,7 +52,7 @@ function gutenberg_enqueue_style_engine_store( $store_name ) { static function () use ( $store_name ) { $store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( $store_name ); $processor = new WP_Style_Engine_Processor_Gutenberg( $store ); - $css = $processor->get_css(); + $css = $processor->get_css( true ); if ( $css ) { echo ''; } diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php index 2f00635c2b98b8..e23bda25f8b5c7 100644 --- a/packages/style-engine/class-wp-style-engine-processor.php +++ b/packages/style-engine/class-wp-style-engine-processor.php @@ -37,9 +37,11 @@ public function __construct( WP_Style_Engine_CSS_Rules_Store $store ) { /** * Get the CSS rules as a string. * + * @param bool $remove_printed_rules Whether to remove printed rules. + * * @return string The computed CSS. */ - public function get_css() { + public function get_css( $remove_printed_rules = false ) { // Combine CSS selectors that have identical declarations. $this->combine_rules_selectors(); @@ -49,8 +51,10 @@ public function get_css() { foreach ( $rules as $rule ) { // Add the CSS. $css .= $rule->get_css(); - // Remove the rule from the store to avoid double-rendering. - $this->store->remove_rule( $rule->get_selector() ); + if ( $remove_printed_rules ) { + // Remove the rule from the store to avoid double-rendering. + $this->store->remove_rule( $rule->get_selector() ); + } } return $css; } From b67963cc7568f27c5b8da2393e7ce2e9a1809342 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 19 Jul 2022 15:14:13 +0300 Subject: [PATCH 10/10] short and sweet --- lib/compat/wordpress-6.1/script-loader.php | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php index c63db102bf243e..658bd0e3b349d6 100644 --- a/lib/compat/wordpress-6.1/script-loader.php +++ b/lib/compat/wordpress-6.1/script-loader.php @@ -23,10 +23,7 @@ * @param int $priority To set the priority for the add_action. */ function gutenberg_enqueue_block_support_styles( $style, $priority = 10 ) { - $action_hook_name = 'wp_footer'; - if ( wp_is_block_theme() ) { - $action_hook_name = 'wp_head'; - } + $action_hook_name = wp_is_block_theme() ? 'wp_head' : 'wp_footer'; add_action( $action_hook_name, static function () use ( $style ) { @@ -43,16 +40,13 @@ static function () use ( $style ) { * @param string $store_name The name of the store. */ function gutenberg_enqueue_style_engine_store( $store_name ) { - $action_hook_name = 'wp_footer'; - if ( wp_is_block_theme() ) { - $action_hook_name = 'wp_head'; - } + $action_hook_name = wp_is_block_theme() ? 'wp_head' : 'wp_footer'; add_action( $action_hook_name, static function () use ( $store_name ) { - $store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( $store_name ); - $processor = new WP_Style_Engine_Processor_Gutenberg( $store ); - $css = $processor->get_css( true ); + $css = ( new WP_Style_Engine_Processor_Gutenberg( + WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( $store_name ) + ) )->get_css( true ); if ( $css ) { echo ''; }