Page tree
Skip to end of metadata
Go to start of metadata

Presentation of Page editor customization in various projects, by Richard Unger.

What was addressed:

  • Page editor customization in Magnolia 4.4
    • Yellow bars
    • image button in the bars, activation status for that image
    • no need to go to the dms
    • drag n drop across different areas (jQuery UI based)
      • basic drop constraints
    • Extendability is half easy, half painful
      • (plus) defining your own tags, render on the page, easily extensible
      • (warning) vs. JS hooks to magnolia backend, bit of a mess
      • wasn't nice but possible!
  • Page editor customization w/ Magnolia 5
    • activation status was a critical requirement
      • extensive use of the status bar for now
    • extending actions from page-editor directly
      • e.g. add sub-page, publish right from editor
    • (plus) At first you do not need to extend as much
    • (minus) A lot more difficult to extend Vaadin / GWT components
    • HTML comments are scanned by GWT to insert the bars
      • resort to extend or copy paste page editor classes, compile new widgetset?
      • write own page editor?
    • What was done:
      • activation status of subpages next to teaser bars
      • publish actions
      • drag and drop to change order of subpages
    • How it was done
      • Switch back to divs, not comments
      • implemented via a Vaadin JS extension
        • e.g. loads jQuery UI, builds extra buttons
        • + custom server-side counter part for communicating with the connector
    • Problems
      • add new buttons, but cannot really change/move where the bars are injected vs. 4.4
      • how to bring the bars closer to content
      • AJAX interaction when in page-editor
        • not picking all ajax changes in chrome
      • Debugging JS / CSS because of the iframe, makes devtools less convenient
      • How to properly debug css/js on low resolution
        • Fullscreen mode concept is on the table (same as in 'preview as visitor' app)
  • Automatic activation of images, lack of indication
    • Publish w/ content dependencies, view dependency tree w/ status and actions
    • sync between users is complicated
      • e.g. used to extend content dependencies in 4.4
      • 120 editors w/ different rights
      • user that triggers activation doesn't necessarily have write permissions on all affected content
  • p13n > going back from preview to editing
  • navigation / link control
    • pain point adding navigation to links so that they work within editor
    • workarounds preventDefaults, previewMode
  • Philosophy
    • can/should magnolia provide a page editor that works well everywhere for everyone?
    • vs. providing a solid toolkit that helps make the projects work well with their specificities
  • Edit bars, cms:editbar, style attribute with defaults
  • Usability
    • a lot of layers of bars, affects layout too much
    • too many clicks, e.g. for fixing a typo
  • Ideas
    • Different views for page editing
      • structure (list)
      • page editor
      • inline editing
        • wireframe vs. full fledged editor with chrome
        • e.g. typo3
      • grouping e.g. gallery editing
    • reminder: we're slowly shifting towards content pools
      • will affect, reduce amount of tasks that are done in pages app
      • e.g. news or articles app
  • No labels