added MasonryWrapper component

removed react-masonry-component deps

classes/class-gutenberg.php

@@ -212,7 +212,8 @@ public function enqueue_block_editor_assets() {
 		// Block.
 		Visual_Portfolio_Assets::enqueue_script(
 			'visual-portfolio-gutenberg',
-			'build/gutenberg/index'
+			'build/gutenberg/index',
+			array( 'masonry' )
 		);
 		Visual_Portfolio_Assets::enqueue_style(
 			'visual-portfolio-gutenberg',

gutenberg/components/masonry-wrapper/index.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from '@wordpress/element';
+
+const { Masonry } = window;
+
+export default function MasonryWrapper(props) {
+	const { options, children, ...restProps } = props;
+
+	const ref = useRef();
+
+	// Init.
+	useEffect(() => {
+		const instance = new Masonry(ref.current, options);
+
+		return () => {
+			instance.destroy();
+		};
+	}, [ref, options, children]);
+
+	return (
+		<div ref={ref} {...restProps}>
+			{children}
+		</div>
+	);
+}

gutenberg/components/tiles-selector/index.js

@@ -1,12 +1,12 @@
 import './style.scss';
 
 import classnames from 'classnames/dedupe';
-import Masonry from 'react-masonry-component';
 
 import { Button } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
+import MasonryWrapper from '../masonry-wrapper';
 import StylesRender from '../styles-render';
 import ToggleModal from '../toggle-modal';
 
@@ -69,8 +69,8 @@ export default class TilesSelector extends Component {
 
 		return (
 			<>
-				<Masonry
-					elementType="div"
+				<StylesRender>{styles}</StylesRender>
+				<MasonryWrapper
 					data-tiles-preview={tilesType}
 					options={{
 						transitionDuration: 0,
@@ -81,8 +81,7 @@ export default class TilesSelector extends Component {
 							<div className="vpf-tiles-preview-item" />
 						</div>
 					))}
-				</Masonry>
-				<StylesRender>{styles}</StylesRender>
+				</MasonryWrapper>
 			</>
 		);
 	}

package.json

@@ -87,7 +87,6 @@
 		"photoswipe": "^4.1.3",
 		"raf-schd": "^4.0.3",
 		"react-ace": "^9.5.0",
-		"react-masonry-component": "^6.3.0",
 		"react-select": "^5.7.3",
 		"react-sortable-hoc": "^2.0.0",
 		"shorthash": "0.0.2",