Provide a Layout Overview dialog that allows performing all actions in a text/form based method

Postponing on #2995689: Allow reordering blocks without a pointer device for now.
I have some non-functional code but I spent a good chunk of time on it. Gotta dig it up.

Here is an idea that I chatted with @andrewmacpherson about.

1. Provides a "Layout Overview" link at the top of the Layout Builder
2. This opens the off-canvas dialog with all the of Sections/Regions/Blocks listed.
3. It has all(I think) of the actions available via links on the Sections/Regions/Blocks.
4. All of the action links from the overview remain in the off-canvas
5. When the action is finish, Block added, Section removed, etc. the overview is reopened
6. So multiple actions can be performed and the overview remains open
7. For moving blocks I have a @todo for #2995689: Allow reordering blocks without a pointer device. Once that is done each block would have a "Move block" action.

This started from the code @tim.plunkett mentioned in #3 but that was a totally separate UI.

@andrewmacpherson was interested in having this overview be a sortable list but I thought it might be to cluttered and if you had a very complicated layout moving a block could be confusing I think.

This patch

1. Fixes problem with single item dropbottons. This should be fixed in the off-canvas reset. Very unsure about the actual CSS here
2. Change the "remove block" and "configure block" links to just "Remove" and "configure"
3. Change the region "Add block" link to an operation
4. fixes a bug where all the blocks should in 1 region for section even if in different regions

Here a 2 minute demo video: https://youtu.be/Jv7RgxiDW1U

Just fixing bug in #5

I like where this is heading. Unassigning for now as clearly others are working on it :D

Thanks for the patch. I found some minor things below. I will try to test this.

1. +++ b/core/modules/layout_builder/css/layout-builder.css
   @@ -114,3 +114,31 @@
   +@todo Open an issue to fix .dropbutton-single in off-canvas reset
   

   Nitpick: * and space before @todo and add period.

2. +++ b/core/modules/layout_builder/css/layout-builder.css
   @@ -114,3 +114,31 @@
   +#drupal-off-canvas .layout-overview td .dropbutton-single  .dropbutton-widget .dropbutton {
   

   Nitpick: Change double space to single space before .dropbutton-widget.

3. +++ b/core/modules/layout_builder/css/layout-builder.css
   @@ -114,3 +114,31 @@
   +#drupal-off-canvas .layout-overview td .dropbutton-single  .dropbutton-widget {
   

   Same as above.

4. +++ b/core/modules/layout_builder/css/layout-builder.css
   @@ -114,3 +114,31 @@
   +#drupal-off-canvas .layout-overview td .dropbutton-single  .dropbutton-widget .dropbutton a {
   

   Same as above.

