Change record status: 
Project: 
Introduced in branch: 
8.x
Description: 

When you want to fix a typo, or restructure your paragraphs, or quickly add another tag to your blog post, you have had had to go to the node/%/edit page. Once one the page you have to navigate through a potentially enormous form to find the particular thing you want to edit. The order and visual appearance of the fields in the edit form may not resemble the same information in the view mode of the item. Such a separation of editing and viewing requires time and thought to negotiate.

With the commit of #1824500: In-place editing for Fields, Drupal 8 will now support in-place content editing. With the Quick Edit module enabled, on pages that contain editable fields, the edit tab becomes available in the toolbar.

Enable edit mode.

Clicking the "Edit" tab places the page into edit mode.

Click on a field.

While in quick edit mode, editable items are pulled into the foreground while the rest of the page fades to the background. Clicking into a field launches a field editing dialog. The dialog pulls from Drupal’s Field API and maintains access and text formatter conditions.

You're now editing the field!

Changes are saved asynchronously when the save button on the field edit dialog is clicked.

Effort has been given to visual as well as the aural UI. Quick Edit DOM components are marked up with ARIA roles, states and properties to inform a screen reader user of the application’s state. Major state changes are announced by an ARIA Live region with messages like:

In place edit mode is active. Page navigation is limited to editable items. Press escape to exit.

The initial commit of in-place editing begins work on a game-changing feature for Drupal 8 (among so many others!). Follow-up issues and improvements will be tracked on #1858210: [meta] Content editing experience follow-ups — in-place editing and WYSIWYG.

AttachmentSize
Enable edit mode.27.24 KB
Click on a field.27.39 KB
You're now editing the field!44.47 KB
Impacts: 
Site builders, administrators, editors
Themers
Updates Done (doc team, etc.)
Online documentation: 
Not done
Theming guide: 
Not done
Module developer documentation: 
Not done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other: 
Other updates done