Big sweeping changes to UI workflow. Still WIP.

src/editor-sidebar/create-panel.js

@@ -19,6 +19,7 @@ import {
 	Button,
 	TextControl,
 	TextareaControl,
+	CheckboxControl,
 } from '@wordpress/components';
 import { chevronLeft, addCard, download, copy } from '@wordpress/icons';
 
@@ -36,6 +37,7 @@ export const CreateThemePanel = ( { createType } ) => {
 
 	useSelect( ( select ) => {
 		const themeData = select( 'core' ).getCurrentTheme();
+		if ( createType.includes( 'export') ) {
 		setTheme( {
 			name: themeData.name.raw,
 			description: themeData.description.raw,
@@ -50,6 +52,17 @@ export const CreateThemePanel = ( { createType } ) => {
 					  )
 					: '',
 		} );
+	} else {
+		setTheme( {
+			subfolder:
+				themeData.stylesheet.lastIndexOf( '/' ) > 1
+					? themeData.stylesheet.substring(
+							0,
+							themeData.stylesheet.lastIndexOf( '/' )
+					  )
+					: '',
+		} );
+	}
 	}, [] );
 
 	const handleExportClick = () => {
@@ -236,25 +249,23 @@ export const CreateThemePanel = ( { createType } ) => {
 		<PanelBody>
 			<Heading>
 				<NavigatorToParentButton icon={ chevronLeft }>
-					{ __( 'Create Theme', 'create-block-theme' ) }
+					{
+						__( 'Clone Theme', 'create-block-theme' )
+					}
 				</NavigatorToParentButton>
 			</Heading>
 
 			<VStack>
-				<Text>
-					{ __(
-						'Enter Metadata properties of the new theme.',
-						'create-block-theme'
-					) }
-				</Text>
-				<Spacer />
 				<TextControl
 					label={ __( 'Theme name', 'create-block-theme' ) }
 					value={ theme.name }
 					onChange={ ( value ) =>
 						setTheme( { ...theme, name: value } )
 					}
 				/>
+				<details>
+					<summary>Theme MetaData</summary>
+					<Spacer />
 				<TextareaControl
 					label={ __( 'Theme description', 'create-block-theme' ) }
 					value={ theme.description }
@@ -299,29 +310,17 @@ export const CreateThemePanel = ( { createType } ) => {
 						'create-block-theme'
 					) }
 				/>
-				<TextControl
-					label={ __( 'Theme Subfolder', 'create-block-theme' ) }
-					value={ theme.subfolder }
-					onChange={ ( value ) =>
-						setTheme( { ...theme, subfolder: value } )
-					}
-				/>
+				</details>
+				<br />
 				{ createType === 'createClone' && (
 					<>
 						<Button
 							icon={ copy }
 							variant="primary"
 							onClick={ handleCloneClick }
 						>
-							{ __( 'Clone Theme', 'create-block-theme' ) }
+							{ __( 'Create Theme', 'create-block-theme' ) }
 						</Button>
-						<Spacer />
-						<Text variant="muted">
-							{ __(
-								'Create a copy of this theme on the server and activate it. The user changes will be preserved in the new theme.',
-								'create-block-theme'
-							) }
-						</Text>
 					</>
 				) }
 				{ createType === 'createChild' && (

src/editor-sidebar/create-variation-panel.js

@@ -0,0 +1,103 @@
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import apiFetch from '@wordpress/api-fetch';
+import { downloadFile } from '../utils';
+import { store as noticesStore } from '@wordpress/notices';
+import {
+	// eslint-disable-next-line
+	__experimentalVStack as VStack,
+	// eslint-disable-next-line
+	__experimentalSpacer as Spacer,
+	// eslint-disable-next-line
+	__experimentalText as Text,
+	// eslint-disable-next-line
+	__experimentalHeading as Heading,
+	// eslint-disable-next-line
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	PanelBody,
+	Button,
+	TextControl,
+	TextareaControl,
+	CheckboxControl,
+} from '@wordpress/components';
+import { chevronLeft, addCard, download, copy } from '@wordpress/icons';
+
+export const CreateVariationPanel = ( { createType } ) => {
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const [ theme, setTheme ] = useState( {
+		name: '',
+	} );
+
+	const handleCreateVariationClick = () => {
+		apiFetch( {
+			path: '/create-block-theme/v1/create-variation',
+			method: 'POST',
+			data: theme,
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		} )
+			.then( () => {
+				// eslint-disable-next-line
+				alert(
+					__(
+						'Theme variation created successfully. The editor will now reload.',
+						'create-block-theme'
+					)
+				);
+				window.location.reload();
+			} )
+			.catch( ( error ) => {
+				const errorMessage =
+					error.message ||
+					__(
+						'An error occurred while attempting to create the theme variation.',
+						'create-block-theme'
+					);
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			} );
+	};
+
+	return (
+		<PanelBody>
+			<Heading>
+				<NavigatorToParentButton icon={ chevronLeft }>
+					{
+						__( 'Create Variation', 'create-block-theme' )
+					}
+				</NavigatorToParentButton>
+			</Heading>
+
+			<VStack>
+						<Text>
+							{ __(
+								'Save the Global Styles changes as a theme variation.',
+								'create-block-theme'
+							) }
+						</Text>
+						<br />
+				<TextControl
+					label={ __( 'Variation name', 'create-block-theme' ) }
+					value={ theme.name }
+					onChange={ ( value ) =>
+						setTheme( { ...theme, name: value } )
+					}
+				/>
+				<br />
+						<Button
+							icon={ copy }
+							variant="primary"
+							onClick={ handleCreateVariationClick }
+						>
+							{ __(
+								'Create Theme Variation',
+								'create-block-theme'
+							) }
+						</Button>
+			</VStack>
+		</PanelBody>
+	);
+};