diff --git a/web/sections/PageBuilderPanel.tsx b/web/sections/PageBuilderPanel.tsx index 465259c..1225b3e 100644 --- a/web/sections/PageBuilderPanel.tsx +++ b/web/sections/PageBuilderPanel.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router'; +import { Button } from '@/components/ui/button'; import { href, useNav } from '../routes'; import { useClient } from 'hooks/useClient'; import { readableError } from '../errors'; @@ -189,7 +190,21 @@ export const PageBuilderPanel = () => { return; } const found = sections.flatMap((section) => section.components).find((one) => String(one.id) === piece); - if (found) editComponentRef.current(found); + if (!found) return; + + /* + Selecting a block shows its settings. It does not open a picker. + + `editComponent` means "edit what is IN this block", and for media and galleries that is a modal + over the whole screen. Firing it on mere selection meant clicking a row in the nav threw a dialog + at you before you had said you wanted one — those kinds get a button in the settings instead. + + Free text is different: its editor is inline in the same column, so opening it on selection is + the same act as showing the settings. + */ + if (found.kind === 'free-text') editComponentRef.current(found); + // Whatever was open belonged to the block that was selected before this one. + else setEditing(null); }, [piece, sections]); /* @@ -605,7 +620,9 @@ export const PageBuilderPanel = () => { steps={steps} onSaved={() => setRendered((n) => n + 1)} /> - {editing && ( + {/* Only when it belongs to THIS block. A stale one showed the previous block's words under + the new block's title. */} + {editing?.id === block.id && ( { onSave={() => void saveTextRef.current()} /> )} + + {/* + The kinds whose contents are chosen rather than typed. + + A button rather than the modal opening itself, so picking the block and changing what is in + it are two acts — see the note in the selection effect. + */} + {(block.kind === 'media' || block.kind === 'video' || block.kind === 'gallery') && ( + + )} , ); return;