Accept visible_if on setting types that ignore it

schemas/theme/setting.json

@@ -201,7 +201,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "additionalProperties": false
     },
@@ -221,7 +222,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "additionalProperties": false
     },
@@ -237,7 +239,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "additionalProperties": false
     },
@@ -273,7 +276,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "additionalProperties": false
     },
@@ -293,7 +297,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "additionalProperties": false
     },
@@ -368,7 +373,8 @@
           "additionalProperties": { "type": "string" },
           "description": "A map of palette color names to color values. Each key is an arbitrary name and each value is a CSS color.",
           "markdownDescription": "A map of palette color names to color values.\n\nEach **key** is an arbitrary name. Each **value** is a CSS color, typically a hex code.\n\n**Example:**\n```json\n\"default\": {\n  \"background\": \"#ffffff\",\n  \"foreground\": \"#000000\"\n}\n```\n\n---\n\n[Shopify reference](https://shopify.dev/docs/themes/architecture/settings/input-settings#color_palette)"
-        }
+        },
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "additionalProperties": false
     },
@@ -495,7 +501,8 @@
           ]
         },
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "required": ["definition", "role"],
       "additionalProperties": false
@@ -647,7 +654,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "required": ["metaobject_type"],
       "additionalProperties": false
@@ -672,7 +680,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "required": ["metaobject_type"],
       "additionalProperties": false
@@ -726,7 +735,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "additionalProperties": false
     },
@@ -742,7 +752,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "additionalProperties": false
     },
@@ -762,7 +773,8 @@
         "default": true,
         "label": true,
         "info": true,
-        "id": true
+        "id": true,
+        "visible_if": { "$ref": "#/definitions/ignoredConditionalSetting" }
       },
       "additionalProperties": false
     },
@@ -1113,6 +1125,13 @@
       }
     },
 
+    "ignoredConditionalSetting": {
+      "$comment": "visible_if on setting types that don't support it. Accepted so the file saves, but ignored by the theme editor.",
+      "type": "string",
+      "description": "visible_if isn't supported on this setting type. It's ignored and the setting is always visible in the theme editor.",
+      "markdownDescription": "`visible_if` isn't supported on this setting type. It's ignored and the setting is always visible in the theme editor.\n\n---\n\n[Shopify reference](https://shopify.dev/docs/storefronts/themes/architecture/settings#conditional-settings)"
+    },
+
     "inputSettingsStandardAttributes": {
       "required": ["type", "id", "label"],
       "properties": {

tests/section.spec.ts

@@ -251,7 +251,7 @@ describe('JSON Schema validation of Liquid theme section schema tags', () => {
   );
 
   it.each(SETTINGS_TYPES_NOT_SUPPORTING_VISIBLE_IF)(
-    'should not allow visible_if on %s setting type',
+    'should accept (and ignore) visible_if on %s setting type',
     async (settingType) => {
       const schema = {
         settings: [
@@ -265,10 +265,32 @@ describe('JSON Schema validation of Liquid theme section schema tags', () => {
       };
 
       const diagnostics = await validate('sections/section.liquid', schema);
-      expect(diagnostics).toContainEqual(
+      expect(diagnostics).not.toContainEqual(
         expect.objectContaining({
           message: 'Property visible_if is not allowed.',
-          severity: 1,
+        }),
+      );
+    },
+  );
+
+  it.each(SETTINGS_TYPES_NOT_SUPPORTING_VISIBLE_IF)(
+    'should still require visible_if to be a string on %s setting type',
+    async (settingType) => {
+      const schema = {
+        settings: [
+          {
+            type: settingType,
+            id: 'test_setting',
+            label: 'Test Setting',
+            visible_if: 42,
+          },
+        ],
+      };
+
+      const diagnostics = await validate('sections/section.liquid', schema);
+      expect(diagnostics).toContainEqual(
+        expect.objectContaining({
+          message: 'Incorrect type. Expected "string".',
         }),
       );
     },

tests/test-constants.ts

@@ -1,3 +1,4 @@
+// visible_if is accepted on these types so files still save, but the theme editor ignores it.
 export const SETTINGS_TYPES_NOT_SUPPORTING_VISIBLE_IF = [
   'article',
   'article_list',

tests/theme-settings/color_palette.spec.ts

@@ -52,16 +52,12 @@ describe('Module: theme settings validation (config/settings_schema.json)', () =
       ]);
     });
 
-    it('refuses the visible_if property', async () => {
+    it('accepts (and ignores) the visible_if property', async () => {
       const diagnostics = await validate(
         'config/settings_schema.json',
         settings({ visible_if: '{{ section.settings.show_palette }}' }),
       );
-      expect(diagnostics).toStrictEqual([
-        expect.objectContaining({
-          message: 'Property visible_if is not allowed.',
-        }),
-      ]);
+      expect(diagnostics).toStrictEqual([]);
     });
 
     it('requires the default property', async () => {

tests/theme_block.spec.ts

@@ -243,7 +243,7 @@ describe('JSON Schema validation of Liquid theme block schema tags', () => {
     expect(diagnostics).toStrictEqual([]);
   });
 
-  it.each(SETTINGS_TYPES_NOT_SUPPORTING_VISIBLE_IF)('should not allow visible_if on %s setting type', async (settingType) => {
+  it.each(SETTINGS_TYPES_NOT_SUPPORTING_VISIBLE_IF)('should accept (and ignore) visible_if on %s setting type', async (settingType) => {
     const schema = {
       settings: [
         {
@@ -254,12 +254,11 @@ describe('JSON Schema validation of Liquid theme block schema tags', () => {
         }
       ]
     };
-    
+
     const diagnostics = await validate('blocks/block.liquid', schema);
-    expect(diagnostics).toContainEqual(
+    expect(diagnostics).not.toContainEqual(
       expect.objectContaining({
-        message: 'Property visible_if is not allowed.',
-        severity: 1
+        message: 'Property visible_if is not allowed.'
       })
     );
   });