Fix field wrappers CSS class names (#14547)

OrchardCMS · Oct 26, 2023 · 24be30f · 24be30f
1 parent 833a982
commit 24be30f
Show file tree

Hide file tree

Showing 49 changed files with 135 additions and 101 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.BackgroundTasks/Views/BackgroundTask/Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.BackgroundTasks/Views/BackgroundTask/Edit.cshtml
@@ -1,4 +1,4 @@
-@using OrchardCore;
+@using OrchardCore
 @model BackgroundTaskViewModel
 
 <zone Name="Title"><h1>@RenderTitleSegments(T["Edit Task Settings"])</h1></zone>

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField-Switch.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField-Switch.Edit.cshtml
@@ -2,10 +2,9 @@
 @using OrchardCore.Mvc.Utilities
 @{
     var settings = Model.PartFieldDefinition.GetSettings<BooleanFieldSettings>();
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Value)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
     <div class="@Orchard.GetEndCssClasses(true)">
         <div class="form-check form-switch">
             <input asp-for="Value" type="checkbox" class="form-check-input content-preview-select" checked="@Model.Value" />

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField.Edit.cshtml
@@ -3,10 +3,9 @@
 
 @{
     var settings = Model.PartFieldDefinition.GetSettings<BooleanFieldSettings>();
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Value)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
     <div class="@Orchard.GetEndCssClasses(true)">
         <div class="form-check">
             <input asp-for="Value" type="checkbox" class="form-check-input content-preview-select" checked="@Model.Value" />

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/ContentPickerField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/ContentPickerField.Edit.cshtml
@@ -7,7 +7,6 @@
     var selectedItems = JsonConvert.SerializeObject(Model.SelectedItems, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() });
     var partName = Model.PartFieldDefinition.PartDefinition.Name;
     var fieldName = Model.PartFieldDefinition.Name;
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
     var searchUrl = Url.RouteUrl(new { area = "OrchardCore.ContentFields", controller = "ContentPickerAdmin", action = "SearchContentItems", part = partName, field = fieldName });
     var vueElementId = $"ContentPicker_{partName}_{fieldName}_{Guid.NewGuid().ToString("n")}";
     var multiple = settings.Multiple.ToString().ToLowerInvariant();
@@ -16,7 +15,7 @@
 <script asp-name="vue-multiselect-wrapper" asp-src="~/OrchardCore.ContentFields/Scripts/vue-multiselect-wrapper.js" at="Foot" depends-on="vuejs, vue-multiselect, sortable, vuedraggable"></script>
 <style asp-name="vue-multiselect" at="Foot"></style>
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.ContentItemIds)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.ContentItemIds)_FieldWrapper">
     <label asp-for="ContentItemIds" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="ContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateField.Edit.cshtml
@@ -2,11 +2,10 @@
 @using OrchardCore.Mvc.Utilities
 @{
     var settings = Model.PartFieldDefinition.GetSettings<DateFieldSettings>();
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
 <script asp-name="jQuery-ui-i18n" at="Foot"></script>
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Value)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
     <label asp-for="Value" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperCssClasses()">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateTimeField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateTimeField.Edit.cshtml
@@ -2,10 +2,9 @@
 @using OrchardCore.Mvc.Utilities
 @{
     var settings = Model.PartFieldDefinition.GetSettings<DateTimeFieldSettings>();
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 <script asp-name="jQuery-ui-i18n" at="Foot"></script>
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.LocalDateTime)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.LocalDateTime)_FieldWrapper">
     <label asp-for="LocalDateTime" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperCssClasses()">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Monaco.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Monaco.Edit.cshtml
@@ -4,10 +4,9 @@
     var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
     var monacoSettings = Model.PartFieldDefinition.GetSettings<HtmlFieldMonacoEditorSettings>();
     var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Html)_FieldWrapper">
     <label asp-for="Html" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         @await DisplayAsync(await New.ShortcodeModal())

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Multiline.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Multiline.Edit.cshtml
@@ -3,10 +3,9 @@
 @{
     var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
     var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Html)_FieldWrapper">
     <label asp-for="Html" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         @await DisplayAsync(await New.ShortcodeModal())

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml
@@ -6,7 +6,6 @@
     var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
     var trumbowygSettings = Model.PartFieldDefinition.GetSettings<HtmlFieldTrumbowygEditorSettings>();
     var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
 <script asp-name="trumbowyg-plugins" depends-on="admin" version="2" at="Foot"></script>
