@elementor/editor-canvas 3.32.0-38 → 3.32.0-40

package/dist/index.js

@@ -42,6 +42,48 @@ module.exports = __toCommonJS(index_exports);
 // src/init.tsx
 var import_editor = require("@elementor/editor");
 
+// src/components/classes-rename.tsx
+var import_react = require("react");
+var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_utils = require("@elementor/utils");
+var ClassesRename = () => {
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = subscribeToStylesRepository();
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return null;
+};
+var subscribeToStylesRepository = () => {
+  return import_editor_styles_repository.stylesRepository.subscribe((previous, current) => {
+    if (!previous || !current) {
+      return;
+    }
+    const currentIds = Object.keys(current);
+    currentIds.forEach((id) => {
+      const isStyleChanged = previous[id] && (0, import_utils.hash)(previous[id]) !== (0, import_utils.hash)(current[id]);
+      if (!isStyleChanged) {
+        return;
+      }
+      const previousStyle = previous[id];
+      const currentStyle = current[id];
+      if (previousStyle.label !== currentStyle.label) {
+        renameClass(previousStyle.label, currentStyle.label);
+      }
+    });
+  });
+};
+var renameClass = (oldClassName, newClassName) => {
+  Object.values((0, import_editor_documents.getV1DocumentsManager)().documents).forEach((document) => {
+    const container = document.container;
+    container.view?.el?.querySelectorAll(`.elementor .${oldClassName}`).forEach((element) => {
+      element.classList.replace(oldClassName, newClassName);
+    });
+  });
+};
+
 // src/components/elements-overlays.tsx
 var React2 = __toESM(require("react"));
 var import_editor_elements = require("@elementor/editor-elements");
@@ -50,12 +92,12 @@ var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 // src/components/element-overlay.tsx
 var React = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
-var import_react4 = require("@floating-ui/react");
+var import_react5 = require("@floating-ui/react");
 
 // src/hooks/use-bind-react-props-to-element.ts
