@elementor/editor-canvas 4.3.0-960 → 4.3.0-961

package/dist/index.js

@@ -870,7 +870,6 @@ var GridEmptyCellPositioner = ({ element }) => {
 // src/components/grid-outline/grid-outline-overlay.tsx
 var React6 = __toESM(require("react"));
 var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_props2 = require("@elementor/editor-props");
 var import_ui2 = require("@elementor/ui");
 var import_react11 = require("@floating-ui/react");
 
@@ -1143,8 +1142,8 @@ function GridOutline({ element, tracks, width, height }) {
 
 // src/components/grid-outline/grid-outline-overlay.tsx
 var GridOutlineOverlay = ({ element, id, isSelected }) => {
-  const { settings } = (0, import_editor_elements4.useSelectedElementSettings)();
-  const enabled = import_editor_props2.booleanPropTypeUtil.extract(settings?.grid_outline);
+  const settings = (0, import_editor_elements4.useElementEditorSettings)(id);
+  const enabled = settings?.grid_outline;
   const rect = useElementRect(element);
   const tracks = useGridTracks(element, rect);
   const { floating } = useFloatingOnElement({ element, isSelected });
@@ -1167,9 +1166,10 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
 };
 
 // src/components/elements-overlays.tsx
+var hasGridStyleDisplay = (element) => {
+  return element.computedStyleMap().get("display")?.toString() === "grid";
+};
 var ELEMENTS_DATA_ATTR = "atomic";
-var E_GRID_TYPE = "e-grid";
-var isGridElement = (element) => [element.dataset.eType, element.dataset.element_type].includes(E_GRID_TYPE);
 var overlayRegistry = [
   {
     component: OutlineOverlay,
@@ -1177,11 +1177,11 @@ var overlayRegistry = [
   },
   {
     component: GridEmptyCellPositioner,
-    shouldRender: ({ element }) => isGridElement(element)
+    shouldRender: ({ element }) => hasGridStyleDisplay(element)
   },
   {
     component: GridOutlineOverlay,
-    shouldRender: ({ element, isSelected }) => isSelected && isGridElement(element)
+    shouldRender: ({ isSelected, element }) => isSelected && hasGridStyleDisplay(element)
   }
 ];
 function ElementsOverlays() {
@@ -1467,7 +1467,7 @@ var import_editor_styles = require("@elementor/editor-styles");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-props-resolver.ts
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_props2 = require("@elementor/editor-props");
 
 // src/renderers/multi-props.ts
 var isMultiProps = (propValue) => {
@@ -1505,7 +1505,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
     if (value === null || value === void 0) {
       return null;
     }
-    if (!(0, import_editor_props3.isTransformable)(value)) {
+    if (!(0, import_editor_props2.isTransformable)(value)) {
       return value;
     }
     if (depth > TRANSFORM_DEPTH_LIMIT) {
@@ -1563,13 +1563,13 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
 }
 
 // src/renderers/enqueue-font-from-style-prop.ts
-var import_editor_props4 = require("@elementor/editor-props");
+var import_editor_props3 = require("@elementor/editor-props");
 var maybeEnqueueFontFromStyleProp = (propType, propValue, enqueue) => {
-  if (!(0, import_editor_props4.isTransformable)(propValue) || propValue.disabled) {
+  if (!(0, import_editor_props3.isTransformable)(propValue) || propValue.disabled) {
     return;
   }
   const typeKey = propType.kind === "union" ? propValue.$$type : propType.key;
-  const propTypeUtil = (0, import_editor_props4.getPropSchemaFromCache)(typeKey);
+  const propTypeUtil = (0, import_editor_props3.getPropSchemaFromCache)(typeKey);
   if (!propTypeUtil || !("getEnqueueFontFamily" in propTypeUtil) || typeof propTypeUtil.getEnqueueFontFamily !== "function") {
     return;
   }
@@ -3425,7 +3425,7 @@ var import_client = require("react-dom/client");
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var React11 = __toESM(require("react"));
 var import_editor_elements9 = require("@elementor/editor-elements");
-var import_editor_props6 = require("@elementor/editor-props");
+var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
@@ -3702,11 +3702,11 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
-var import_editor_props5 = require("@elementor/editor-props");
+var import_editor_props4 = require("@elementor/editor-props");
 var hasKey = (propType) => {
   return "key" in propType;
 };
-var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props5.htmlV3PropTypeUtil.key, import_editor_props5.stringPropTypeUtil.key]);
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props4.htmlV3PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
   return TEXT_PROP_TYPE_KEYS.has(key);
 };
@@ -3726,7 +3726,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return import_editor_props5.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props5.stringPropTypeUtil.isValid(rawValue);
+  return import_editor_props4.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props4.stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -3811,15 +3811,15 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    const extracted = import_editor_props6.htmlV3PropTypeUtil.extract(propValue);
-    return import_editor_props6.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
+    const extracted = import_editor_props5.htmlV3PropTypeUtil.extract(propValue);
+    return import_editor_props5.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const html = value || "";
-    const parsed = (0, import_editor_props6.parseHtmlChildren)(html);
-    const valueToSave = import_editor_props6.htmlV3PropTypeUtil.create({
-      content: parsed.content ? import_editor_props6.stringPropTypeUtil.create(parsed.content) : null,
+    const parsed = (0, import_editor_props5.parseHtmlChildren)(html);
+    const valueToSave = import_editor_props5.htmlV3PropTypeUtil.create({
+      content: parsed.content ? import_editor_props5.stringPropTypeUtil.create(parsed.content) : null,
       children: parsed.children
     });
     (0, import_editor_v1_adapters13.undoable)(
@@ -3850,7 +3850,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      const textKeys = [import_editor_props6.htmlV3PropTypeUtil.key, import_editor_props6.stringPropTypeUtil.key];
+      const textKeys = [import_editor_props5.htmlV3PropTypeUtil.key, import_editor_props5.stringPropTypeUtil.key];
       for (const key of textKeys) {
         if (propType.prop_types[key]) {
           return key;
@@ -3879,7 +3879,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
   getExpectedTag() {
     const tagPropType = this.getTagPropType();
     const tagSettingKey = "tag";
-    return import_editor_props6.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props6.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
+    return import_editor_props5.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props5.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
   }
   getTagPropType() {
     const propsSchema = (0, import_editor_elements9.getElementType)(this.type)?.propsSchema;
@@ -4106,7 +4106,7 @@ function createNestedTemplatedType(type, renderer, element) {
 }
 
 // src/legacy/tabs-model-extensions.ts
-var import_editor_props7 = require("@elementor/editor-props");
+var import_editor_props6 = require("@elementor/editor-props");
 var tabModelExtensions = {
   modifyDefaultChildren(elements) {
     if (!Array.isArray(elements) || elements.length === 0) {
@@ -4122,8 +4122,8 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: import_editor_props7.htmlV3PropTypeUtil.create({
-          content: import_editor_props7.stringPropTypeUtil.create(`Tab ${position}`),
+        paragraph: import_editor_props6.htmlV3PropTypeUtil.create({
+          content: import_editor_props6.stringPropTypeUtil.create(`Tab ${position}`),
           children: []
         })
       }
@@ -4136,7 +4136,7 @@ function initTabsModelExtensions() {
 }
 
 // src/mcp/canvas-mcp.ts
-var import_editor_props12 = require("@elementor/editor-props");
+var import_editor_props11 = require("@elementor/editor-props");
 
 // src/mcp/resources/available-widgets-resource.ts
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
@@ -4288,7 +4288,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/resources/dynamic-tags-resource.ts
-var import_editor_props8 = require("@elementor/editor-props");
+var import_editor_props7 = require("@elementor/editor-props");
 
 // src/mcp/utils/resolve-dynamic-tag.ts
 var import_editor_v1_adapters17 = require("@elementor/editor-v1-adapters");
@@ -4356,7 +4356,7 @@ var defaultSettingValue = (propType) => {
 var DYNAMIC_TAGS_URI = "elementor://dynamic-tags";
 var settingsSchema = (propsSchema) => {
   return Object.fromEntries(
-    Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, import_editor_props8.Schema.propTypeToJsonSchema(propType)])
+    Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, import_editor_props7.Schema.propTypeToJsonSchema(propType)])
   );
 };
 var buildDynamicTagsList = () => {
@@ -4713,7 +4713,7 @@ var import_editor_elements15 = require("@elementor/editor-elements");
 
 // src/mcp/utils/do-update-element-property.ts
 var import_editor_elements14 = require("@elementor/editor-elements");
-var import_editor_props9 = require("@elementor/editor-props");
+var import_editor_props8 = require("@elementor/editor-props");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 
@@ -4790,7 +4790,7 @@ var LOCAL_STYLE_META = {
 };
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
-  return import_editor_props9.Schema.adjustLlmPropValueSchema(value, {
+  return import_editor_props8.Schema.adjustLlmPropValueSchema(value, {
     forceKey,
     transformers: {
       ...Utils.globalVariablesLLMResolvers,
@@ -4849,7 +4849,7 @@ var doUpdateElementProperty = (params) => {
       }
       if (propertyRawSchema.kind === "plain") {
         if (typeof propertyMapValue[stylePropName] !== "object") {
-          const propUtil = (0, import_editor_props9.getPropSchemaFromCache)(propertyRawSchema.key);
+          const propUtil = (0, import_editor_props8.getPropSchemaFromCache)(propertyRawSchema.key);
           if (propUtil) {
             const plainValue = propUtil.create(propertyMapValue[stylePropName]);
             propertyMapValue[stylePropName] = plainValue;
@@ -4902,7 +4902,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  const { valid, jsonSchema } = import_editor_props9.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  const { valid, jsonSchema } = import_editor_props8.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
   if (!valid) {
     throw new Error(
       `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
@@ -5647,7 +5647,7 @@ function onElementAdded(element) {
 // src/mcp/tools/configure-element/tool.ts
 var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_mcp5 = require("@elementor/editor-mcp");
-var import_editor_props10 = require("@elementor/editor-props");
+var import_editor_props9 = require("@elementor/editor-props");
 
 // src/mcp/tools/configure-element/prompt.ts
 var import_editor_mcp4 = require("@elementor/editor-mcp");
@@ -5836,7 +5836,7 @@ var initConfigureElementTool = (reg) => {
       const propertiesToUpdate = resolveCanonicalPropKeys(elementType, propertiesToChange);
       const toUpdate = Object.entries(propertiesToUpdate);
       for (const [propertyName, propertyValue] of toUpdate) {
-        if (!import_editor_props10.Schema.isPropKeyConfigurable(propertyName)) {
+        if (!import_editor_props9.Schema.isPropKeyConfigurable(propertyName)) {
           throw new Error(`Not allowed to update ${propertyName}`);
         }
         try {
@@ -5913,7 +5913,7 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 
 // src/mcp/tools/get-element-config/tool.ts
 var import_editor_elements18 = require("@elementor/editor-elements");
-var import_editor_props11 = require("@elementor/editor-props");
+var import_editor_props10 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
 var schema = {
   elementId: import_schema5.z.string()
@@ -5970,7 +5970,7 @@ var initGetElementConfigTool = (reg) => {
       }
       const propValues = {};
       const stylePropValues = {};
-      import_editor_props11.Schema.configurableKeys(propSchema).forEach((key) => {
+      import_editor_props10.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
       const elementStyles = (0, import_editor_elements18.getElementStyles)(elementId) || {};
@@ -6006,7 +6006,7 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  import_editor_props12.Schema.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
+  import_editor_props11.Schema.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -6213,12 +6213,12 @@ function shouldBlock(sourceElements, targetElements) {
 
 // src/style-commands/paste-style.ts
 var import_editor_elements22 = require("@elementor/editor-elements");
-var import_editor_props14 = require("@elementor/editor-props");
+var import_editor_props13 = require("@elementor/editor-props");
 var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
 var import_editor_elements20 = require("@elementor/editor-elements");
-var import_editor_props13 = require("@elementor/editor-props");
+var import_editor_props12 = require("@elementor/editor-props");
 var import_i18n5 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
@@ -6236,7 +6236,7 @@ function getClassesProp(container) {
     return null;
   }
   const [propKey] = Object.entries(propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props13.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props12.CLASSES_PROP_KEY
   ) ?? [];
   return propKey ?? null;
 }
@@ -6385,8 +6385,8 @@ function pasteClasses(containers, classes) {
       return;
     }
     const classesSetting = (0, import_editor_elements22.getElementSetting)(container.id, classesProp);
-    const currentClasses = import_editor_props14.classesPropTypeUtil.extract(classesSetting) ?? [];
-    const newClasses = import_editor_props14.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
+    const currentClasses = import_editor_props13.classesPropTypeUtil.extract(classesSetting) ?? [];
+    const newClasses = import_editor_props13.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
     (0, import_editor_elements22.updateElementSettings)({
       id: container.id,
       props: { [classesProp]: newClasses }

package/dist/index.mjs

@@ -807,8 +807,7 @@ var GridEmptyCellPositioner = ({ element }) => {
 
 // src/components/grid-outline/grid-outline-overlay.tsx
 import * as React6 from "react";
-import { useSelectedElementSettings } from "@elementor/editor-elements";
-import { booleanPropTypeUtil } from "@elementor/editor-props";
+import { useElementEditorSettings } from "@elementor/editor-elements";
 import { Box as Box2 } from "@elementor/ui";
 import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
 
@@ -1081,8 +1080,8 @@ function GridOutline({ element, tracks, width, height }) {
 
 // src/components/grid-outline/grid-outline-overlay.tsx
 var GridOutlineOverlay = ({ element, id, isSelected }) => {
-  const { settings } = useSelectedElementSettings();
-  const enabled = booleanPropTypeUtil.extract(settings?.grid_outline);
+  const settings = useElementEditorSettings(id);
+  const enabled = settings?.grid_outline;
   const rect = useElementRect(element);
   const tracks = useGridTracks(element, rect);
   const { floating } = useFloatingOnElement({ element, isSelected });
@@ -1105,9 +1104,10 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
 };
 
 // src/components/elements-overlays.tsx
+var hasGridStyleDisplay = (element) => {
+  return element.computedStyleMap().get("display")?.toString() === "grid";
+};
 var ELEMENTS_DATA_ATTR = "atomic";
-var E_GRID_TYPE = "e-grid";
-var isGridElement = (element) => [element.dataset.eType, element.dataset.element_type].includes(E_GRID_TYPE);
 var overlayRegistry = [
   {
     component: OutlineOverlay,
@@ -1115,11 +1115,11 @@ var overlayRegistry = [
   },
   {
     component: GridEmptyCellPositioner,
-    shouldRender: ({ element }) => isGridElement(element)
+    shouldRender: ({ element }) => hasGridStyleDisplay(element)
   },
   {
     component: GridOutlineOverlay,
-    shouldRender: ({ element, isSelected }) => isSelected && isGridElement(element)
+    shouldRender: ({ isSelected, element }) => isSelected && hasGridStyleDisplay(element)
   }
 ];
 function ElementsOverlays() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.3.0-960",
+  "version": "4.3.0-961",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-960",
-    "@elementor/editor-controls": "4.3.0-960",
-    "@elementor/editor-documents": "4.3.0-960",
-    "@elementor/editor-elements": "4.3.0-960",
-    "@elementor/editor-interactions": "4.3.0-960",
-    "@elementor/editor-mcp": "4.3.0-960",
-    "@elementor/editor-notifications": "4.3.0-960",
-    "@elementor/editor-props": "4.3.0-960",
-    "@elementor/editor-responsive": "4.3.0-960",
-    "@elementor/editor-styles": "4.3.0-960",
-    "@elementor/editor-styles-repository": "4.3.0-960",
-    "@elementor/editor-ui": "4.3.0-960",
-    "@elementor/editor-v1-adapters": "4.3.0-960",
-    "@elementor/events": "4.3.0-960",
-    "@elementor/http-client": "4.3.0-960",
-    "@elementor/schema": "4.3.0-960",
-    "@elementor/twing": "4.3.0-960",
+    "@elementor/editor": "4.3.0-961",
+    "@elementor/editor-controls": "4.3.0-961",
+    "@elementor/editor-documents": "4.3.0-961",
+    "@elementor/editor-elements": "4.3.0-961",
+    "@elementor/editor-interactions": "4.3.0-961",
+    "@elementor/editor-mcp": "4.3.0-961",
+    "@elementor/editor-notifications": "4.3.0-961",
+    "@elementor/editor-props": "4.3.0-961",
+    "@elementor/editor-responsive": "4.3.0-961",
+    "@elementor/editor-styles": "4.3.0-961",
+    "@elementor/editor-styles-repository": "4.3.0-961",
+    "@elementor/editor-ui": "4.3.0-961",
+    "@elementor/editor-v1-adapters": "4.3.0-961",
+    "@elementor/events": "4.3.0-961",
+    "@elementor/http-client": "4.3.0-961",
+    "@elementor/schema": "4.3.0-961",
+    "@elementor/twing": "4.3.0-961",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-960",
-    "@elementor/wp-media": "4.3.0-960",
+    "@elementor/utils": "4.3.0-961",
+    "@elementor/wp-media": "4.3.0-961",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0",
     "dompurify": "^3.2.6"

package/src/components/__tests__/elements-overlays.test.tsx

@@ -19,6 +19,10 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	isExperimentActive: jest.fn(),
 } ) );
 
+function mockGridComputedStyle( element: HTMLElement ) {
+	element.computedStyleMap = jest.fn().mockReturnValue( new Map( [ [ 'display', { toString: () => 'grid' } ] ] ) );
+}
+
 describe( '<ElementsOverlays />', () => {
 	beforeEach( () => {
 		const documentEl = createDOMElement( { tag: 'div' } );
@@ -26,6 +30,9 @@ describe( '<ElementsOverlays />', () => {
 		const atomic1El = createDOMElement( { tag: 'div', attrs: { 'data-atomic': '', id: '10' } } );
 		const atomic2El = createDOMElement( { tag: 'div', attrs: { 'data-atomic': '', id: '20' } } );
 
+		mockGridComputedStyle( atomic1El );
+		mockGridComputedStyle( atomic2El );
+
 		jest.mocked( useEditMode ).mockReturnValue( 'edit' );
 		jest.mocked( useIsRouteActive ).mockReturnValue( false );
 		jest.mocked( isExperimentActive ).mockReturnValue( true );

package/src/components/elements-overlays.tsx

@@ -11,11 +11,11 @@ import type { ElementOverlayConfig } from '../types/element-overlay';
 import { GridEmptyCellPositioner, GridOutlineOverlay } from './grid-outline';
 import { OutlineOverlay } from './outline-overlay';
 
-const ELEMENTS_DATA_ATTR = 'atomic';
-const E_GRID_TYPE = 'e-grid';
+const hasGridStyleDisplay = ( element: HTMLElement ): boolean => {
+	return element.computedStyleMap().get( 'display' )?.toString() === 'grid';
+};
 
-const isGridElement = ( element: HTMLElement ): boolean =>
-	[ element.dataset.eType, element.dataset.element_type ].includes( E_GRID_TYPE );
+const ELEMENTS_DATA_ATTR = 'atomic';
 
 const overlayRegistry: ElementOverlayConfig[] = [
 	{
@@ -24,11 +24,11 @@ const overlayRegistry: ElementOverlayConfig[] = [
 	},
 	{
 		component: GridEmptyCellPositioner,
-		shouldRender: ( { element } ) => isGridElement( element ),
+		shouldRender: ( { element } ) => hasGridStyleDisplay( element ),
 	},
 	{
 		component: GridOutlineOverlay,
-		shouldRender: ( { element, isSelected } ) => isSelected && isGridElement( element ),
+		shouldRender: ( { isSelected, element } ) => isSelected && hasGridStyleDisplay( element ),
 	},
 ];
 

package/src/components/grid-outline/__tests__/grid-outline-overlay.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createDOMElement, renderWithTheme } from 'test-utils';
-import { useSelectedElementSettings } from '@elementor/editor-elements';
+import { useElementEditorSettings } from '@elementor/editor-elements';
 import { screen } from '@testing-library/react';
 
 import { useElementRect } from '../../../hooks/use-element-rect';
@@ -34,12 +34,10 @@ const EMPTY_TRACKS: GridTracks = {
 	borderColor: '',
 };
 
-function mockGridOutlineSetting( value: { $$type: 'boolean'; value: boolean } | null ) {
-	jest.mocked( useSelectedElementSettings ).mockReturnValue( {
-		element: { id: ID, type: 'e-grid' },
-		elementType: {} as never,
-		settings: { grid_outline: value },
-	} );
+function mockGridOutlineSetting( gridOutline: boolean | undefined ) {
+	jest.mocked( useElementEditorSettings ).mockReturnValue(
+		gridOutline === undefined ? {} : { grid_outline: gridOutline }
+	);
 }
 
 function mockFloating() {
@@ -87,7 +85,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders the outline svg with the element id when the setting is enabled', () => {
-		mockGridOutlineSetting( { $$type: 'boolean', value: true } );
+		mockGridOutlineSetting( true );
 
 		renderOverlay();
 
@@ -97,8 +95,8 @@ describe( '<GridOutlineOverlay />', () => {
 		expect( overlay.querySelector( 'svg' ) ).toBeInTheDocument();
 	} );
 
-	it( 'treats a null setting as default-on and renders the outline', () => {
-		mockGridOutlineSetting( null );
+	it( 'treats an unset setting as default-on and renders the outline', () => {
+		mockGridOutlineSetting( undefined );
 
 		renderOverlay();
 
@@ -106,7 +104,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders nothing when the setting is explicitly disabled', () => {
-		mockGridOutlineSetting( { $$type: 'boolean', value: false } );
+		mockGridOutlineSetting( false );
 
 		renderOverlay();
 
@@ -114,7 +112,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders nothing while tracks have not resolved yet', () => {
-		mockGridOutlineSetting( { $$type: 'boolean', value: true } );
+		mockGridOutlineSetting( true );
 		jest.mocked( useGridTracks ).mockReturnValue( EMPTY_TRACKS );
 
 		renderOverlay();
@@ -123,7 +121,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders one rect per cell when the grid has a gap', () => {
-		mockGridOutlineSetting( null );
+		mockGridOutlineSetting( undefined );
 		jest.mocked( useGridTracks ).mockReturnValue( {
 			...NON_EMPTY_TRACKS,
 			columns: [ 100, 100, 100 ],
@@ -140,7 +138,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders boundary lines when the grid has no gap', () => {
-		mockGridOutlineSetting( null );
+		mockGridOutlineSetting( undefined );
 		jest.mocked( useGridTracks ).mockReturnValue( {
 			...NON_EMPTY_TRACKS,
 			columns: [ 100, 100, 100 ],
@@ -157,7 +155,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'mounts inside the canvas wrapper portal', () => {
-		mockGridOutlineSetting( null );
+		mockGridOutlineSetting( undefined );
 
 		renderOverlay();
 

package/src/components/grid-outline/grid-outline-overlay.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useSelectedElementSettings } from '@elementor/editor-elements';
-import { booleanPropTypeUtil } from '@elementor/editor-props';
+import { useElementEditorSettings } from '@elementor/editor-elements';
 import { Box } from '@elementor/ui';
 import { FloatingPortal } from '@floating-ui/react';
 
@@ -12,8 +11,8 @@ import { CANVAS_WRAPPER_ID } from '../outline-overlay';
 import { GridOutline } from './grid-outline';
 
 export const GridOutlineOverlay = ( { element, id, isSelected }: ElementOverlayProps ): React.ReactElement | null => {
-	const { settings } = useSelectedElementSettings();
-	const enabled = booleanPropTypeUtil.extract( settings?.grid_outline );
+	const settings = useElementEditorSettings( id );
+	const enabled = settings?.grid_outline;
 	const rect = useElementRect( element );
 	const tracks = useGridTracks( element, rect );
 	const { floating } = useFloatingOnElement( { element, isSelected } );