@@ -21,7 +20,7 @@ else
 <script asp-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.min.js" debug-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.js" depends-on="trumbowyg" at="Foot"></script>
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Html)_FieldWrapper">
     <label asp-for="Html" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         @await DisplayAsync(await New.ShortcodeModal())

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Wysiwyg.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Wysiwyg.Edit.cshtml
@@ -5,15 +5,14 @@
 @{
     var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
     var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
 <style asp-name="trumbowyg" version="2"></style>
 <script asp-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.min.js" debug-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.js" depends-on="trumbowyg" at="Foot"></script>
 <script asp-name="trumbowyg-shortcodes" at="Foot"></script>
 
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Html)_FieldWrapper">
     <label asp-for="Html" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         @await DisplayAsync(await New.ShortcodeModal())

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField.Edit.cshtml
@@ -3,10 +3,9 @@
 @{
     var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
     var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Html)_FieldWrapper">
     <label asp-for="Html" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         @await DisplayAsync(await New.ShortcodeModal())

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/LinkField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/LinkField.Edit.cshtml
@@ -6,11 +6,10 @@
     var isTextRequired = settings.LinkTextMode == LinkTextMode.Required && string.IsNullOrWhiteSpace(settings.DefaultText);
     var urlClass = settings.Required ? "required" : null;
     var textClass = settings.LinkTextMode == LinkTextMode.Required ? "required" : null;
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
     var useFormFloating = string.IsNullOrWhiteSpace(settings.UrlPlaceholder) || string.IsNullOrWhiteSpace(settings.TextPlaceholder);
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Text)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Text)_FieldWrapper">
     <label asp-for="Url" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div class="row">

diff --git a/...ore.Modules/OrchardCore.ContentFields/Views/LocalizationSetContentPickerField.Edit.cshtml b/...ore.Modules/OrchardCore.ContentFields/Views/LocalizationSetContentPickerField.Edit.cshtml
@@ -11,7 +11,6 @@
     var selectedItems = JsonConvert.SerializeObject(Model.SelectedItems, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() });
     var partName = Model.PartFieldDefinition.PartDefinition.Name;
     var fieldName = Model.PartFieldDefinition.Name;
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
     var searchUrl = Url.RouteUrl(new { area = "OrchardCore.ContentFields", controller = "LocalizationSetContentPickerAdmin", action = "SearchLocalizationSets", part = partName, field = fieldName });
     var vueElementId = $"LocalizedContentPicker_{partName}_{fieldName}_{Guid.NewGuid().ToString("n")}";
     var multiple = settings.Multiple.ToString().ToLowerInvariant();
@@ -20,7 +19,7 @@
 <script asp-name="vue-multiselect-wrapper" asp-src="~/OrchardCore.ContentFields/Scripts/vue-multiselect-wrapper.js" at="Foot" depends-on="vuejs, vue-multiselect, sortable, vuedraggable"></script>
 <style asp-name="vue-multiselect" at="Foot"></style>
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.LocalizationSets)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.LocalizationSets)_FieldWrapper">
     <label asp-for="LocalizationSets" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="LocalizationSetContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">

diff --git a/...chardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-CheckboxList.Edit.cshtml b/...chardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-CheckboxList.Edit.cshtml
@@ -10,10 +10,9 @@
                     Value = option.Value,
                     Selected = Model.Values.Contains(option.Value)
                 }).ToList();
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Values)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Values)_FieldWrapper">
     <label class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         @for (int i = 0; i < options.Count; i++)

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-Picker.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-Picker.Edit.cshtml
@@ -18,7 +18,6 @@
 
     var partName = Model.PartFieldDefinition.PartDefinition.Name;
     var fieldName = Model.PartFieldDefinition.Name;
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 
     var vueElementId = $"MultiTextField-Picker_{partName}_{fieldName}_{Guid.NewGuid().ToString("n")}";
 
