blocks & layouts szeged

41
BLOCKS & LAYOUTS From Drupal 7 to 8

Upload: dasjo

Post on 08-May-2015

1.035 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Blocks & layouts szeged

BLOCKS & LAYOUTSFrom Drupal 7 to 8

Page 2: Blocks & layouts szeged

@DASJOJosef Dabernig

Page 3: Blocks & layouts szeged

http://dasjo.at/blocks-layouts-szeged

Page 4: Blocks & layouts szeged
Page 5: Blocks & layouts szeged
Page 6: Blocks & layouts szeged

THIS IS MY FAVORITE BLOCKS & LAYOUTS RELATED MODULE

Page 7: Blocks & layouts szeged
Page 8: Blocks & layouts szeged

IT ALL BEGINS…

Page 9: Blocks & layouts szeged

• Themes

• Regions

• Blocks

• Templates

BASICS

Page 10: Blocks & layouts szeged

CORE BLOCKS

Page 11: Blocks & layouts szeged

CHALLENGES

• Too much going on at admin/structure/block

• Can’t export block configuration

• Custom blocks depend on global “context” information$node = node_load(arg(2));

• Content region vs. other regions

Page 12: Blocks & layouts szeged

COMPOSITION PATTERNS

Page 13: Blocks & layouts szeged

• Custom blocks

• Contextual views

• EVA

• and…

COMPOSITION PATTERNS

Page 14: Blocks & layouts szeged

• Custom blocks

• Contextual views

• EVA

• and…

COMPOSITION PATTERNS

• Context

• Panels

• Display suite

• and…

Page 15: Blocks & layouts szeged

BLOCKS & LAYOUTS

Page 16: Blocks & layouts szeged

BLOCKS & LAYOUTS

Page 17: Blocks & layouts szeged
Page 18: Blocks & layouts szeged

CONTEXT, DISPLAY SUITE &

PANELS

Page 19: Blocks & layouts szeged

CONTEXT

• React & do something

• Conditionally place blocks

Page 20: Blocks & layouts szeged

DISPLAY SUITE• Extends “manage display”

• Use custom layouts

• Define view modes

• Code fields, dynamic fields, block fields, preprocess fields

Page 21: Blocks & layouts szeged

PANELS

• The most successful layout solution for Drupal 7

• Huge ecosystem, includes Page manager, “Panels Context”, Panelizer, In-place editor, CTools content plug-ins, …

Page 22: Blocks & layouts szeged

PUSH ~ PULL

Page 23: Blocks & layouts szeged

CONTEXT ~ PANELS, DS

Page 24: Blocks & layouts szeged

PAGE VARIANTS

Page 25: Blocks & layouts szeged

SELECTION RULES

Page 26: Blocks & layouts szeged

LAYOUT SELECTION

Page 27: Blocks & layouts szeged

CONTENT PLACEMENT

Page 28: Blocks & layouts szeged

PAGE MANAGER

Page 29: Blocks & layouts szeged

PANELIZER

Page 30: Blocks & layouts szeged

IN-PLACE EDITOR

Page 31: Blocks & layouts szeged

PANELS

• Panels everywhere (take over regions & page.tpl)

• Page manager existing pages

• Fieldable panels panes (embeddable entities)

• Field API Pane Editor (D8 in-place editing, Spark)

Page 32: Blocks & layouts szeged

VIEWS CONTENT PANES

Page 33: Blocks & layouts szeged

3DJH�KHDGHU0HQX

)RRWHU

'HIDXOW�VLWH�WHPSODWH��3DQHOV�

1RGH��3DQHOL]HU�IXOO�SDJH�RYHUULGH�GHIDXOW�SDQHO

�&RUH�SDJH�HOHPHQWV��EUHDGFUXPEV��WLWOH��PHVVDJHV��WDEV��KHOS�

1RGH�GLVSOD\�ZLWK�GLVSOD\�PRGHV

)LHOG�$)LHOG�%���

5HODWHG�EORFNV

*OREDO�EORFNV

/D\RXW�FRQWURO�� ����GV�OD\RXW��QRGH��������SDQHOL]HU�OD\RXW��QRGH������������SDQHOV�OD\RXW��VLWH�

'UXQRPLFV�/D\RXW�2YHUYLHZ

Page 34: Blocks & layouts szeged
Page 35: Blocks & layouts szeged

WSCCI + SCOTCH ≈

DRUPAL 8

Page 36: Blocks & layouts szeged

• Blocks are Plugins

• Object-oriented

• Extensible

• Annotation config

DRUPAL 8

Page 37: Blocks & layouts szeged

• Block library

• Custom blocktypes

• Fields, revisions& view modes

DRUPAL 8

Page 38: Blocks & layouts szeged

• Place block instances

DRUPAL 8

Page 39: Blocks & layouts szeged

• Twig instead of .tpl.php

DRUPAL 8

Page 40: Blocks & layouts szeged

THANKS & HAPPY BUILDING

Page 41: Blocks & layouts szeged

• Blocks https://groups.drupal.org/node/160144

• Introduction to Panopoly by Adrian Webb(Panels screenshots) http://prezi.com/0l_derrjnmbx/introduction-to-panopoly/

CREDITS