← All changes | src/Agent/workflows/block-selector/components/ReplaceImageConfirm.jsx +27 -20 3.1.4 → trunk View file →

		@@ -2,22 +2,23 @@
2	2	ImagePicker,
3	3	PickerActions,
4	4	PickerButton,
5	5	} from '@agent/components/ImagePicker';
	6	+import { SharedBlockNotice } from '@agent/components/SharedBlockNotice';
6	7	import { targetFor } from '@agent/hooks/useImageAcquisition';
	8	+import { BLOCK_ID_SEL, findBlockEl } from '@agent/lib/block-el';
7	9	import { useChatStore } from '@agent/state/chat';
	10	+import { useQuickEditStore } from '@quick-edit/state/store';
8	11	import { useCallback, useEffect, useRef } from '@wordpress/element';
9	12	import { __ } from '@wordpress/i18n';
10	13
11	14	// The block's own image — never one belonging to a nested tagged block.
12		-const findBlockImage = (blockId) => {
13		- const scope = document.querySelector(
14		- `[data-extendify-agent-block-id="${blockId}"]`,
15		- );
	15	+const findBlockImage = (blockId, partSlug) => {
	16	+ const scope = findBlockEl(blockId, document, { partSlug });
16	17	if (!scope) return null;
17	18	return (
18	19	[...scope.querySelectorAll('img')].find(
19		- (img) => img.closest('[data-extendify-agent-block-id]') === scope,
	20	+ (img) => img.closest(BLOCK_ID_SEL) === scope,
20	21	) ?? null
21	22	);
22	23	};
23	24
		@@ -30,8 +31,11 @@
30	31	const original = useRef(null);
31	32	const confirmed = useRef(false);
32	33	const addMessage = useChatStore((state) => state.addMessage);
33	34	const updateMessage = useChatStore((state) => state.updateMessage);
	35	+ // A part block's id repeats in post content, so the scope picks the instance.
	36	+ const partSlug =
	37	+ useQuickEditStore((state) => state.agentBlock?.source?.partSlug) ?? null;
34	38
35	39	const restoreOriginal = useCallback(() => {
36	40	const saved = original.current;
37	41	if (!saved) return;
		@@ -41,9 +45,9 @@
41	45	}, []);
42	46
43	47	const previewOnPage = useCallback(
44	48	(url) => {
45		- const img = findBlockImage(blockId);
	49	+ const img = findBlockImage(blockId, partSlug);
46	50	if (!img) return;
47	51	original.current ??= {
48	52	el: img,
49	53	src: img.getAttribute('src') ?? '',
		@@ -55,17 +59,17 @@
55	59	}
56	60	img.removeAttribute('srcset');
57	61	img.src = url;
58	62	},
59		- [blockId, restoreOriginal],
	63	+ [blockId, partSlug, restoreOriginal],
60	64	);
61	65
62	66	// Nothing on the page means there is nothing to replace.
63	67	const receipt = useRef(null);
64	68	useEffect(() => {
65		- if (!findBlockImage(blockId)) return onCancel();
	69	+ if (!findBlockImage(blockId, partSlug)) return onCancel();
66	70	receipt.current ??= addMessage('image', {});
67		- }, [blockId, onCancel, addMessage]);
	71	+ }, [blockId, partSlug, onCancel, addMessage]);
68	72
69	73	useEffect(() => {
70	74	return () => {
71	75	if (confirmed.current) return;
		@@ -80,9 +84,9 @@
80	84	prompt={operation.prompt ?? ''}
81	85	search={operation.prompt ?? ''}
82	86	tab={operation.source === 'generate' ? 'generate' : 'media'}
83	87	autoGenerate={operation.source === 'generate'}
84		- target={() => targetFor(findBlockImage(blockId))}
	88	+ target={() => targetFor(findBlockImage(blockId, partSlug))}
85	89	onSelect={previewOnPage}
86	90	onSubmit={async (image) => {
87	91	confirmed.current = true;
88	92	const url = image?.source_url || image?.url;
		@@ -103,18 +107,21 @@
103	107	shouldRefreshPage: true,
104	108	});
105	109	}}
106	110	footer={({ ready, busy, submit }) => (
107		- <PickerActions>
108		- <PickerButton disabled={busy} onClick={onCancel}>
109		- {__('Cancel', 'extendify-local')}
110		- </PickerButton>
111		- <PickerButton primary disabled={!ready || busy} onClick={submit}>
112		- {busy
113		- ? __('Saving...', 'extendify-local')
114		- : __('Save', 'extendify-local')}
115		- </PickerButton>
116		- </PickerActions>
	111	+ <>
	112	+ <SharedBlockNotice blockIds={[blockId]} />
	113	+ <PickerActions>
	114	+ <PickerButton disabled={busy} onClick={onCancel}>
	115	+ {__('Cancel', 'extendify-local')}
	116	+ </PickerButton>
	117	+ <PickerButton primary disabled={!ready || busy} onClick={submit}>
	118	+ {busy
	119	+ ? __('Saving...', 'extendify-local')
	120	+ : __('Save', 'extendify-local')}
	121	+ </PickerButton>
	122	+ </PickerActions>
	123	+ </>
117	124	)}
118	125	/>
119	126	);
120	127	};