diff --git a/core/modules/field_layout/css/twocol.layout.css b/core/modules/field_layout/css/twocol.layout.css new file mode 100644 index 0000000..e969f51 --- /dev/null +++ b/core/modules/field_layout/css/twocol.layout.css @@ -0,0 +1,8 @@ +.field-layout-layout--twocol { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.field-layout-layout--twocol > .field-layout-region { + flex: 0 1 50%; +} diff --git a/core/modules/field_layout/field_layout.libraries.yml b/core/modules/field_layout/field_layout.libraries.yml index 59ed060..fdfa277 100644 --- a/core/modules/field_layout/field_layout.libraries.yml +++ b/core/modules/field_layout/field_layout.libraries.yml @@ -4,3 +4,9 @@ drupal.field_layout: js/field_layout.js: {} dependencies: - field_ui/drupal.field_ui + +drupal.field_layout.twocol: + version: VERSION + css: + layout: + css/twocol.layout.css: {} diff --git a/core/modules/field_layout/field_layout.module b/core/modules/field_layout/field_layout.module index b62c89a..29383ec 100644 --- a/core/modules/field_layout/field_layout.module +++ b/core/modules/field_layout/field_layout.module @@ -84,16 +84,23 @@ function _field_layout_apply_layout(array &$build, EntityDisplayInterface $displ return; } + // Wrap the regions in a layout element. + $build['field_layout']['#theme_wrappers'][] = 'field_layout_layout'; + $build['field_layout']['#layout'] = $layout_definition['layout']; + if (isset($layout_definition['library'])) { + $build['#attached']['library'][] = $layout_definition['library']; + } + // Add the regions to the $build in the correct order. foreach ($layout_definition['regions'] as $region => $region_info) { - $build['field_layout__' . $region]['#theme_wrappers'][] = 'field_layout_region'; - $build['field_layout__' . $region]['#region'] = $region; + $build['field_layout'][$region]['#theme_wrappers'][] = 'field_layout_region'; + $build['field_layout'][$region]['#region'] = $region; } // Move the field from the top-level of $build into a region-specific section. foreach ($display->getThirdPartySetting('field_layout', 'fields', []) as $name => $field) { if (isset($build[$name]) && $field['region'] !== 'hidden') { - $build['field_layout__' . $field['region']][$name] = $build[$name]; + $build['field_layout'][$field['region']][$name] = $build[$name]; } unset($build[$name]); } @@ -107,10 +114,28 @@ function field_layout_theme($existing, $type, $theme, $path) { 'field_layout_region' => [ 'render element' => 'elements', ], + 'field_layout_layout' => [ + 'render element' => 'elements', + ], ]; } /** + * Prepares variables for field layout layout templates. + * + * Default template: field-layout-layout.html.twig. + * + * @param array $variables + * An associative array containing: + * - elements: An associative array containing properties of the layout. + */ +function template_preprocess_field_layout_layout(&$variables) { + // Create the $content variable that templates expect. + $variables['content'] = $variables['elements']['#children']; + $variables['layout'] = $variables['elements']['#layout']; +} + +/** * Prepares variables for field layout region templates. * * Default template: field-layout-region.html.twig. diff --git a/core/modules/field_layout/src/LayoutRepository.php b/core/modules/field_layout/src/LayoutRepository.php index 83b3108..5fe4540 100644 --- a/core/modules/field_layout/src/LayoutRepository.php +++ b/core/modules/field_layout/src/LayoutRepository.php @@ -37,19 +37,9 @@ public function getLayoutDefinitions() { ], ], ], - '1col_stacked' => [ - 'label' => $this->t('One column stacked'), - 'regions' => [ - 'top' => [ - 'label' => $this->t('Top'), - ], - 'bottom' => [ - 'label' => $this->t('Bottom'), - ], - ], - ], - '2col' => [ + 'twocol' => [ 'label' => $this->t('Two column'), + 'library' => 'field_layout/drupal.field_layout.twocol', 'regions' => [ 'left' => [ 'label' => $this->t('Left'), @@ -60,6 +50,9 @@ public function getLayoutDefinitions() { ], ], ]; + foreach ($layouts as $layout_name => $layout) { + $layouts[$layout_name]['layout'] = $layout_name; + } return $layouts; } diff --git a/core/modules/field_layout/templates/field-layout-layout.html.twig b/core/modules/field_layout/templates/field-layout-layout.html.twig new file mode 100644 index 0000000..f08168c --- /dev/null +++ b/core/modules/field_layout/templates/field-layout-layout.html.twig @@ -0,0 +1,23 @@ +{# +/** + * @file + * Default theme implementation to display a layout. + * + * Available variables: + * - content: The content for this layout, typically blocks. + * - attributes: HTML attributes for the layout