first

wp-content/plugins/visual-portfolio/gutenberg/components/toggle-group-control/index.js

@@ -0,0 +1,60 @@
+import './style.scss';
+
+import {
+	__experimentalToggleGroupControl,
+	__experimentalToggleGroupControlOption,
+	ToggleGroupControl as __stableToggleGroupControl,
+	ToggleGroupControlOption as __stableToggleGroupControlOption,
+} from '@wordpress/components';
+import { Fragment, useState } from '@wordpress/element';
+
+const ToggleGroupControl =
+	__stableToggleGroupControl || __experimentalToggleGroupControl;
+const ToggleGroupControlOption =
+	__stableToggleGroupControlOption || __experimentalToggleGroupControlOption;
+
+/**
+ * Component Class
+ *
+ * @param props
+ */
+export default function ToggleGroupCustomControl(props) {
+	const { children, options } = props;
+
+	const [collapsed, setCollapsed] = useState(options[0].category);
+
+	return (
+		<div className="vpf-component-toggle-group-control">
+			<ToggleGroupControl
+				className="vpf-component-toggle-group-control-toggle"
+				value={collapsed}
+				onChange={(val) => {
+					setCollapsed(val);
+				}}
+				isBlock
+			>
+				{options.map((option) => {
+					return (
+						<ToggleGroupControlOption
+							key={option.category}
+							value={option.category}
+							label={option.title}
+						/>
+					);
+				})}
+			</ToggleGroupControl>
+
+			{options.map((option) => {
+				if (collapsed === option.category) {
+					return (
+						<Fragment key={option.category}>
+							{children(option)}
+						</Fragment>
+					);
+				}
+
+				return null;
+			})}
+		</div>
+	);
+}

wp-content/plugins/visual-portfolio/gutenberg/components/toggle-group-control/style.scss

@@ -0,0 +1,10 @@
+.vpf-component-toggle-group-control {
+	> .components-base-control > .components-base-control__field {
+		margin-top: -8px;
+		margin-bottom: 0;
+	}
+
+	> .components-panel__body {
+		padding: 0;
+	}
+}