move all components over

includes/class-kadence-blocks-editor-assets.php

@@ -138,6 +138,7 @@ public function on_init_editor_assets() {
 			'tabs',
 			'testimonials',
 			'advanced-form',
+			'page-wizard',
 		);
 		foreach ( $blocks as $block ) {
 			$meta   = kadence_blocks_get_asset_file( sprintf( 'dist/blocks-%s', $block ) );

src/blocks/column/edit.js

@@ -1051,7 +1051,8 @@ function SectionEdit(props) {
 		wrapContent && '' !== wrapContent[1] ? wrapContent[1] : '',
 		wrapContent && '' !== wrapContent[2] ? wrapContent[2] : ''
 	);
-	const backgroundString = background ? KadenceColorOutput(background, backgroundOpacity) : undefined;
+	const backgroundString =
+		backgroundType !== 'gradient' && background ? KadenceColorOutput(background, backgroundOpacity) : undefined;
 	const previewFlexBasis = getPreviewSize(
 		previewDevice,
 		(previewDirection === 'horizontal' || previewDirection === 'horizontal-reverse') &&

src/blocks/page-wizard/components/advanced-select/advanced-select-input.js

@@ -0,0 +1,50 @@
+/**
+ * Wordpress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from '../button';
+
+export const AdvancedSelectInput = ({ onComplete, onCancel }) => {
+	const [value, setValue] = useState(null);
+
+	function doNothing(event) {
+		event.stopPropagation();
+	}
+
+	function onKeyDown(event) {
+		event.stopPropagation();
+		if (event.key === 'Enter') {
+			onComplete(value);
+		}
+	}
+
+	function saveName(event) {
+		event.stopPropagation();
+		onComplete(value);
+	}
+
+	return (
+		<div className="advanced-select-menu__input">
+			<input
+				className="advanced-select-menu__input-item"
+				onChange={(elem) => setValue(elem.target.value)}
+				onKeyDown={onKeyDown}
+				placeholder="Rename this collection"
+				autoFocus
+				onClick={doNothing}
+			/>
+			<div className="advanced-select-menu__option-item__actions is-edit">
+				<Button size="small" variant="link" onClick={onCancel}>
+					Cancel
+				</Button>
+				<Button size="small" variant="primary" onClick={saveName}>
+					Save
+				</Button>
+			</div>
+		</div>
+	);
+};

src/blocks/page-wizard/components/advanced-select/advanced-select-menu.js

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * Wordpress dependencies
+ */
+import { useState, useEffect, useContext } from '@wordpress/element';
+import { Icon, plus } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from '../button';
+import { AdvancedSelectOption } from './advanced-select-option';
+import { AdvancedSelectInput } from './advanced-select-input';
+import { AdvancedSelectContext } from '.';
+
+export const AdvancedSelectMenu = function (props) {
+	const { width, options, onSelect, value, allowClose } = props;
+	const { createRecord } = useContext(AdvancedSelectContext);
+
+	const [formattedOptions, setFormattedOptions] = useState([]);
+	const [creating, setCreating] = useState(false);
+
+	useEffect(() => {
+		if (options && options.length > 0) {
+			setFormattedOptions(
+				options.reduce((acc, opt) => {
+					if (!opt.options || opt.options.length === 0) {
+						return acc;
+					}
+					return [...acc, opt];
+				}, [])
+			);
+		}
+	}, [options]);
+
+	const toggleCreate = (bool) => (e) => {
+		e.stopPropagation();
+		setCreating(bool);
+	};
+
+	function onOptionSelect(option) {
+		onSelect(option);
+	}
+
+	function finalizeRecord(recordName) {
+		createRecord(recordName);
+		setCreating(false);
+	}
+
+	return (
+		<div className="stellarwp advanced-select-menu" style={{ width }}>
+			{creating ? (
+				<div className="advanced-select-menu__create-input">
+					<AdvancedSelectInput onComplete={finalizeRecord} onCancel={toggleCreate(false)} />
+				</div>
+			) : (
+				<Button className="advanced-select-menu__create" onClick={toggleCreate(true)}>
+					{__('Make My Own Collection', 'kadence-blocks')}
+					<Icon icon={plus} size={20} />
+				</Button>
+			)}
+			{formattedOptions &&
+				formattedOptions.length > 0 &&
+				formattedOptions.map((opt) => (
+					<div className="advanced-select-menu__option-wrapper" key={opt.label}>
+						<div className="advanced-select-menu__option-category">{opt.label}</div>
+						{opt.options.map((option) => (
+							<AdvancedSelectOption
+								key={option.value}
+								option={option}
+								onOptionSelect={onOptionSelect}
+								isActive={value === option.value}
+								doNotClose={(bool) => allowClose(!bool)}
+							/>
+						))}
+					</div>
+				))}
+		</div>
+	);
+};

src/blocks/page-wizard/components/advanced-select/advanced-select-option.js

@@ -0,0 +1,95 @@
+/**
+ * Wordpress dependencies
+ */
+import { useState, useEffect, useContext } from '@wordpress/element';
+import { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from '../button';
+import { AdvancedSelectInput } from './advanced-select-input';
+import { AdvancedSelectContext } from '.';
+
+const editIcon = (
+	<svg viewBox="0 0 18 18" fill="none">
+		<path
+			d="M2.25 12.9374V15.7499H5.0625L13.3575 7.45492L10.545 4.64242L2.25 12.9374ZM15.5325 5.27992C15.825 4.98742 15.825 4.51492 15.5325 4.22242L13.7775 2.46742C13.485 2.17492 13.0125 2.17492 12.72 2.46742L11.3475 3.83992L14.16 6.65242L15.5325 5.27992Z"
+			fill="currentColor"
+		/>
+	</svg>
+);
+const deleteIcon = (
+	<svg viewBox="0 0 18 18" fill="none">
+		<path
+			d="M4.5 14.25C4.5 15.075 5.175 15.75 6 15.75H12C12.825 15.75 13.5 15.075 13.5 14.25V5.25H4.5V14.25ZM6 6.75H12V14.25H6V6.75ZM11.625 3L10.875 2.25H7.125L6.375 3H3.75V4.5H14.25V3H11.625Z"
+			fill="currentColor"
+		/>
+	</svg>
+);
+const sparklesIcon = (
+	<svg viewBox="0 0 18 16" fill="none">
+		<path
+			d="M6.99984 10.1458L8.04315 7.87665L10.3123 6.83333L8.04315 5.79002L6.99984 3.52083L5.95653 5.79002L3.68734 6.83333L5.95653 7.87665L6.99984 10.1458ZM6.99984 13.1667L5.02067 8.8125L0.666504 6.83333L5.02067 4.85417L6.99984 0.5L8.979 4.85417L13.3332 6.83333L8.979 8.8125L6.99984 13.1667ZM14.1665 15.5L13.1873 13.3125L10.9998 12.3333L13.1873 11.3333L14.1665 9.16667L15.1665 11.3333L17.3332 12.3333L15.1665 13.3125L14.1665 15.5Z"
+			fill="currentColor"
+		/>
+	</svg>
+);
+
+export const AdvancedSelectOption = ({ option, onOptionSelect, isActive, doNotClose }) => {
+	const [action, setAction] = useState('default');
+	const { updateRecord, deleteRecord } = useContext(AdvancedSelectContext);
+
+	useEffect(() => {
+		doNotClose(action !== 'default');
+	}, [action]);
+
+	const updateAction = (actionName) => (e) => {
+		e.stopPropagation();
+		setAction(actionName);
+	};
+
+	function onUpdate(newName) {
+		updateRecord(newName || option.label, option.value);
+		setAction('default');
+	}
+
+	function onDelete(event) {
+		event.stopPropagation();
+		deleteRecord(option.value);
+		setAction('default');
+	}
+
+	return (
+		<div
+			className={`advanced-select-menu__option-item${isActive ? ' is-active' : ''}${
+				option.useActions ? ' use-actions' : ''
+			}`}
+		>
+			{action !== 'edit' && (
+				<div className="advanced-select-menu__option-item__label" onClick={(_e) => onOptionSelect(option)}>
+					{option.value === 'aiGenerated' && <Icon icon={sparklesIcon} size={17} />}
+					{option.label}
+				</div>
+			)}
+
+			{action === 'default' && option.useActions && (
+				<div className="advanced-select-menu__option-item__actions is-icons">
+					<Icon icon={editIcon} size={17} onClick={updateAction('edit')} />
+					<Icon icon={deleteIcon} size={17} onClick={updateAction('delete')} />
+				</div>
+			)}
+			{action === 'edit' && <AdvancedSelectInput onComplete={onUpdate} onCancel={updateAction('default')} />}
+			{action === 'delete' && (
+				<div className="advanced-select-menu__option-item__actions is-delete">
+					<Button size="small" variant="link" onClick={updateAction('default')}>
+						Cancel
+					</Button>
+					<Button size="small" isDestructive onClick={onDelete}>
+						Delete Collection
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+};