Edit a page using its preview

Story

Magnolia lets me edit a page using its preview. If I look at the page, the structure of the page is immediately apparent to me. I also know, which elements I'm allowed to edit, as these are visually marked with the famous green edit bar.

If I select a structural block of the page such as the teaser area, the page header or the main content area, the green edit bar of its containing elements appear, if I'm allowed to edit them. The area itself is visually emphasized so that I can focus easily on what I'm working on.

Using the edit bar of a paragraph or area, I can easily edit the element or add a new subparagraph. Moving a paragraph is as easy as simply dragging its edit bar onto its new location. I can copy and paste paragraphs within the page or between pages. Additional actions, e.g. for deleting a paragraph, are available as well.

Likewise, I can also edit the page properties and activate and deactivate the page from the editing view. If available, I can show additional information on the page such as its change history or available translations.

I can toggle between editing the page and a better page preview, which removes all editing controls and presents the page exactly like it will be rendered when published.

I can undo and redo all my actions until I quit editing. I can even cancel all changes I made to the page at once and return the previous version.

Description of desired behavior

The concepts used for editing a page using its preview and the definition of the main interface elements that have been developed for it are described on the conceptual overview of Visual Page Editing. The following sections build on what's defined there and take care of the details.

Select the page, a paragraph or area

The page, its paragraphs and areas are selected by clicking or tapping on their edit bar. Areas will only show the edit bars of their sub-paragraphs on selection - please refer to Area Editing for a description of this concept.

Selecting a content element on the page actually causes a number of changes:

• A previously selected element gets deselected, all visual highlighting disappears accordingly
• All ancestors of the selected element remain visible and their edit bars are drawn in their normal color.
• The edit bars of all siblings of the currently selected element appear visually dampened.
• The edit bar of the selected content element and its extend on the page are drawn using the selection color or a lighter or darker variant of it
• The edit bars of all children of the selected element on the next level become visible and are drawn in their normal color.
• The edit bars of all other elements (not being ancestors, siblings or children) disappear (slide-out) except for the top-level paragraphs and areas, the edit bars of which remain visible and appear visually dampened. The edit bar of the page remains visible as well and is visually dampened.
• The list of actions in the Actions Rack of the Actions Sidebar changes to match the type of the selected content element.

The above essentially is a detailed behavior description of the Area Editing concept; the mockup below illustrates this further.

The above mockup uses the following colors referred to by the UX:detailed definition of selecting a paragraph:

• selection color: blue
• edit bars in normal color: green
• visually dampened edit bars: gray

Deselect a paragraph or area

A content element on the page is deselected again by clicking or tapping its edit bar again. Deselecting an element implicitly selects the page itself. As a result, the racks in the Actions Sidebar adjust accordingly and the page edit bar gets selected. Consequently, all edit bars except those of the top-level paragraphs and areas are hidden, all visual emphasis is removed. The remaining edit bars are drawn in their normal color (i.e. green).

What remains is a good preview of the page with (green) edit bars marking the top-level areas and paragraphs, plus one edit bar for the page itself.

Work with a paragraph or area

Add, edit and move a paragraph using the edit bar

For typical day-to-day operations, an editor may focus on the edit bars only. It offers buttons with actions for editing the element and for adding a new sub paragraph - it can be configured whether adding a paragraph is done at the top or the bottom of an existing list of paragraphs. An element may also be moved by dragging the bar to a different location. Possible drop targets react on a drag-over by highlighting themselves, similarly to how an edit bar lights up currently; this will have to be further specified once all technical options have been evaluated.

Clicking or tapping on either button not only executes its action, but also selects the element at the same time. An element is also selected before a drag starts and remains selected once it stops.

All actions via the Actions Sidebar

The Actions Sidebar contains a unit that lists all actions available on the currently selected element. This includes those already presented by the bars.

Work with the page

The page as content element is selected when you enter Visual Page Editing. The Actions Rack of the Actions Sidebar is adjusted to reflect this and the page edit bar itself is selected as well and is inked using the selection color.

You may work with the page at any time by:

• selecting the page edit bar
• deselecting a currently selected element (see UX:above)

The list of actions available on the page is then being presented in the sidebar and possibly additional information available through units are made available as well.

Please refer to the UX:mockup above for an illustration of this behavior.

Edit the page properties

To edit the page properties, first select the page edit bar, then choose "edit page properties" from the edit bar or the Actions rack in the sidebar. A dialog showing the page properties will then pop up in an overlay.

The page edit options and other info

The sidebar also shows additional information on a page and possible some options controlling editing as well. Examples could be controls for changing what version or variant of a page is to be edited.

In previous Magnolia versions, such options (e.g. a language switcher) were located on the page edit bar itself. Customers sometimes moved other controls to the page properties. Most of the time, though, options were left out completely, since there was no clear space dedicated to them. Magnolia 5 provides just that for any options and additional information you might want to show. Modules may simply add units to the Actions Rack of the sidebar to make them available during page editing.

Preview the page

The currently edited page may be previewed in a rendering without any editing controls by clicking the "Preview" button in the Actions Sidebar. Please consult the page describing the preview for additional details.

Exit editing

You may leave page editing at any time by clicking or tapping on the "Close" button in the Actions Sidebar (the X in the upper right corner of the sidebar. The page editing layer is closed and you're returned to the where you were when you started editing.

Note, however, that changes are always saved automatically - there shall be no explicit save operation required to confirm changes or make them permanent. In particular, it shall not be required to click on "Done" to get anything saved. Clicking on that button closes the editing interface and merely bereaves a user from the possibility to discard his changes later on.

Discard all changes

You may discard all changes you've made to a single page by choosing an action (e.g. "Discard my changes") available in a page versions unit, which also allows to see the difference between the currently published version of the page and the edits. Choosing to discard all changes wipes all your edits you've made to the current page (only) since you've started editing it.

You may discard changes:

• at any time during editing
• if you've left the page to edit another page, then return; you may still undo all changes to the page you return to
• if you've previewed the page, then return to edit it

You loose the possibility to discard all changes once:

• you click the "Close" button in editing or the page preview
• you activate or deactivate the current page
• your session expires or you log out

Please note that this feature may only be available if a new type of content versioning planned for Magnolia 5 will actually be delivered.

Notifications and messages

Notifications for system messages are shown by the [Actions Sidebar|The Rack#Showing notifications. All notification types behave as defined on the concept page. The header of the sidebar provides notifications icons to indicate if there have been any warnings or error messages that went unnoticed. This icons is the same across all layers.

Clicking the icon notifying of new system messages opens the messages list which shows all messages that have been generated lately, both acknowledged and unacknowledged ones.

Limited input methods

Not much has been written on using the keyboard in page editing so far. This is because this layer is not optimal and has not been further optimized for keyboard input. Page editing using the preview is mainly targeting the mouse and touch devices.

The preferred way for users wishing to only use the keyboard during page editing is Page Structure Editing. It has been specifically designed for keyboard input, but offers very fast editing as well as a structural overview of a page.

Accessibility considerations

Note that some screen readers seem to have problems with overlay dialogs. Care must be taken to still support them. A possible solution would be to allow users to continue to open dialogs in a separate window instead.