Use String.match to correlate regions when switching Layouts in Panels IPE [#2878684]

Problem/Motivation

We have a lot of layouts on our site, and very few of them have identical region names. As a result, when using Panels IPE to switch layouts, most blocks end up in the first region of the new layout as no region names are identical.

Here are two example layouts provided by the Zurb Foundation theme:

foundation_2col:
  label: 'Foundation: 2 column row'
  path: layouts/foundation_2col
  template: foundation-2col
  category: 'Foundation: 2'
  regions:
    left:
      label: Left
    right:
      label: Right
  icon: foundation_2col.png

foundation_2col_bricks:
  label: 'Foundation: 2 column bricks'
  path: layouts/foundation_2col_bricks
  template: foundation-2col-bricks
  category: 'Foundation: 2'
  regions:
    top:
      label: Top
    above_left:
      label: Above Left
    above_right:
      label: Above Right
    middle:
      label: Middle
    below_left:
      label: Below Left
    below_right:
      label: Below Right
    bottom:
      label: Bottom
  icon: foundation_2col_bricks.png

As an end user, I would expect "left" from foundation_2col to map to "above_left" or "below_left" from foundation_2col_bricks, but the current logic requires region names to be equal.

Proposed resolution

Use String.match() to correlate regions, so that if the old region name contains the new region name, or vice versa, that new region is used. Some examples of mappings:

middle => middle (exact matches will take priority over fuzzy matches)
left => above_left
below_right => right
top => featured_top

Remaining tasks

Review patch, talk about usefulness. This is a nice-to-have for sure and is low priority IMO.

User interface changes

None.

API changes

None.

Data model changes

None.

Comment	File	Size	Author
#3	panels-ipe-2878684-3.patch	1.12 KB	samuel.mortenson
	panels-fuzzy-region-match.patch	347 bytes	samuel.mortenson

Issue fork panels-2878684

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

2878684-use-string.match-to changes, plain diff MR !24
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

16 May 2017 at 00:38

samuel.mortenson created an issue. See original summary.

Comment #2

16 May 2017 at 01:03

Status:

Needs review

» Needs work

The last submitted patch, panels-fuzzy-region-match.patch, failed testing.

Comment #3

samuel.mortenson

he/him

English

commented 16 May 2017 at 01:52

Status:

Needs work

» Needs review

Status	File	Size
new	panels-ipe-2878684-3.patch	1.12 KB

1 file was hidden/shown/deleted

Status	File	Size
hidden	panels-fuzzy-region-match.patch	347 bytes

git status != git diff, hah!

Comment #4

vikasshishodia51 commented 11 December 2017 at 05:41

Hi Samuel,
I am facing a Jquery error after applying this patch.

TypeError: item.get(...) is NULL on line number 177 of AppView.js

When i click on a layout to select the this will show the same layout after Ajax, instead of showing me the SAVE button.

So i am unable to update the changed layout. If i refresh the page then Panelizer show the SAVE button.

Please Help on this.

Comment #5

samuel.mortenson

he/him

English

commented 11 December 2017 at 05:50

@vikasshishodia51 Interesting, is it possible that you have a custom layout that doesn't have a "name" property?

Comment #6

vikasshishodia51 commented 12 December 2017 at 06:38

@samuel.mortenson thnx for your reply.

Yes, i have a custom layout and created two files in that module xyz.info.yml and xyz.layouts.yml
So can you please guide me that in which file i have to incorporate "name" property.

xyz.info.yml

name: Crain Custom Layout
type: module
description: 'Registers a Custom Layout to use for Article.'
package: Crain
hidden: true
version: '8.x'
core: '8.x'
project: 'crain_custom_layout'

xyz.layouts.yml

2col_8x4_layout:
  label: Two column 8x4
  name: 2col_8x4_layout
  category: Custom
  template: 2col-8x4-layout
  path: layouts/2col-8x4
  default_region: middle
  icon: 2col-8x4.png
  regions:
    featured_left:
      label: Featured 8 Columns
    featured_right:
      label: Featured 4 Columns
    middle:
      label: Middle

Even, i have tested by uninstalling my custom layout module and still facing the same error.

Comment #7

samuel.mortenson

he/him

English

commented 12 December 2017 at 16:25

@vikasshishodia51 That layout looks alright - are you using the core Layout Discovery module or the contrib Layout Plugin module? I would assume Layout Discovery, but I want to make sure.

Comment #8

vikasshishodia51 commented 13 December 2017 at 05:47

@samuel.mortenson i am using Lightning Layout module

Comment #9

vikasshishodia51 commented 19 December 2017 at 09:59

Hi @samuel.mortenson,

If i use the below code then everything works fine.

var potential_regions = layout.get('regionCollection').filter(function (item) {
if (item.get('name') != null){
return item.get('name').match(region.get('name')) || region.get('name').match(item.get('name'));
}
});

Comment #10

alina.basarabeanu commented 14 August 2023 at 16:16

Status:

Needs review

» Reviewed & tested by the community

The patch from #3 fixed the issue in Drupal Version 9.5.10 and panels 4.7.0.
Can this be merged into the next stable release as still need it?
Thank you