Content Layout

in Drupal 8

The Right Tool for the Job:

 

Kathryn

McClintock

@

kccmcck

d.o

How am I going to build this?

"Life is really simple, but we insist on making it complicated."

— Confucious

Core

Contrib

Drupal   

Layout System

Blocks

Custom

types

Reusable

System

blocks

Conditions

API

Block Visibility Groups

GOOD

BAD

Fieldable
 

Structured markup

 

Reusable

 

Contextual links

 

Configurable

UUIDs in Config

 

Block layout page organization

Context

GOOD

BAD

Improves block organization

 

Cleaner HTML than alternative contrib modules

 

Supports Block Visibility Groups module

Overwrites default block configurations

 

... see:
d.o/node/2802749

Panels

Beta

Panelizer

API

Page

manager

solr_directory:
  label: Solr Directory
  category: Custom
  template: layouts/solr-directory
  regions:
    header:
      label: Directory header
    browse:
      label: Browse by block
    search:
      label: Search tools
    current:
      label: Current search
    main:
      label: Main content

theme.layouts.yml

Reacts to

paths

Permissions

Variants

Contexts

GOOD

BAD

Power and complexity

 

Uses Contexts (ctools)

 

Integration with other systems

Learning curve

 

Developer's tool

 

Heavy footprint

 

"All or nothing" approach

WYSIWYG


<h1 style="border-bottom: 1px solid rgb(214, 214, 214); padding: 0px 0px 10px; margin: 0 0px 0.83em;">
    <span style="font-family: HelveticaNeueW01-75Bold, Helvetica, Arial, sans-serif; line-height: 28px;">The WYSIWYG of Doom</span>
</h1>

<h2>
    <img src="" />
    Why is there an image in this H2?
</h2>

<p> </p>

<p><iframe align="left" frameborder="0" height="333" scrolling="no" src="https://www.youtube.com/embed/1qQ2hYIZn80" style="margin-left: 10px; margin-right: 10px;" title="YouTube video player" width="547"></iframe></p>

<div class="view view-partners view-id-partners view-display-id-panel_pane_1 view-dom-id-61e28642368d45b4be655e02cfe09fb5">
    <div class="view-header">
        <h2 class="mti_font_element">Featured Drupal Project</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    
    <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">
            <article about="/content/example1" typeof="sioc:Item foaf:Document" role="article" class="node node--partner node-teaser node--teaser node--partner--teaser">
CKEDITOR.addTemplates( 'custom',
  {
    imagesPath: CKEDITOR_BASEPATH + '../../themes/custom/images/',
    templates :
      [
        {
          title: 'Custom Two Columns',
          image: 'custom-two-columns.png',
          description: 'Custom two columns flexible layout.',
          html:
            '<div class="custom-columns">' +
              '<div class="custom-columns-row">' +
                '<div class="custom-columns-cell"></div>' +
                '<div class="custom-columns-cell"></div>' +
              '</div>' +
            '</div>'
        },
      ]
  });

ckeditor.templates.js

GOOD

Client feels empowered

 

Familiar tool

 

Conserve design budget

 

Efficient method to output a large amount of data

 

Custom HTML elements & templates

Design quality suffers

 

Performance risks

 

Markup issues

 

Custom styles & templates aren't bullet-proof

BAD

Paragraphs

  1. Identify common design components
     
  2. Create paragraph types
     
  3. Enable specific paragraph types on other Drupal entities

Site Builder

Paragraphs

Accordion

Photo Banner

Site Reference

  1. Add paragraphs and populate the data

Editor

Paragraphs

GOOD

BAD

Nestable (2 levels)

 

Reorderable

 

Client controls both layout and content

Content not reusable

 

Not fully multilingual in D7

 

Edit forms

Panelizer

Beta

IPE

D7 != D8

Core

Entitites

GOOD

BAD

Custom overrides

 

In-Place Editor

 

Ability to add additional data

 

Under active development

 

New, intuitive interface...

...Unfamiliar interface

 

Assumes layout risks

Display Suite

Enhances

displays

Drag &

Drop

Custom

layouts

node_full_layout:
  label: Full node
  category: Custom
  template: layouts/node-full
  regions:
    header:
      label: Header
    image_card:
      label: Image card
    baseball_card:
      label: Baseball card
    upload_card:
      label: Upload card
    main:
      label: Main content
    related:
      label: Related content
    map:
      label: Map

theme.layouts.yml

GOOD

BAD

Integrates well with styleguides / components

 

Efficient and familiar UI

 

Define custom layouts in theme

 

Create block fields

Does not support custom overrides per entity

 

Structure stored in database (as opposed to templates)

Twig       

Templates

Generic

templates

Total

control

Specific

templates

Questions

Thank you

The Right Tool for the Job: Content Layout in Drupal 8

By Kathryn McClintock

The Right Tool for the Job: Content Layout in Drupal 8

  • 2,496