Visual Page Editing conceptual overview

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 Actions Sidebar on the right of the screen presents all actions applicable to the currently selected item and additional info on the item or the page itself. Examples are a comprehensive page status or an overview over available page versions. The sidebar improves the overall visibility of actions in that it introduces a single location to look for actions. It is flexible and can be extended by modules wishing to add complementary functions or data to page editing. The sidebar is similar in appearance and behavior as the Actions Sidebar in AdminCentral.

The new visual page editing is targeting mouse input and 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 Actions Sidebar

Magnolia 5 adds an Actions Sidebar to the page editing interface. It

• shows all applicable actions available to the logged-in user and defined on the currently selected paragraph or area, or on the page itself. This includes access to the clipboard and undo/redo.
• is capable of showing additional information on the currently selected element or the page itself
• shows notifications and provides access to the list of system messages
• contains a small box configurable by the user allowing to quickly identify the Magnolia instance

The sidebar offers a simple toggle control to switch between the page preview and the editing interface. Additional view options allow to customize what's shown and what's not. The top-most element of the sidebar visually takes up a theme used in other interface layers and acts as a place to show notifications. In the future, it will also host additional controls used to navigate layers. It also offers a close button to leave page editing.

The page edit bar still exists and may be extended to contain additional, customized controls - the page status indicator is merely shown as a placeholder for such functionality. Other than that, the bar merely provides quick access to the page properties.

The Units

Since the Actions Sidebar uses an Actions Rack to show the list of actions for the currently selected content element, it is also capable of showing additional information through the means of units. A unit collects a number of UI elements logically and semantically belonging together, such as a language selector or an element representing the translation status of the current page. Please refer to the page describing the Actions Rack UI component for additional details.