Gridstack in WordPress editor (Gutenberg) mobile preview iframe not working.

[Micemade]

Subject of the issue

I am trying to implement Gridstack.js in WP editor plugin, and there's an issue with WP editor's screen when in mobile preview, The Gridstack fails to initialize with message in console:

GridStack.initAll() no grid was found with selector ".grid-stack" - element missing or wrong selector ?
Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.

The issue seem to be related to iframe in which the preview is loaded (only for mobile preview). The desktop preview works fine. I am not sure if this issue is lib or Gutenberg related ...

I am using the exact same Gridstack code provided in the React demo: https://github.com/gridstack/gridstack.js/blob/master/demo/react.html The Gridstack ( ) component is simply called in parent component, no customization is done.

Your environment

• Gridstack v.10.1.2
• WordPress (Gutenberg)
• MacOS
• Node v.18

Steps to reproduce

Demo made with WP Studio, this is a temporary site which will destroy itself in 7 days (until May 6.th 2024): https://intellectual-wildfowl.wp.build/wp-admin/post.php?post=245&action=edit If anyone wants to give a look at this, I will provide login credentials

A video: https://github.com/gridstack/gridstack.js/assets/25330880/fec38279-734f-4fe3-8be0-f1a6ae2f1ec3

Expected behavior

Obviously, there shouldn't be error when re-initializing Gridstack in iframe.

[Micemade]

This comment by @damien-schneider seems promising: https://github.com/gridstack/gridstack.js/issues/2002#issuecomment-2067712497 The Gridstack in Gutenberg is not crashing, although there are some "weird behaviours" ... will post a video later.

[damien-schneider]

This comment by @damien-schneider seems promising: #2002 (comment) The Gridstack in Gutenberg is not crashing, although there are some "weird behaviours" ... will post a video later.

Yes I'll try to work on it as soon as I have free time.

[Micemade]

When changing to tablet/mobile view, the items lose the drop ability, and the resize is weird ...

https://github.com/gridstack/gridstack.js/assets/25330880/3e0c8178-1e39-4a5e-807e-307ae8c9fc10

[adumesny]

that error GridStack.initAll() no grid was found with selector ".grid-stack" means it can't find the dom element. assuming I'm not missing something below, not much the lib can do. YOU can pass it the element though (if an iframe the GS code needs to be in there as well). I would debug this and see why getElementById()/querySelector() are not finding.

  static getElement(els: GridStackElement, root: HTMLElement | Document = document): HTMLElement {
    if (typeof els === 'string') {
      const doc = ('getElementById' in root) ? root as Document : undefined;
      if (!els.length) return null;
      if (doc && els[0] === '#') {
        return doc.getElementById(els.substring(1));
      }
      if (els[0] === '#' || els[0] === '.' || els[0] === '[') {
        return root.querySelector(els);
      }

      // if we start with a digit, assume it's an id (error calling querySelector('#1')) as class are not valid CSS
      if (doc && !isNaN(+els[0])) { // start with digit
        return doc.getElementById(els);
      }

      // finally try string, then id, then class
      let el = root.querySelector(els);
      if (doc && !el) { el = doc.getElementById(els) }
      if (!el) { el = root.querySelector('.' + els) }
      return el as HTMLElement;
    }
    return els;
  }

[Micemade]

Thanks, @adumesny , for taking time to reply. I am aware that Gridstack cannot find the selector needed to initialize. This issue is AFAIK related to React and WordPress editor specifics. Like I said, @damien-schneider was on the right track with their solution in the #2002 comment ...