first commit

wp-content/plugins/canvas/components/posts/block-posts/block.jsx

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import Colcade from 'colcade';
+
+const {
+	addAction,
+} = wp.hooks;
+
+/**
+ * Prepare Masonry layout with Colcade script.
+ */
+function maybePrepareMasonryLayout(element) {
+	element.className = classnames(
+		element.className,
+		'cnvs-block-posts-layout-masonry-colcade-ready'
+	);
+
+	element.colcadeObj = new Colcade(element, {
+		columns: '.cnvs-block-post-grid-col',
+		items: '.cnvs-block-post-grid-item'
+	});
+}
+
+/**
+ * Destroy Masonry layout with Colcade script.
+ */
+function maybeDestroyMasonryLayout(element) {
+	if (element.colcadeObj) {
+		element.colcadeObj.destroy();
+		element.colcadeObj = null;
+	}
+}
+
+function getMasonryBlockId(props) {
+	if ('canvas/posts' !== props.block) {
+		return false;
+	}
+
+	if ('masonry' !== props.attributes.layout) {
+		return false;
+	}
+
+	const clientId = props.blockProps.clientId;
+
+	if (!clientId) {
+		return false;
+	}
+
+	return clientId;
+}
+
+addAction('canvas.components.serverSideRender.onChange', 'canvas/posts.masonry.init', function (props) {
+	const clientId = getMasonryBlockId(props);
+
+	if (!clientId) {
+		return;
+	}
+
+	const element = document.querySelector(`[data-block="${clientId}"] .cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready)`);
+
+	if (element) {
+		maybePrepareMasonryLayout(element);
+	}
+});
+
+addAction('canvas.components.serverSideRender.onBeforeChange', 'canvas-posts.masonry.destroy', function (props) {
+	const clientId = getMasonryBlockId(props);
+
+	if (!clientId) {
+		return;
+	}
+
+	const element = document.querySelector(`[data-block="${clientId}"] .cnvs-block-posts-layout-masonry-colcade-ready`);
+
+	if (element) {
+		maybeDestroyMasonryLayout(element);
+	}
+});