An illustration of paragraphs

Kevin Flanagan
Jan142019

More often than not, website content contributors and editors are working within a content management system (CMS) while writing or working on copy. This might simply be for adding News Items to the site's blog or, for creating a complete Landing page for a new section of the site, that is building off of various blocks of information such as paragraphs (in the literary context of this word), images, youtube videos, PDF viewers, etc. 

When this is the case, often times the UI of the text editor being used is limited in features, perhaps allowing for the load of an image and an article, but the layout of media within the actual text gets kind of clumsy, particularly when the author needs to consider the layout of their pages across mobile phones all the way through to large desktops.

Paragraphs, (in the technical sense) allows developers to create an intuitive UI for authors and editors of content so that they have a variety of layout options available to them for each set of textual paragraphs, images, media, and titles. It gives the author their flexibility to arrange content while allowing site developers and themers to build in styling rules that allow the content to be displayed across a set of media breakpoints.

Implementing Paragraphs

Just to avoid confusion, from this point forward, I will try to reserve the use of the word "Paragraphs" to either the title of this module or to a rich collection of textual constructs, titles, system blocks, youtube players, and media as creating a single paragraph.

An author can create an unlimited series of paragraphs for a document, and then reorder the arrangement of those paragraphs using a simple draggable UI. Each of the Paragraph styles that are available for a given Paragraph item are created by the developer (available at /admin/structure/paragraphs_type ) as a paragraph type. Additionally, using the paragraph library, you can allow content authors to add static paragraphs so they are available to be used in content anywhere on other pages within the site. 

Image
Paragraphs

Technical Setup

Image
Paragraphs Structure List

After the Paragraphs module is installed and enabled, there is new field type available called "paragraph", and it is best to enable these as an unlimited multivalue field. But before the new field-type can be used, you'll want to create a few paragraph Structures to choice from. 

Goto the Structure - Paragraph Type menu option to list all existing paragraph types, and to add new ones. Creating new paragraphs is very similar to creating content types. Just like with content types, you define entity fields and layouts for the forms and displays of them.

Adding Paragraphs to Content Type Forms

New Paragraph Field

Once a few Paragraphs types are in the system, you can add a paragraph field to a content type. As I mentioned above, make it a 'multivalue field' so that content authors can add as many paragraphs as their articles need.  You'll find Paragraph field type under Reference revisions.

Once you've added the field type to the form, then try out the content type with the new multi-value 'P' field on it. The field present a selection of the available Paragraph types available to add to the article (content node).  

paragraph field on a node form

A Draggable Arrangement For Paragraph Items

Image
Draggable Content

Paragraphs can be arranged within the context of the article (or node if you prefer), and component paragraphs within the node paragraphs can be arranged within that particular paragraph.  But what you cannot do is drag components of one paragraph to another paragraph.

Within the component UI of each paragraph, you can collapse and view the various pieces of text and images that have been added so far.  The actual text editor that is being used is the old and faithful, CKEDITOR.

CkEditor Works Along With Your Style Guide

Keep your content writers honest with your website's policy document by offering them the choices within CKEditor's robust list of styling options. Working along with standard Bootstrap classes, content writers are able to style their content within the guidelines of font sizing, coloring and font familys.

Image
CKEditor

Gutenberg is all rage in the WordPress world, and last fall the team from Frontkom ported the text editing UI over to Drupal. As of January 2019 it's still in Beta,  but it is plenty functional. Gutenberg is a Block-Based Text Editor, that integrates not only with its own content blocks, but even allowing for drag and drop positioning of Drupal Blocks. 

I'm writing a complete review of my Gutenberg experience in this blog article titled, the Gutenberg Experiment.

The best place to maintain a website's style guide is inside of the website, especially if the web site is driven by a state of the art CMS called Drupal.