Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Layout discovery. Drupal Summer Barcelona 2017

364 views

Published on

Layout discovery. Drupal Summer Barcelona 2017

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Layout discovery. Drupal Summer Barcelona 2017

  1. 1. Layout discovery Drupal Summer Barcelona 2017 Luis Ortiz Ramos
  2. 2. Luis Ortiz Ramos CTO de Atenea tech ●luis@ateneatech.com ●@luisortizramos
  3. 3. ● 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
  4. 4. Layout initiative … nombre en clave “SCOTCH”
  5. 5. En marzo de 2012, Dries Buytaert anuncia una nueva iniciativa: Layouts. El líder de la iniciativa es Kris “EclipseGC” Vanderwater
  6. 6. “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.”
  7. 7. 1.Contextual blocks 2.Blocks everywhere 3.Multiple page layouts 4.Partial page rendering 5.Better UI/UX to manage blocks
  8. 8. 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
  9. 9. En octubre de 2012 se commitean los primeros cambios...
  10. 10. El ciclo de desarrollo de Drupal 8... ...hasta 8.0.0
  11. 11. Algo pasó en la Drupalcon de Barcelona ...en 2015
  12. 12. 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
  13. 13. Layout Discovery está en Drupal 8.3.0 (experimental) ...y Field Layout también
  14. 14. Layout Discovery
  15. 15. “Provides a way for modules or themes to register layouts.”
  16. 16. Registrando Layouts
  17. 17. El caso más simple
  18. 18. 1.Creamos el archivo my_custom_module.layouts.yml 2. Creamos una plantilla
  19. 19. two_column: label: 'Two column' category: 'My Layouts' template: templates/two-column default_region: main regions: main: label: Main content sidebar: label: Sidebar
  20. 20. <div class="two-column"> <div class="main-region"> {{ content.main }} </div> <div class="sidebar-region"> {{ content.sidebar }} </div> </div>
  21. 21. Registrando nuestra propia plantilla usando theme
  22. 22. 1.Registramos la plantilla usando hook_theme 2.Creamos la plantilla 3.Registramos el layout en el archivo my_custom_module.layouts.yml
  23. 23. 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', ], ]; }
  24. 24. 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
  25. 25. Utilizando una clase alternativa
  26. 26. 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
  27. 27. <?php namespace Drupalmy_custom_module; use DrupalCoreFormFormStateInterface; use DrupalCoreLayoutLayoutDefault; class MyLayoutClass extends LayoutDefault { …
  28. 28. … /** * {@inheritdoc} */ public function defaultConfiguration() { return parent::defaultConfiguration() + [ 'extra_classes' => 'Default', ]; } …
  29. 29. … /** * {@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; } …
  30. 30. … /** * {@inheritdoc} */ public function submitConfigurationForm(array &$form, FormStateInterface $form_state) { parent::submitConfigurationForm($form, $form_state); $this->configuration['extra_classes'] = $form_state- >getValue('extra_classes'); } }
  31. 31. <div class="my-advanced-layout {{ settings.extra_classes }}"> <div class="main-region"> {{ content.main }} </div> </div>
  32. 32. Registrando layouts como un plugin
  33. 33. 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! }
  34. 34. Registrando layouts usando derivatives
  35. 35. 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; } }
  36. 36. namespace Drupalmy_custom_modulePluginDeriver; use DrupalComponentPluginDerivativeDeriverBase; use DrupalCoreLayoutLayoutDefinition; /** * Makes a flexible layout for each layout config entity. */ class FlexibleLayoutDeriver extends DeriverBase { …
  37. 37. … /** * {@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; } }
  38. 38. Utilizando Layouts …con código
  39. 39. Instanciando el layout plugin manager
  40. 40. $layoutPluginManager = Drupal::service('plugin.manager.core.layout');
  41. 41. Listando layouts
  42. 42. $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, ];
  43. 43. Instanciando un layout
  44. 44. $layoutPluginManager = Drupal::service('plugin.manager.core.layout'); // Provide any configuration to the layout plugin if necessary. $layoutInstanceConfiguration = []; $layoutInstance = $layoutPluginManager->createInstance('layout_twocol', $layoutInstanceConfiguration);
  45. 45. Renderizando layouts
  46. 46. $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);
  47. 47. Utilizando Layouts …el resto del tiempo
  48. 48. ●Field layouts ●Display Suite > 8.3.x ●Panels > 8.4.x ●Bootstrap layouts > 8.5.x
  49. 49. Futuro
  50. 50. 1. Regiones configurables 2. Bloques como campos 3. Genera iconos de layouts automáticamente 4.Multiple page layouts …
  51. 51. ¡Gracias! ¿Preguntas?

×