[6.x] Add option to reserve field space

lang/en/messages.php

@@ -88,6 +88,7 @@
  'entry_origin_instructions' => 'The new localization will inherit values from the entry in the selected site.',
  'expect_root_instructions' => 'Consider the first page in the tree a "root" or "home" page.',
  'field_conditions_always_save_instructions' => 'Always save field value, even if the field is hidden.',
+ 'field_conditions_reserve_space_when_hidden_instructions' => 'When hidden, reserve the field\'s space in the layout.',
  'field_conditions_field_instructions' => 'You may enter any field handle. You are not limited to the options in the dropdown.',
  'field_conditions_instructions' => 'When to show or hide this field.',
  'field_desynced_from_origin' => 'Desynced from origin. Click to sync and revert to the origin\'s value.',

resources/js/components/field-conditions/Builder.vue

@@ -30,12 +30,23 @@
  </div>
  </div>
 
- <Field
- :label="__('Always Save')"
- :instructions="__('messages.field_conditions_always_save_instructions')"
- >
- <Switch v-model="alwaysSave" />
- </Field>
+ <div class="w-full publish-fields">
+ <Field
+ class="form-group field-w-33"
+ :label="__('Always Save')"
+ :instructions="__('messages.field_conditions_always_save_instructions')"
+ >
+ <Switch v-model="alwaysSave" />
+ </Field>
+
+ <Field
+ class="form-group field-w-33"
+ :label="__('Reserve Space When Hidden')"
+ :instructions="__('messages.field_conditions_reserve_space_when_hidden_instructions')"
+ >
+ <Switch v-model="reserveSpaceWhenHidden" />
+ </Field>
+ </div>
  </div>
 </template>
 
@@ -77,6 +88,7 @@ export default {
  customMethod: null,
  conditions: [],
  alwaysSave: false,
+ reserveSpaceWhenHidden: false,
  };
  },
 