-var import_react = require("react");
+var import_react2 = require("react");
 function useBindReactPropsToElement(element, getProps) {
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const el = element;
     const { events, attrs } = groupProps(getProps());
     events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
@@ -87,18 +129,18 @@ function groupProps(props) {
 }
 
 // src/hooks/use-floating-on-element.ts
-var import_react2 = require("react");
-var import_react3 = require("@floating-ui/react");
+var import_react3 = require("react");
+var import_react4 = require("@floating-ui/react");
 function useFloatingOnElement({ element, isSelected }) {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const { refs, floatingStyles, context } = (0, import_react3.useFloating)({
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const { refs, floatingStyles, context } = (0, import_react4.useFloating)({
     // Must be controlled for interactions (like hover) to work.
     open: isOpen || isSelected,
     onOpenChange: setIsOpen,
-    whileElementsMounted: import_react3.autoUpdate,
+    whileElementsMounted: import_react4.autoUpdate,
     middleware: [
       // Match the floating element's size to the reference element.
-      (0, import_react3.size)({
+      (0, import_react4.size)({
         apply({ elements, rects }) {
           Object.assign(elements.floating.style, {
             width: `${rects.reference.width + 2}px`,
@@ -107,10 +149,10 @@ function useFloatingOnElement({ element, isSelected }) {
         }
       }),
       // Center the floating element on the reference element.
-      (0, import_react3.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
+      (0, import_react4.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
     ]
   });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     refs.setReference(element);
   }, [element, refs]);
   return {
@@ -135,10 +177,10 @@ var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
 }));
 function ElementOverlay({ element, isSelected, id }) {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
-  const { getFloatingProps, getReferenceProps } = (0, import_react4.useInteractions)([(0, import_react4.useHover)(context)]);
+  const { getFloatingProps, getReferenceProps } = (0, import_react5.useInteractions)([(0, import_react5.useHover)(context)]);
   useBindReactPropsToElement(element, getReferenceProps);
   const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && /* @__PURE__ */ React.createElement(import_react4.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+  return isVisible && /* @__PURE__ */ React.createElement(import_react5.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
       ref: floating.setRef,
@@ -233,9 +275,9 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
-var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 
 // src/utils/abort-previous-runs.ts
@@ -270,10 +312,10 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-on-mount.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useOnMount(cb) {
-  const mounted = (0, import_react5.useRef)(false);
-  (0, import_react5.useEffect)(() => {
+  const mounted = (0, import_react6.useRef)(false);
+  (0, import_react6.useEffect)(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -282,7 +324,7 @@ function useOnMount(cb) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_editor_styles = require("@elementor/editor-styles");
 
 // src/renderers/create-props-resolver.ts
@@ -404,7 +446,7 @@ var enqueueFont = (fontFamily, context = "preview") => {
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return (0, import_react6.useMemo)(() => {
+  return (0, import_react7.useMemo)(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles.getStylesSchema)(),
@@ -419,16 +461,16 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_utils2 = require("@elementor/utils");
+var import_utils3 = require("@elementor/utils");
 
 // src/renderers/errors.ts
-var import_utils = require("@elementor/utils");
-var UnknownStyleTypeError = (0, import_utils.createError)({
+var import_utils2 = require("@elementor/utils");
+var UnknownStyleTypeError = (0, import_utils2.createError)({
   code: "unknown_style_type",
   message: "Unknown style type"
 });
@@ -496,7 +538,7 @@ function customCssToString(customCss) {
   if (!(0, import_editor_v1_adapters3.isExperimentActive)(import_editor_v1_adapters3.EXPERIMENTAL_FEATURES.CUSTOM_CSS) || !customCss?.raw) {
     return "";
   }
-  const decoded = (0, import_utils2.decodeString)(customCss.raw);
+  const decoded = (0, import_utils3.decodeString)(customCss.raw);
   if (!decoded.trim()) {
     return "";
   }
@@ -507,7 +549,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
-  return (0, import_react7.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -520,9 +562,9 @@ function useStyleRenderer(resolve) {
 function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
-  const [styleItems, setStyleItems] = (0, import_react8.useState)({});
-  const providerAndSubscribers = (0, import_react8.useMemo)(() => {
-    return import_editor_styles_repository.stylesRepository.getProviders().map((provider) => {
+  const [styleItems, setStyleItems] = (0, import_react9.useState)({});
+  const providerAndSubscribers = (0, import_react9.useMemo)(() => {
+    return import_editor_styles_repository2.stylesRepository.getProviders().map((provider) => {
       return {
         provider,
         subscriber: createProviderSubscriber({
@@ -533,7 +575,7 @@ function useStyleItems() {
       };
     });
   }, [renderStyles]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -548,7 +590,7 @@ function useStyleItems() {
     });
   });
   const breakpointsOrder = (0, import_editor_responsive2.getBreakpoints)().map((breakpoint) => breakpoint.id);
-  return (0, import_react8.useMemo)(
+  return (0, import_react9.useMemo)(
     () => Object.values(styleItems).sort(({ provider: providerA }, { provider: providerB }) => providerA.priority - providerB.priority).flatMap(({ items }) => items).sort(({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => {
       return breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
     }),
@@ -645,7 +687,7 @@ var attributesTransformer = createTransformer((values) => {
 });
 
 // src/transformers/settings/classes-transformer.ts
-var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
 function createClassesTransformer() {
   const cache = /* @__PURE__ */ new Map();
   return createTransformer((value) => {
@@ -658,7 +700,7 @@ function createClassesTransformer() {
   });
 }
 function getCssName(id) {
-  const provider = import_editor_styles_repository2.stylesRepository.getProviders().find((p) => {
+  const provider = import_editor_styles_repository3.stylesRepository.getProviders().find((p) => {
     return p.actions.all().find((style) => style.id === id);
   });
   if (!provider) {
@@ -1310,7 +1352,7 @@ var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
@@ -1389,7 +1431,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters8.undoable)(
           revertData.styleId = (0, import_editor_elements5.createElementStyle)({
             elementId,
             classesProp,
-            label: import_editor_styles_repository3.ELEMENTS_STYLES_RESERVED_LABEL,
+            label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
             ...firstVariant,
             additionalVariants
           });
@@ -1416,7 +1458,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters8.undoable)(
         (0, import_editor_elements5.createElementStyle)({
           elementId: container.id,
           classesProp,
-          label: import_editor_styles_repository3.ELEMENTS_STYLES_RESERVED_LABEL,
+          label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
           styleId: revertData.styleId,
           ...firstVariant,
           additionalVariants
@@ -1466,7 +1508,7 @@ var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements6 = require("@elementor/editor-elements");
-var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
 var undoableResetElementStyle = () => (0, import_editor_v1_adapters10.undoable)(
@@ -1496,7 +1538,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters10.undoable)(
             elementId,
             classesProp,
             styleId,
-            label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
+            label: import_editor_styles_repository5.ELEMENTS_STYLES_RESERVED_LABEL,
             ...firstVariant,
             additionalVariants
           });
@@ -1552,6 +1594,10 @@ function init() {
     id: "canvas-style-render",
     component: StyleRenderer
   });
+  (0, import_editor.injectIntoLogic)({
+    id: "classes-rename",
+    component: ClassesRename
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,5 +1,47 @@
 // src/init.tsx
-import { injectIntoTop } from "@elementor/editor";
+import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
+
+// src/components/classes-rename.tsx
+import { useEffect } from "react";
+import { getV1DocumentsManager } from "@elementor/editor-documents";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { hash } from "@elementor/utils";
+var ClassesRename = () => {
+  useEffect(() => {
+    const unsubscribe = subscribeToStylesRepository();
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return null;
+};
+var subscribeToStylesRepository = () => {
+  return stylesRepository.subscribe((previous, current) => {
+    if (!previous || !current) {
+      return;
+    }
+    const currentIds = Object.keys(current);
+    currentIds.forEach((id) => {
+      const isStyleChanged = previous[id] && hash(previous[id]) !== hash(current[id]);
+      if (!isStyleChanged) {
+        return;
+      }
+      const previousStyle = previous[id];
+      const currentStyle = current[id];
+      if (previousStyle.label !== currentStyle.label) {
+        renameClass(previousStyle.label, currentStyle.label);
+      }
+    });
+  });
+};
+var renameClass = (oldClassName, newClassName) => {
+  Object.values(getV1DocumentsManager().documents).forEach((document) => {
+    const container = document.container;
+    container.view?.el?.querySelectorAll(`.elementor .${oldClassName}`).forEach((element) => {
+      element.classList.replace(oldClassName, newClassName);
+    });
+  });
+};
 
 // src/components/elements-overlays.tsx
 import * as React2 from "react";
@@ -17,9 +59,9 @@ import { Box, styled } from "@elementor/ui";
 import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
 
 // src/hooks/use-bind-react-props-to-element.ts
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 function useBindReactPropsToElement(element, getProps) {
-  useEffect(() => {
+  useEffect2(() => {
     const el = element;
     const { events, attrs } = groupProps(getProps());
     events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
@@ -51,7 +93,7 @@ function groupProps(props) {
 }
 
 // src/hooks/use-floating-on-element.ts
-import { useEffect as useEffect2, useState } from "react";
+import { useEffect as useEffect3, useState } from "react";
 import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
 function useFloatingOnElement({ element, isSelected }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -74,7 +116,7 @@ function useFloatingOnElement({ element, isSelected }) {
       offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
     ]
   });
-  useEffect2(() => {
+  useEffect3(() => {
     refs.setReference(element);
   }, [element, refs]);
   return {
@@ -197,9 +239,9 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState2 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useState as useState2 } from "react";
 import { getBreakpoints } from "@elementor/editor-responsive";
-import { stylesRepository } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
 // src/utils/abort-previous-runs.ts
@@ -234,10 +276,10 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-on-mount.ts
-import { useEffect as useEffect3, useRef } from "react";
+import { useEffect as useEffect4, useRef } from "react";
 function useOnMount(cb) {
   const mounted = useRef(false);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -488,7 +530,7 @@ function useStyleItems() {
   const renderStyles = useStyleRenderer(resolve);
   const [styleItems, setStyleItems] = useState2({});
   const providerAndSubscribers = useMemo3(() => {
-    return stylesRepository.getProviders().map((provider) => {
+    return stylesRepository2.getProviders().map((provider) => {
       return {
         provider,
         subscriber: createProviderSubscriber({
@@ -499,7 +541,7 @@ function useStyleItems() {
       };
     });
   }, [renderStyles]);
-  useEffect4(() => {
+  useEffect5(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -611,7 +653,7 @@ var attributesTransformer = createTransformer((values) => {
 });
 
 // src/transformers/settings/classes-transformer.ts
-import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository3 } from "@elementor/editor-styles-repository";
 function createClassesTransformer() {
   const cache = /* @__PURE__ */ new Map();
   return createTransformer((value) => {
@@ -624,7 +666,7 @@ function createClassesTransformer() {
   });
 }
 function getCssName(id) {
-  const provider = stylesRepository2.getProviders().find((p) => {
+  const provider = stylesRepository3.getProviders().find((p) => {
     return p.actions.all().find((style) => style.id === id);
   });
   if (!provider) {
@@ -1535,6 +1577,10 @@ function init() {
     id: "canvas-style-render",
     component: StyleRenderer
   });
+  injectIntoLogic({
+    id: "classes-rename",
+    component: ClassesRename
+  });
 }
 export {
   createPropsResolver,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.32.0-38",
+  "version": "3.32.0-40",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,18 +37,19 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.32.0-38",
-    "@elementor/editor-notifications": "3.32.0-38",
-    "@elementor/editor-elements": "3.32.0-38",
-    "@elementor/editor-props": "3.32.0-38",
-    "@elementor/editor-responsive": "3.32.0-38",
-    "@elementor/editor-styles": "3.32.0-38",
-    "@elementor/editor-styles-repository": "3.32.0-38",
-    "@elementor/editor-v1-adapters": "3.32.0-38",
-    "@elementor/twing": "3.32.0-38",
+    "@elementor/editor": "3.32.0-40",
+    "@elementor/editor-notifications": "3.32.0-40",
+    "@elementor/editor-documents": "3.32.0-40",
+    "@elementor/editor-elements": "3.32.0-40",
+    "@elementor/editor-props": "3.32.0-40",
+    "@elementor/editor-responsive": "3.32.0-40",
+    "@elementor/editor-styles": "3.32.0-40",
+    "@elementor/editor-styles-repository": "3.32.0-40",
+    "@elementor/editor-v1-adapters": "3.32.0-40",
+    "@elementor/twing": "3.32.0-40",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-38",
-    "@elementor/wp-media": "3.32.0-38",
+    "@elementor/utils": "3.32.0-40",
+    "@elementor/wp-media": "3.32.0-40",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/__tests__/classes-rename.test.tsx

@@ -0,0 +1,311 @@
+import * as React from 'react';
+import { getV1DocumentsManager } from '@elementor/editor-documents';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { render } from '@testing-library/react';
+
+import { ClassesRename } from '../classes-rename';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	getV1DocumentsManager: jest.fn(),
+} ) );
+
+jest.mock( '@elementor/editor-styles-repository', () => ( {
+	stylesRepository: {
+		subscribe: jest.fn(),
+		register: jest.fn(),
+		all: jest.fn(),
+	},
+	createStylesProvider: jest.fn(),
+} ) );
+
+const createMockDocument = () => {
+	const mockElement = {
+		classList: {
+			replace: jest.fn(),
+		},
+	};
+
+	const mockQuerySelectorAll = jest.fn().mockReturnValue( [ mockElement ] );
+
+	const mockContainer = {
+		view: {
+			el: {
+				querySelectorAll: mockQuerySelectorAll,
+			},
+		},
+	};
+
+	const mockDocument = {
+		container: mockContainer,
+	};
+
+	return { mockDocument, mockContainer, mockElement };
+};
+
+interface StylesMap {
+	[ key: string ]: StyleDefinition;
+}
+
+describe( 'ClassesRename', () => {
+	const mockGetV1DocumentsManager = jest.mocked( getV1DocumentsManager );
+	const { stylesRepository } = jest.requireMock( '@elementor/editor-styles-repository' );
+	const mockSubscribe = jest.mocked( stylesRepository.subscribe ).mockReturnValue( jest.fn() );
+
+	const triggerStylesChange = ( previousStyles: StylesMap, currentStyles: StylesMap ) => {
+		const subscriptionCallback = mockSubscribe.mock.calls[ mockSubscribe.mock.calls.length - 1 ][ 0 ];
+		subscriptionCallback( previousStyles as never, currentStyles as never );
+	};
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should not rename classes when no classes have been changed', () => {
+		// Arrange.
+		const { mockElement } = createMockDocument();
+		mockGetV1DocumentsManager.mockReturnValue( {
+			documents: {},
+		} as never );
+
+		const previousStyles: StylesMap = {
+			style1: { id: 'style1', label: 'old-class', type: 'class', variants: [] },
+		};
+
+		const currentStyles: StylesMap = {
+			style1: { id: 'style1', label: 'old-class', type: 'class', variants: [] },
+		};
+
+		// Act.
+		render( <ClassesRename /> );
+		triggerStylesChange( previousStyles, currentStyles );
+
+		// Assert.
+		expect( mockElement.classList.replace ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should rename classes when label changes', () => {
+		// Arrange.
+		const { mockDocument, mockElement } = createMockDocument();
+		mockGetV1DocumentsManager.mockReturnValue( {
+			documents: {
+				1: mockDocument,
+			},
+		} as never );
+
+		const previousStyles: StylesMap = {
+			style1: {
+				id: 'style1',
+				label: 'old-class',
+				type: 'class',
+				variants: [],
+			},
+		};
+
+		const currentStyles: StylesMap = {
+			style1: { id: 'style1', label: 'new-class', type: 'class', variants: [] },
+		};
+
+		// Act.
+		render( <ClassesRename /> );
+		triggerStylesChange( previousStyles, currentStyles );
+
+		// Assert.
+		expect( mockElement.classList.replace ).toHaveBeenCalledWith( 'old-class', 'new-class' );
+	} );
+
+	it( 'should not rename classes when only non-label properties change', () => {
+		// Arrange.
+		const { mockDocument, mockElement } = createMockDocument();
+		mockGetV1DocumentsManager.mockReturnValue( {
+			documents: {
+				1: mockDocument,
+			},
+		} as never );
+
+		const previousStyles: StylesMap = {
+			style1: {
+				id: 'style1',
+				label: 'same-class',
+				type: 'class',
+				variants: [ { meta: { breakpoint: null, state: null }, props: {}, custom_css: null } ],
+			},
+		};
+
+		const currentStyles: StylesMap = {
+			style1: { id: 'style1', label: 'same-class', type: 'class', variants: [] },
+		};
+
+		// Act.
+		render( <ClassesRename /> );
+		triggerStylesChange( previousStyles, currentStyles );
+
+		// Assert.
+		expect( mockElement.classList.replace ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should handle multiple style changes', () => {
+		// Arrange.
+		const { mockDocument, mockElement } = createMockDocument();
+		mockGetV1DocumentsManager.mockReturnValue( {
+			documents: {
+				1: mockDocument,
+			},
+		} as never );
+
+		const previousStyles: StylesMap = {
+			style1: { id: 'style1', label: 'old-class-1', type: 'class', variants: [] },
+			style2: { id: 'style2', label: 'old-class-2', type: 'class', variants: [] },
+			style3: { id: 'style3', label: 'unchanged-class', type: 'class', variants: [] },
+		};
+
+		const currentStyles: StylesMap = {
+			style1: { id: 'style1', label: 'new-class-1', type: 'class', variants: [] },
+			style2: { id: 'style2', label: 'new-class-2', type: 'class', variants: [] },
+			style3: { id: 'style3', label: 'unchanged-class', type: 'class', variants: [] },
+		};
+
+		// Act.
+		render( <ClassesRename /> );
+		triggerStylesChange( previousStyles, currentStyles );
+
+		// Assert.
+		expect( mockElement.classList.replace ).toHaveBeenCalledTimes( 2 );
+		expect( mockElement.classList.replace ).toHaveBeenCalledWith( 'old-class-1', 'new-class-1' );
+		expect( mockElement.classList.replace ).toHaveBeenCalledWith( 'old-class-2', 'new-class-2' );
+	} );
+
+	it( 'should rename classes when new label is an empty string', () => {
+		// Arrange.
+		const { mockDocument, mockElement } = createMockDocument();
+		mockGetV1DocumentsManager.mockReturnValue( {
+			documents: {
+				1: mockDocument,
+			},
+		} as never );
+
+		const previousStyles: StylesMap = {
+			style1: { id: 'style1', label: 'old-class', type: 'class', variants: [] },
+		};
+
+		const currentStyles: StylesMap = {
+			style1: { id: 'style1', label: '', type: 'class', variants: [] },
+		};
+
+		// Act.
+		render( <ClassesRename /> );
+		triggerStylesChange( previousStyles, currentStyles );
+
+		// Assert.
+		expect( mockElement.classList.replace ).toHaveBeenCalledWith( 'old-class', '' );
+	} );
+
+	it( 'should handle new styles (not in previous)', () => {
+		// Arrange.
+		const { mockDocument, mockElement } = createMockDocument();
+		mockGetV1DocumentsManager.mockReturnValue( {
+			documents: {
+				1: mockDocument,
+			},
+		} as never );
+
+		const previousStyles: StylesMap = {
+			style1: { id: 'style1', label: 'existing-class', type: 'class', variants: [] },
+		};
+
+		const currentStyles: StylesMap = {
+			style1: { id: 'style1', label: 'existing-class', type: 'class', variants: [] },
+			style2: { id: 'style2', label: 'new-class', type: 'class', variants: [] },
+		};
+
+		// Act.
+		render( <ClassesRename /> );
+		triggerStylesChange( previousStyles, currentStyles );
+
+		// Assert.
+		expect( mockElement.classList.replace ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should handle multiple documents', () => {
+		// Arrange.
+		const { mockDocument, mockElement } = createMockDocument();
+		const { mockDocument: mockDocument2, mockElement: mockElement2 } = createMockDocument();
+
+		mockGetV1DocumentsManager.mockReturnValue( {
+			documents: {
+				1: mockDocument,
+				2: mockDocument2,
+			},
+		} as never );
+
+		const previousStyles: StylesMap = {
+			style1: { id: 'style1', label: 'old-class', type: 'class', variants: [] },
+		};
+
+		const currentStyles: StylesMap = {
+			style1: { id: 'style1', label: 'new-class', type: 'class', variants: [] },
+		};
+
+		// Act.
+		render( <ClassesRename /> );
+		triggerStylesChange( previousStyles, currentStyles );
+
+		// Assert.
+		expect( mockElement.classList.replace ).toHaveBeenCalledWith( 'old-class', 'new-class' );
+		expect( mockElement2.classList.replace ).toHaveBeenCalledWith( 'old-class', 'new-class' );
+	} );
+
+	it( 'should handle documents without view or el', () => {
+		// Arrange.
+		const incompleteDocument = {
+			container: {
+				view: null,
+			},
+		};
+
+		mockGetV1DocumentsManager.mockReturnValue( {
+			documents: {
+				1: incompleteDocument as never,
+			},
+		} as never );
+
+		const previousStyles: StylesMap = {
+			style1: { id: 'style1', label: 'old-class', type: 'class', variants: [] },
+		};
+
+		const currentStyles: StylesMap = {
+			style1: { id: 'style1', label: 'new-class', type: 'class', variants: [] },
+		};
+
+		// Act & Assert - should not throw an error.
+		expect( () => {
+			render( <ClassesRename /> );
+			triggerStylesChange( previousStyles, currentStyles );
+		} ).not.toThrow();
+	} );
+
+	it( 'should use correct CSS selector format', () => {
+		// Arrange.
+		const { mockDocument, mockContainer } = createMockDocument();
+		mockGetV1DocumentsManager.mockReturnValue( {
+			documents: {
+				1: mockDocument,
+			},
+		} as never );
+
+		const previousStyles: StylesMap = {
+			style1: { id: 'style1', label: 'test-class', type: 'class', variants: [] },
+		};
+
+		const currentStyles: StylesMap = {
+			style1: { id: 'style1', label: 'new-test-class', type: 'class', variants: [] },
+		};
+
+		// Act.
+		render( <ClassesRename /> );
+		triggerStylesChange( previousStyles, currentStyles );
+
+		// Assert.
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( mockContainer.view.el.querySelectorAll ).toHaveBeenCalledWith( '.elementor .test-class' );
+	} );
+} );

package/src/components/classes-rename.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { getV1DocumentsManager, type V1Document } from '@elementor/editor-documents';
+import { type V1Element } from '@elementor/editor-elements';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { hash } from '@elementor/utils';
+
+export const ClassesRename = () => {
+	useEffect( () => {
+		const unsubscribe = subscribeToStylesRepository();
+
+		return () => {
+			unsubscribe();
+		};
+	}, [] );
+
+	return null;
+};
+
+const subscribeToStylesRepository = () => {
+	return stylesRepository.subscribe( ( previous, current ) => {
+		if ( ! previous || ! current ) {
+			return;
+		}
+		const currentIds = Object.keys( current );
+
+		currentIds.forEach( ( id ) => {
+			const isStyleChanged = previous[ id ] && hash( previous[ id ] ) !== hash( current[ id ] );
+
+			if ( ! isStyleChanged ) {
+				return;
+			}
+
+			const previousStyle = previous[ id ];
+			const currentStyle = current[ id ];
+
+			if ( previousStyle.label !== currentStyle.label ) {
+				renameClass( previousStyle.label, currentStyle.label );
+			}
+		} );
+	} );
+};
+
+const renameClass = ( oldClassName: string, newClassName: string ) => {
+	Object.values< V1Document >( getV1DocumentsManager().documents ).forEach( ( document ) => {
+		const container = document.container as V1Element;
+
+		container.view?.el?.querySelectorAll( `.elementor .${ oldClassName }` ).forEach( ( element ) => {
+			element.classList.replace( oldClassName, newClassName );
+		} );
+	} );
+};

package/src/init.tsx

@@ -1,5 +1,6 @@
-import { injectIntoTop } from '@elementor/editor';
+import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
 
+import { ClassesRename } from './components/classes-rename';
 import { ElementsOverlays } from './components/elements-overlays';
 import { StyleRenderer } from './components/style-renderer';
 import { initSettingsTransformers } from './init-settings-transformers';
@@ -27,4 +28,9 @@ export function init() {
 		id: 'canvas-style-render',
 		component: StyleRenderer,
 	} );
+
+	injectIntoLogic( {
+		id: 'classes-rename',
+		component: ClassesRename,
+	} );
 }