Component Design in Drupal

In our earlier post, we had introduced component-based front-end design for websites. We discussed how essential it is, to ensure coherence, consistency and productivity when building large websites. We also discuss what typical website components look like and how they are organized.

In this post, we discuss how to implement component-based design in Drupal. We explore some basic approaches first and then introduce Cohesion DX8 – an advanced component builder for Drupal sites.

Introduction

We take a hands-on approach to create component based design or component based blocks in Drupal 7. Deriving reusable components paradigm from reactive frameworks, it will allow inheritance, flexibility, and modularity to a certain extent at CMS level.

Starting with CCK (Content Construction Kit), it’s where the foundation of content begins. Drupal CCK offers powerful user interface and management to create, edit or delete content types which encompass fields with variation of data types such as string, integer, float, date & time, taxonomy term reference, boolean, image, url, attachment and many more.

Combining the power of custom content types, taxonomy, vocabulary and terms the next level of abstraction begins with Views module. Views is what you do with content and how you format, filter or refine it to make it more presentable.

CCK & Taxonomy

The building blocks of any site is content and how it’s defined so within CCK we start by defining content types:

Example Content Types:

1. News
2. Blogs (D7 module)
3. Events
4. Investor Relationships
5. Presentations
6. Jobs
7. Team
8. Resources

Example Taxonomies:

1. Blogs (Article, Whitepaper or Resources)
2. News (Press Release, Media Coverage)
3. Resources (Logos, Videos, Photos)

Views

Views in Drupal add that special layer of dynamic query generation based on CCK, fields, field criteria and also formatting the overall output. On top of that you get full control over access to the View based on either user role or permission.

Majority of Blocks and Pages are driven with Views and the ideal approach to componentize and modularize design elements is to leverage Views. Views can inherit or polymorph a block or page with carefully designed architecture. As exciting and overwhelming as it sounds, it also poses some risks. Risks of adversely affecting other blocks or pages while making changes when overriding a View for eg:

Views based on CCK

Based on reusable component paradigm and maintaining inheritance without affecting design components at page level and custom content type makes it much more modular and manageable. Each view element inherits from Master View thus requiring overrides to extend it. To further understand this refer below test case for News content type View which avoids the pitfall of adversely affecting other blocks or pages.

News Content Type (Test Case)

News content View has two different blocks but having the same content type, and so this can be encapsulated in one single view with two different blocks as below:

Where first block refers to a hero section of News page and second block rendering the same content type with different (overridden) format, layout and fields.

Formatting Views

A general approach is letting Views render fields with default wrapper and classes which might render verbose markup at times. We took another approach to have full control over the markup.

You might ask why? Here’s why, Views is straightforward and quite robust in handling single Block or Page. But addressing two or more blocks in a View that render different output for the same content type have to be carefully refined. By default Views will render every field unless explicitly excluded from display but it’s still available within the View. By adding a Global Text field at the end of Fields list which accepts raw HTML and field Tokens, allowing field output with full control over HTML markup and less error prone output. Ensuring Block A doesn’t adversely affect the output of Block B within the same View. Refer to below image:

Replicating View Blocks per Content Type (Reusable Component Abstraction)

Using a very basic abstract principle of creating view blocks based on Content type is more sensible and this will also ensure we’re not adversely affecting other blocks if they were encapsulated in one single view. Below you’ll see two exposed Blocks from Views which render the same content type News but with different format, layout and styling:

Hero Unit Block

News List Block

Using the Master view both these blocks can be encapsulated within one View to render each block differently in terms of format, layout and styling but both blocks are using the same content type ie. News.

Cohesion DX8 for Drupal 8 (Component based page/site builder)

Here we take another look at more sophisticated and complex page editor and site builder, Cohesion DX8, which is a commercial alternative against core Drupal 8 module Page and Layout builder which can also be used to build complex layouts. DX8 comes with two flavours, the Page Editor and Site Builder. It differs in terms of editing capabilities and permissions. Full licensing is available for a fully qualified domain name which uses DX8 page editor, on the contrary sites that require only DX8 Site builder requires a license at build time.

While Drupal was still catching up with page and layout builders that were already available for WordPress like Visual Builder, Divi and Elementor, Panels module was the only viable choice available in Drupal 7, but with the release of Drupal 8 there are some major improvements. Let’s dive into a DX8 test case site; built with latest stable release.

Cohesion DX8 Test Case

Let’s take an example of how easily you can manage page layout and components that seamlessly integrate with Drupal 8. Built on the Drupal core these components are 100% configurable and accessible with roles and permissions. So let’s spin off an example instance on Acquia for D8 Cohesion.

Component Configuration

Now that you see it in action it’s almost retaining the original Drupal editing capabilities with some extended component configuration, let’s have a look at the example Hero component configuration:

Here you can define your component details such as Title, Category and also some defaults. A hybrid component can be built with core layout components such as containers and rows. Additionally you can also mix and match with existing components which inherit all the configuration within your hybrid component. The Layout canvas section lets you do that visually with drag and drop functionality which is awesome. Refer to the below screen:

Then there’s Component form builder which is meant to present your component creation form layout to users. It’s fully configurable with drag and drop and also drop-in configuration settings for your component. It’s different from building your layout as seen in the above screen.

Page Layout Editor

Retaining simplicity, speed and authentic Drupal editing experience the page layout editor is as good as it gets, providing intuitive and powerful editing experience.  Each component is laid out as stacked list with easy editing capabilities. You can easily edit any component by double click which will present an elegant overlay component editor.

To edit a specific component just double click it or click on Ellipses -> Edit link. Let’s edit the Hero – tall component where you’ll be presented with component options like Heading and Background Image which were added as Text content and Image content fields in Component form builder. Here’s the Hero – tall component configuration editor:

What should you choose?

Cohesion DX8 works on Acquia Cloud, Acquia Cloud Site Factory and Acquia Lift. With features like Revisions, Translations, and Workflows, Cohesion DX8 is set to impress the web development community. Not only limited to its core components, DX8 can also be extended using API’s to create custom functionalities or components from scratch.

On a closing note this was an introductory article on basic features and implementation of Cohesion DX8, however, we will be covering this topic in detail on our next article “Cohesion DX8 Component Builder”, stay tuned.

If you’d like to read our post on how to do component design in Headless CMSes, go here.

‍