Right now, all the layouts are shown together, regardless of category. It's possible (and even quite common) to have multiple layouts from different providers that have similar names or icons, for example:

  • Display Suite and Panels both include a "Two column" layout
  • Radix Layouts has several layouts with similar regions (as shown in the icons) as Display Suite, but Radix Layouts use the Bootstrap grid system, which might be important to you if your theme is Bootstrap. Having to remember that the Radix Layouts use purple icons and the Display Suite uses black-and-white ones is pretty terrible UX :-)

In order for the user to be able to really understand what they are choosing, the layouts should be grouped into categories the same way as blocks!

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

dsnopek created an issue. See original summary.

aspilicious’s picture

I think we should try to standarize the icons, dunno how yet, the purple isn't looking great in the new shiny UI. Bootstrap layouts is another module that needs to be involved.

I'm willing to update the icon set for DS if needed.

aspilicious’s picture

And I think a settings page where you can choose the categories and/or layouts seems like something we really need. You might want to limit the layouts for webmasters.

swentel’s picture

samuel.mortenson’s picture

#3 Sounds really useful, we should provide sane defaults but configurable categories would let individual distributions/sites have their own preferences.

One thing I'll note is that when Layout categories land in the backend, we should abstract out the current BlockPicker UI elements into sub-tabs of the TabsView. That way the UX would be the same across both tabs and we could address scaling issues in a similar fashion.

dsnopek’s picture

One thing I'll note is that when Layout categories land in the backend...

I'm not sure what you mean by this, but all layouts have categories already per layout_plugin! Or is this just about the extra server-side support in the IPE that this'll need?

samuel.mortenson’s picture

Oops - had no idea layouts from different modules shared common categories. That means we can start on this now by using the same UI components from the BlockPicker. Sorry for the confusion. :/

samuel.mortenson’s picture

Status: Active » Needs review
FileSize
44.14 KB

This turned into quite the patch. The code here includes fixes for #2636538: In the IPE, new Blocks and Layouts do not have their #attachments loaded on render and #2506279: Switching layout should save the configuration form at least once (if applicable) as well.

Here's a summary of changes:

  1. Layouts are grouped by category, per the original request.
  2. Layouts can now be configured via the IPE.
  3. Layout configuration is stored in TempStore the same way Block configuration is.
  4. The LayoutPicker and BlockPicker Views now use the same base JS and CSS for selection and form rendering.
  5. Attachments and behaviors associated with Layouts and Blocks should now work.
dsnopek’s picture

Status: Needs review » Needs work

Awesome work, Sam!

I tested switching between the Panels layouts, which have no settings, and it all worked fine. I installed the 'layout_plugin_example' module which has an example layout with settings, and that worked great too!

However, there were still some problems with the Display Suite layouts: the settings are saved fine, and can be editted fine, but the layout isn't rendering right. I'm not sure what's going on, but it's almost like the IPE wrappers are added, but the actual layout markup isn't?

The code looked great! Here's some quick review:

  1. +++ b/panels_ipe/src/Form/PanelsIPELayoutForm.php
    @@ -0,0 +1,233 @@
    +    // For each block, set the region to the first available region.
    +    foreach ($panels_display->getRegionAssignments() as $region => $region_assignment) {
    +      /** @var \Drupal\Core\Block\BlockPluginInterface $block */
    +      foreach ($region_assignment as $block_id => $block) {
    +        $block->setConfigurationValue('region', $first_region);
    +        $block_config = $block->getConfiguration();
    +        $panels_display->updateBlock($block_id, $block_config);
    +      }
    +    }
    

    It would be nice if it skipped reassigning blocks that were in regions where the same region name exists on the new layout too.

    Most layout collections (Display Suite, Radix Layouts, etc) use consistent names for the regions in all their layouts, so that converting from one to the other will do something sane (ie. switching from sidebar on the left, to sidebar on the right).

    Of course, this breaks down when switching to layouts outside of the same collection, but it's a nice feature if your site is only using one set of layouts.

  2. +++ b/src/Plugin/DisplayVariant/PanelsDisplayVariant.php
    @@ -161,6 +161,24 @@ class PanelsDisplayVariant extends BlockDisplayVariant {
    +  public function setLayout($layout_id, $layout_settings) {
    +    $this->configuration['layout'] = $layout_id;
    +    $this->configuration['layout_settings'] = $layout_settings;
    +    $this->layout = $this->layoutManager->createInstance($layout_id, $layout_settings);
    +    return $this;
    +  }
    

    We're also adding a similar function in #2631854: Create PanelsDisplayManager and improve API for making working with PanelsDisplayVariants easier. I don't know which one will get merged first, but it'd be great if they were consistent, and that issue has put a lot of thought into the API (since it's a "make a better Panels API" issue :-)).

    Could you copy the implementation for this function from that issue?

dsnopek’s picture

Hrm. Following up on the Display Suite layout issues: they started working for me after a 'drush cr', and now I can't reproduce the problem. So, that might have just been a fluke on my system? If someone else tries the Display Suite layouts and doesn't have any issues, then we can probably write that one off to user error. :-)

swentel’s picture

Did a test with Display Suite, no problems for me here :)

samuel.mortenson’s picture

Status: Needs work » Needs review
FileSize
45.46 KB
6.04 KB

Here's a new patch that addresses #9 - For the record I think that the way we move from region to region should be more generic, which we've talked about in the past but hasn't really brought up formally in issues. Expect some Layout Plugin patches on my behalf soon. ;-)

dsnopek’s picture

Status: Needs review » Reviewed & tested by the community

Tested #12 and everything works great! Code looks good too! RTBC'd :-)

  • samuel.mortenson committed 5f1a074 on 8.x-3.x
    Issue #2636990 by samuel.mortenson, dsnopek, aspilicious, swentel:...
samuel.mortenson’s picture

Status: Reviewed & tested by the community » Fixed

Thanks everyone! @aspilicious we didn't catch everything you wanted (UI to configure categories) in this patch, so if you want to create new features for that I'd appreciate it.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.