Cross-Site Copy/Pasting of V4 Elements Doesn't Include Global Classes

[rajin-skele]

Description

👋 Hey Elementor Team,

Thanks for the v4 Global Classes experiment. I've been testing it across a couple of installs and noticed a gap: when copying an element that uses global classes, the clipboard JSON only includes class IDs, not the definitions. That breaks the paste between two different sites.

The above screenshot shows Site A with a global class "hero" created that affects the layout in the selected div. The div block was copied as-is.

---

The above screenshot shows Site B where we try to paste the same div block, but we see that the global class "hero" (which contained the formatting for the layout) does not get carried over.

Current clipboard JSON structure (Example)

When I copy a container with a heading widget that uses global classes, the clipboard JSON looks like this (simplified):

{
  "type": "elementor",
  "siteurl": "http://twentyfirsttest.local/wp-json/",
  "elements": [
    {
      "id": "55567f0",
      "elType": "container",
      "settings": { ... },
      "elements": [
        {
          "id": "791d4e0",
          "elType": "widget",
          "widgetType": "e-heading",
          "settings": {
            "classes": {
              "$$type": "classes",
              "value": ["e-791d4e0-bc448f2", "g-8091449", "g-5ef75af"]
            }
          }
        }
      ]
    }
  ]
}

The g-8091449 and g-5ef75af IDs reference global classes, but their definitions aren't included.

What's missing

The kit stores global classes in _elementor_global_classes post meta with this structure:

{
  "items": [
    {
      "id": "g-8091449",
      "label": "Primary Button",
      "tokens": {
        "color": "#fff",
        "background-color": "#1c5fff",
        "padding": "16px 32px"
      },
      "meta": {
        "category": "Buttons"
      }
    },
    {
      "id": "g-5ef75af",
      "label": "Heading Style",
      "tokens": { ... }
    }
  ],
  "order": ["g-8091449", "g-5ef75af"]
}

This data never leaves the source site. When I paste into Site B, Elementor looks for g-8091449 in that site's kit, can't find it (IDs are site-specific when created by the user), and the widget loses its styling.

Proposed solution

Include a globalClasses block in the clipboard JSON that mirrors the kit structure:

{
  "type": "elementor",
  "siteurl": "http://twentyfirsttest.local/wp-json/",
  "elements": [
    {
      "id": "55567f0",
      "elType": "container",
      "settings": { ... },
      "elements": [ ... ]
    }
  ],
  "globalClasses": {
    "items": [
      {
        "id": "g-8091449",
        "label": "Primary Button",
        "tokens": { ... },
        "meta": { ... }
      },
      {
        "id": "g-5ef75af",
        "label": "Heading Style",
        "tokens": { ... }
      }
    ],
    "order": ["g-8091449", "g-5ef75af"]
  }
}

Paste reconciliation logic:

On paste, reconcile each class in globalClasses.items:

1. If the ID exists in the target kit's _elementor_global_classes, reuse it.
2. If the ID is new but a class with the same label exists, map the incoming ID to the local one and update the pasted element's classes.value array.
3. If neither matches, insert the class into the kit's items array (with the same class name, and properties; and potentially update order too) before finalizing the paste.

This mirrors the kit import/export runner, scoped to the classes referenced in the clipboard. Other builders already handle this when copying and pasting across two different sites via the clipboard, and it's become essential for teams moving components between staging and production sites.

🥳 I'm sharing this because I'm excited about global classes and want to see them work seamlessly across different sites. Happy to help test if you're already exploring this!

Agreement

• I confirm I have read and followed the Editor V4 Discussion Form guidelines, and agree this discussion may be closed without warning.