Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Micemade opened this issue Apr 30, 2024 · 5 comments
Closed

Comments

@Micemade
Copy link

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
Copy link
Author

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.

@damien-schneider
Copy link
Contributor

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
Copy link
Author

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

Screen.Recording.2024-04-30.at.12.32.18.mov

@adumesny
Copy link
Member

adumesny commented May 26, 2024

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
Copy link
Author

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 ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants