Layout discovery. Drupal Summer Barcelona 2017

1. Layout discovery
Drupal Summer Barcelona 2017
Luis Ortiz Ramos

2. Luis Ortiz Ramos
CTO de Atenea tech
●luis@ateneatech.com
●@luisortizramos

4. ● Somos expertos en Drupal desde 2007
● Somos Siddharta, Oriol, Robert, David,
Patricia, Xavi, Rubén, Pepe, Miguel y Luis.
● Trabajamos para La Vanguardia, Thermomix,
Dexeus, Estrella Damm, Amnistía
Internacional, Médicos Sin Fronteras, Infojobs,
Greenpeace, Chupa Chups, Ayuntamiento de
Barcelona, Torres, la CUP…
● Estamos en el Citilab de Cornellà, Barcelona
● Puedes contactar con nosotros en
hola@ateneatech.com

6. Layout initiative
… nombre en clave “SCOTCH”

7. En marzo de 2012, Dries Buytaert anuncia una
nueva iniciativa: Layouts.
El líder de la iniciativa es Kris “EclipseGC”
Vanderwater

8. “The goal of the Layout initiative is to make all
elements on the page into contextual blocks that
can be rearranged and organized into flexible
layouts (and even layouts within layouts) through
a drag and drop interface.”

9. 1.Contextual blocks
2.Blocks everywhere
3.Multiple page layouts
4.Partial page rendering
5.Better UI/UX to manage blocks

10. En marzo de 2012:
●El componente de Symfony HttpKernel no
estaba en el core
●CMI no estaba completado
●El sistema de Plugins estaba en desarrollo

11. En octubre de 2012 se commitean los primeros
cambios...

12. El ciclo de desarrollo de
Drupal 8...
...hasta 8.0.0

16. Algo pasó en la
Drupalcon de Barcelona
...en 2015

23. 1.Crear una branch por cada característica
2.Solo hacer merge con la branch principal
cuando la característica esté finalizada
3. Lanzar nuevas versiones de Drupal
periódicamente

25. Layout Discovery está en
Drupal 8.3.0 (experimental)
...y Field Layout también

27. Layout Discovery

28. “Provides a way for modules or themes to
register layouts.”

29. Registrando Layouts

30. El caso más simple

31. 1.Creamos el archivo
my_custom_module.layouts.yml
2. Creamos una plantilla

32. two_column:
label: 'Two column'
category: 'My Layouts'
template: templates/two-column
default_region: main
regions:
main:
label: Main content
sidebar:
label: Sidebar

33. <div class="two-column">
<div class="main-region">
{{ content.main }}
</div>
<div class="sidebar-region">
{{ content.sidebar }}
</div>
</div>

34. Registrando nuestra propia plantilla usando
theme

35. 1.Registramos la plantilla usando hook_theme
2.Creamos la plantilla
3.Registramos el layout en el archivo
my_custom_module.layouts.yml

36. function MY_MODULE_OR_THEME_theme() {
return [
'advanced_layout_1' => [
'template' => 'templates/advanced-layout-1',
// layout_plugin expects the theme hook to be declared
with this:
'render element' => 'content',
],
];
}

37. advanced_layout_1:
label: Advanced Layout 1
category: My Layouts
theme: advanced_layout_1
regions:
main:
label: Main content
alternate_advanced_layout_1:
label: Advanced Layout 1
category: My Layouts
theme: advanced_layout_1__alternate
regions:
main:
label: Main content

38. Utilizando una clase alternativa

39. advanced_layout_3:
label: Advanced Layout 3
category: My Layouts
class: 'Drupalmy_custom_moduleMyLayoutClass'
template: templates/advanced-layout-3
library: my_custom_module/advanced-layout-library
regions:
main:
label: Main content

40. <?php
namespace Drupalmy_custom_module;
use DrupalCoreFormFormStateInterface;
use DrupalCoreLayoutLayoutDefault;
class MyLayoutClass extends LayoutDefault {
…

41. …
/**
* {@inheritdoc}
*/
public function defaultConfiguration() {
return parent::defaultConfiguration() + [
'extra_classes' => 'Default',
];
}
…

42. …
/**
* {@inheritdoc}
*/
public function buildConfigurationForm(array $form,
FormStateInterface $form_state) {
$configuration = $this->getConfiguration();
$form['extra_classes'] = [
'#type' => 'textfield',
'#title' => $this->t('Extra classes'),
'#default_value' => $configuration['extra_classes'],
];
return $form;
}
…

43. …
/**
* {@inheritdoc}
*/
public function submitConfigurationForm(array &$form,
FormStateInterface $form_state) {
parent::submitConfigurationForm($form, $form_state);
$this->configuration['extra_classes'] = $form_state-
>getValue('extra_classes');
}
}

