Home / Ultimate Guide to Drupal 8: Episode 1 - Authoring Experience Improvements

Ultimate Guide to Drupal 8: Episode 1 - Authoring Experience Improvements

Welcome to the first instalment of an 8-part blog series we're calling "The Ultimate Guide to Drupal 8." Whether you're a site builder, module or theme developer, or simply an end-user of a Drupal website, Drupal 8 has tons in store for you! This blog series will attempt to enumerate the major changes in Drupal 8 for end-users, for site builders, for designers and front-end developers, and for back-end developers. Successive posts will gradually get more technical, so feel free to skip to later parts (once they're published) if you're more on the geeky side.

Please note that since Drupal 8 is still under active development, some of the details below may change prior to its release. Still, since Drupal 8 is now feature-frozen, hopefully most info should remain relevant. Where applicable, Drupal 7 contrib equivalents of Drupal 8 features will be noted.

Authoring Experience

One of the major areas of focus in Drupal 8 was around the out-of-the-box experience for content authors; you know, the folks who actually use a Drupal website every day. ;)

Spark

Spark logo

Spark is an Acquia initiative created by Dries to improve Drupal core's default authoring experience. Our team performed analysis of both proprietary and open source competitors to Drupal and worked hard over the course of the release in collaboration with other Drupal core contributors to help bring Drupal's core UX up to snuff, all the while creating back ports of key Drupal 8 UX improvements for Drupal 7 that can be used today.

WYSIWYG editor

That's right! Gone are the days of hand-typing HTML! (In the default install, at least.) Party like it's 1999! ;)

WYSIWYG editor showing editing of image captions

Drupal 8 now ships with the CKEditor WYSIWYG editor configured out of the box. In addition to supporting what you'd expect in a WYSIWYG editor: buttons like bold, italic, images, links, and so on, there's also support for nifty extras like easily editable image captions, thanks to CKEditor's new Widgets feature, developed specifically for Drupal's use. There was particular attention paid to ensuring we keep the structured content benefits of Drupal in our WYSIWYG implementation.

Drupal 8 also sports a nifty drag-and-drop admin interface for adding and removing buttons in the WYSIWYG toolbar, which automatically syncs the allowed HTML tags for a given text format for vastly improved usability. Buttons are contained in "button groups" whose labels are invisible to the naked eye, but which can be read by screen readers in order to provide an amazing, accessible editing experience for website visitors.

Administrative interface for CKEditor

In case you're not a fan of CKEditor, fret not. The "Editor" module in Drupal 8 wraps the WYSIWYG integration, so other libraries can be tightly integrated as well in contrib.

In-place editing

One aspect of Drupal 7 that presents some usability challenges for content authors is that if something is spotted on the website that needs correction—for example, a typo, or a missing image—it requires going into a "back-end" form, visually separated from the "front-end" website where content will appear, in order to change it. And the "Preview" button doesn't actually help, because the results of preview are shown in the administrative theme (twice, in case you missed it the first time ;)).

Enter Drupal 8's new in-place editing feature, which allows editors to easily click into any field within a piece of content and edit it right on the front-end of the site, without ever visiting the back-end form. And not just full "node" content, either: user profiles, custom blocks, and more are in-place editable as well!

In-place editing a body field shows a WYSIWYG editor in-line.

Note that this feature has been backported to Drupal 7 as the Quick Edit module (formally Edit module).

Redesigned content creation page

Borne from a community-led effort from Drupal's Usability team, when you go to create content for the first time, you'll find Drupal 8 has a newly redesigned content creation page which contains two columns: one for the main fields (the actual "content" part of your content) and another for the "extras"—optional settings that are used less often. The hope is that this will create a less overwhelming experience for content authors, and allow them to focus more on the task at hand.

Two-column content creation page

Refreshed admin theme

Related, and still undergoing development, you'll also find the administrative theme in Drupal 8 to be a nice refresh over Drupal 7's, with a new style guide for the "Seven" admin theme.

Content admin page using new Seven theme

Draft support in core

While there are no screenshots for this one since it's an under-the-hood change only, API support was added in core to support the notion of draft revisions on pieces of content. This should make the work of publishing workflow modules such as Workbench much easier in Drupal 8 and beyond.

Whew! That's a wrap!

Join us next week, when we'll talk about all the nifty mobile improvements coming to Drupal 8!

Comments

Posted on by Amit Goyal.

Wonderful initiative!

Quick Edit (https://drupal.org/project /quickedit) leads to 'Page not found'.

Posted on by Jeff Mahoney.

@Amit and Angie: here's the correct link:
https://drupal.org/pro ject/quickedit_tab

Posted on by Angela Byron.

No, the link to https://drupal.org/project /quickedit is correct. Drupal 8 recently renamed the module, Drupal 7 just hadn't caught up yet. :) It has now.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.