add wrapper to other blocks, add dev notes, separate buttons

kaeizen · kaeizen · commit ca70c0cbed6c · 2025-03-31T19:09:22.000+08:00
diff --git a/src/block/columns/editor.scss b/src/block/columns/editor.scss
@@ -28,7 +28,13 @@
 
 .stk-block-columns > .stk-block-content > .block-editor-inner-blocks > .block-editor-block-list__layout {
 	column-gap: var(--stk-column-gap, 0px);
-	row-gap: var(--stk-columns-row-gap, 0px);
+}
+
+// These are styles added from the global spacing and borders.
+:where(.stk-has-design-system-spacing-and-borders) {
+	.stk-block-columns > .stk-block-content > .block-editor-inner-blocks > .block-editor-block-list__layout {
+		row-gap: var(--stk-columns-row-gap, 0px);
+	}
 }
 
 // For Firefox polyfill
diff --git a/src/block/columns/style.scss b/src/block/columns/style.scss
@@ -9,13 +9,20 @@
 }
 
 .stk-block-columns > .stk-block-content {
-	--stk-column-gap: var(--stk-columns-column-gap, 0px); // For nested columns, this takes precedence.
+	--stk-column-gap: 0px; // For nested columns, this takes precedence.
 	column-gap: var(--stk-column-gap);
-	row-gap: var(--stk-columns-row-gap, 0px);
 	margin-left: auto;
 	margin-right: auto;
 }
 
+// These are styles added from the global spacing and borders.
+:where(.stk-has-design-system-spacing-and-borders) {
+	.stk-blocks-columns > .stk-block-content {
+		--stk-column-gap: var(--stk-columns-column-gap, 0px); // For nested columns, this takes precedence.
+		row-gap: var(--stk-columns-row-gap, 0px);
+	}
+}
+
 // Add a 0 specificity style to set the default column order. This is to prevent
 // the column order from spilling to nested blocks.
 // Target the stk-column-wrapper to also include blocks with column innerblocks
diff --git a/src/block/countdown/style.scss b/src/block/countdown/style.scss
@@ -60,6 +60,7 @@
 	margin: 0;
 }
 
+// These are styles added from the global color schemes.
 :where(.stk-has-color-schemes) {
 	.stk-block-countdown__digit {
 		color: var(--stk-accent-color);
diff --git a/src/block/divider/style.scss b/src/block/divider/style.scss
@@ -7,6 +7,7 @@
 	}
 }
 
+// These are styles added from the global color schemes.
 :where(.stk-has-color-schemes) {
 	.stk-block.stk-block-divider {
 		hr.stk-block-divider__hr,
diff --git a/src/block/icon-list-item/style.scss b/src/block/icon-list-item/style.scss
@@ -84,7 +84,9 @@
 		.stk-block-icon-list-item__marker::before {
 			content: counter(stk-icon-list-counter, var(--stk-list-style-type, decimal)) ". ";
 			display: block;
-			font-size: var(--stk-icon-list-icon-size, 16px);
+			// In Global Buttons and Icons, we renamed `--stk-icon-height` to `--stk-icon-list-icon-size`.
+			// Keep the `--stk-icon-height` for backward compatibility.
+			font-size: var(--stk-icon-height, var(--stk-icon-list-icon-size, 16px));
 			color: var(--stk-icon-list-marker-color);
 			transform: rotate(var(--stk-icon-list-icon-rotation, 0deg));
 			opacity: var(--stk-icon-list-icon-opacity, 1);
diff --git a/src/block/icon-list/editor.scss b/src/block/icon-list/editor.scss
@@ -16,9 +16,11 @@
 		top: 0;
 		left: 0;
 		height: 1em;
-		width: var(--stk-icon-list-icon-size, 1em);
+		// In Global Buttons and Icons, we renamed `--stk-icon-height` to `--stk-icon-list-icon-size`.
+		// Keep the `--stk-icon-height` for backward compatibility.
+		width: var(--stk-icon-height, var(--stk-icon-list-icon-size, 1em));
 		cursor: copy;
-		margin-left: calc(var(--stk-icon-list-icon-size, 1em) * -1);
+		margin-left: calc(var(--stk-icon-height, var(--stk-icon-list-icon-size, 1em)) * -1);
 	}
 }
 
diff --git a/src/block/number-box/style.scss b/src/block/number-box/style.scss
@@ -20,6 +20,7 @@ div.stk-block-number-box__text {
 	}
 }
 
