Versioning

Last updated:

Versioning enables HubSpot to release new versions of default assets without impacting your existing content. For example, if HubSpot releases a new version of a default asset, any website pages that use the previous version of the asset will continue to work as expected. HubSpot will only release a new version of a default asset if the changes impact the editor experience or they involve significant changes to the asset's UI.

When developing themes for multiple accounts, you can build versioning into them so that they work as expected regardless of the versions in the account.

Supporting versions

When developing a theme, you won't necessarily know which version of an asset that an account is using. For example, the divider module can be either v0 or v1. Therefore, you'll need to develop your theme to be compatible with both module versions. 

HubSpot automatically maps v0 fields to v1 fields, so referencing v0 fields will enable the theme to work with both v0 and v1 modules. Field references are not backwards compatible, meaning that HubSpot will not automatically map v1 field references to v0 fields.

To account for changes in the module's HTML, CSS, and JavaScript, you can use conditional statements to configure modules depending on the account's available module versions.

Get an asset version

When setting up a conditional statement, you can get a module's version within an HTML, CSS, or JS file by using the following snippet: get_asset_version("@hubspot/module-name").

The module's version will be returned as a string, enabling you to configure module options based on the returned version.

{% if get_asset_version("@hubspot/module-name") === "1" %} hr { border-bottom-width: 5px; } {% endif %}

Modules with version support

Below, learn more about the modules that currently support versioning.

Divider module

A new version of the default divider module has been released. This version update impacts the following module files:

Below, learn more about the new v1 version updates in each file.

fields.json

// v1 [ { "label": "Styles", "name": "styles", "type": "group", "tab": "STYLE", "children": [ { "label": "Line", "name": "line", "type": "group", "children": [ { "label": "Color", "name": "color", "type": "color", "required": true, "aliases": ["color"], "default": { "color": "#000000", "opacity": 100 } }, { "label": "Style", "name": "style", "type": "choice", "choices": [ ["solid", "Solid"], ["dotted", "Dotted"], ["dashed", "Dashed"] ], "display": "select", "required": true, "aliases": ["line_type"], "default": "solid" }, { "label": "Thickness", "name": "thickness", "type": "number", "display": "text", "max": 10, "min": 1, "required": true, "step": 1, "default": 1, "aliases": ["height"], "suffix": "px" } ] }, { "label": "Size", "name": "size", "type": "group", "children": [ { "label": "Width", "name": "width", "id": "styles.size.width", "type": "number", "help_text": "Percentage of the area the divider is placed into.", "max": 100, "min": 1, "required": true, "step": 1, "suffix": "%", "aliases": ["width"], "default": 50 } ] }, { "label": "Alignment", "name": "alignment", "type": "group", "visibility": { "controlling_field": "styles.size.width", "controlling_value_regex": "100", "operator": "NOT_EQUAL" }, "children": [ { "label": "Alignment", "name": "alignment", "type": "alignment", "default": { "horizontal_align": "CENTER" }, "alignment_direction": "HORIZONTAL" } ] }, { "label": "Spacing", "name": "spacing", "type": "group", "children": [ { "label": "Spacing", "name": "spacing", "type": "spacing", "visibility": { "hidden_subfields": { "padding": true } }, "default": { "margin": { "top": { "value": "10", "units": "px" }, "bottom": { "value": "10", "units": "px" } } } } ] } ] } ]// v0 [ { "label": "Height", "name": "height", "id": "f25c7200-c134-2cd0-ebac-2f2e7152c0a9", "type": "number", "display": "text", "max": 8, "min": 1, "required": true, "step": 1, "suffix": "px", "default": 1 }, { "label": "Width", "name": "width", "id": "69957b03-2442-9cc8-3666-c67e96f37645", "type": "number", "help_text": "Percentage of the area the divider is placed into.", "display": "slider", "max": 100, "min": 1, "required": true, "step": 1, "suffix": "%", "default": 50 }, { "label": "Color", "name": "color", "id": "a3f3e26c-5bca-611e-ea99-c91d4f1c88bb", "type": "color", "required": true, "default": { "color": "#000000", "opacity": 100 } }, { "label": "Line type", "name": "line_type", "id": "5dfe1bf6-99b3-5339-3a05-db1aee413317", "type": "choice", "choices": [ ["solid", "Solid"], ["dotted", "Dotted"], ["dashed", "Dashed"] ], "display": "select", "required": true, "default": "solid" }, { "label": "Alignment", "name": "alignment", "id": "2919e8d6-68f4-9cfc-5253-8e36d3f54807", "type": "choice", "choices": [ ["left", "Left"], ["center", "Center"], ["right", "Right"] ], "display": "select", "required": true, "default": "center" }, { "label": "Show padding?", "name": "show_padding", "id": "c2849a01-3d7b-a5b7-8d80-969f2a3e65f0", "type": "boolean", "default": false }, { "label": "Padding", "name": "padding", "id": "14154310-667e-8128-0394-96c83342c964", "type": "number", "inline_help_text": "Max of 20 pixels", "visibility": { "controlling_field": "c2849a01-3d7b-a5b7-8d80-969f2a3e65f0", "controlling_value_regex": "true", "operator": "EQUAL" }, "display": "text", "max": 20, "min": 1, "required": true, "step": 1, "suffix": "px", "default": 5 } ]

