Wanted to give a general update on where we are standing with Gutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ development. Version 4.0-rc should be coming out in the next few days, marking the 40th release since we began distributing the plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
We are also way past the original goal of 100k active sites with Gutenberg! So let’s look at what has been completed so far, and what remains to be done.
- Block Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based editing experience with 28 blocks (in addition to several embeds).
- Writing flow that seeks to hide interface while engaged in typing and shown when editing.
- Inserter with quick search and memory of recently used blocks.
- Adaptive design that works on all devices.
- Full Screen, Unified Toolbar, and Spotlight modes to adapt to the user’s creative preferences.
- Support for static and dynamic blocks.
- Child and nested blocks support.
- Style variations mechanism for blocks.
- Plugins and themes can register new blocks.
- Easy keyboard navigation across blocks using arrow keys.
- Quick inserter shortcut with “slash” command.
- Multi-selection with ability to move or delete a group of blocks.
- Ability to drag blocks to reorder.
- Auto-formatting text conversion to blocks (e.g. bullet points into lists, hashtags into headings, etc).
- Pasting from Word, Google Docs, Apple Pages, HTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., WordPress, and Markdown.
- Drag & Drop media uploads with single or multiple images.
- Ability to specify keywords for discovering blocks in the inserter.
- Classic block for handling unrecognized freeform-content and multiple paragraphs.
- Ability to transform a block into other block types.
- HTML editing mode per block.
- A collection of components for building your own blocks with consistency and accessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) in mind.
- Comprehensive implementation of keyboard shortcuts.
- Document outline navigation with heading roles and word count.
- Ability to convert old WordPress posts into new WordPress blocks.
- Ability to convert blocks of plain HTML into new blocks.
- Auto-embedding and auto-linking when pasting URLs.
- Formatting boundaries for links, code, strong, and italics.
- Pre and post publishing flow.
- Autosaving support.
- Ability to display toolbar controls next to the block or at the top of the editor.
- Undo / Redo functionality across blocks.
- Suggest a post format based on which blocks are used.
- Grid galleries with auto-cropping.
- Grammar parsing infrastructure with nested blocks.
- Conflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. resolution flow for externally modified blocks including a visual comparison tool.
- Graceful handling of removed blocks (e.g. when a plugin is disabled).
- Keyboard shortcuts to jump focus around regions of the interface.
- Placeholder functionality for blocks.
- Main regions navigation with keyboard.
- Custom CSS Cascading Style Sheets. classes per block.
- HTML Anchors (
id attribute) per block.
- Toggleable sidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. menu for a more focused experience.
- Support for translations within blocks.
- Support for extending core Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks.
- Support for theme customizations applied to blocks.
- Support for saving block attributes as post-meta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress..
- Support for Custom Post Types.
- Support for Custom Taxonomies.
- Support for Shortcodes.
- Support for current meta-boxes.
- Support for inline images.
- Inline autocomplete system (used for
@mentions but easy to extend with custom tokens).
- Ability to transform shortcodes into blocks during pasting or conversion.
- Templates with default blocks.
- Ability to use templates within other blocks.
- Ability to lock blocks within templates (cannot be moved or deleted).
- Site-wide reusable blocks (including groups of blocks).
- Interface for bulk managing reusable blocks.
- Ability to live preview reusable blocks, templates, and styles.
- Block versioning and migration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. support.
- Utilities to store and access editor data.
- Multiple width positions: center, wide, full-width based on theme support.
- Configurable color palette.
- Ability to copy the entire post as HTML.
- Plugin API An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. system based on slots, fills, hooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same., and filters that allows registering top-level tools with access to multiple UI User interface components (menus, modals, sidebar).
- Editor Styles mechanism.
- Error handling on a per block basis.
- Ability to export and import reusable groups of blocks.
- Tips Interface to guide a user in the new editor interface.
The main feature set targeted for the first version of the editor has been considered complete for a few releases now. Since then, however, the large amount of testing being carried and the great feedback coming from multiple venues has resulted in several further iterations and additions to continue to improve the overall experience to wider satisfaction. (This include things like editor modes and tweaks to the inserter, transformation, and toolbar mechanisms.) That has pushed us back a little in being able to fully focus on bug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixing.
The remaining tasks either fall under enhancements to existing functionalities, new blocks, or backwards compatibility. This is not an exhaustive list but an overview of the main ongoing work. Many of these will be included in 4.0.
🚧 User Experience: