Isotope - markhowellsmead/helpers GitHub Wiki

JavaScript

import Isotope from 'isotope-layout';

document.addEventListener('DOMContentLoaded', function () {
	const grid = document.querySelector('.wp-block-shp-must-use-team-list__entries');

	const grid_iso = new Isotope(grid, {
		itemSelector: '.wp-block-shp-must-use-team-list__entry',
		layoutMode: 'fitRows',
	});

	if (window.matchMedia('(max-width: 63.9375em)').matches) {
		grid_iso.arrange();
	}

	// Add the resize event listener
	window.addEventListener('resize', function () {
		if (window.matchMedia('(max-width: 63.9375em)').matches) {
			grid_iso.arrange();
		}
	});

	const filterSelect = document.querySelector('.wp-block-shp-must-use-team-list__filter');

	filterSelect.addEventListener('change', function (event) {
		const filterValue = event.currentTarget.value;
		event.currentTarget.blur();
		grid_iso.arrange({
			filter: function (itemElem) {
				const teams = itemElem.getAttribute('data-teams').split(' ');
				return teams.includes(filterValue) || filterValue === '*';
			},
		});
	});
});

SCSS

Use old flexbox layout trickery: CSS grid won't work

.wp-block-shp-must-use-team-list {
	--shp-team-list--gap: var(--wp--preset--spacing--medium);

	&__entries {
		@media screen and (min-width: 64em) {
			margin-left: calc(var(--shp-team-list--gap) * -0.5);
			margin-right: calc(var(--shp-team-list--gap) * -0.5);
		}
	}

	&__entry {
		margin: 0;
		width: 100%;

		+ * {
			margin-block-start: var(--shp-team-list--gap);

			@media screen and (min-width: 64em) {
				margin-block-start: 0;
			}
		}

		@media screen and (min-width: 64em) {
			float: left;
			width: calc(50% - var(--shp-team-list--gap));
			margin-inline-start: calc(var(--shp-team-list--gap) * 0.5);
			margin-inline-end: calc(var(--shp-team-list--gap) * 0.5);
			margin-block-end: var(--shp-team-list--gap);
		}
	}

}