diff --git a/core/modules/layout_builder/css/layout-builder.css b/core/modules/layout_builder/css/layout-builder.css index c920f23bd4..8977c67710 100644 --- a/core/modules/layout_builder/css/layout-builder.css +++ b/core/modules/layout_builder/css/layout-builder.css @@ -85,3 +85,9 @@ display: block; padding-top: 0.55em; } + +[data-layout-builder-highlight-id].layout-builder-highlight { + position: relative; + box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.5); + z-index: 1; +} diff --git a/core/modules/layout_builder/js/layout-builder.es6.js b/core/modules/layout_builder/js/layout-builder.es6.js index f8f7b0be46..d90ea4aed6 100644 --- a/core/modules/layout_builder/js/layout-builder.es6.js +++ b/core/modules/layout_builder/js/layout-builder.es6.js @@ -51,4 +51,18 @@ }); }, }; + $(window).on('dialog:aftercreate', (event, dialog, $element) => { + $('.layout-builder-highlight').removeClass('layout-builder-highlight'); + if ($element.find('[data-layout-builder-target-highlight-id]')) { + const id = $element + .find('[data-layout-builder-target-highlight-id]') + .attr('data-layout-builder-target-highlight-id'); + $(`[data-layout-builder-highlight-id="${id}"]`).addClass( + 'layout-builder-highlight', + ); + } + }); + $(window).on('dialog:afterclose', () => { + $('.layout-builder-highlight').removeClass('layout-builder-highlight'); + }); })(jQuery, Drupal); diff --git a/core/modules/layout_builder/js/layout-builder.js b/core/modules/layout_builder/js/layout-builder.js index 0f0de275ef..993fdd10d0 100644 --- a/core/modules/layout_builder/js/layout-builder.js +++ b/core/modules/layout_builder/js/layout-builder.js @@ -32,4 +32,14 @@ }); } }; + $(window).on('dialog:aftercreate', function (event, dialog, $element) { + $('.layout-builder-highlight').removeClass('layout-builder-highlight'); + if ($element.find('[data-layout-builder-target-highlight-id]')) { + var id = $element.find('[data-layout-builder-target-highlight-id]').attr('data-layout-builder-target-highlight-id'); + $('[data-layout-builder-highlight-id="' + id + '"]').addClass('layout-builder-highlight'); + } + }); + $(window).on('dialog:afterclose', function () { + $('.layout-builder-highlight').removeClass('layout-builder-highlight'); + }); })(jQuery, Drupal); \ No newline at end of file diff --git a/core/modules/layout_builder/src/Controller/ChooseBlockController.php b/core/modules/layout_builder/src/Controller/ChooseBlockController.php index 4f25eb09bd..0a28212be8 100644 --- a/core/modules/layout_builder/src/Controller/ChooseBlockController.php +++ b/core/modules/layout_builder/src/Controller/ChooseBlockController.php @@ -63,6 +63,14 @@ public function build(SectionStorageInterface $section_storage, $delta, $region) $build['#type'] = 'container'; $build['#attributes']['class'][] = 'block-categories'; + $build['#attributes']['data-layout-builder-target-highlight-id'] = implode('-', [ + 'block', + $section_storage->getStorageType(), + $section_storage->getStorageId(), + $delta, + $region, + ]); + // @todo Explicitly cast delta to an integer, remove this in // https://www.drupal.org/project/drupal/issues/2984509. $delta = (int) $delta; diff --git a/core/modules/layout_builder/src/Controller/ChooseSectionController.php b/core/modules/layout_builder/src/Controller/ChooseSectionController.php index 3405692e53..7c2fb26e09 100644 --- a/core/modules/layout_builder/src/Controller/ChooseSectionController.php +++ b/core/modules/layout_builder/src/Controller/ChooseSectionController.php @@ -98,6 +98,12 @@ public function build(SectionStorageInterface $section_storage, $delta) { 'class' => [ 'layout-selection', ], + 'data-layout-builder-target-highlight-id' => implode('-', [ + 'section', + $section_storage->getStorageType(), + $section_storage->getStorageId(), + $delta, + ]), ], ]; diff --git a/core/modules/layout_builder/src/Controller/LayoutBuilderController.php b/core/modules/layout_builder/src/Controller/LayoutBuilderController.php index c01fea544b..eb5b72987d 100644 --- a/core/modules/layout_builder/src/Controller/LayoutBuilderController.php +++ b/core/modules/layout_builder/src/Controller/LayoutBuilderController.php @@ -171,6 +171,12 @@ protected function buildAddSectionLink(SectionStorageInterface $section_storage, '#type' => 'container', '#attributes' => [ 'class' => ['new-section'], + 'data-layout-builder-highlight-id' => implode('-', [ + 'section', + $storage_type, + $storage_id, + $delta, + ]), ], ]; } @@ -234,7 +240,16 @@ protected function buildAdministrativeSection(SectionStorageInterface $section_s ), ]; $build[$region]['layout_builder_add_block']['#type'] = 'container'; - $build[$region]['layout_builder_add_block']['#attributes'] = ['class' => ['new-block']]; + $build[$region]['layout_builder_add_block']['#attributes'] = [ + 'class' => ['new-block'], + 'data-layout-builder-highlight-id' => implode('-', [ + 'block', + $storage_type, + $storage_id, + $delta, + $region, + ]), + ]; $build[$region]['layout_builder_add_block']['#weight'] = 1000; $build[$region]['#attributes']['data-region'] = $region; $build[$region]['#attributes']['class'][] = 'layout-builder--layout__region';