diff --git a/src/editor-sidebar/create-panel.js b/src/editor-sidebar/create-panel.js
index 1dd5f60b..c91280c6 100644
--- a/src/editor-sidebar/create-panel.js
+++ b/src/editor-sidebar/create-panel.js
@@ -19,51 +19,52 @@ import {
Button,
TextControl,
TextareaControl,
- CheckboxControl,
} from '@wordpress/components';
import { chevronLeft, addCard, download, copy } from '@wordpress/icons';
-export const CreateThemePanel = ( { createType } ) => {
- const { createErrorNotice } = useDispatch( noticesStore );
+export const CreateThemePanel = ({ createType, saveType }) => {
- const [ theme, setTheme ] = useState( {
+ const { createErrorNotice } = useDispatch(noticesStore);
+
+ const [theme, setTheme] = useState({
name: '',
description: '',
uri: '',
author: '',
author_uri: '',
tags_custom: '',
- } );
+ subfolder: '',
+ });
- useSelect( ( select ) => {
+ useSelect((select) => {
const themeData = select( 'core' ).getCurrentTheme();
- if ( createType.includes( 'export') ) {
- setTheme( {
- name: themeData.name.raw,
- description: themeData.description.raw,
- uri: themeData.theme_uri.raw,
- author: themeData.author.raw,
- author_uri: themeData.author_uri.raw,
+ setTheme({
+ ...theme,
subfolder:
- themeData.stylesheet.lastIndexOf( '/' ) > 1
+ themeData.stylesheet.lastIndexOf('/') > 1
? themeData.stylesheet.substring(
- 0,
- themeData.stylesheet.lastIndexOf( '/' )
- )
- : '',
- } );
- } else {
- setTheme( {
- subfolder:
- themeData.stylesheet.lastIndexOf( '/' ) > 1
- ? themeData.stylesheet.substring(
- 0,
- themeData.stylesheet.lastIndexOf( '/' )
- )
+ 0,
+ themeData.stylesheet.lastIndexOf('/')
+ )
: '',
- } );
+ });
+ }, []);
+
+ const cloneTheme = ( createType, saveType ) => {
+ if (createType === 'createClone') {
+ if (saveType === 'download') {
+ handleExportClick();
+ } else {
+ handleCloneClick();
+ }
+ } else if (createType === 'createChild') {
+ if (saveType === 'download') {
+ handleExportChildClick();
+ } else {
+ handleCreateChildClick();
+ }
+ }
}
- }, [] );
const handleExportClick = () => {
const fetchOptions = {
@@ -78,17 +79,17 @@ export const CreateThemePanel = ( { createType } ) => {
async function exportCloneTheme() {
try {
- const response = await apiFetch( fetchOptions );
- downloadFile( response );
- } catch ( error ) {
+ const response = await apiFetch(fetchOptions);
+ downloadFile(response);
+ } catch (error) {
const errorMessage =
error.message && error.code !== 'unknown_error'
? error.message
: __(
- 'An error occurred while attempting to export the theme.',
- 'create-block-theme'
- );
- createErrorNotice( errorMessage, { type: 'snackbar' } );
+ 'An error occurred while attempting to export the theme.',
+ 'create-block-theme'
+ );
+ createErrorNotice(errorMessage, { type: 'snackbar' });
}
}
@@ -108,17 +109,17 @@ export const CreateThemePanel = ( { createType } ) => {
async function exportCloneTheme() {
try {
- const response = await apiFetch( fetchOptions );
- downloadFile( response );
- } catch ( error ) {
+ const response = await apiFetch(fetchOptions);
+ downloadFile(response);
+ } catch (error) {
const errorMessage =
error.message && error.code !== 'unknown_error'
? error.message
: __(
- 'An error occurred while attempting to export the child theme.',
- 'create-block-theme'
- );
- createErrorNotice( errorMessage, { type: 'snackbar' } );
+ 'An error occurred while attempting to export the child theme.',
+ 'create-block-theme'
+ );
+ createErrorNotice(errorMessage, { type: 'snackbar' });
}
}
@@ -126,15 +127,15 @@ export const CreateThemePanel = ( { createType } ) => {
};
const handleCreateBlankClick = () => {
- apiFetch( {
+ apiFetch({
path: '/create-block-theme/v1/create-blank',
method: 'POST',
data: theme,
headers: {
'Content-Type': 'application/json',
},
- } )
- .then( () => {
+ })
+ .then(() => {
// eslint-disable-next-line
alert(
__(
@@ -143,28 +144,28 @@ export const CreateThemePanel = ( { createType } ) => {
)
);
window.location.reload();
- } )
- .catch( ( error ) => {
+ })
+ .catch((error) => {
const errorMessage =
error.message ||
__(
'An error occurred while attempting to create the theme.',
'create-block-theme'
);
- createErrorNotice( errorMessage, { type: 'snackbar' } );
- } );
+ createErrorNotice(errorMessage, { type: 'snackbar' });
+ });
};
const handleCloneClick = () => {
- apiFetch( {
+ apiFetch({
path: '/create-block-theme/v1/clone',
method: 'POST',
data: theme,
headers: {
'Content-Type': 'application/json',
},
- } )
- .then( () => {
+ })
+ .then(() => {
// eslint-disable-next-line
alert(
__(
@@ -173,28 +174,28 @@ export const CreateThemePanel = ( { createType } ) => {
)
);
window.location.reload();
- } )
- .catch( ( error ) => {
+ })
+ .catch((error) => {
const errorMessage =
error.message ||
__(
'An error occurred while attempting to create the theme.',
'create-block-theme'
);
- createErrorNotice( errorMessage, { type: 'snackbar' } );
- } );
+ createErrorNotice(errorMessage, { type: 'snackbar' });
+ });
};
const handleCreateChildClick = () => {
- apiFetch( {
+ apiFetch({
path: '/create-block-theme/v1/create-child',
method: 'POST',
data: theme,
headers: {
'Content-Type': 'application/json',
},
- } )
- .then( () => {
+ })
+ .then(() => {
// eslint-disable-next-line
alert(
__(
@@ -203,219 +204,125 @@ export const CreateThemePanel = ( { createType } ) => {
)
);
window.location.reload();
- } )
- .catch( ( error ) => {
+ })
+ .catch((error) => {
const errorMessage =
error.message ||
__(
'An error occurred while attempting to create the theme.',
'create-block-theme'
);
- createErrorNotice( errorMessage, { type: 'snackbar' } );
- } );
- };
-
- 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' } );
- } );
+ createErrorNotice(errorMessage, { type: 'snackbar' });
+ });
};
return (
-
+
{
- __( 'Clone Theme', 'create-block-theme' )
+ __('Create Theme', 'create-block-theme')
}
- setTheme( { ...theme, name: value } )
+ label={__('Theme name', 'create-block-theme')}
+ value={theme.name}
+ onChange={(value) =>
+ setTheme({ ...theme, name: value })
}
/>
- Theme MetaData
+ {__('Additional Theme MetaData', 'create-block-theme')}
-
- setTheme( { ...theme, description: value } )
- }
- placeholder={ __(
- 'A short description of the theme',
- 'create-block-theme'
- ) }
- />
-
- setTheme( { ...theme, uri: value } )
- }
- placeholder={ __(
- 'https://github.com/wordpress/twentytwentythree/',
- 'create-block-theme'
- ) }
- />
-
- setTheme( { ...theme, author: value } )
- }
- placeholder={ __(
- 'the WordPress team',
- 'create-block-theme'
- ) }
- />
-
- setTheme( { ...theme, author_uri: value } )
- }
- placeholder={ __(
- 'https://wordpress.org/',
- 'create-block-theme'
- ) }
- />
+
+ setTheme({ ...theme, description: value })
+ }
+ placeholder={__(
+ 'A short description of the theme',
+ 'create-block-theme'
+ )}
+ />
+
+ setTheme({ ...theme, uri: value })
+ }
+ placeholder={__(
+ 'https://github.com/wordpress/twentytwentythree/',
+ 'create-block-theme'
+ )}
+ />
+
+ setTheme({ ...theme, author: value })
+ }
+ placeholder={__(
+ 'the WordPress team',
+ 'create-block-theme'
+ )}
+ />
+
+ setTheme({ ...theme, author_uri: value })
+ }
+ placeholder={__(
+ 'https://wordpress.org/',
+ 'create-block-theme'
+ )}
+ />
- { createType === 'createClone' && (
- <>
-
- >
- ) }
- { createType === 'createChild' && (
- <>
-
-
-
- { __(
- 'Create a child theme on the server and activate it. The user changes will be preserved in the new theme.',
- 'create-block-theme'
- ) }
-
- >
- ) }
- { createType === 'createVariation' && (
- <>
-
-
-
- { __(
- 'Save the Global Styles changes as a theme variation.',
- 'create-block-theme'
- ) }
-
- >
- ) }
- { createType === 'exportClone' && (
+ {createType === 'createClone' && (
<>
-
-
- { __(
- 'Export a copy of this theme as a .zip file. The user changes will be preserved in the new theme.',
- 'create-block-theme'
- ) }
-
>
- ) }
- { createType === 'exportChild' && (
+ )}
+ {createType === 'createChild' && (
<>
-
-
- { __(
- 'Export a child of this theme as a .zip file. The user changes will be preserved in the new theme.',
- 'create-block-theme'
- ) }
-
>
- ) }
- { createType === 'createBlank' && (
+ )}
+ {createType === 'createBlank' && (
<>
- { __(
+ {__(
'Create a blank theme with no styles or templates.',
'create-block-theme'
- ) }
+ )}
>
- ) }
+ )}
);
diff --git a/src/plugin-sidebar.js b/src/plugin-sidebar.js
index f867b49c..2e29130d 100644
--- a/src/plugin-sidebar.js
+++ b/src/plugin-sidebar.js
@@ -48,10 +48,15 @@ import { ThemeMetadataEditorModal } from './editor-sidebar/metadata-editor-modal
import { downloadExportedTheme } from './resolvers';
const CreateBlockThemePlugin = () => {
+
const [ isEditorOpen, setIsEditorOpen ] = useState( false );
const [ isMetadataEditorOpen, setIsMetadataEditorOpen ] = useState( false );
+ const [ cloneCreateType, setCloneCreateType ] = useState( '' );
+
+ const [ cloneSaveType, setCloneSaveType ] = useState( '' );
+
const { createErrorNotice } = useDispatch( noticesStore );
const handleExportClick = () => {
@@ -192,6 +197,7 @@ const CreateBlockThemePlugin = () => {
{ setCloneCreateType( 'createClone' ) } }
>
@@ -214,6 +220,7 @@ const CreateBlockThemePlugin = () => {
{ setCloneCreateType( 'createChild' ) } }
>
@@ -255,8 +262,9 @@ const CreateBlockThemePlugin = () => {
{ setCloneSaveType( 'create' ) } }
>
@@ -277,8 +285,9 @@ const CreateBlockThemePlugin = () => {
{ setCloneSaveType( 'download' ) } }
>
@@ -305,8 +314,8 @@ const CreateBlockThemePlugin = () => {
-
-
+
+
diff --git a/src/resolvers.js b/src/resolvers.js
index 446669a6..44d9e409 100644
--- a/src/resolvers.js
+++ b/src/resolvers.js
@@ -57,7 +57,8 @@ export async function downloadExportedTheme() {
'Content-Type': 'application/json',
},
parse: false,
- } ).then( ( response ) => {
- downloadFile( response );
- } );
+ } )
+ .then( ( response ) => {
+ downloadFile( response );
+ } );
}