Gutenberg Block Editor

repository·trunk·Indexed 11 days ago

https://github.com/wordpress/gutenberg

Development hub for the WordPress block editor, a modular approach to site building where every piece of content is a block. This documentation covers contributor guidelines for code, design, and documentation, including E2E testing with Playwright, Core backport processes, and design principles for the unified block interface. Version 23.8.0-rc.1.

Tokens
945.6K
Snippets
2.8K
Records
4.4K
Agent score
89%

What's inside Gutenberg

  1. Overview of the quill-delta fork

    trunk

    This package is a fork of the quill-delta npm package. It is used to apply incremental text updates to Y.Text using Delta objects.

    This fork exists to ensure license compatibility with WordPress (GPLv2) by replacing the fast-diff dependency (Apache v2) with the diff library. It also includes an enhanced diffWithCursor() method to handle text changes relative to a user's active cursor position.

  2. Overview of the WordPress Design System

    trunk

    The WordPress Design System is a collection of reusable components, design tokens, and guidelines designed to help developers build consistent, accessible user interfaces for the WordPress administrative dashboard.

    Key features include:

    • Design Tokens: Encoded design decisions (colors, spacing, typography) that ensure consistency and allow for easy customization.
    • Theming: A system that allows components to adapt to different contexts while maintaining a unified visual language.
    • Accessibility: Components are built following WordPress accessibility standards, including semantic markup and keyboard navigation.
    • Modern Distribution: Distributed as versioned npm packages following semantic versioning, rather than relying on the window.wp global.
  3. Overview of the Widget Dashboard package

    trunk

    The widget-dashboard package provides a stateless rendering engine for creating widget dashboards. It renders an editable grid of widget instances.

    Key features include:

    • Editable Grid: Supports drag-to-reorder and resizing.
    • Edit Mode: Consumer-controlled mode that enables layout modifications.
    • Widget Management: Includes a modal inserter, per-widget settings, and command-palette integration.

    Warning: This package is currently experimental and subject to drastic, breaking changes.

  4. Overview of the First Time Contributor Label task

    trunk
    The first-time-contributor-label task is an automation tool designed to identify and label pull requests. It automatically adds the "First Time Contributor" label to pull requests that are merged on behalf of individuals who have no prior contribution history within the project. This helps reviewers identify newcomers who may require additional guidance or mentorship during the code review process.
  5. Overview of the Navigation block

    trunk

    The core/navigation block is a container block used to collect blocks that allow visitors to navigate your site. It is a Hybrid block, meaning it saves static markup that can be enhanced by the server during rendering.

    • Name: core/navigation
    • Category: theme
    • Block Type: Hybrid (static save + server enhancements)
    • Keywords: menu, navigation, links
    <!-- wp:navigation -->
    <!-- /wp:navigation -->
  6. Overview of the Notes Sidebar (Collab Sidebar)

    trunk

    The Notes sidebar (also known as the collab sidebar) allows users to attach threaded notes to individual blocks in the editor. It supports two distinct modes:

    1. All notes: A full sidebar accessible from the editor's More menu that lists every note thread on the current post.
    2. Floating notes: On larger viewports, unresolved notes float next to their associated blocks in the canvas. These notes are positioned to track canvas scrolling and avoid overlapping with other notes.

    Data Model:

    • Notes are stored as WordPress comments with type: 'note' attached to the post.
    • Blocks reference their specific thread via metadata.noteId within their block attributes.
    • Threads consist of a top-level note and subsequent replies.
    • Threads can be marked as approved (resolved) or reopened.
  7. Overview of @wordpress/dataviews components

    trunk

    The @wordpress/dataviews package provides three primary React components for interacting with datasets:

    • DataViews: Renders a dataset using various layouts (table, grid, list) and provides interaction capabilities like search, filters, and sorting.
    • DataViewsPicker: An optimized version of the dataset intended for selecting or picking specific items.
    • DataForm: A component used to edit items within the dataset.
  8. Overview of project management automation tasks

    trunk

    The automation package provides several specific tasks to assist with managing the Gutenberg repository:

    • First Time Contributor: Adds the First Time Contributor label to pull requests merged on behalf of contributors who have not previously contributed. It also prompts users to link their GitHub account to their WordPress.org profile for release notes credit.
    • Add Milestone: Automatically assigns the plugin release milestone to a pull request once it has been merged.
    • Assign Fixed Issues: Identifies issues marked as "Fixed" by a pull request, adds the corresponding assignee, and applies the In Progress label.