Merge pull request #316 from moderntribe/task/MOOSE-313/accordion-block-styling

GeoffDusome · web-flow · commit e7074dc1c8af · 2026-02-09T13:26:33.000-05:00
[MOOSE-313] FE: Accordion Block
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,8 @@ item (Added, Changed, Depreciated, Removed, Fixed, Security).
 - Updated: Expected PHP version to v8.4, Node version to v24 LTS
 - Updated: WordPress to v6.9.1
 - Updated: All plugins, composer dependencies, and npm packages to latest versions.
+- Added: New Accordion block styling
+- Removed: Details block styling
 
 ## [2026.01]
 
diff --git a/wp-content/plugins/core/src/Blocks/Blocks_Definer.php b/wp-content/plugins/core/src/Blocks/Blocks_Definer.php
@@ -7,10 +7,10 @@
 use Tribe\Plugin\Blocks\Filters\Paragraph_Filter;
 use Tribe\Plugin\Core\Interfaces\Definer_Interface;
 use Tribe\Theme\bindings\Query_Results_Count;
+use Tribe\Theme\blocks\core\accordion\Accordion;
 use Tribe\Theme\blocks\core\button\Button;
 use Tribe\Theme\blocks\core\column\Column;
 use Tribe\Theme\blocks\core\columns\Columns;
-use Tribe\Theme\blocks\core\details\Details;
 use Tribe\Theme\blocks\core\embed\Embed;
 use Tribe\Theme\blocks\core\gallery\Gallery;
 use Tribe\Theme\blocks\core\group\Group;
