Layout discovery
Drupal Summer Barcelona 2017Luis Ortiz Ramos
● 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
Layout initiative
… nombre en clave “SCOTCH”
En marzo de 2012, Dries Buytaert anuncia una nueva iniciativa: Layouts.
El líder de la iniciativa es Kris “EclipseGC” Vanderwater
“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.”
1.Contextual blocks
2.Blocks everywhere
3.Multiple page layouts
4.Partial page rendering
5.Better UI/UX to manage blocks
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
En octubre de 2012 se commitean los primeros cambios...
El ciclo de desarrollo de Drupal 8...
...hasta 8.0.0
Algo pasó en la Drupalcon de Barcelona
...en 2015
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
Layout Discovery está en Drupal 8.3.0 (experimental)
...y Field Layout también
Layout Discovery
“Provides a way for modules or themes to
register layouts.”
Registrando Layouts
El caso más simple
1.Creamos el archivo
my_custom_module.layouts.yml
2. Creamos una plantilla
two_column:label: 'Two column'category: 'My Layouts'template: templates/two-columndefault_region: mainregions:main:label: Main content
sidebar:label: Sidebar
<div class="two-column"><div class="main-region">{{ content.main }}
</div><div class="sidebar-region">{{ content.sidebar }}
</div></div>
Registrando nuestra propia plantilla usando theme
1.Registramos la plantilla usando hook_theme
2.Creamos la plantilla
3.Registramos el layout en el archivo
my_custom_module.layouts.yml
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',
],];
}
advanced_layout_1:label: Advanced Layout 1category: My Layoutstheme: advanced_layout_1regions:main:label: Main content
alternate_advanced_layout_1:label: Advanced Layout 1category: My Layoutstheme: advanced_layout_1__alternateregions:main:label: Main content
Utilizando una clase alternativa
advanced_layout_3:label: Advanced Layout 3category: My Layoutsclass: '\Drupal\my_custom_module\MyLayoutClass'template: templates/advanced-layout-3library: my_custom_module/advanced-layout-libraryregions:main:label: Main content
<?php
namespace Drupal\my_custom_module;
use Drupal\Core\Form\FormStateInterface;use Drupal\Core\Layout\LayoutDefault;
class MyLayoutClass extends LayoutDefault {
…
…
/*** {@inheritdoc}*/public function defaultConfiguration() {return parent::defaultConfiguration() + ['extra_classes' => 'Default',
];}
…
…
/*** {@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;
}
…
…
/*** {@inheritdoc}*/public function submitConfigurationForm(array &$form,
FormStateInterface $form_state) {parent::submitConfigurationForm($form, $form_state);
$this->configuration['extra_classes'] = $form_state->getValue('extra_classes');}
}
<div class="my-advanced-layout {{ settings.extra_classes }}"><div class="main-region">{{ content.main }}
</div></div>
Registrando layouts como un plugin
namespace Drupal\my_custom_module\Plugin\Layout;
use Drupal\Core\Layout\LayoutDefault;
/*** 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!
}
Registrando layouts usando derivatives
namespace Drupal\my_custom_module\Plugin\Layout;
use Drupal\Core\Layout\LayoutDefault;
/*** A layout from our flexible layout builder.** @Layout(* id = "flexible_layout",* deriver = "Drupal\my_custom_module\Plugin\Deriver\FlexibleLayoutDeriver"* )*/
class FlexibleLayout extends LayoutDefault {
/*** {@inheritdoc}*/
public function build(array $regions) {$render_array = parent::build($regions);… return $render_array;
}
}
namespace Drupal\my_custom_module\Plugin\Deriver;
use Drupal\Component\Plugin\Derivative\DeriverBase;use Drupal\Core\Layout\LayoutDefinition;
/*** Makes a flexible layout for each layout config entity.*/
class FlexibleLayoutDeriver extends DeriverBase {
…
… /*** {@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;}
}
Utilizando Layouts
…con código
Instanciando el layout plugin manager
$layoutPluginManager = \Drupal::service('plugin.manager.core.layout');
Listando layouts
$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,
];
Instanciando un layout
$layoutPluginManager = \Drupal::service('plugin.manager.core.layout');// Provide any configuration to the layout plugin if necessary.$layoutInstanceConfiguration = [];$layoutInstance = $layoutPluginManager->createInstance('layout_twocol', $layoutInstanceConfiguration);
Renderizando layouts
$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);
Utilizando Layouts
…el resto del tiempo
●Field layouts●Display Suite > 8.3.x●Panels > 8.4.x
●Bootstrap layouts > 8.5.x
Futuro
1. Regiones configurables
2. Bloques como campos
3. Genera iconos de layouts automáticamente
4.Multiple page layouts
…
¡Gracias!
¿Preguntas?
