Overview
Critique of the current design
The current design has reached its limits in a number of areas - a separate page describes these problems in more detail. But it has also set landmarks: the green edit bars act like markers for editable elements and they work very well on touch devices. The switch to turn off these bars provides a user with the perfect preview of the page with all its features fully working. In addition, the site can be browsed both in preview and editing mode, which makes it very intuitive to work on a number of pages or sections an editor may be responsible for.
The redesign of the current, preview-based editing into the Visual Page Editing of Magnolia 5 aims at providing a solution for all described problems while retaining all qualities of the existing implementation.
The new interface
The standard interface of Visual Page Editing shows two main sections. Most of the screen is occupied by a preview of the page with the well-known green bars marking the editable paragraphs. A newly introduced toolbox on the right of the screen presents all actions and options applicable to the currently selected item or the page as a whole. The toolbox improves the overall visibility of actions and options by providing them with both a clear location on screen and enough space to present their interface. It introduces flexibility and scalability to support current and future modules wishing to add complementary functions to page editing.
The new visual page editing is still targeting mouse input, but has been crafted with touch devices in mind. While you can use this interface with a keyboard, Page Structure Editing has been specifically optimized for keyboard input and thus should be the preferred way to edit a page using keys only.
Concepts
Area editing
Visual page editing in Magnolia 5 keeps the edit bars introduced in earlier versions, but solves the cloud of bars by introducing Area Editing. The areas of a web page as defined by the web designer and introduced in Magnolia with STK templating are an excellent starting point to reduce the number of edit bars visible at any one time.
Please refer to the separate page on Area Editing for an in-depth description of this concept.
The Toolbox
Magnolia 5 adds a toolbox to the page editing interface. It
- it shows all applicable actions available to the logged-in user and defined on the currently selected paragraph, selected area or on the page ifself
- it offers access to global functions such as undo/redo and copy & paste
- it hosts a set of options of the currently selected paragraph, selected area or the page itself
- it provides space for the increased list of actions defined on an item and possibly added by additionally installed modules
- it contains a small panel denoting the name of the instance as well as the logged-in user
The toolbox replaces the edit bar dedicated to the page, which was shown at the top in preview-based editing in earlier Magnolia versions. The page properties have been extended and moved to the options rack (see definition below), the button to return to AdminCentral has been replaced with a button to leave editing in the Toolbox, which is also where the "Preview" button of that edit bar has moved.