5. +++ b/core/modules/layout_builder/css/layout-builder.css
   @@ -114,3 +114,31 @@
   +#drupal-off-canvas .layout-overview td .dropbutton-single  .dropbutton-widget .dropbutton .dropbutton-action {
   
   +++ b/core/modules/layout_builder/src/Controller/ChooseBlockController.php
   @@ -22,6 +22,7 @@ class ChooseBlockController implements ContainerInjectionInterface {
      use AjaxHelperTrait;
      use LayoutBuilderContextTrait;
      use StringTranslationTrait;
   +  use LayoutRebuildTrait;
   

   Nitpick: Change to alphabetical.

6. +++ b/core/modules/layout_builder/src/Controller/ChooseBlockController.php
   @@ -22,6 +22,7 @@ class ChooseBlockController implements ContainerInjectionInterface {
      use AjaxHelperTrait;
      use LayoutBuilderContextTrait;
      use StringTranslationTrait;
   +  use LayoutRebuildTrait;
   

   Same as above.

7. +++ b/core/modules/layout_builder/src/Controller/ChooseSectionController.php
   @@ -20,6 +20,7 @@ class ChooseSectionController implements ContainerInjectionInterface {
      use AjaxHelperTrait;
      use StringTranslationTrait;
   +  use LayoutRebuildTrait;
   

   Same as above.

8. +++ b/core/modules/layout_builder/src/Controller/LayoutRebuildTrait.php
   --- /dev/null
   +++ b/core/modules/layout_builder/src/Controller/OverViewController.php
   

   Nitpick: OverView => Overview?

9. +++ b/core/modules/layout_builder/src/Controller/OverViewController.php
   @@ -0,0 +1,333 @@
   + */
   +class OverViewController {
   

   Nitpick: OverView => Overview?

10. +++ b/core/modules/layout_builder/src/Controller/OverViewController.php
    @@ -0,0 +1,333 @@
    +  use LayoutRebuildTrait;
    +
    +
    

    Nitpick: Extra line.

11. +++ b/core/modules/layout_builder/src/Controller/OverViewController.php
    @@ -0,0 +1,333 @@
    +    for ($i = 0; $i < count($section_storage); $i++) {
    +      $table["add-section-$i"] = $this->buildAddSectionLink($section_storage, $i);
    +      $table += $this->buildAdministrativeSection($section_storage, $i);
    +    }
    +    $table["add-section-$i"] = $this->buildAddSectionLink($section_storage, $i);
    

    Nitpick: Use $this->sectionStorage instead of $section_storage?

12. +++ b/core/modules/layout_builder/src/Controller/OverViewController.php
    @@ -0,0 +1,333 @@
    +    /*
    +    $operations['move'] = [
    +      'title' => $this->t('Move'),
    +      'url' => Url::fromRoute('layout_builder.move_block_form', $route_parameters, $this->getOverviewOptions(TRUE)),
    +      'attributes' => [
    +        'class' => ['use-ajax', 'configure-block'],
    +        'data-dialog-type' => 'dialog',
    +        'data-dialog-renderer' => 'off_canvas',
    +      ],
    +    ];
    +    */
    

    Nitpick: Remove commented out code for now and just leave the @todo?

13. +++ b/core/modules/layout_builder/src/Controller/OverViewController.php
    @@ -0,0 +1,333 @@
    +    $storage_type = $section_storage->getStorageType();
    +    $storage_id = $section_storage->getStorageId();
    

    Nitpick: Not sure if these need to be defined as they are only used once.

14. +++ b/core/modules/layout_builder/src/Controller/OverViewController.php
    @@ -0,0 +1,333 @@
    +    }
    +
    +
    +    return $build;
    

    Nitpick: Extra empty line.

15. +++ b/core/modules/layout_builder/src/Controller/OverViewController.php
    @@ -0,0 +1,333 @@
    +    $storage_type = $section_storage->getStorageType();
    

    This isn't used in this function.

16. +++ b/core/modules/layout_builder/src/Controller/OverViewController.php
    @@ -0,0 +1,333 @@
    +    $storage_id = $section_storage->getStorageId();
    

    Same as above.

I tested the patch in #7 as follows:

1. Enabled layout builder modules
2. Configured layout builder on page content type
3. Go to layout page
4. Clicked "Layout overview" link
5. Used the overview form by adding new section and one block per section
6. Clicked the "X" in the overview form
7. Clicked "Save Layout"
8. The regular layout tool and the page had the blocks that were added to the new section

I think the main issue I noticed was that the right side of the overview form was slightly cut off. Also, I don't think it's obvious what "Layout overview" means and what it is intended for. Clicking on it is harmless enough though. Visually the "Layout overview" link is merged with the "Add Section" box. I see that it has the same styling as the "Configure section" link but "Configure section" is for that particular box whereas "Layout overview" is for the entire layout so it seems like it should be separated more from the boxes somehow. I don't have suggestions to make this better other than perhaps add some space below it for now.

I'll mark "Needs work" in case any of the items in comment #9 should be addressed, and to fix the slight alignment issue.

Untagging as the parent issue has the tag. Still needs an IS update

@Kristen Pol thanks for the review
re #9

1. Made this a single line comment as I see in other css @todo's in core. We either need to remove this or add the follow up before this issue is done
2-10 fixed
11. Actually I don't think we need $this->sectionStorage at all. removing.
12. Leaving todo
13. removing
14-16. fixed

re #10

I think the main issue I noticed was that the right side of the overview form was slightly cut off.

I fixed this by setting the width the off-canvas dialog to be wider by 50px.

@todo resolve the style issue mentioned about the link.

+++ b/core/modules/layout_builder/layout_builder.routing.yml
@@ -1,3 +1,15 @@
+    _controller: '\Drupal\layout_builder\Controller\OverViewController::overview'

I forgot to change the case of the classname here.

I am updating the Issue Summary to reflect the current approach

fixing the title and some minor css changes to "Add section which was pulling CSS from preview area. Will still need more css fixes

Fixing tag
NW for tests and IS update

Rerolled, added move to the block options, added tests that included moving some methods from MoveBlockFormTest into a trait + fixed a few code standards nits.

Resolved two coding standard issues & added an interdiff.

Marking NW for the issue summary and tests.

Reroll

Fixed custom command failures in #29. Retaining that status as 'Needs work' to address #25, thanks!