Merge pull request #265 from moderntribe/feature/theme-enhancements

Feature/theme enhancements

Author: Vinsanity

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format
 on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). Each changelog entry gets prefixed with the category of the
 item (Added, Changed, Depreciated, Removed, Fixed, Security).
 
+## [2025.11]
+
+- Updated: Color themes now include a padding spacer `--group-themed-default-padding` to ensure content has default inner spacing. This can be overwritten with the block gap settings.
+- Added: Custom media query `--mq-allow-animations` checks for `no-preference` value for better a11y on animations. 
+
 ## [2025.08]
 
 - Updated: pre-commit hooks now no longer run if the commit does not include files related to the hook. Pre-commit hooks now also include FE linting.

wp-content/themes/core/assets/pcss/media-queries/_variables.pcss

@@ -25,6 +25,16 @@
 
 @custom-media --has-hover (hover: hover);
 
+/* -------------------------------------------------------------------------
+ *
+ * Animations Custom Media
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+ * - use this to apply a CSS animation. Leave no animation by default and then
+ * apply this MQ to add your animation
+ * ------------------------------------------------------------------------- */
+@custom-media --mq-allow-animations (prefers-reduced-motion: no-preference);
+
 /* -------------------------------------------------------------------------
  * WP Breakpoints
  * https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss

wp-content/themes/core/blocks/core/details/style.pcss

@@ -55,7 +55,10 @@
 	* Add animation to the content
 	*/
 	&[open] summary ~ * {
-		animation: sweep 0.3s ease-in-out;
+
+		@media (--mq-allow-animations) {
+			animation: sweep 0.3s ease-in-out;
+		}
 	}
 }
 

wp-content/themes/core/blocks/core/group/style.pcss

@@ -2,10 +2,22 @@
  * Styles specific to this block
  */
 
+:root {
+	--group-themed-default-padding: var(--spacer-30);
+}
+
 .wp-block-group {
 
 	/* CASE: Has Transparent Background */
 	&.has-transparent-background {
 		background-color: transparent !important;
 	}
+
+	/**
+	 * CASE: Ensures that full width blocks share the same global
+	 * root padding for left a right. allows content to
+	 */
+	&.alignfull {
+		padding: var(--group-themed-default-padding) var(--wp--style--root--padding-left);
+	}
 }

wp-content/themes/core/styles/blocks/group/10-white.json

@@ -47,6 +47,9 @@
 					}
 				}
 			}
+		},
+		"spacing": {
+			"padding": "var(--group-themed-default-padding)"
 		}
 	}
 }

wp-content/themes/core/styles/blocks/group/20-light.json

@@ -47,6 +47,9 @@
 					}
 				}
 			}
+		},
+		"spacing": {
+			"padding": "var(--group-themed-default-padding)"
 		}
 	}
 }

wp-content/themes/core/styles/blocks/group/30-dark.json

@@ -47,6 +47,9 @@
 					}
 				}
 			}
+		},
+		"spacing": {
+			"padding": "var(--group-themed-default-padding)"
 		}
 	}
 }

wp-content/themes/core/styles/blocks/group/40-brand.json

@@ -47,6 +47,9 @@
 					}
 				}
 			}
+		},
+		"spacing": {
+			"padding": "var(--group-themed-default-padding)"
 		}
 	}
 }