Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Improving the editor experience (as seen at Drupal Europe). Part two.

Parent Feed: 

This is the second post about the latest developments regarding the editorial experience in Drupal 8 based on a couple of presentations at Drupal Europe 2018.

Gutenberg editor

One project that could make a huge difference in the way the editors perceive Drupal could be Gutenberg.

Gutenberg was being presented at Drupal Europe by the Norwegian agency Frontkom. This contrib module integrates Gutenberg, the React javascript editor that originated from Wordpress, into Drupal.

Gutenberg can be enabled on a per content type level and replaces the node edit form with a blank canvas where the editor can create content using Gutenberg blocks as shown in the demo.

By default, various types of blocks are available to the editor, such as headings, text paragraphs, images and Drupal blocks (like the ones for example provided by the Views module). Other Gutenberg blocks can be custom made and the authors are about to launch the Gutenberg Cloud, a library from where blocks via a UI in Drupal can be installed on your website.

What remained unclear form the presentation was how Gutenberg blocks are being stored in the database and whether the individual blocks can be retrieved in a structured way for example to expose it as a REST resource.

The plan is to launch Gutenberg at the end of this year.

The full presentation is available on Youtube:

Improve Paragraphs with lesser known features

More and more site builders implement Paragraphs to let the users build structured content in a very flexible way. Therefore it was great to see Milos Bovan of MD Systems demonstrate at Drupal Europe-about a couple of lesser known features.

Using the following features you can make Paragraphs even better than it already is.

  • Use the style plugin to give each paragraph a specific style that can be used for CSS styling. The style can be chosen from the node edit form.
  • Add paragraphs to a library so you can reuse them elsewhere in the site. A listing is available to show all the paragraphs that are available in the library. You can promote a paragraph to the library and change it once to have it automatically updated everywhere in the site. If you dont want that then unlink it from the library so that the changes do not affect the paragraphs elsewhere.
  • Use the drag and drop mode to make it easier to order the paragraphs on de entity edit form. In combination with the collapse mode you can drastically improve the paragraphs UI which, often can be quite messy.
  • Organize a long messy list of paragraph types creating type groups. In the UI these groups will become available as separate tabs and by using icons for the types you can make the UI a bit more intuitive.
  • Convert paragraph types. This will allow you for example to convert an existing unstructured text field into a structured card paragraph type.

Multistep forms

Multi Step forms are an important feature of a website or application as it gives users a much better experience when submitting their data. It increases the users motivation to finish filling in the form leading in the end to a much higher conversion rate.

The contrib module form steps seems to to a good job in managing the complexity of the multistep form.

Several contributed modules among them Webform, allow building a multistep form but they are often limited in scope, hard to customize or are simply only available for Drupal 7. Alternatively a multistep form can be achieved by writing your own custom code which could at some point lead to an unmaintainable situation.

The form step module on the other allows creating multistep forms by leveraging the new Drupal 8 core feature of form modes. Much like view mode, form modes are different ways of presenting a drupal form (for example a user profile form or a node edit form).

The Form steps modules, as demonstrated at Drupal Europe by the Drupal agency Actency , lets you create workflows where that are collections of different form modes so that you can present the user with a multistep form. Each step in the workflow is linked to a particular form mode of a specific content type. As a result the user creates several nodes (possibly from different content types) when he follows the steps of the multiforms.

The workflow also manages the progress bar of the multistep form, giving the user the option to navigate through the different steps of the form.

The form step seems to provide a robust solution to a feature that many of us would like implement or should starting to implement in our Drupal websites.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web