Add the temporary edit template button under SIG

Author: manzoorwanijk

projects/js-packages/publicize-components/changelog/add-social-edit-template-modal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add edit template modal.

projects/js-packages/publicize-components/src/components/social-image-generator/panel/edit-template.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as socialStore } from '../../../social-store';
+
+/**
+ * Edit Template Button component.
+ *
+ * @return - React element
+ */
+export function EditTemplate() {
+	const { openUnifiedModal } = useDispatch( socialStore );
+
+	const handleOpenModal = useCallback( () => {
+		// When opening modal from the sidebar, we want to lock the screen to prevent navigation.
+		openUnifiedModal( { initialPath: '/edit-template', isScreenLocked: true } );
+	}, [ openUnifiedModal ] );
+
+	return (
+		<Button variant="secondary" onClick={ handleOpenModal }>
+			{ __( 'Edit template', 'jetpack-publicize-components' ) }
+		</Button>
+	);
+}

projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js

@@ -1,4 +1,5 @@
 import { ThemeProvider, useGlobalNotices } from '@automattic/jetpack-components';
+import { siteHasFeature } from '@automattic/jetpack-script-data';
 import {
 	ToggleControl,
 	Button,
@@ -9,7 +10,9 @@ import { useCallback, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import useImageGeneratorConfig from '../../../hooks/use-image-generator-config';
 import { useSaveImageToLibrary } from '../../../hooks/use-save-image-to-library';
+import { features } from '../../../utils';
 import GeneratedImagePreview from '../../generated-image-preview';
+import { EditTemplate } from './edit-template';
 import SocialImageGeneratorSettingsModal from './modal';
 
 const SocialImageGeneratorPanel = () => {
@@ -92,6 +95,10 @@ const SocialImageGeneratorPanel = () => {
 										  )
 										: __( 'Save to media library', 'jetpack-publicize-components' ) }
 								</Button>
+								{ siteHasFeature( features.UNIFIED_UI_V1 ) ? (
+									// TODO: Replace EditTemplate button with full image UI controls integrated with the sidebar
+									<EditTemplate />
+								) : null }
 							</HStack>
 						</>
 					) }