Persistent "Module inherits standard fields" error on module

Develop, Build & Integrate CMS Development
,
1

I’m creating a block for the marketplace and encountering a persistent issue labelled “Module inherits standard fields”, specifically:

Module module_name.module with field type(s) font needs to inherit from at least one of the following standard field names. Please add [theme.heading_font,theme.body_font].

I have a theme enabled and the custom module exists on a theme template. The theme settings is using the font “Montserrat”.

My module.json (for my font field) looks like this:

{
 "id" : "8cd8266b-3608-35ec-0730-aeeb7a460176",
 "name" : "header_font",
 "display_width" : null,
 "label" : "Header Font",
 "required" : true,
 "locked" : false,
 "visibility" : {
 "controlling_field" : null,
 "controlling_field_path" : "style.typography.inherit_header_font",
 "controlling_value_regex" : "false",
 "property" : null,
 "operator" : "EQUAL",
 "access" : null
 },
 "load_external_fonts" : true,
 "type" : "font",
 "default" : {
 "styles" : { },
 "variant" : "600",
 "font" : "Poppins",
 "fallback" : "sans-serif",
 "font_set" : "GOOGLE",
 "size" : 48,
 "size_unit" : "px"
 },
}

In my module, I have an option to set a custom font, if needed. However, the default font should inherit from theme settings.

If I run the following HubL in my markup:

Heading: {{ theme.heading_font.css }}<br /><br />
Body: {{ theme.body_font.css }}

It renders:

Heading: font-size: 36px;font-family: Montserrat; font-weight: 600;

Body: color: #494A52;font-size: 16px;font-family: Montserrat, sans-serif;

So it is correctly finding the font from theme settings.

Then, in my module styles, I have the following:

{% require_css %}
 <style>
 {% scope_css %}

 .text h1,
 .text h2,
 .text h3,
 .text h4,
 .text h5,
 .text h6{
 {{ theme.heading_font.css }}
 }

 .text .text-copy,
 .text .text-copy *{
 {{ theme.body_font.css }}
 }

 {% end_scope_css %}
 </style>
{% end_require_css %}

Which renders the correct CSS on the front-end. But when validating in the interface, I still get the “Module inherits standard fields” error.

I have also looked and worked through the HubSpot documentation here and tried using “alternate_names”:

{
 "id" : "8cd8266b-3608-35ec-0730-aeeb7a460176",
 "name" : "header_font",
 "display_width" : null,
 "label" : "Header Font",
 "required" : true,
 "locked" : false,
 "visibility" : {
 "controlling_field" : null,
 "controlling_field_path" : "style.typography.inherit_header_font",
 "controlling_value_regex" : "false",
 "property" : null,
 "operator" : "EQUAL",
 "access" : null
 },
 "load_external_fonts" : true,
 "type" : "font",
 "default" : {
 "styles" : { },
 "variant" : "600",
 "font" : "Poppins",
 "fallback" : "sans-serif",
 "font_set" : "GOOGLE",
 "size" : 48,
 "size_unit" : "px"
 },
 "alternate_names":["heading_font"]
}, {
 "id" : "cde823d6-9101-a694-b65e-7c2931452a16",
 "name" : "header_line_height",
 "display_width" : null,
 "label" : "Header Line Height",
 "required" : true,
 "locked" : false,
 "visibility" : {
 "controlling_field" : null,
 "controlling_field_path" : "style.typography.inherit_header_font",
 "controlling_value_regex" : "false",
 "property" : null,
 "operator" : "EQUAL",
 "access" : null
 },
 "display" : "slider",
 "min" : 1.2,
 "max" : 1.5,
 "step" : 0.1,
 "type" : "number",
 "default" : 1.2
}, {
 "id" : "14b67519-ce33-9ee7-87b6-cb0b5e56235a",
 "name" : "body_font",
 "display_width" : null,
 "label" : "Body Font",
 "required" : true,
 "locked" : false,
 "visibility" : {
 "controlling_field" : null,
 "controlling_field_path" : "style.typography.inherit_body_font",
 "controlling_value_regex" : "false",
 "property" : null,
 "operator" : "EQUAL",
 "access" : null
 },
 "load_external_fonts" : true,
 "type" : "font",
 "default" : {
 "styles" : { },
 "variant" : "regular",
 "font" : "Inter",
 "fallback" : "sans-serif",
 "font_set" : "GOOGLE",
 "size" : 18,
 "size_unit" : "px"
 },
 "alternate_names":["body_font"]
},

Still the same error. Dumbfounded at the moment as the error message nor docs provide further instructions.

Any ideas?

2

The font field in your module needs to inherit the theme settings using inherited_value (the second code block below the video in the documentation you referenced shows this), then your CSS should pull from the module field. Using the required theme settings directly in the CSS will not be accepted by the validator.

Field in module:

{
 "id" : "8cd8266b-3608-35ec-0730-aeeb7a460176",
 "name" : "header_font",
 "display_width" : null,
 "label" : "Header Font",
 "required" : true,
 "locked" : false,
 "load_external_fonts" : true,
 "type" : "font",
 "inherited_value": {
 "default_value_path": "theme.heading_font",
 },
 "default" : {
 "styles" : { },
 "variant" : "600",
 "font" : "Poppins",
 "fallback" : "sans-serif",
 "font_set" : "GOOGLE",
 "size" : 48,
 "size_unit" : "px"
 }
}

CSS in module:

{% require_css %}
 <style>
 {% scope_css %}
 .text h1,
 .text h2,
 .text h3,
 .text h4,
 .text h5,
 .text h6{
 {{ module.header_font.css }}
 }
 {% end_scope_css %}
 </style>
{% end_require_css %}
3

Thanks for pointing me in the right direction @alyssamwilie.

It’s worth noting that I have to also include property_value_paths in order to get past the message, as such:

"inherited_value" : {
 "default_value_path" : "theme.heading_font",
 "property_value_paths" : {
 "color" : "theme.heading_font.color",
 "font" : "theme.heading_font.font",
 "size" : "theme.heading_font.size",
 "size_unit" : "theme.heading_font.size_unit",
 "style" : "theme.heading_font.style"
 }
},