@@ -28,7 +27,7 @@
 <script asp-src="~/OrchardCore.ContentFields/Scripts/vue-multiselect-multitextfieldpicker.min.js" debug-src="~/OrchardCore.ContentFields/Scripts/vue-multiselect-multitextfieldpicker.js" asp-name="multitextfieldpicker" at="Foot" depends-on="vuejs, vue-multiselect"></script>
 <style asp-name="vue-multiselect" at="Foot"></style>
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Values)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Values)_FieldWrapper">
     <label class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div id="@vueElementId" class="multitextfieldpicker" data-selectedvalues="@jSelectedValues" data-options="@jOptions" data-valueskey="@valuesKey">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField.Edit.cshtml
@@ -10,10 +10,9 @@
 
         options.Add(new SelectListItem { Text = option.Name, Value = option.Value, Selected = isSelected });
     }
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Values)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Values)_FieldWrapper">
     <label asp-for="Values" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         <select class="form-select content-preview-select" asp-for="Values" asp-items="options" multiple></select>

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Range.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Range.Edit.cshtml
@@ -10,10 +10,9 @@
     string id = Html.IdFor(m => m.Value);
     string javascriptDecimalSeparator = CultureInfo.InvariantCulture.NumberFormat.NumberDecimalSeparator;
     string serverDecimalSeparator = CultureInfo.CurrentUICulture.NumberFormat.NumberDecimalSeparator;
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Value)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
     <label asp-for="Value" class="@Orchard.GetLabelCssClasses()">@name</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperCssClasses()">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Select.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Select.Edit.cshtml
@@ -6,10 +6,9 @@
     decimal step = (decimal)Math.Pow(10, 0 - settings.Scale);
     decimal from = settings.Minimum.HasValue ? settings.Minimum.Value : 0;
     decimal to = settings.Maximum.HasValue ? settings.Maximum.Value : 10;
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Value)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
     <label asp-for="Value" class="@Orchard.GetLabelCssClasses()">@name</label>
     <div class="@Orchard.GetEndCssClasses()">
 

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Slider.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Slider.Edit.cshtml
@@ -10,12 +10,11 @@
     string id = Html.IdFor(m => m.Value);
     string javascriptDecimalSeparator = CultureInfo.InvariantCulture.NumberFormat.NumberDecimalSeparator;
     string serverDecimalSeparator = CultureInfo.CurrentUICulture.NumberFormat.NumberDecimalSeparator;
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
 <script asp-name="nouislider" at="Foot"></script>
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Value)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
     <label asp-for="Value" class="@Orchard.GetLabelCssClasses()">@name</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperCssClasses()">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Spinner.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Spinner.Edit.cshtml
@@ -13,10 +13,9 @@
     string id = Html.IdFor(m => m.Value);
     string javascriptDecimalSeparator = CultureInfo.InvariantCulture.NumberFormat.NumberDecimalSeparator;
     string serverDecimalSeparator = CultureInfo.CurrentUICulture.NumberFormat.NumberDecimalSeparator;
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Value)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
     <label asp-for="Value" class="@Orchard.GetLabelCssClasses()">@name</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperCssClasses()">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField.Edit.cshtml
@@ -5,10 +5,9 @@
     string name = Model.PartFieldDefinition.DisplayName();
     decimal min = settings.Minimum.HasValue ? settings.Minimum.Value : 0;
     decimal max = settings.Maximum.HasValue ? settings.Maximum.Value : 10000;
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Value)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
     <label asp-for="Value" class="@Orchard.GetLabelCssClasses()">@name</label>
     <div class="@Orchard.GetEndCssClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperCssClasses()">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-CodeMirror.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-CodeMirror.Edit.cshtml
@@ -3,10 +3,9 @@
 @{
     var settings = Model.PartFieldDefinition.GetSettings<TextFieldSettings>();
     var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
-    var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
 }
 
-<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.Text)_FieldWrapper">
+<div class="@Orchard.GetFieldWrapperCssClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Text)_FieldWrapper">
     <label asp-for="Text" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndCssClasses()">
         <textarea asp-for="Text" rows="5" class="form-control content-preview-text" dir="@culture.GetLanguageDirection()"></textarea>