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
- Identify common design components
- Create paragraph types
- Enable specific paragraph types on other Drupal entities
Site Builder
Paragraphs
Accordion
Photo Banner
Site Reference
- 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