Note the following divider module field updates in the new version:

  • All fields that were previously in the Content tab have been moved to the Styles tab.
  • The following fields have moved, but HubSpot automatically links the previous references to the new field names, so you don't need to make any manual updates:
    • The height field has been moved to styles.line.thickness.
    • The width field has been moved to styles.size.width. 
    • The color field has been moved to styles.line.color.
    • The line type field has been moved to styles.line.style.
  • The alignment field, which was previously a choice field, has been replaced by a new field type of Alignment, and can be accessed under styles.alignment.alignment.
  • The padding field, which was previously a number field, has been replaced by a new field type of Spacing, and can be accessed under styles.spacing.spacing.
  • The Show padding? field has been removed.

module.html

{# v1 #} {# Module styles #} {% require_css %} <style> {% scope_css %} hr { border: 0 none; border-bottom-width: {{ module.styles.line.thickness ~ "px" }}; border-bottom-style: {{ module.styles.line.style }}; border-bottom-color: rgba({{ module.styles.line.color.color|convert_rgb }}, {{ module.styles.line.color.opacity / 100 }}); margin-left: {{ "auto" if (module.styles.alignment.alignment.horizontal_align == "CENTER" or module.styles.alignment.alignment.horizontal_align == "RIGHT") else "0" }}; margin-right: {{ "auto" if (module.styles.alignment.alignment.horizontal_align == "CENTER" or module.styles.alignment.alignment.horizontal_align == "LEFT") else "0" }}; {% if module.styles.spacing.spacing.css %} {{ module.styles.spacing.spacing.css }} {% endif %} width: {{ module.styles.size.width ~ "%" }}; } {% end_scope_css %} </style> {% end_require_css %} {# Divider #} <hr>{# v0 #} {% macro buildStyles() %} width: {{ module.width ~ "%" }}; border: 0 none; border-bottom-width: {{ module.height ~ "px" }}; border-bottom-style: {{ module.line_type }}; border-bottom-color: rgba({{ module.color.color|convert_rgb }}, {{ module.color.opacity / 100 }}); margin-left: {{ "auto" if (module.alignment == "center" or module.alignment == "right") else "0" }}; margin-right: {{ "auto" if (module.alignment == "center" or module.alignment == "left") else "0" }}; margin-top: {{ module.padding ~ "px" if module.show_padding else "0" }}; margin-bottom: {{ module.padding ~ "px" if module.show_padding else "0" }}; {% endmacro %} <hr style="{{ buildStyles() }}">

Note that the only difference in the divider module's HTML in v1 is that the styles that are applied to a horizontal rule get applied via <style> tags in the head of the page, as opposed to being set via inline styles in v0.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.