Basic concept
A region is a structural area on a web page and collects one or more paragraphs. Web developers commonly sub divide a page into a number of regions to group together similar content in order to improve the usability, legibility and, in general, the overall structure of a page.
Currently, core Magnolia does not know the concept of a region or area. A page merely consists of a number of paragraphs. With STK, the area has made its first appearance. The list of paragraphs an area supports as well as the template it uses to render itself are already configurable. With Magnolia 5, areas will likely get expanded even more.
Region Editing is introducing the concept of a region or area on the editing level as well. The idea is to hide all editing related elements of a region such as newBars or editBars when an area is not currently edited to solve two main areas of concern with page editing.
Region Editing improves page editing as it:
- clearly visualises the page structure as defined by the site designer and thus improves your understanding of the page
- avoids disorientation by providing too many editing elements at once
- focuses your attention on just the region you're currently working on
- improves the preview already when you're still editing a page, since the browser does not have to render all edit controls and thus disturbs the DOM tree less
Story
Magnolia allows me to select a region for editing by simply selecting it. Selecting a different region moves the selection from the previous to the newly selected region seamlessly.
When I select a region (for editing), all edit controls of its sub paragraphs become visible. If any of these sub paragraphs contains additional paragraphs, the edit controls of the latter are not visible until I select their parent paragraph. The edit controls of all parent paragraphs (only, not their siblings as well) remain visible. I can thus easily explore the page structure and move the edit focus by simply selecting regions and paragraphs.
Description of desired behaviour
Selecting a region when editing a page selects it for editing - this is, of course, only possible when editing the page and not when previewing it. All edit elements of its sub paragraphs fade in or become visible using other means.
Care must be taken that any such transition is smooth and does not disorient the user, while still feeling snappy as to not hold up editing too long.
If a region has not been added to a page yet or if it has been added, but is currently empty, it should nevertheless occupy some configurable space on the page. This is necessary to visualise the page structure already on an empty page.
To further reduce the number of bars visible, Region Editing shall combine the edit bar and the new bar of a region by mounting the possibility to add a paragraph and to edit a region onto the same bar.
With region editing, the default position of a newly added paragraph is configurable to be either at the top or at the bottom of the existing set of paragraphs.
Optional behaviour
It should not be necessary to add a region first before adding any sub paragraphs. Currently, you first have to add a news list paragraph before you're able to add its first news item. It is highly desirable to add a news paragraph directly with the news list region being added implicitly when adding its first sub paragraph.
Adding a paragraph could be possible anywhere within the same region - currently, it is only possible at the place where the new bar is. It would allow for quicker editing of a page, if I could directly choose a new paragraph to be added before or after any existing sub paragraph.
Mockups
This image shows the same article page as previously shown in the sections describing the areas of concern in page editing.
Region Editing on a new page
Selecting a region
I've tried solutions using an overlay dialog for editing a region instead of inline editing, but these won't work. The interface becomes too jumpy and rendering problems are very likely due to only a part of the DOM tree being visible. The team currently favours the fade-in variant over the greyed-out edit bars, since it doesn't render any bar at all.