Integrate hierarchical sidebar widgets and update docs

- Add ParentBlocksWidget and ChildBlocksWidget to View.jsx
- Update README to use "empty block" terminology (matching Volto convention)
- Add reference to Slate transforms architecture docs in CLAUDE.md

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: djay

CLAUDE.md

@@ -1,3 +1,7 @@
+# Architecture Documentation
+
+Read `docs/slate-transforms-architecture.md` for understanding how Slate transforms work between hydra.js and View.jsx (Enter key, formatting, paste, delete handling).
+
 # Running Playwright Tests
 
 ## Prerequisites

README.md

@@ -515,16 +515,16 @@ For our slider example
    - but you can override this by setting a ```onHandleBlockSelection``` callback.
 
 
-Placeholders are special blocks rendered when a container is empty or if a new sub-block is added.
-- The  default placeholder has the @type of 'Placeholder'
-- Render the Placeholder as taking up the space a typical sub-block might take up.
+Empty blocks are special blocks rendered when a container is empty or if a new sub-block is added.
+- The default empty block has the @type of 'empty' (matching Volto's convention)
+- Render the empty block as taking up the space a typical sub-block might take up.
   - this is important so containers are always able to be selected even when empty.
-- Hydra will automatically place an add button in the center of a Placeholder block.
-- After the user clicks "add" and selects a block, the Placeholder is replaced by new block.
-- if you'd like to customise the look of the placeholder you can use ```data-block-add="hidden"``` to prevent hide the default button
+- Hydra will automatically place an add button on the empty block.
+- After the user clicks "add" and selects a block, the empty block is replaced by the new block.
+- if you'd like to customise the look of the empty block you can use ```data-block-add="hidden"``` to hide the default button
   and instead add ```data-block-add="button"``` to another element you want to act as the add button.
-  - or you can nominate another type be your placeholder, such as a SlateBlock (which has the builtin capability to replace itself)
-- if only one block type is allowed in a container then this is created instead of a Placeholder block.
+  - or you can nominate another type be your empty block, such as a SlateBlock (which has the builtin capability to replace itself)
+- if only one block type is allowed in a container then this is created instead of an empty block.
 
 
 ### Level 5: Enable Visual frontend editing of Text, Media and links ([TODO](https://github.com/collective/volto-hydra/issues/5))

packages/volto-hydra/src/components/Iframe/View.jsx

@@ -51,6 +51,8 @@ import OpenObjectBrowser from './OpenObjectBrowser';
 import SyncedSlateToolbar from '../Toolbar/SyncedSlateToolbar';
 import DropdownMenu from '../Toolbar/DropdownMenu';
 import { buildBlockPathMap, getBlockByPath, getContainerFieldConfig, insertBlockInContainer, deleteBlockFromContainer, mutateBlockInContainer, ensureEmptyBlockIfEmpty } from '../../utils/blockPath';
+import ChildBlocksWidget from '../Sidebar/ChildBlocksWidget';
+import ParentBlocksWidget from '../Sidebar/ParentBlocksWidget';
 
 /**
  * NoPreview component for frontend-defined blocks.
@@ -1401,6 +1403,25 @@ const Iframe = (props) => {
           onClose={() => setMenuDropdownOpen(false)}
         />
       )}
+
+      {/* Hierarchical sidebar widgets */}
+      <ParentBlocksWidget
+        selectedBlock={selectedBlock}
+        formData={properties}
+        blockPathMap={iframeSyncState.blockPathMap}
+        onSelectBlock={onSelectBlock}
+      />
+      <ChildBlocksWidget
+        selectedBlock={selectedBlock}
+        formData={properties}
+        blockPathMap={iframeSyncState.blockPathMap}
+        onSelectBlock={onSelectBlock}
+        onAddBlock={(parentBlockId, fieldName) => {
+          // TODO: Implement add block to container field
+          console.log('[VIEW] Add block requested:', { parentBlockId, fieldName });
+          setAddNewBlockOpened(true);
+        }}
+      />
     </div>
   );
 };