Consider adding Same Page Preview to core

Created on 16 June 2023, about 1 year ago
Updated 21 May 2024, about 1 month ago

Problem/Motivation

Hello all. A group of Drupal developers got together at Florida Drupal camp and started hacking on an idea for providing a preview on the same page as the edit screen and it turned into this module: https://www.drupal.org/project/same_page_preview

From the beginning of it's development, we wondered what it would take to get this into core. Today, I still don't think we really know everything it would take, but I know we're ready for the challenge.

What follows is a document we've been preparing for this issue (we knew one day we would submit this):

Same Page Preview in Core

A draft of our issue to submit to Drupal Ideas project queue

Background

Drupal has a pretty cool “hidden” feature of previewing content. When I talk with clients, they usually don’t know that drupal knows how to create a preview, no matter what kinds of things you are adding to the editing side of things. We could raise awareness of the preview function by making it unavoidable, provide faster feedback to content workers about their changes and make observing the preview effortless.
Over the years, the New Drupal UI team has explored the idea of a live preview or better preview features. They determined that having a side-by-side preview would be beneficial to users.

User Stories

As a content worker, I want to be confident that the changes I’m making to content are correct.
As a content worker, the faster I can get confirmation that my changes are good, the better.

The idea

What is the problem we’re trying to solve

  • Increase content creator confidence in their changes.
  • Users are often uncertain if their content edit screen changes will deliver the expected result.
  • Improve accessibility of preview updates and the off-canvas dialog
  • Anecdotally, a large number of users don’t know the preview function exists.

Who is this for?

Content workers (authors / editors), evaluators, mainly. I can also see how something like this would be good for developers who want to see how a new field looks on the edit and view screens at the same time.

Result: what will be the outcome?


How can we know the desired result is achieved?

Usability testing of the side-by-side content editing and viewing experience should evaluate content workers for how having the feature can increase speed of content creation and confidence in the end result.

Accessibility testing should demonstrate how an accessibility tool-driven user could increase their confidence in their edits.

Process and where to find it

We’ve been active in Slack in the #preview channel. We meet there every other week to give status updates on the progress we’re making. We’re far more active in discussing the issues while we’re working through them, though. The module can be found at https://www.drupal.org/project/same_page_preview

Does the initiative have a team site/group/etc.? Where will the work be done? Can it be added to core as a new experimental module https://www.drupal.org/core/experimental , or does it need to make changes across existing subsystems and therefore need a feature branch? Is there a sandbox/existing contrib module/other repo?

Not in scope

Our work depends heavily on existing core features such as: Drupal.announce, Off Canvas Dialog,
We do not intend to create alternatives to these. We explored early on whether we needed to create our own Renderer but that was proven to be unnecessary.

Related work

Existing things that are related to your goals and how (or how they are different if not related).
New Drupal Admin UI team: https://www.google.com/url?q=https://www.drupal.org/project/drupal/issue...
Comparison with Drupal and Craft CMS: https://www.google.com/url?q=https://evolvingweb.com/blog/drupal-admin-u...

Feature request
Status

Active

Component

Idea

Created by

🇺🇸United States cosmicdreams Minneapolis/St. Paul

Live updates comments and jobs are added and updated live.
  • Needs product manager review

    It is used to alert the product manager core committer(s) that an issue represents a significant new feature, UI change, or change to the "user experience" of Drupal, and their signoff is needed. If an issue significantly affects the usability of Drupal, use Needs usability review instead (see the governance policy draft for more information).

Sign in to follow issues

