@@ -799,8 +799,33 @@ private function get_css_variables( $nodes ) {
799
799
* style-property-one: value;
800
800
* }
801
801
*
802
- * Additionally, it'll also create new rulesets
803
- * as classes for each preset value such as:
802
+ * @param array $style_nodes Nodes with styles.
803
+ *
804
+ * @return string The new stylesheet.
805
+ */
806
+ private function get_block_classes ( $ style_nodes ) {
807
+ $ block_rules = '' ;
808
+
809
+ foreach ( $ style_nodes as $ metadata ) {
810
+ if ( null === $ metadata ['selector ' ] ) {
811
+ continue ;
812
+ }
813
+
814
+ $ node = _wp_array_get ( $ this ->theme_json , $ metadata ['path ' ], array () );
815
+ $ selector = $ metadata ['selector ' ];
816
+ $ declarations = self ::compute_style_properties ( $ node );
817
+ $ block_rules .= self ::to_ruleset ( $ selector , $ declarations );
818
+
819
+ if ( self ::ROOT_BLOCK_SELECTOR === $ selector ) {
820
+ $ block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; } ' ;
821
+ }
822
+ }
823
+
824
+ return $ block_rules ;
825
+ }
826
+
827
+ /**
828
+ * Creates new rulesets as classes for each preset value such as:
804
829
*
805
830
* .has-value-color {
806
831
* color: value;
@@ -821,30 +846,14 @@ private function get_css_variables( $nodes ) {
821
846
* p.has-value-gradient-background {
822
847
* background: value;
823
848
* }
824
- *
825
- * @param array $style_nodes Nodes with styles.
849
+
826
850
* @param array $setting_nodes Nodes with settings.
827
851
*
828
852
* @return string The new stylesheet.
829
853
*/
830
- private function get_block_styles ( $ style_nodes , $ setting_nodes ) {
831
- $ block_rules = '' ;
832
- foreach ( $ style_nodes as $ metadata ) {
833
- if ( null === $ metadata ['selector ' ] ) {
834
- continue ;
835
- }
836
-
837
- $ node = _wp_array_get ( $ this ->theme_json , $ metadata ['path ' ], array () );
838
- $ selector = $ metadata ['selector ' ];
839
- $ declarations = self ::compute_style_properties ( $ node );
840
- $ block_rules .= self ::to_ruleset ( $ selector , $ declarations );
841
-
842
- if ( self ::ROOT_BLOCK_SELECTOR === $ selector ) {
843
- $ block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; } ' ;
844
- }
845
- }
846
-
854
+ private function get_preset_classes ( $ setting_nodes ) {
847
855
$ preset_rules = '' ;
856
+
848
857
foreach ( $ setting_nodes as $ metadata ) {
849
858
if ( null === $ metadata ['selector ' ] ) {
850
859
continue ;
@@ -855,7 +864,7 @@ private function get_block_styles( $style_nodes, $setting_nodes ) {
855
864
$ preset_rules .= self ::compute_preset_classes ( $ node , $ selector );
856
865
}
857
866
858
- return $ block_rules . $ preset_rules ;
867
+ return $ preset_rules ;
859
868
}
860
869
861
870
/**
@@ -1053,7 +1062,11 @@ private static function get_setting_nodes( $theme_json, $selectors = array() ) {
1053
1062
* Returns the stylesheet that results of processing
1054
1063
* the theme.json structure this object represents.
1055
1064
*
1056
- * @param string $type Type of stylesheet we want accepts 'all', 'block_styles', and 'css_variables'.
1065
+ * @param string $type Type of stylesheet. It accepts:
1066
+ * 'all': css variables, block classes, preset classes. The default.
1067
+ * 'block_styles': only block & preset classes.
1068
+ * 'css_variables': only css variables.
1069
+ * 'presets': only css variables and preset classes.
1057
1070
* @return string Stylesheet.
1058
1071
*/
1059
1072
public function get_stylesheet ( $ type = 'all ' ) {
@@ -1063,11 +1076,13 @@ public function get_stylesheet( $type = 'all' ) {
1063
1076
1064
1077
switch ( $ type ) {
1065
1078
case 'block_styles ' :
1066
- return $ this ->get_block_styles ( $ style_nodes, $ setting_nodes );
1079
+ return $ this ->get_block_classes ( $ style_nodes ) . $ this -> get_preset_classes ( $ setting_nodes );
1067
1080
case 'css_variables ' :
1068
1081
return $ this ->get_css_variables ( $ setting_nodes );
1082
+ case 'presets ' :
1083
+ return $ this ->get_css_variables ( $ setting_nodes ) . $ this ->get_preset_classes ( $ setting_nodes );
1069
1084
default :
1070
- return $ this ->get_css_variables ( $ setting_nodes ) . $ this ->get_block_styles ( $ style_nodes, $ setting_nodes );
1085
+ return $ this ->get_css_variables ( $ setting_nodes ) . $ this ->get_block_classes ( $ style_nodes ) . $ this -> get_preset_classes ( $ setting_nodes );
1071
1086
}
1072
1087
}
1073
1088
0 commit comments