44. <div class="my-advanced-layout {{ settings.extra_classes }}">
<div class="main-region">
{{ content.main }}
</div>
</div>

45. Registrando layouts como un plugin

46. namespace Drupalmy_custom_modulePluginLayout;
use DrupalCoreLayoutLayoutDefault;
/**
* A very advanced custom layout.
*
* @Layout(
* id = "advanced_layout_4",
* label = @Translation("Advanced Layout 4"),
* template = "templates/advanced-layout-4",
* regions = {
* "main" = {
* "label" = @Translation("Main content"),
* }
* }
* )
*/
class AdvancedLayout4 extends LayoutDefault {
// Override any methods you'd like to customize here!
}

47. Registrando layouts usando derivatives

48. namespace Drupalmy_custom_modulePluginLayout;
use DrupalCoreLayoutLayoutDefault;
/**
* A layout from our flexible layout builder.
*
* @Layout(
* id = "flexible_layout",
* deriver = "Drupalmy_custom_modulePluginDeriverFlexibleLayoutDeriver"
* )
*/
class FlexibleLayout extends LayoutDefault {
/**
* {@inheritdoc}
*/
public function build(array $regions) {
$render_array = parent::build($regions);
…
return $render_array;
}
}

49. namespace Drupalmy_custom_modulePluginDeriver;
use DrupalComponentPluginDerivativeDeriverBase;
use DrupalCoreLayoutLayoutDefinition;
/**
* Makes a flexible layout for each layout config entity.
*/
class FlexibleLayoutDeriver extends DeriverBase {
…

50. …
/**
* {@inheritdoc}
*/
public function getDerivativeDefinitions($base_plugin_definition) {
$config_entities = [];
…
foreach ($config_entities as $entity) {
// Here we fill in any missing keys on the layout annotation.
$this->derivatives[$entity->id()] = new LayoutDefinition([
'label' => $entity->label(),
'category' => $entity->getCategory(),
'regions' => $entity->getRegions(),
]);
}
return $this->derivatives;
}
}

51. Utilizando Layouts
…con código

52. Instanciando el layout plugin manager

53. $layoutPluginManager = Drupal::service('plugin.manager.core.layout');

54. Listando layouts

55. $layoutPluginManager = Drupal::service('plugin.manager.core.layout');
$layoutDefinitions = $layoutPluginManager->getDefinitions();
$definedLayouts = [];
foreach ($layoutDefinitions as $key => $layoutDefinition) {
$definedLayouts[] = $layoutDefinition->getLabel();
}
return [
'#theme' => 'item_list',
'#items' => $definedLayouts,
];

56. Instanciando un layout

57. $layoutPluginManager = Drupal::service('plugin.manager.core.layout');
// Provide any configuration to the layout plugin if necessary.
$layoutInstanceConfiguration = [];
$layoutInstance = $layoutPluginManager->createInstance('layout_twocol',
$layoutInstanceConfiguration);

58. Renderizando layouts

59. $layoutPluginManager = Drupal::service('plugin.manager.core.layout');
// Provide any configuration to the layout plugin if necessary.
$layoutInstanceConfiguration = [];
$layoutInstance = $layoutPluginManager->createInstance('layout_twocol',
$layoutInstanceConfiguration);
// Build the content for your regions.
$regions = [
'top' => [
'#markup' => 'Lorem ipsum dolor sit amet...',
],
'left' => [
'#markup' => 'Stet clita kasd gubergren...',
],
'right' => [
'#markup' => 'At vero eos et accusam et justo duo dolores et ea rebum...',
],
'bottom' => [
'#markup' => 'At vero eos et accusam et justo duo dolores et ea rebum...',
],
];
// This builds the render array.
return $layoutInstance->build($regions);

60. Utilizando Layouts
…el resto del tiempo

61. ●Field layouts
●Display Suite > 8.3.x
●Panels > 8.4.x
●Bootstrap layouts > 8.5.x

62. Futuro

63. 1. Regiones configurables
2. Bloques como campos
3. Genera iconos de layouts automáticamente
4.Multiple page layouts
…

64. ¡Gracias!
¿Preguntas?