Add unified hierarchical sidebar for container block navigation

Implements PLIP 6569: Replace tabbed sidebar with unified hierarchical view.
- Page metadata always at top
- Parent blocks collapsible with sticky headers
- Current block settings highlighted
- Child blocks widget at bottom for containers

New components:
- ParentBlocksWidget: Renders parent chain with navigation
- ChildBlocksWidget: Shows child blocks for containers
- Sidebar customization: Unified layout without tabs

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

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

Author: djay

packages/volto-hydra/src/components/Sidebar/ChildBlocksWidget.jsx

@@ -0,0 +1,274 @@
+/**
+ * ChildBlocksWidget - Shows child blocks for each container field in the current block.
+ * A block can have multiple `type: 'blocks'` fields, each rendered as a separate section.
+ *
+ * Example: A block with both 'slides' and 'footnotes' fields would show:
+ *   Slides        [+]
+ *   ⋮⋮ Slide 1     >
+ *   ⋮⋮ Slide 2     >
+ *
+ *   Footnotes     [+]
+ *   ⋮⋮ Note 1      >
+ *   ⋮⋮ Note 2      >
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  blocks: {
+    id: 'Blocks',
+    defaultMessage: 'Blocks',
+  },
+  addBlock: {
+    id: 'Add block',
+    defaultMessage: 'Add block',
+  },
+});
+
+/**
+ * Get all container fields (type: 'blocks') from a block's schema
+ */
+const getContainerFields = (blockType) => {
+  const blockConfig = config.blocks?.blocksConfig?.[blockType];
+  const schema = blockConfig?.blockSchema;
+  if (!schema?.properties) return [];
+
+  const containerFields = [];
+  for (const [fieldName, fieldDef] of Object.entries(schema.properties)) {
+    if (fieldDef.type === 'blocks') {
+      containerFields.push({
+        name: fieldName,
+        title: fieldDef.title || fieldName,
+        allowedBlocks: fieldDef.allowedBlocks,
+        maxLength: fieldDef.maxLength,
+      });
+    }
+  }
+  return containerFields;
+};
+
+/**
+ * Get child blocks for a specific container field
+ */
+const getChildBlocks = (blockData, fieldName, formData) => {
+  if (!blockData || !blockData[fieldName]) return [];
+
+  const layoutField = `${fieldName}_layout`;
+  const items = blockData[layoutField]?.items || [];
+  const blocksData = blockData[fieldName] || {};
+
+  return items.map((blockId) => {
+    const childBlock = blocksData[blockId];
+    const blockType = childBlock?.['@type'] || 'unknown';
+    const blockConfig = config.blocks?.blocksConfig?.[blockType];
+    const title = blockConfig?.title || blockType;
+
+    return {
+      id: blockId,
+      type: blockType,
+      title: title,
+      data: childBlock,
+    };
+  });
+};
+
+/**
+ * Get the display title for a block
+ */
+const getBlockTitle = (blockData) => {
+  const blockType = blockData?.['@type'];
+  if (!blockType) return 'Block';
+
+  const blockConfig = config.blocks?.blocksConfig?.[blockType];
+  return blockConfig?.title || blockType;
+};
+
+/**
+ * Single container field section
+ */
+const ContainerFieldSection = ({
+  fieldName,
+  fieldTitle,
+  childBlocks,
+  allowedBlocks,
+  maxLength,
+  onSelectBlock,
+  onAddBlock,
+  parentBlockId,
+}) => {
+  const intl = useIntl();
+  const canAdd = !maxLength || childBlocks.length < maxLength;
+
+  return (
+    <div className="container-field-section">
+      <div className="widget-header">
+        <span className="widget-title">{fieldTitle}</span>
+        <div className="widget-actions">
+          {canAdd && (
+            <button
+              onClick={() => onAddBlock(parentBlockId, fieldName)}
+              title={intl.formatMessage(messages.addBlock)}
+              aria-label={intl.formatMessage(messages.addBlock)}
+            >
+              +
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="child-blocks-list">
+        {childBlocks.map((child) => (
+          <div
+            key={child.id}
+            className="child-block-item"
+            onClick={() => onSelectBlock(child.id)}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                onSelectBlock(child.id);
+              }
+            }}
+          >
+            <span className="drag-handle">⋮⋮</span>
+            <span className="block-type">{child.title}</span>
+            <span className="nav-arrow">›</span>
+          </div>
+        ))}
+        {childBlocks.length === 0 && (
+          <div className="empty-container-message">
+            No blocks yet
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * ChildBlocksWidget - Main component
+ * Renders all container fields for the current block
+ */
+const ChildBlocksWidget = ({
+  selectedBlock,
+  formData,
+  blockPathMap,
+  onSelectBlock,
+  onAddBlock,
+}) => {
+  const intl = useIntl();
+  const [isClient, setIsClient] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // Get the selected block's data
+  const getBlockData = (blockId) => {
+    if (!blockId || !formData) return null;
+
+    // Check blockPathMap for nested blocks
+    const pathInfo = blockPathMap?.[blockId];
+    if (pathInfo?.path) {
+      let current = formData;
+      for (const key of pathInfo.path) {
+        if (current && typeof current === 'object') {
+          current = current[key];
+        } else {
+          return null;
+        }
+      }
+      return current;
+    }
+
+    // Fall back to top-level blocks
+    return formData.blocks?.[blockId];
+  };
+
+  // If no block selected, show page-level blocks
+  if (!selectedBlock) {
+    const pageBlocks = formData?.blocks_layout?.items || [];
+    const blocksData = formData?.blocks || {};
+
+    const childBlocks = pageBlocks.map((blockId) => {
+      const blockData = blocksData[blockId];
+      return {
+        id: blockId,
+        type: blockData?.['@type'] || 'unknown',
+        title: getBlockTitle(blockData),
+        data: blockData,
+      };
+    });
+
+    if (!isClient) return null;
+
+    // Note: Uses sidebar-order for backwards compatibility with tests
+    const target = document.getElementById('sidebar-order');
+    if (!target) return null;
+
+    return createPortal(
+      <div className="child-blocks-widget">
+        <ContainerFieldSection
+          fieldName="blocks"
+          fieldTitle={intl.formatMessage(messages.blocks)}
+          childBlocks={childBlocks}
+          onSelectBlock={onSelectBlock}
+          onAddBlock={onAddBlock}
+          parentBlockId={null}
+        />
+      </div>,
+      target,
+    );
+  }
+
+  // Get selected block data and find container fields
+  const blockData = getBlockData(selectedBlock);
+  if (!blockData) return null;
+
+  const blockType = blockData['@type'];
+  const containerFields = getContainerFields(blockType);
+
+  // If no container fields, don't render anything
+  if (containerFields.length === 0) return null;
+
+  if (!isClient) return null;
+
+  // Note: Uses sidebar-order for backwards compatibility with tests
+  const target = document.getElementById('sidebar-order');
+  if (!target) return null;
+
+  return createPortal(
+    <div className="child-blocks-widget">
+      {containerFields.map((field) => {
+        const childBlocks = getChildBlocks(blockData, field.name, formData);
+        return (
+          <ContainerFieldSection
+            key={field.name}
+            fieldName={field.name}
+            fieldTitle={field.title}
+            childBlocks={childBlocks}
+            allowedBlocks={field.allowedBlocks}
+            maxLength={field.maxLength}
+            onSelectBlock={onSelectBlock}
+            onAddBlock={onAddBlock}
+            parentBlockId={selectedBlock}
+          />
+        );
+      })}
+    </div>,
+    target,
+  );
+};
+
+ChildBlocksWidget.propTypes = {
+  selectedBlock: PropTypes.string,
+  formData: PropTypes.object,
+  blockPathMap: PropTypes.object,
+  onSelectBlock: PropTypes.func,
+  onAddBlock: PropTypes.func,
+};
+
+export default ChildBlocksWidget;