Social: Add edit template modal

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/media-section-v2/index.tsx

@@ -7,6 +7,7 @@ import { ThemeProvider } from '@automattic/jetpack-components';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { MediaUpload } from '@wordpress/block-editor';
 import { BaseControl, Button, Notice } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import useFeaturedImage from '../../hooks/use-featured-image';
@@ -15,6 +16,7 @@ import useMediaDetails from '../../hooks/use-media-details';
 import { SELECTABLE_MEDIA_TYPES } from '../../hooks/use-media-restrictions/restrictions';
 import { usePostMeta } from '../../hooks/use-post-meta';
 import useSigPreview from '../../hooks/use-sig-preview';
+import { store as socialStore } from '../../social-store';
 import CustomMediaToggle from './custom-media-toggle';
 import MediaPreview from './media-preview';
 import MediaSourceMenu, { getMediaSourceDescription } from './media-source-menu';
@@ -78,13 +80,19 @@ export default function MediaSectionV2( {
 	const { isEnabled: sigEnabled } = useImageGeneratorConfig();
 	const { attachedMedia, imageGeneratorSettings, mediaSource, updateJetpackSocialOptions } =
 		usePostMeta();
+	const { openUnifiedModal } = useDispatch( socialStore );
 
 	// Get SIG preview URL when SIG is enabled
 	const { url: sigPreviewUrl, isLoading: sigIsLoading } = useSigPreview( sigEnabled );
 
 	// Ref to store the MediaUpload open function
 	const openMediaLibraryRef = useRef< () => void >( () => {} );
 
+	// Open edit template modal
+	const handleEditTemplateClick = useCallback( () => {
+		openUnifiedModal( { initialPath: '/edit-template', isScreenLocked: true } );
+	}, [ openUnifiedModal ] );
+
 	// Determine current media source
 	// Priority 1: Explicit user choice (if media_source is set)
 	// Priority 2: Detect from existing data (backward compatibility)
@@ -291,7 +299,7 @@ export default function MediaSectionV2( {
 								<Button
 									className={ styles.selectButton }
 									variant="secondary"
-									// onClick={ /* TODO: Add Sig modal here */ }
+									onClick={ handleEditTemplateClick }
 									disabled={ disabled }
 								>
 									{ __( 'Edit template', 'jetpack-publicize-components' ) }

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>
 						</>
 					) }

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

@@ -11,12 +11,13 @@ import TEMPLATES_DATA from './templates.js';
  * The pure template picker component. Does not save the template changes, just sends it back to the parent component,
  * with the onTemplateSelected callback.
  *
- * @param {{value: string|null, onTemplateSelected: Function}} props - The component props:
- *                                                                   Value is the name of the currently selected template, onTemplateSelected is a function that
- *                                                                   will be called when a template is selected. Receives the name of the selected template as an argument.
+ * @param {{value: string|null, onTemplateSelected: Function, className: string}} props - The component props:
+ *                                                                                      Value is the name of the currently selected template, onTemplateSelected is a function that
+ *                                                                                      will be called when a template is selected. Receives the name of the selected template as an argument.
+ *                                                                                      className is an optional additional class name to apply to the container.
  * @return {ReactNode} - The component's rendered output.
  */
-const TemplatePicker = ( { value = null, onTemplateSelected = null } ) => {
+const TemplatePicker = ( { value = null, onTemplateSelected = null, className = null } ) => {
 	const onTemplateClicked = useCallback(
 		event => {
 			const templateName = event.target.id;
@@ -26,7 +27,7 @@ const TemplatePicker = ( { value = null, onTemplateSelected = null } ) => {
 	);
 
 	return (
-		<div className={ styles.templates }>
+		<div className={ clsx( styles.templates, className ) }>
 			{ TEMPLATES_DATA.map( template => (
 				<button
 					onClick={ onTemplateClicked }