🐞 fix: Animate team-grid bio with JS measuring natural height

views/blocks/team-grid/team-grid.js

@@ -0,0 +1,108 @@
+/**
+ * Team Grid block — bio expand/collapse animation.
+ *
+ * Native <details>/<summary> handles the toggle, but CSS transitions on
+ * max-height need a concrete target value to animate to. This module
+ * measures each bio's natural height on open and animates max-height
+ * from current → measured (open) or current → 0 (close) so the
+ * transition fires in both directions.
+ *
+ * The module is enqueued per-block by the team-grid PHP template. It
+ * auto-initializes on import: queries the DOM for any existing
+ * .team-grid__details elements and attaches a toggle handler to each.
+ */
+
+const DETAILS_SELECTOR = '.team-grid__details';
+const BIO_WRAP_SELECTOR = '.team-grid__bio-wrap';
+
+const setMaxHeight = (el, value) => {
+	el.style.maxHeight = typeof value === 'number' ? `${value}px` : value;
+};
+
+const measureBioHeight = (bioWrap) => {
+	// Temporarily allow the inner content to render at its natural size so
+	// scrollHeight reports the real height rather than the clipped height.
+	const previousMax = bioWrap.style.maxHeight;
+	const previousOverflow = bioWrap.style.overflow;
+
+	setMaxHeight(bioWrap, 'none');
+	bioWrap.style.overflow = 'visible';
+
+	const height = bioWrap.scrollHeight;
+
+	bioWrap.style.overflow = previousOverflow;
+	setMaxHeight(bioWrap, previousMax || '');
+
+	return height;
+};
+
+const animateOpen = (bioWrap) => {
+	const target = measureBioHeight(bioWrap);
+
+	setMaxHeight(bioWrap, '0px');
+
+	// Force a reflow so the browser registers the starting value before
+	// we change it to the target — otherwise the transition is skipped.
+	// eslint-disable-next-line no-unused-expressions
+	bioWrap.offsetHeight;
+
+	requestAnimationFrame(() => {
+		setMaxHeight(bioWrap, `${target}px`);
+	});
+
+	// After the transition completes, set max-height back to 'none' so
+	// dynamic content (e.g. images loading late) can grow the bio
+	// without being clipped.
+	const onEnd = (event) => {
+		if (event.propertyName !== 'max-height' || event.target !== bioWrap) {
+			return;
+		}
+		bioWrap.removeEventListener('transitionend', onEnd);
+		setMaxHeight(bioWrap, 'none');
+	};
+	bioWrap.addEventListener('transitionend', onEnd);
+};
+
+const animateClose = (bioWrap) => {
+	// Capture the current rendered height so the browser has a concrete
+	// starting value for the transition. Without this, going from
+	// 'none' to '0px' snaps instead of animating.
+	const current = bioWrap.getBoundingClientRect().height;
+
+	setMaxHeight(bioWrap, `${current}px`);
+
+	// Force a reflow so the browser registers the starting value.
+	// eslint-disable-next-line no-unused-expressions
+	bioWrap.offsetHeight;
+
+	requestAnimationFrame(() => {
+		setMaxHeight(bioWrap, '0px');
+	});
+};
+
+const attach = (details) => {
+	if (details.dataset.teamGridBound === 'true') {
+		return;
+	}
+	details.dataset.teamGridBound = 'true';
+
+	const bioWrap = details.querySelector(BIO_WRAP_SELECTOR);
+
+	if (!bioWrap) {
+		return;
+	}
+
+	details.addEventListener('toggle', () => {
+		if (details.open) {
+			animateOpen(bioWrap);
+		} else {
+			animateClose(bioWrap);
+		}
+	});
+};
+
+const init = () => {
+	document.querySelectorAll(DETAILS_SELECTOR).forEach(attach);
+};
+
+init();