@@ -135,12 +147,17 @@ export default {
  alwaysSave(alwaysSave) {
  this.$emit('updated-always-save', alwaysSave);
  },
+
+ reserveSpaceWhenHidden(reserveSpaceWhenHidden) {
+ this.$emit('updated-reserve-space-when-hidden', reserveSpaceWhenHidden);
+ },
  },
 
  created() {
  this.add();
  this.getInitialConditions();
  this.getInitialAlwaysSaveState();
+ this.getInitialReserveSpaceWhenHiddenState();
  },
 
  methods: {
@@ -187,6 +204,10 @@ export default {
  this.alwaysSave = data_get(this.config, 'always_save', false);
  },
 
+ getInitialReserveSpaceWhenHiddenState() {
+ this.reserveSpaceWhenHidden = data_get(this.config, 'reserve_space_when_hidden', false);
+ },
+
  prepareEditableConditions(conditions) {
  return new Converter().fromBlueprint(conditions).map((condition) => {
  condition._id = uniqid();

resources/js/components/fields/Settings.vue

@@ -43,6 +43,7 @@
  :suggestable-fields="suggestableConditionFields"
  @updated="updateFieldConditions"
  @updated-always-save="updateAlwaysSave"
+ @updated-reserve-space-when-hidden="updateReserveSpaceWhenHidden"
  />
  </CardPanel>
  </TabContent>
@@ -263,6 +264,12 @@ export default {
  this.markFieldEdited('always_save');
  },
 
+ updateReserveSpaceWhenHidden(reserveSpaceWhenHidden) {
+ this.values.reserve_space_when_hidden = reserveSpaceWhenHidden;
+
+ this.markFieldEdited('reserve_space_when_hidden');
+ },
+
  markFieldEdited(handle) {
  if (this.editedFields.indexOf(handle) === -1) {
  this.editedFields.push(handle);

resources/js/components/ui/Field.vue

@@ -82,7 +82,7 @@ const hasErrors = computed(() => {
 </script>
 
 <template>
- <div :class="[rootClasses, $attrs.class]" :dir="dir" data-ui-input-group :data-ui-field-has-errors="hasErrors ? '' : null">
+ <div :class="[rootClasses, $attrs.class]" :dir="dir" :inert="$attrs.inert" data-ui-input-group :data-ui-field-has-errors="hasErrors ? '' : null">
  <div
  v-if="label || $slots.label || $slots.actions || (instructions && !instructionsBelow)"
  class="flex flex-col gap-1.5"

resources/js/components/ui/Publish/Field.vue

@@ -156,11 +156,22 @@ const shouldShowField = computed(() => {
  ).showField(props.config, fullPath.value);
 });
 
+// Only applies when hidden by conditions; blueprint "hidden" visibility still removes the field from layout.
+const reserveSpaceWhenHiddenEnabled = computed(
+ () => props.config.reserve_space_when_hidden === true && props.config.visibility !== 'hidden',
+);
+
+const shouldHideFieldVisually = computed(
+ () => reserveSpaceWhenHiddenEnabled.value && !shouldShowField.value,
+);
+
 // Hidden fieldtypes are mounted like any other field so they take part in field
 // conditions, but they only become visible on a form submission.
 const isHiddenFieldtype = computed(() => props.config.type === 'hidden' && !isFormSubmission);
 
-const shouldRenderField = computed(() => shouldShowField.value && !isHiddenFieldtype.value);
+const shouldRenderField = computed(
+ () => !isHiddenFieldtype.value && (shouldShowField.value || reserveSpaceWhenHiddenEnabled.value),
+);
 
 const shouldShowLabelText = computed(() => !props.config.hide_display);
 
@@ -248,7 +259,8 @@ const fieldtypeComponentEvents = computed(() => ({
  >
  <Field
  v-show="shouldRenderField"
- :class="`${config.type}-fieldtype`"
+ :class="[`${config.type}-fieldtype`, { 'opacity-0 pointer-events-none': shouldHideFieldVisually }]"
+ :inert="shouldHideFieldVisually"
  :id="fieldId"
  :dir="direction"
  :instructions="config.instructions"

src/Fields/Field.php

@@ -139,6 +139,11 @@ public function alwaysSave()
  return Arr::get($this->config, 'always_save', false);
  }
 
+ public function reserveSpaceWhenHidden()
+ {
+ return Arr::get($this->config, 'reserve_space_when_hidden', false);
+ }
+
  public function rules()
  {
  $rules = [$this->handle => $this->addNullableRule(array_merge(
@@ -280,6 +285,7 @@ public function toPublishArray()
  'visibility' => $this->visibility(),
  'read_only' => $this->visibility() === 'read_only', // Deprecated: Addon fieldtypes should now reference new `visibility` state.
  'always_save' => $this->alwaysSave(),
+ 'reserve_space_when_hidden' => $this->reserveSpaceWhenHidden(),
  ]);
 
  unset($array['validate']);

tests/Fields/BlueprintTest.php

@@ -465,6 +465,7 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
  'required' => true,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  ],
  ],
@@ -500,6 +501,7 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
  'required' => false,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  ],
  ],
@@ -606,6 +608,7 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi
  'required' => false,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  [
  'display' => 'Nested Deeper Two',
@@ -633,6 +636,7 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi
  'required' => false,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  ],
  ],

tests/Fields/FieldTest.php

@@ -354,9 +354,32 @@ public function preProcess($data)
  'required' => true,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ], $field->toPublishArray());
  }
 
+ #[Test]
+ public function to_publish_array_passes_through_reserve_space_when_hidden()
+ {
+ FieldtypeRepository::partialMock();
+
+ FieldtypeRepository::shouldReceive('find')
+ ->with('example')
+ ->andReturn(new class extends Fieldtype
+ {
+ protected $component = 'example';
+
+ protected $configFields = [];
+ });
+
+ $field = new Field('test', [
+ 'type' => 'example',
+ 'reserve_space_when_hidden' => true,
+ ]);
+
+ $this->assertTrue($field->toPublishArray()['reserve_space_when_hidden']);
+ }
+
  #[Test]
  public function it_gets_the_value()
  {

tests/Fields/FieldsTest.php

@@ -426,6 +426,7 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
  'visibility' => 'visible',
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  'autocomplete' => null,
  'hide_display' => false,
  'instructions_position' => 'above',
@@ -450,6 +451,7 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
  'visibility' => 'visible',
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  'hide_display' => false,
  'instructions_position' => 'above',
  'listable' => 'hidden',
@@ -516,6 +518,7 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi
  'visibility' => 'visible',
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  'autocomplete' => null,
  'hide_display' => false,
  'instructions_position' => 'above',
@@ -543,6 +546,7 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi
  'visibility' => 'visible',
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  'autocomplete' => null,
  'hide_display' => false,
  'instructions_position' => 'above',

tests/Fields/SectionTest.php

@@ -140,6 +140,7 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
  'required' => true,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  [
  'display' => 'Two',
@@ -164,6 +165,7 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
  'required' => false,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  ],
  ], $section->toPublishArray());

tests/Fields/TabTest.php

@@ -167,6 +167,7 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
  'required' => true,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  [
  'display' => 'Two',
@@ -191,6 +192,7 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
  'required' => false,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  ],
  ],

tests/Fieldtypes/NestedFieldsTest.php

@@ -94,6 +94,7 @@ public function preProcess($data)
  'required' => true,
  'read_only' => false, // deprecated
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  ], $actual);
  }

tests/Fieldtypes/SetsTest.php

@@ -247,6 +247,7 @@ public function it_preprocesses_for_config_with_groups()
  'required' => false,
  'read_only' => false,
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  ],
  'handle' => 'one',
@@ -286,6 +287,7 @@ public function it_preprocesses_for_config_with_groups()
  'required' => false,
  'read_only' => false,
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  ],
  'handle' => 'two',
@@ -348,6 +350,7 @@ public function it_preprocesses_for_config_without_groups()
  'required' => false,
  'read_only' => false,
  'always_save' => false,
+ 'reserve_space_when_hidden' => false,
  ],
  ],
  'handle' => 'one',