eventDispatcher = $event_dispatcher; } /** * {@inheritdoc} */ public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) { return new static( $configuration, $plugin_id, $plugin_definition, $container->get('event_dispatcher') ); } /** * {@inheritdoc} */ public function getInfo() { return [ '#section_storage' => NULL, '#pre_render' => [ [$this, 'preRender'], ], '#process' => [ [static::class, 'layoutBuilderElementGetKeys'], ], ]; } /** * Form element #process callback. * * Save the layout builder element array parents as a property on the top form * element, so that they can be used to access the element within the form * render array later. * * @param array $element * The render array for the layout builder element. * @param \Drupal\Core\Form\FormStateInterface $form_state * Form state object. * @param array $form * The render array for the complete form. * * @return array * The layout builder element render array after processing. * * @see \Drupal\layout_builder\Controller\LayoutBuilderHtmlEntityFormController */ public static function layoutBuilderElementGetKeys(array $element, FormStateInterface $form_state, array &$form): array { $form['#layout_builder_element_keys'] = $element['#array_parents']; $form['#pre_render'][] = [static::class, 'renderLayoutBuilderAfterForm']; $form['#post_render'][] = [static::class, 'addRenderedLayoutBuilder']; return $element; } /** * Render API #pre_render callback for form containing layout builder element. * * Because the layout builder element can contain components with forms, it * needs to exist outside forms within the DOM, to avoid nested form tags. * The layout builder element is rendered to markup here and saved, and later * the saved markup will be appended after the form markup. * * @param array $form * The rendered form. * * @return array * Renders the layout builder element, if it exists, and adds it to the * form. * * @see ::addRenderedLayoutBuilder() */ #[TrustedCallback] public static function renderLayoutBuilderAfterForm(array $form): array { if (isset($form['#layout_builder_element_keys'])) { $layout_builder_element = &NestedArray::getValue($form, $form['#layout_builder_element_keys']); // Save the rendered layout builder HTML to a non-rendering child key. // Since this method is a pre_render callback, it is assumed that it is // called while rendering with an active render context, so that the // cache metadata and attachments bubble correctly. $form['#layout_builder_markup'] = \Drupal::service('renderer')->render($layout_builder_element); // Remove the layout builder child element within form array. $layout_builder_element = []; } return $form; } /** * Render API #post_render callback that adds layout builder markup to form. * * @param string $html * The rendered form. * @param array $form * The form render array. * * @return string * The render string with any layout builder markup added. */ #[TrustedCallback] public static function addRenderedLayoutBuilder(string $html, array $form): string { if (isset($form['#layout_builder_markup'])) { $html .= $form['#layout_builder_markup']; } return $html; } /** * Pre-render callback: Renders the Layout Builder UI. */ public function preRender($element) { if ($element['#section_storage'] instanceof SectionStorageInterface) { $element['layout_builder'] = $this->layout($element['#section_storage']); } return $element; } /** * Renders the Layout UI. * * @param \Drupal\layout_builder\SectionStorageInterface $section_storage * The section storage. * * @return array * A render array. */ protected function layout(SectionStorageInterface $section_storage) { $this->prepareLayout($section_storage); $output = []; if ($this->isAjax()) { $output['status_messages'] = [ '#type' => 'status_messages', ]; } $count = 0; for ($i = 0; $i < $section_storage->count(); $i++) { $output[] = $this->buildAddSectionLink($section_storage, $count); $output[] = $this->buildAdministrativeSection($section_storage, $count); $count++; } $output[] = $this->buildAddSectionLink($section_storage, $count); $output['#attached']['library'][] = 'layout_builder/drupal.layout_builder'; // As the Layout Builder UI is typically displayed using the frontend theme, // it is not marked as an administrative page at the route level even though // it performs an administrative task. Mark this as an administrative page // for JavaScript. $output['#attached']['drupalSettings']['path']['currentPathIsAdmin'] = TRUE; $output['#type'] = 'container'; $output['#attributes']['id'] = 'layout-builder'; $output['#attributes']['class'][] = 'layout-builder'; $output['#attributes']['class'][] = Html::getClass('layout-builder--' . $section_storage->getPluginId()); // Mark this UI as uncacheable. $output['#cache']['max-age'] = 0; return $output; } /** * Prepares a layout for use in the UI. * * @param \Drupal\layout_builder\SectionStorageInterface $section_storage * The section storage. */ protected function prepareLayout(SectionStorageInterface $section_storage) { $event = new PrepareLayoutEvent($section_storage); $this->eventDispatcher->dispatch($event, LayoutBuilderEvents::PREPARE_LAYOUT); } /** * Builds a link to add a new section at a given delta. * * @param \Drupal\layout_builder\SectionStorageInterface $section_storage * The section storage. * @param int $delta * The delta of the section to splice. * * @return array * A render array for a link. */ protected function buildAddSectionLink(SectionStorageInterface $section_storage, $delta) { $storage_type = $section_storage->getStorageType(); $storage_id = $section_storage->getStorageId(); // If the delta and the count are the same, it is either the end of the // layout or an empty layout. if ($delta === count($section_storage)) { if ($delta === 0) { $title = $this->t('Add section'); } else { $title = $this->t('Add section at end of layout'); } } // If the delta and the count are different, it is either the beginning of // the layout or in between two sections. else { if ($delta === 0) { $title = $this->t('Add section at start of layout'); } else { $title = $this->t('Add section between @first and @second', ['@first' => $delta, '@second' => $delta + 1]); } } return [ 'link' => [ '#type' => 'link', '#title' => $title, '#url' => Url::fromRoute('layout_builder.choose_section', [ 'section_storage_type' => $storage_type, 'section_storage' => $storage_id, 'delta' => $delta, ], [ 'attributes' => [ 'class' => [ 'use-ajax', 'layout-builder__link', 'layout-builder__link--add', ], 'data-dialog-type' => 'dialog', 'data-dialog-renderer' => 'off_canvas', ], ] ), ], '#type' => 'container', '#attributes' => [ 'class' => ['layout-builder__add-section'], 'data-layout-builder-highlight-id' => $this->sectionAddHighlightId($delta), ], ]; } /** * Builds the render array for the layout section while editing. * * @param \Drupal\layout_builder\SectionStorageInterface $section_storage * The section storage. * @param int $delta * The delta of the section. * * @return array * The render array for a given section. */ protected function buildAdministrativeSection(SectionStorageInterface $section_storage, $delta) { $storage_type = $section_storage->getStorageType(); $storage_id = $section_storage->getStorageId(); $section = $section_storage->getSection($delta); $layout = $section->getLayout($this->getPopulatedContexts($section_storage)); $layout_settings = $section->getLayoutSettings(); $section_label = !empty($layout_settings['label']) ? $layout_settings['label'] : $this->t('Section @section', ['@section' => $delta + 1]); $build = $section->toRenderArray($this->getPopulatedContexts($section_storage), TRUE); $layout_definition = $layout->getPluginDefinition(); $region_labels = $layout_definition->getRegionLabels(); foreach ($layout_definition->getRegions() as $region => $info) { if (!empty($build[$region])) { foreach (Element::children($build[$region]) as $uuid) { $build[$region][$uuid]['#attributes']['class'][] = 'js-layout-builder-block'; $build[$region][$uuid]['#attributes']['class'][] = 'layout-builder-block'; $build[$region][$uuid]['#attributes']['data-layout-block-uuid'] = $uuid; $build[$region][$uuid]['#attributes']['data-layout-builder-highlight-id'] = $this->blockUpdateHighlightId($uuid); $build[$region][$uuid]['#contextual_links'] = [ 'layout_builder_block' => [ 'route_parameters' => [ 'section_storage_type' => $storage_type, 'section_storage' => $storage_id, 'delta' => $delta, 'region' => $region, 'uuid' => $uuid, ], // Add metadata about the current operations available in // contextual links. This will invalidate the client-side cache of // links that were cached before the 'move' link was added. // @see layout_builder.links.contextual.yml 'metadata' => [ 'operations' => 'move:update:remove', ], ], ]; } } $build[$region]['layout_builder_add_block']['link'] = [ '#type' => 'link', // Add one to the current delta since it is zero-indexed. '#title' => $this->t('Add block in @section, @region region', ['@section' => $section_label, '@region' => $region_labels[$region]]), '#url' => Url::fromRoute('layout_builder.choose_block', [ 'section_storage_type' => $storage_type, 'section_storage' => $storage_id, 'delta' => $delta, 'region' => $region, ], [ 'attributes' => [ 'class' => [ 'use-ajax', 'layout-builder__link', 'layout-builder__link--add', ], 'data-dialog-type' => 'dialog', 'data-dialog-renderer' => 'off_canvas', ], ] ), ]; $build[$region]['layout_builder_add_block']['#type'] = 'container'; $build[$region]['layout_builder_add_block']['#attributes'] = [ 'class' => ['layout-builder__add-block'], 'data-layout-builder-highlight-id' => $this->blockAddHighlightId($delta, $region), ]; $build[$region]['layout_builder_add_block']['#weight'] = 1000; $build[$region]['#attributes']['data-region'] = $region; $build[$region]['#attributes']['class'][] = 'layout-builder__region'; $build[$region]['#attributes']['class'][] = 'js-layout-builder-region'; $build[$region]['#attributes']['role'] = 'group'; $build[$region]['#attributes']['aria-label'] = $this->t('@region region in @section', [ '@region' => $info['label'], '@section' => $section_label, ]); // Get weights of all children for use by the region label. $weights = array_map(function ($a) { return $a['#weight'] ?? 0; }, $build[$region]); // The region label is made visible when the move block dialog is open. $build[$region]['region_label'] = [ '#type' => 'container', '#attributes' => [ 'class' => ['layout__region-info', 'layout-builder__region-label'], // A more detailed version of this information is already read by // screen readers, so this label can be hidden from them. 'aria-hidden' => TRUE, ], '#markup' => $this->t('Region: @region', ['@region' => $info['label']]), // Ensures the region label is displayed first. '#weight' => min($weights) - 1, ]; } $build['#attributes']['data-layout-update-url'] = Url::fromRoute('layout_builder.move_block', [ 'section_storage_type' => $storage_type, 'section_storage' => $storage_id, ])->toString(); $build['#attributes']['data-layout-delta'] = $delta; $build['#attributes']['class'][] = 'layout-builder__layout'; $build['#attributes']['data-layout-builder-highlight-id'] = $this->sectionUpdateHighlightId($delta); return [ '#type' => 'container', '#attributes' => [ 'class' => ['layout-builder__section'], 'role' => 'group', 'aria-label' => $section_label, ], 'remove' => [ '#type' => 'link', '#title' => $this->t('Remove @section', ['@section' => $section_label]), '#url' => Url::fromRoute('layout_builder.remove_section', [ 'section_storage_type' => $storage_type, 'section_storage' => $storage_id, 'delta' => $delta, ]), '#attributes' => [ 'class' => [ 'use-ajax', 'layout-builder__link', 'layout-builder__link--remove', ], 'data-dialog-type' => 'dialog', 'data-dialog-renderer' => 'off_canvas', ], ], // The section label is added to sections without a "Configure section" // link, and is only visible when the move block dialog is open. 'section_label' => [ '#markup' => $this->t('', ['@section' => $section_label]), '#access' => !$layout instanceof PluginFormInterface, ], 'configure' => [ '#type' => 'link', '#title' => $this->t('Configure @section', ['@section' => $section_label]), '#access' => $layout instanceof PluginFormInterface, '#url' => Url::fromRoute('layout_builder.configure_section', [ 'section_storage_type' => $storage_type, 'section_storage' => $storage_id, 'delta' => $delta, ]), '#attributes' => [ 'class' => [ 'use-ajax', 'layout-builder__link', 'layout-builder__link--configure', ], 'data-dialog-type' => 'dialog', 'data-dialog-renderer' => 'off_canvas', ], ], 'layout-builder__section' => $build, ]; } }