+// These are styles added from the global color schemes.
 :where(.stk-has-color-schemes) .stk-block-number-box.stk--has-shape {
 	.stk-block-number-box__container,
 	div.stk-block-number-box__text {
diff --git a/src/block/progress-bar/style.scss b/src/block/progress-bar/style.scss
@@ -46,6 +46,7 @@
 	}
 }
 
+// These are styles added from the global color schemes.
 :where(.stk-has-color-schemes) {
 	.stk-block-progress-bar {
 		--progress-color-1: var(--stk-accent-color);
diff --git a/src/block/progress-circle/style.scss b/src/block/progress-circle/style.scss
@@ -54,6 +54,7 @@
 	}
 }
 
+// These are styles added from the global color schemes.
 :where(.stk-has-color-schemes) {
 	.stk-block-progress-circle {
 		--progress-color-1: var(--stk-accent-color);
diff --git a/src/block/table-of-contents/style.scss b/src/block/table-of-contents/style.scss
@@ -39,6 +39,7 @@
 	}
 }
 
+// These are styles added from the global color schemes.
 :where(.stk-has-color-schemes) {
 	.stk-block-table-of-contents {
 		// Add this so that it inherits the color from global color schemes.
diff --git a/src/block/timeline/style.scss b/src/block/timeline/style.scss
@@ -20,6 +20,7 @@
 	margin-block-start: 0 !important;
 }
 
+// These are styles added from the global color schemes.
 :where(.stk-has-color-schemes) {
 	.stk-block-timeline {
 		--line-accent-bg-color: var(--stk-accent-color, #000);
diff --git a/src/plugins/global-settings/buttons-and-icons/index.php b/src/plugins/global-settings/buttons-and-icons/index.php
@@ -99,8 +99,9 @@ public function add_global_buttons_and_icons_styles( $current_css ) {
 				return $current_css;
 			}
 
+			// Add a body class if there are any global buttons and icons styles.
 			if ( $generated_css !== '' ) {
-				add_action( 'body_class', array( $this, 'add_body_class_buttons_and_icons' ) );
+				add_filter( 'body_class', array( $this, 'add_body_class_buttons_and_icons' ) );
 			}
 
 			$current_css .= $generated_css;
diff --git a/src/plugins/global-settings/color-schemes/index.php b/src/plugins/global-settings/color-schemes/index.php
@@ -194,7 +194,8 @@ public function add_global_color_schemes_styles( $current_css ) {
 
 			// If there is cached CSS, use it
 			if ( $cached_color_scheme_css ) {
-				add_action( 'body_class', array( $this, 'add_body_class_color_schemes' ) );
+				// Add a body class if there are any global color schemes styles.
+				add_filter( 'body_class', array( $this, 'add_body_class_color_schemes' ) );
 				$current_css .= $cached_color_scheme_css;
 				return apply_filters( 'stackable_frontend_css' , $current_css );
 			}
@@ -292,8 +293,9 @@ public function add_global_color_schemes_styles( $current_css ) {
 				}
 			}
 
+			// Add a body class if there are any global color schemes styles.
 			if ( $color_scheme_css !== '' ) {
-				add_action( 'body_class', array( $this, 'add_body_class_color_schemes' ) );
+				add_filter( 'body_class', array( $this, 'add_body_class_color_schemes' ) );
 			}
 
 			// Add the generated CSS to the database
@@ -436,18 +438,25 @@ public function generate_css_rules( $scheme, $mode = '' ) {
 						$decls[ $state ][ $css_property ] = $scheme[ $property ][ $state ];
 					}
 
-					// $inherited_value = $this->get_inherited_value( $scheme[ $property ], $state );
-					// $inherited_normal_value = $this->get_inherited_value( $scheme[ $property ], $state, false );
-
-					// // Inherit the normal value on hover state
-					// if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $inherited_normal_value) {
-					// 	$decls[ 'desktop' ][ $css_property ] = $inherited_normal_value;
-					// }
+					/**
+					 * DEV NOTE: The code below is commented out because it is the initial implementation.
+					 * Before, we set the `*-hover` properties to inherit the normal/parent-hover values.
+					 * However, this was causing some issues with the hover states.
+					 *
+					 * The new implementation now relies on CSS variables and fallback values.
+					 */
+					/* $inherited_value = $this->get_inherited_value( $scheme[ $property ], $state );
+					$inherited_normal_value = $this->get_inherited_value( $scheme[ $property ], $state, false );
+
+					// Inherit the normal value on hover state
+					if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $inherited_normal_value) {
+						$decls[ 'desktop' ][ $css_property ] = $inherited_normal_value;
+					}
 
-					// // Inherit the parent-hover value on hover state
-					// if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $inherited_value) {
-					// 	$decls[ 'desktopParentHover' ][ $css_property ] = $inherited_value;
-					// }
+					// Inherit the parent-hover value on hover state
+					if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $inherited_value) {
+						$decls[ 'desktopParentHover' ][ $css_property ] = $inherited_value;
+					} */
 
 					// If button background color is gradient, plain style buuttons should use the button outline color.
 					if ( $property == 'buttonBackgroundColor' && $this->is_gradient( $scheme, $property, $state ) ) {
@@ -457,21 +466,28 @@ public function generate_css_rules( $scheme, $mode = '' ) {
 				}
 			}
 
+			/**
+			 * DEV NOTE: The code below is commented out because it is the initial implementation.
+			 * Before, we set the `*-hover` properties to inherit the normal/parent-hover values.
+			 * However, this was causing some issues with the hover states.
+			 *
+			 * The new implementation now relies on CSS variables and fallback values.
+			 */
 			// if the button background color is gradient on normal or parent-hover states,
 			// and there's no button background color set on hover,
 			// plain-style buttons will turn black.
 			// To prevent this, use button-outline-color-hover.
-			// if ( $this->is_gradient( $scheme, 'buttonBackgroundColor', 'desktop' )
-			// 	&& ! $this->has_value( $scheme, 'buttonBackgroundColor', 'desktopHover' )
-			// ) {
-			// 	$button_plain_decls[ 'desktopHover' ][ '--stk-button-plain-text-color-hover' ] = 'var(--stk-button-outline-color-hover)';
-			// }
-
-			// if ( $this->is_gradient( $scheme, 'buttonBackgroundColor', 'desktopParentHover' )
-			// 	&& ! $this->has_value( $scheme, 'buttonBackgroundColor', 'desktopHover' )
-			// ) {
-			// 	$button_plain_decls[ 'desktopParentHover' ][ '--stk-button-plain-text-color-hover' ] = 'var(--stk-button-outline-color-hover)';
-			// }
+			/* if ( $this->is_gradient( $scheme, 'buttonBackgroundColor', 'desktop' )
+			 	&& ! $this->has_value( $scheme, 'buttonBackgroundColor', 'desktopHover' )
+			) {
+			 	$button_plain_decls[ 'desktopHover' ][ '--stk-button-plain-text-color-hover' ] = 'var(--stk-button-outline-color-hover)';
+			}
+
+			if ( $this->is_gradient( $scheme, 'buttonBackgroundColor', 'desktopParentHover' )
+				&& ! $this->has_value( $scheme, 'buttonBackgroundColor', 'desktopHover' )
+			) {
+			 	$button_plain_decls[ 'desktopParentHover' ][ '--stk-button-plain-text-color-hover' ] = 'var(--stk-button-outline-color-hover)';
+			} */
 
 			// if the button background color is gradient on normal state and solid on parent-hover state,
 			// we need to unset the --stk-button-plain-text-color,
diff --git a/src/plugins/global-settings/color-schemes/utils.js b/src/plugins/global-settings/color-schemes/utils.js
@@ -99,15 +99,22 @@ export const getCSS = ( scheme, currentHoverState = 'normal', mode = '' ) => {
 				decls.desktopHover.push( `${ customProperty }-parent-hover: ${ inheritedValue };` )
 			}
 
-			// // Inherit the normal value on hover state
-			// if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedNormalValue ) {
-			// 	decls.desktop.push( `${ customProperty }${ suffix }: ${ inheritedNormalValue };` )
-			// }
+			/**
+			 * DEV NOTE: The code below is commented out because it is the initial implementation.
+			 * Before, we set the `*-hover` properties to inherit the normal/parent-hover values.
+			 * However, this was causing some issues with the hover states.
+			 *
+			 * The new implementation now relies on CSS variables and fallback values.
+			 */
+			// Inherit the normal value on hover state
+			/* if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedNormalValue ) {
+			 	decls.desktop.push( `${ customProperty }${ suffix }: ${ inheritedNormalValue };` )
+			}
 
-			// // Inherit the parent-hover value on hover state
-			// if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedValue ) {
-			// 	decls.desktopParentHover.push( `${ customProperty }${ suffix }: ${ inheritedValue };` )
-			// }
+			// Inherit the parent-hover value on hover state
+			if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedValue ) {
+				decls.desktopParentHover.push( `${ customProperty }${ suffix }: ${ inheritedValue };` )
+			} */
 
 			// If button background color is gradient, plain style buuttons should use the button outline color.
 			if ( property === 'buttonBackgroundColor' && isGradient( scheme[ property ]?.[ state ] ) ) {
@@ -116,17 +123,24 @@ export const getCSS = ( scheme, currentHoverState = 'normal', mode = '' ) => {
 		} )
 	} )
 
+	/**
+	 * DEV NOTE: The code below is commented out because it is the initial implementation.
+	 * Before, we set the `*-hover` properties to inherit the normal/parent-hover values.
+	 * However, this was causing some issues with the hover states.
+	 *
+	 * The new implementation now relies on CSS variables and fallback values.
+	 */
 	// if the button background color is gradient on normal or parent-hover states,
 	// and there's no button background color set on hover,
 	// plain-style buttons will turn black.
 	// To prevent this, use button-outline-color-hover.
-	// if ( isGradient( scheme.buttonBackgroundColor?.desktop ) && ! scheme.buttonBackgroundColor?.desktopHover ) {
-	// 	decls.desktopHover.push( `:where(.is-style-plain){ --stk-button-plain-text-color-hover: var(--stk-button-outline-color-hover); }` )
-	// }
+	/* if ( isGradient( scheme.buttonBackgroundColor?.desktop ) && ! scheme.buttonBackgroundColor?.desktopHover ) {
+	 	decls.desktopHover.push( `:where(.is-style-plain){ --stk-button-plain-text-color-hover: var(--stk-button-outline-color-hover); }` )
+	 }
 
-	// if ( isGradient( scheme.buttonBackgroundColor?.desktopParentHover ) && ! scheme.buttonBackgroundColor?.desktopHover ) {
-	// 	decls.desktopParentHover.push( `:where(.is-style-plain){ --stk-button-plain-text-color-hover: var(--stk-button-outline-color-hover); }` )
-	// }
+	if ( isGradient( scheme.buttonBackgroundColor?.desktopParentHover ) && ! scheme.buttonBackgroundColor?.desktopHover ) {
+	 	decls.desktopParentHover.push( `:where(.is-style-plain){ --stk-button-plain-text-color-hover: var(--stk-button-outline-color-hover); }` )
+	} */
 
 	// if the button background color is gradient on normal state and solid on parent-hover state,
 	// we need to unset the --stk-button-plain-text-color,
diff --git a/src/plugins/global-settings/spacing-and-borders/index.php b/src/plugins/global-settings/spacing-and-borders/index.php
@@ -100,8 +100,9 @@ public function add_global_spacing_and_borders_styles( $current_css ) {
 				return $current_css;
 			}
 
+			// Add a body class if there are any global spacing and borders styles.
 			if ( $generated_css !== '' ) {
-				add_action( 'body_class', array( $this, 'add_body_class_spacing_and_borders' ) );
+				add_filter( 'body_class', array( $this, 'add_body_class_spacing_and_borders' ) );
 			}
 
 			$current_css .= $generated_css;
diff --git a/src/styles/block-design-system-blocks.scss b/src/styles/block-design-system-blocks.scss
diff --git a/src/styles/block-design-system.json b/src/styles/block-design-system.json
diff --git a/src/styles/editor-block-design-system.scss b/src/styles/editor-block-design-system.scss

Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,7 @@`
`60`	`60`	`margin: 0;`
`61`	`61`	`}`
`62`	`62`
	`63`	`+// These are styles added from the global color schemes.`
`63`	`64`	`:where(.stk-has-color-schemes) {`
`64`	`65`	`.stk-block-countdown__digit {`
`65`	`66`	`color: var(--stk-accent-color);`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`}`
`8`	`8`	`}`
`9`	`9`
	`10`	`+// These are styles added from the global color schemes.`
`10`	`11`	`:where(.stk-has-color-schemes) {`
`11`	`12`	`.stk-block.stk-block-divider {`
`12`	`13`	`hr.stk-block-divider__hr,`
Original file line number	Diff line number	Diff line change
`@@ -16,9 +16,11 @@`
`16`	`16`	`top: 0;`
`17`	`17`	`left: 0;`
`18`	`18`	`height: 1em;`
`19`		`- width: var(--stk-icon-list-icon-size, 1em);`
	`19`	+ // In Global Buttons and Icons, we renamed `--stk-icon-height` to `--stk-icon-list-icon-size`.
	`20`	+ // Keep the `--stk-icon-height` for backward compatibility.
	`21`	`+ width: var(--stk-icon-height, var(--stk-icon-list-icon-size, 1em));`
`20`	`22`	`cursor: copy;`
`21`		`- margin-left: calc(var(--stk-icon-list-icon-size, 1em) * -1);`
	`23`	`+ margin-left: calc(var(--stk-icon-height, var(--stk-icon-list-icon-size, 1em)) * -1);`
`22`	`24`	`}`
`23`	`25`	`}`
`24`	`26`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ div.stk-block-number-box__text {`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`
	`23`	`+// These are styles added from the global color schemes.`
`23`	`24`	`:where(.stk-has-color-schemes) .stk-block-number-box.stk--has-shape {`
`24`	`25`	`.stk-block-number-box__container,`
`25`	`26`	`div.stk-block-number-box__text {`
Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,7 @@`
`46`	`46`	`}`
`47`	`47`	`}`
`48`	`48`
	`49`	`+// These are styles added from the global color schemes.`
`49`	`50`	`:where(.stk-has-color-schemes) {`
`50`	`51`	`.stk-block-progress-bar {`
`51`	`52`	`--progress-color-1: var(--stk-accent-color);`
Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,7 @@`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`
	`57`	`+// These are styles added from the global color schemes.`
`57`	`58`	`:where(.stk-has-color-schemes) {`
`58`	`59`	`.stk-block-progress-circle {`
`59`	`60`	`--progress-color-1: var(--stk-accent-color);`
Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,7 @@`
`39`	`39`	`}`
`40`	`40`	`}`
`41`	`41`
	`42`	`+// These are styles added from the global color schemes.`
`42`	`43`	`:where(.stk-has-color-schemes) {`
`43`	`44`	`.stk-block-table-of-contents {`
`44`	`45`	`// Add this so that it inherits the color from global color schemes.`