Comments & Activities

  • Issue created by @cosmicdreams
  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul
  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul
  • 🇺🇸United States volkswagenchick San Francisco Bay Area

    I have seen this demo'ed at various stages of development and am impressed.
    I think Content Creators and Editors will find this very useful. I find Same Page Previews has better usability than the preview currently available in core. I think this aligns with the "ambitious site builder" experience.

    Thanks for the speedy work on this useful module.

  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    I've updated our module page to reflect the current state of the module. I suppose I should also work on what a commit to the 11.x branch might look like to give folks here something to critque.

  • 🇸🇪Sweden johnwebdev

    +1 on this aligns with the "ambitious site builder" experience.

  • +1 for same page preview in core! It's one of those things that seem required once when you see it in action. Bravo for the job done so far!

  • 🇸🇮Slovenia boshtian

    Inline editor was added to core in the past but didn't succeed. I think one of the reasons was, that people were not used to inline editing and also the frontend themes were often broken when inline forms were added to markup.

    Instant (same page) preview is something that cloud CMS's are selling as a feature and I also think that it has much better chance of succeeding in core than Inline editor.

    +1 from me to add this to core in light of "ambitious site builder" experience.

  • 🇬🇧United Kingdom SirClickALot Somerset

    A very BIG +1 from me; this is precisely the kind of thing we need to promote Drupal

    Into core ASAP I say!

    I've done a very quick test with:

    1. Drupal 10.1.6
    2. PHP 8.1.0
    3. Theme: Bootstrap 5 subtheme 3.0.10
    4. Admin theme: Gin 8.x-3.0-rc7

    Note sure about these enormous buttons, but maybe that's just a Bootstrap 5 / Gin combo thing...

    Great work team!

  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    Thanks for the excellent bug report!

    We might need to provide better protection of our elements to ensure that our buttons aren't impacted by administrative themes.

    I'm eager to have time to fix this but am under a terrible crunch right now. I should have time in a few weeks to fix.

  • 🇩🇰Denmark ressa Copenhagen

    +1 for adding to Drupal core! I am very impressed, this looks awesome, and it would be a huge improvement for the Ambitious Site Builder.

  • 🇬🇧United Kingdom AaronMcHale Edinburgh, Scotland

    Yes, huge +1.

    This would be a fantastic addition to the Drupal content editorial experience. I've been aware of this, but I just wanted the video on the project page to get a proper understanding of how it works, and I think this is something that I know the content designers I work with would love.

    One thing that comes to mind for consideration, and I expect these are already being considered or have been worked on, but wanted to raise them here for the record: How well does this work on small screens and mobile? Should we consider more than just a horizontal arrangement.

    Either way, looks great, I'm excited for the day this lands in core!

  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    Next steps:
    * Try to get this into some kind of Recipe or Distribution.
    * Continue refining / being active in the issue queue.
    * Listen to use cases I didn't consider and ensure we can adapt.
    * Which means reorganzing my work/life to ensure I can give proper time to this effort (working on that).

    Timing:
    Given my silly desire to use Single Directory Components, perhaps I set back the inclusion of this work a ways since it would depend on another experimental feature. So.... Drupal 10.3+ might be a good target.

  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    If Same Page Preview was in core, there would be a number of changes we would do.

    • There are number of places we are extending core: NodeForm, PreviewControlsForm. We wouldn't need to do that and instead would refine our overrides further and include them in the Core objects.
    • CSS: We've had to include a small amount of changes to styles the we may not need to do if we could teach a future off-canvas dialog how to be resized without artifacts.
    • JS: We anticipate that much of the work of including this module into core is going to be spent refining the javascript. There's totally room for improvement. And in a world where experience builder and other dynamic user experience also exist, there's probably a lot of new ways of accomplishing what we're doing.

    If it helps, we could produce an MR that would show what including this into core would look like.

  • 🇬🇧United Kingdom AaronMcHale Edinburgh, Scotland

    Given the changing landscape of Drupal recently, could Same Page Preview be added to Starshot, that seems like a good option, then decide whether it needs to be in "Core" beyond that.

  • 🇺🇸United States brianperry

    @AaronMcHale there is actually an issue and a related PR in the Starshot prototype repo:

    https://github.com/phenaproxima/starshot-prototype/issues/17
    https://github.com/phenaproxima/starshot-prototype/pull/61

  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    As @brianperry has shown, yes. And we agree that's a great first step.

    It should be noted, that the Next Steps are still on the Same Page Preview team.

    We need to demonstrate what the actual change would be to include this into core. That said, before Starshot, the typical first step would be to be included as an experimental module. And for that step, same_page_preview would likely change very little. We do anticipate some change due to feedback / core contributor's direction. Fundamentally thought, we've already tried to only use core and to do as little as possible.

    But if this work was in core, some obvious changes would be made. Such as:

    • No longer need to extend @internal objects
    • spread our logic to existing administrative forms
    • As a result, probably won't need to any any new objects, forms, or other objects. Just extend existing ones with additional logic.

    In addition, I'm personally very excited about the new navigation bar and the top navigation bar specifically. We have an excellent opportunity to demonstrate the utility of both with our preview pane. Eager to learn more about making use of it.

Production build 0.69.0 2024