...
Basic
...
concept
...
An
...
area
...
is
...
a
...
structural
...
block
...
of
...
a
...
web
...
page
...
and
...
collects
...
one
...
or
...
more
...
paragraphs.
...
Web
...
developers
...
commonly
...
sub
...
divide
...
a
...
page
...
into
...
a
...
number
...
of
...
areas
...
to
...
group
...
together
...
similar
...
content
...
in
...
order
...
to
...
improve
...
usability,
...
legibility
...
and,
...
in
...
general,
...
the
...
overall
...
structure
...
of
...
a
...
page.
...
Currently,
...
basic
...
tempting
...
in
...
Magnolia
...
does
...
not
...
know
...
the
...
concept
...
of
...
an
...
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
...
and
...
the
...
template
...
it
...
uses
...
to
...
render
...
itself
...
are
...
configurable.
...
STK
...
2
...
will
...
continue
...
to
...
use
...
areas.
...
In
...
Magnolia
...
5,
...
Area
...
Editing
...
is
...
introducing
...
the
...
concept
...
of
...
an
...
area
...
on
...
the
...
editing
...
level
...
as
...
well.
...
The
...
idea
...
is
...
to
...
hide
...
all
...
editing
...
related
...
elements
...
of
...
an
...
area
...
such
...
as
...
newBars
...
or
...
editBars
...
when
...
an
...
area
...
is
...
not
...
currently
...
edited
...
to
...
solve
...
...
...
...
...
...
of
...
current
...
page
...
editing.
...
Area Editing improves page editing as it:
- clearly visualizes the page structure as defined by the site designer and thus improves your understanding of the page
- avoids disorientation by providing too many editing bars at once
- focuses the attention on just the area a user is currently working on
- improves the preview during page editing, since the browser does not have to render all edit controls and thus disturbs the DOM tree less
The following image shows the comparison of the current page editing vs. Visual Page Editing of Magnolia 5 with Area Editing.
How Area Editing works
Magnolia 5 allows to select an area or a paragraph by selecting its edit bar. This emphasizes the bar and de-emphasizes a possibly previously selected bar.
When you select an area, its edit bar is visually emphasized, while the bars of its siblings are visually dampened (e.g. drawn in a darker color). At the same time, all edit bars of its direct sub paragraphs become visible. If the area contains additional areas, their edit bars become visible as well, but those of their children remain hidden. As for the edit bars of the parents of a currently selected area, those remain visible to visualize the chain of containing paragraphs and areas.
Collection paragraphs - normal paragraphs containing other paragraphs - are treated like implicitly defined areas: their edit bars are shown, those of their children are not, unless you select their parent. Note, however, that collection paragraphs shall be called "paragraphs" in the UI and must not be referred to as "areas" - this term is reserved for actually defined areas.
Only one bar
To further reduce the number of bars visible, Area Editing shall combine the edit bar and the new bar of a region by mounting the actions to add a paragraph and to edit a region onto the same bar.
Empty areas occupy space
If an area has not been added to a page yet or if it has been added, but is currently empty, it should nevertheless occupy some space on the page, both physically with a configurable default height and visually by inking it with a background color. This is necessary to expose the overall page structure on an empty page already.
The height and background color of an empty or not yet added area could be specified with a new attribute on the tag declaring the edit bar of an area.
No need to add an area first
It should not be necessary to add an area first before adding any sub paragraphs. Currently, you first have to add e.g. a news list paragraph before you're able to add its first news item. It is highly desirable to add a news paragraph together with the news list area being added implicitly when adding its first sub paragraph.
If an area requires the user to provide values for mandatory parameters, the forms collecting them will have to show up before the forms asking for parameter values of the actual paragraph. These forms must explain why additional values have to be given - please see the page describing how adding a paragraph works for further details and mockups.
Mockups
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
The above mockup shows a home page with four main areas: a side column for ads, one for extras, a central main area and a footer. The bars of the containing paragraphs are hidden.
Region Editing on a new page
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
Selecting an area
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
The edit bar of the selected area is colored using the selection color to guarantee consistency across the interface. The background of the area is slightly colored to emphasize its entire block. All edit bar of its sub paragraphs slide in. 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 for too long.
I've tried solutions using an overlay dialog for editing an area 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 favors the fade-in variant above over the grayed-out edit bars (shown below), since it doesn't render any bar at all and thus further improves the preview character of page editing.
| Mockup | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|