@@ -70,10 +70,10 @@ public function define(): array {
 			] ),
 
 			self::EXTENDED        => DI\add( [
+				DI\get( Accordion::class ),
 				DI\get( Button::class ),
 				DI\get( Column::class ),
 				DI\get( Columns::class ),
-				DI\get( Details::class ),
 				DI\get( Embed::class ),
 				DI\get( Gallery::class ),
 				DI\get( Group::class ),
diff --git a/wp-content/themes/core/assets/js/theme/blocks/details.js b/wp-content/themes/core/assets/js/theme/blocks/details.js
diff --git a/wp-content/themes/core/assets/js/theme/ready.js b/wp-content/themes/core/assets/js/theme/ready.js
@@ -44,16 +44,6 @@ const init = () => {
 
 	animateOnScroll();
 
-	// conditionally load core/details animation fix
-	const coreDetailsEls = document.querySelectorAll( '.wp-block-details' );
-	if ( coreDetailsEls.length > 0 ) {
-		import(
-			/* webpackChunkName: "core-details" */ './blocks/details.js'
-		).then( ( module ) => {
-			module.default( coreDetailsEls );
-		} );
-	}
-
 	console.info(
 		'Theme: Initialized all javascript that targeted document ready.'
 	);
diff --git a/wp-content/themes/core/assets/pcss/color/_variables.pcss b/wp-content/themes/core/assets/pcss/color/_variables.pcss
@@ -55,7 +55,8 @@
 	 * Borders
 	 * ----------------------------------------------------------------------- */
 
-	--color-border: var(--color-neutral-40);
+	--color-border: var(--color-black);
+	--color-border-secondary: var(--color-neutral-30);
 
 	/* -----------------------------------------------------------------------
 	 * Selection Highlight Color
@@ -85,3 +86,26 @@
 	--box-shadow-50: var(--wp--preset--shadow--50);
 	--box-shadow-60: var(--wp--preset--shadow--60);
 }
+
+/* -----------------------------------------------------------------------
+ *
+ * Dark Themes
+ *
+ * ----------------------------------------------------------------------- */
+
+:--dark-themes {
+
+	/* -----------------------------------------------------------------------
+	 * Text
+	 * ----------------------------------------------------------------------- */
+
+	--color-text: var(--color-white);
+	--color-text-secondary: var(--color-neutral-20);
+
+	/* -----------------------------------------------------------------------
+	 * Borders
+	 * ----------------------------------------------------------------------- */
+
+	--color-border: var(--color-white);
+	--color-border-secondary: var(--color-neutral-20);
+}
diff --git a/wp-content/themes/core/assets/pcss/typography/_mixins.pcss b/wp-content/themes/core/assets/pcss/typography/_mixins.pcss
@@ -215,7 +215,7 @@
 
 @define-mixin t-transparent-underline {
 	text-decoration-line: underline;
-	text-decoration-thickness: from-font;
+	text-decoration-thickness: var(--text-decoration-thickness);
 	text-decoration-color: transparent;
 	text-underline-offset: 0.15em;
 	transition: var(--transition);
@@ -232,13 +232,13 @@
 @define-mixin t-animated-underline {
 	display: inline;
 	background-image: linear-gradient(currentcolor, currentcolor);
-	background-size: 0 0.05em;
+	background-size: 0 var(--text-decoration-thickness);
 	background-repeat: no-repeat;
 	background-position: 0 100%;
 	transition: background-size 0.3s;
 	text-decoration: none !important; /* override block editor default */
 }
 
 @define-mixin t-animated-underline-hover {
-	background-size: 100% 0.05em;
+	background-size: 100% var(--text-decoration-thickness);
 }
diff --git a/wp-content/themes/core/assets/pcss/typography/_variables.pcss b/wp-content/themes/core/assets/pcss/typography/_variables.pcss
@@ -34,6 +34,12 @@
 	--font-weight-regular: var(--wp--custom--font-weight--regular);
 	--font-weight-bold: var(--wp--custom--font-weight--bold);
 
+	/* -------------------------------------------------------------------------
+	 * Text Decoration
+	 * ------------------------------------------------------------------------- */
+
+	--text-decoration-thickness: 0.06em;
+
 	/* -------------------------------------------------------------------------
 	 * Font Selection
 	 * ------------------------------------------------------------------------- */
diff --git a/wp-content/themes/core/blocks/core/accordion/Accordion.php b/wp-content/themes/core/blocks/core/accordion/Accordion.php
@@ -1,13 +1,13 @@
 <?php declare(strict_types=1);
 
-namespace Tribe\Theme\blocks\core\details;
+namespace Tribe\Theme\blocks\core\accordion;
 
 use Tribe\Plugin\Blocks\Block_Base;
 
-class Details extends Block_Base {
+class Accordion extends Block_Base {
 
 	public function get_block_name(): string {
-		return 'core/details';
+		return 'core/accordion';
 	}
 
 }
diff --git a/wp-content/themes/core/blocks/core/accordion/_mixins.pcss b/wp-content/themes/core/blocks/core/accordion/_mixins.pcss
@@ -0,0 +1,23 @@
+/* -------------------------------------------------------------------------
+ *
+ * Block - Accordion - Mixins
+ *
+ * Because we want to be able to apply the same styles on both hover and
+ * focus, we use a mixin to avoid code duplication.
+ *
+ * ------------------------------------------------------------------------- */
+
+@define-mixin accordion-hover-focus {
+
+	.wp-block-accordion-heading__toggle-title {
+
+		@mixin t-transparent-underline-hover;
+
+		/**
+		 * WP adds text-decoration: underline to the toggle title on hover
+		 * the only value we need to add back is the thickness
+		 * @see https://p.tri.be/i/RF6crT
+		 */
+		text-decoration-thickness: var(--text-decoration-thickness);
+	}
+}
diff --git a/wp-content/themes/core/blocks/core/accordion/index.js b/wp-content/themes/core/blocks/core/accordion/index.js
diff --git a/wp-content/themes/core/blocks/core/accordion/style.pcss b/wp-content/themes/core/blocks/core/accordion/style.pcss
@@ -0,0 +1,120 @@
+/* -----------------------------------------------------------------------
+ *
+ * Accordion Block
+ *
+ * ----------------------------------------------------------------------- */
+
+.wp-block-accordion-item {
+
+	& + .wp-block-accordion-item {
+		margin-top: 0;
+		border-top: none;
+	}
+}
+
+/* -----------------------------------------------------------------------
+ * Accordion Block - Toggle
+ * ----------------------------------------------------------------------- */
+
+.wp-block-accordion-heading__toggle {
+	align-items: flex-start;
+	gap: var(--spacer-40);
+	padding-top: var(--spacer-40);
+	padding-bottom: var(--spacer-40);
+
+	&:focus:not(:focus-visible) {
+
+		@mixin accordion-hover-focus;
+	}
+
+	&:focus-visible {
+
+		@mixin focus-visible;
+	}
+
+	@media (--has-hover) {
+
+		&:hover {
+
+			@mixin accordion-hover-focus;
+		}
+	}
+}
+
+/* -----------------------------------------------------------------------
+ * Accordion Block - Toggle Title
+ * ----------------------------------------------------------------------- */
+
+.wp-block-accordion-heading__toggle-title {
+
+	@mixin t-transparent-underline;
+}
+
+/* -----------------------------------------------------------------------
+ * Accordion Block - Toggle Icon
+ * ----------------------------------------------------------------------- */
+
+.wp-block-accordion-heading__toggle-icon {
+
+	/* static icon size */
+	--accordion-icon-size: 16px;
+	--accordion-icon-offset: calc(var(--accordion-icon-size) / 2);
+
+	/* font size = 1em * 1.4 (line height) / 2 (to get half line height)
+	 * note: if the line height for this block changes, it will need to be
+	 * changed here as well, or the icon position won't look right */
+	--accordion-font-offset: calc(1em * 1.4 / 2);
+
+	/* translation offset = font offset - half icon size */
+	--accordion-translation-offset: calc(var(--accordion-font-offset) - var(--accordion-icon-offset));
+	display: block;
+	width: var(--accordion-icon-size);
+	height: var(--accordion-icon-size);
+	transform: translateY(var(--accordion-translation-offset)) rotate(90deg) !important; /* override WP default rotation */
+	mask: var(--icon-chevron-right) center no-repeat;
+	mask-size: contain;
+	background-color: currentcolor;
+	transition: var(--transition);
+
+	/**
+	 * Handle rotating the icon when the accordion is open
+	 */
+	.is-open & {
+		transform: translateY(var(--accordion-translation-offset)) rotate(-90deg) !important;
+	}
+}
+
+/* -----------------------------------------------------------------------
+ * Accordion Block - Content Panel
+ * ----------------------------------------------------------------------- */
+
+.wp-block-accordion-panel {
+
+	/**
+	 * Add animation to any top level content elements inside the
+	 * panel when opened
+	 */
+	.is-open & > * {
+
+		@media (--mq-allow-animations) {
+			animation: sweep 0.3s ease-in-out;
+		}
+	}
+}
+
+/* -----------------------------------------------------------------------
+ * Accordion Block - Animation Definition
+ * ----------------------------------------------------------------------- */
+
+@keyframes sweep {
+
+	0% {
+		opacity: 0;
+		transform: translateX(-10px);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
diff --git a/wp-content/themes/core/blocks/core/details/style.pcss b/wp-content/themes/core/blocks/core/details/style.pcss
diff --git a/wp-content/themes/core/theme.json b/wp-content/themes/core/theme.json

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,13 @@`
`1`	`1`	`<?php declare(strict_types=1);`
`2`	`2`
`3`		`-namespace Tribe\Theme\blocks\core\details;`
	`3`	`+namespace Tribe\Theme\blocks\core\accordion;`
`4`	`4`
`5`	`5`	`use Tribe\Plugin\Blocks\Block_Base;`
`6`	`6`
`7`		`-class Details extends Block_Base {`
	`7`	`+class Accordion extends Block_Base {`
`8`	`8`
`9`	`9`	`public function get_block_name(): string {`
`10`		`- return 'core/details';`
	`10`	`+ return 'core/accordion';`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`}`