In WordPress Gutenberg, the interface is also organized into distinct panels and work areas, following a similar philosophy to Figma in terms of functionality and workflow. Here's how the Gutenberg panels can be categorized:
- Purpose: The main content editing area where users create and arrange blocks.
- Elements:
- Editable content blocks (e.g., paragraphs, headings, images, etc.).
- Drag-and-drop functionality for reordering blocks.
- Real-time WYSIWYG (What You See Is What You Get) editing.
- Category: Workspace (Primary Interaction Area).
- Purpose: Provides global actions and quick access to key tools and settings.
- Elements:
- Add Block button (+): For inserting new blocks.
- Undo/Redo controls.
- Tools for switching between select/edit modes.
- Preview and Publish buttons.
- Category: Global Actions (Navigation and Workflow).
- Purpose: Provides detailed controls and settings for the page or selected block.
- Elements:
- Document Settings: Controls for the entire post/page, including:
- Status & visibility (e.g., publish status, schedule).
- Permalink settings.
- Categories, tags, and featured image.
- Revisions.
- Block Settings: Contextual settings for the selected block, including:
- Typography, alignment, and colors.
- Advanced options like custom CSS classes.
- Document Settings: Controls for the entire post/page, including:
- Category: Contextual Settings (Document-Level or Block-Level).
- Purpose: Provides access to all available blocks and reusable patterns.
- Elements:
- Common blocks (e.g., paragraph, heading, image).
- Widgets, embeds, and reusable block groups.
- Patterns for pre-designed layouts.
- Category: Block Management (Building and Customization).
- Purpose: Quick access to frequently used block-specific actions.
- Elements:
- Alignment controls (left, right, center).
- Bold, italic, and other inline text styling options.
- Move up/down buttons for reordering blocks.
- Category: Quick Actions (Block-Level Controls).
- Purpose: Provides an outline of all blocks in the current document, displayed hierarchically.
- Elements:
- List of all blocks in the document.
- Nesting structure for grouped or nested blocks (e.g., columns, groups).
- Select and navigate directly to specific blocks.
- Category: Content Structure (Document Overview).
- Purpose: Displays document-wide feedback and progress information.
- Elements:
- Word count, block count, and reading time.
- Editing mode indicator (e.g., Visual Editor vs Code Editor).
- Category: Progress and Context (Document Feedback).
- Purpose: Organizes different tools and features within the right panel.
- Elements:
- Tabs for switching between Document Settings and Block Settings.
- Possible extensions or third-party tools (e.g., Yoast SEO panel).
- Category: Tool Extensions (Modular Functionality).
- Hierarchy: The interface moves from global actions (Toolbar) to document-wide settings (Sidebar) and then to block-specific controls (Floating Toolbar).
- Workflow-Centric:
- Users start by adding and arranging blocks in the Canvas.
- Fine-tune individual blocks via the Right Sidebar or Floating Toolbar.
- Adjust global document settings in the Sidebar.
- Modularity: Panels are organized so users can focus on specific tasks (e.g., editing, styling, or publishing) without clutter.
- Block-Based Workflow: Gutenberg is tailored for content creation with reusable building blocks, whereas Figma focuses on design and prototyping.
- Less Real-Time Collaboration: While Figma emphasizes collaboration, Gutenberg prioritizes content publishing workflows.
- Contextual Tooling: Gutenberg dynamically shows options relevant to the selected block or document context.
In summary, Gutenberg's panels are organized to reflect a block-first, document-oriented workflow, making it easy for users to build content piece by piece while maintaining flexibility for both global and local adjustments.