Unable to use parameter groups named "text" with nested components

I have built heading components with parameters. The component is a straightforward “headline” element, and the parameters are also pretty straightforward to control content, color, size, etc. This all works as expected. For completeness, here are the parameters used in the headings:

Headline Parameters

{
“text” : {
“label” : “Header Text”,
“type” : “text”,
“initial” : “H1 Headline”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Content, use {{dc:p:text}}”,
“comment” : “Make sure to update this name for each header! The isVar:true pair enables different settings for different screen sizes.”
}
},
“color” : {
“label” : “Color”,
“type” : “color”,
“initial” : “global-color:9V5q72EJeu4uzShxEw”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:color}}”,
“comment” : “To get the global color, enable Dev Toolkit (Cornerstone button > gear), then go to Dev Toolkit (Cornerstone button > drill) > tools > Colors (edit state) > [your color’s name]. Get the value of _id, prepend global-color:, and paste it to initial above.”
}
},
“sizing-spacing” : {
“type” : “group”,
“label” : “Sizes & Spacing”,
“params” : {
“font-size” : {
“description” : “This is the size for the entire field, so items like margins will be set relative to this.”,
“label” : “Font Size”,
“type” : “font-size”,
“initial” : “3.5em”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Font Size, use {{dc:p:sizing-spacing.font-size}}”,
“comment” : “Make sure to update this to the proper size for this heading! The isVar:true pair enables different settings for different screen sizes.”
}
},
“top-margin” : {
“label” : “Top Margin”,
“type” : “size”,
“initial” : “.65em”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Margin > Top, use {{dc:p:sizing-spacing.top-margin}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
},
“right-margin” : {
“label” : “Right Margin”,
“type” : “size”,
“initial” : “0”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Margin > Right, use {{dc:p:sizing-spacing.right-margin}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
},
“bottom-margin” : {
“label” : “Bottom Margin”,
“type” : “size”,
“initial” : “0”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Margin > Bottom, use {{dc:p:sizing-spacing.bottom-margin}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
},
“left-margin” : {
“label” : “Left Margin”,
“type” : “size”,
“initial” : “0”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Margin > Left, use {{dc:p:sizing-spacing.left-margin}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
},
“line-height” : {
“label” : “Line Height”,
“type” : “line-height”,
“initial” : “inherit”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Format > Height, use {{dc:p:sizing-spacing.line-height}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
}
}
},
“alignment” : {
“type” : “choose”,
“label” : “Align”,
“initial” : “inherit”,
“options” : [
{ “value” : “left”, “icon” : “ui:text-align-left” },
{ “value” : “center”, “icon” : “ui:text-align-center” },
{ “value” : “right”, “icon” : “ui:text-align-right” },
{ “value” : “justify”, “icon” : “ui:text-align-justify” }
],
“isVar” : true,
“_documentation” : {
“usage” : “Enable Dev Toolkit (Cornerstone button > gear), then set Dev Toolkit (Cornerstone button > drill) > tools > Breakout Mode to ‘true’ (CTRL + ALT + B is a shortcut to this setting). Then go to Primary > Format > Align and enter {{dc:p:alignment}}. You’ll probably want to turn off breakout mode after.”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
}
}

I then built a CTA component, which uses one of the pre-built headings, among a mix of other parameterized components and standard elements. The CTA uses parameters, which are then passed to the input of the heading. My parameters for this are a bit more complicated, using a number of groups to organize everything. If name my group text, my components can’t access the content. This doesn’t apply to parameter field names. From my testing:

  • Standard elements can access {{dc:p:text.title-text}}
  • Components cannot access {{dc:p:text.title-text}}
  • Components can access {{dc:p:foobar.title-text}}
  • Components can access {{dc:p:buttons.colors.text.base}}

For completeness, here are the parameters used in the CTA:

CTA Parameters

{
“image” : {
“type” : “group”,
“label” : “Image”,
“params” : {
“image” : {
“description” : “”,
“label” : “Image”,
“type” : “image”,
“initial” : “https://picsum.photos/500/300”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:image.image}}”,
“comment” : “”
}
},
“position-x” : {
“description” : “”,
“label” : “Position (X)”,
“type” : “dimension”,
“units” : ["%"],
“initial” : “50%”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:image.position-x}}”,
“comment” : “”
}
},
“position-y” : {
“description” : “”,
“label” : “Position (Y)”,
“type” : “dimension”,
“units” : ["%"],
“initial” : “50%”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:image.position-y}}”,
“comment” : “”
}
}
}
},
“colors” : {
“type” : “group”,
“label” : “Colors”,
“params” : {
“background” : {
“description” : “”,
“label” : “Section BG”,
“type” : “color”,
“initial” : “global-color:YYnrcGJVYMLgYSdyx3”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:colors.background}}”,
“comment” : “”
}
},
“heading” : {
“description” : “”,
“label” : “Heading text”,
“type” : “color”,
“initial” : “global-color:ym7igf0g5H6GwQbkSG”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:colors.heading}}”,
“comment” : “”
}
}
}
},
“text” : { << group name at issue <<
“type” : “group”,
“label” : “Text”,
“params” : {
“title-text” : {
“label” : “Title Text”,
“type” : “text”,
“initial” : “Call to Action”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:text.title-text}}”,
“comment” : “”
}
},
“body-text” : {
“label” : “Body Text”,
“type” : “text-editor”,
“initial” : “Input your text here! The text element is intended for longform copy that could potentially include multiple paragraphs.”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:text.body-text}}”,
“comment” : “”
}
}
}
},
“buttons” : {
“type” : “group”,
“label” : “Buttons”,
“params” : {
“button-1-text” : {
“description” : “”,
“label” : “Button 1 text”,
“type” : “text”,
“initial” : “Learn More”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.button-1-text}}”,
“comment” : “”
}
},
“button-1-url” : {
“description” : “”,
“label” : “Button 1 URL”,
“type” : “text”,
“initial” : “#”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.button-1-text}}”,
“comment” : “”
}
},
“button-2-text” : {
“description” : “If you do not enter text in this field, the second button will not be displayed”,
“label” : “Button 2 text”,
“type” : “text”,
“initial” : “Learn More”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.button-2-text}}”,
“comment” : “”
}
},
“button-2-url” : {
“description” : “”,
“label” : “Button 2 URL”,
“type” : “text”,
“initial” : “#”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.button-2-text}}”,
“comment” : “”
}
},
“colors” : {
“type” : “group”,
“label” : “Button Colors”,
“noPicker” : false,
“params” : {
“background” : {
“description” : “”,
“label” : “Background”,
“type” : “color-pair”,
“initial” : {
“base” : “global-color:ehw1byG5yZdXYUvYXY”,
“alt” : “global-color:9V5q72EJeu4uzShxEw”
},
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.colors.background.base}}/{{dc:p:buttons.colors.background.alt}}”,
“comment” : “”
}
},
“border” : {
“description” : “”,
“label” : “Border”,
“type” : “color-pair”,
“initial” : {
“base” : “global-color:ehw1byG5yZdXYUvYXY”,
“alt” : “global-color:ehw1byG5yZdXYUvYXY”
},
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.colors.border.base}}/{{dc:p:buttons.colors.border.alt}}”,
“comment” : “”
}
},
“text” : {
“description” : “”,
“label” : “Text”,
“type” : “color-pair”,
“initial” : {
“base” : “global-color:9V5q72EJeu4uzShxEw”,
“alt” : “global-color:ehw1byG5yZdXYUvYXY”
},
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.colors.text.base}}/{{dc:p:buttons.colors.text.alt}}”,
“comment” : “”
}
}
}
}
}
}
}

Should text be working, or am I missing something in the documentation?

Edit: Aw, my indentation. Let me know if you need to actually go through the parameters and I’ll send it as a separate file.

Your parameters were working for me and using a group called text was not an issue. What is different from how I’m using it on this page “Component Text Group Issue”?

http://theme.co/app/uploads/share/bugs/component-text-group-issue.tco

Thanks for testing this. I think the major difference is the nested components–it looks like you used the CTA parameters and attached it to a headline element, and then exported that as a component. I’m also able to use a parameter named “text” in–

I may have just figured out the issue, and it’s a bit of a facepalm moment.

As I was starting to say, I am able to use a parameter named “text” in my headline components. Those headline components are then inserted into a second element, which is also exported as a component. That way, the headers in my CTAs match the rest of the site. That nesting functionality works fine. However, I’m using the same root element name (“text”) in both the parent component and the nested/child component, and I bet there’s some sort of collision happening.

Unless you think that this warrants further investigation, I think this issue can be closed. If you do want to investigate further, let me know what you need from me. I’m also happy to get you access to the live site.

You are most welcome, Andy.