Adding description to a component spec removes the label from the editor UI

[ecupaio]

Version Info
Jekyll 4.2.1
"@bookshop/browser": "3.3.0"
"@bookshop/jekyll-engine": "3.3.0"
"@bookshop/live": "3.3.0"
"@bookshop/generate": "3.3.0"

What I'm Doing
I'm adding a label and description to my component specs so that users can see the title of the component they will add and a description of what it is.

spec: 
  structures:
  - content_blocks
  label: "Donation - 1 column"
  description: "1 column layout of the donation section."
  icon:
  tags: []

What I Expect
When I select Add component on the editor, I expect to at least see the title of the component I want to select.

What's Happening
I see only the truncated description:

I notice if I remove the description, the title will show, but that's just a hacky workaround.

[bglw]

👋 Hi Ed! Thanks for the report.

It turns out this is actually a visual bug on the CMS side — this UI is truncating the component label when the description is too long, rather than vice versa. You can see what I mean here:

I'll chase this up as a bug internally and report back here when fixed.

Another fix that is less of a hacky workaround, and often just a good idea in general, is to use the modal component picker. If you add the following to your cloudcannon.config.yml: (or equivalent config to an equivalent file)

_structures:
  content_blocks:
    style: modal

Then you'll pick components from a modal rather than a dropdown, which doesn't exhibit the same bug. Might be good at least as a temporary measure until we get this fixed up 🙂

[ecupaio]

I found that modal setting on the Hydra theme template so that actually works better for my purposes, but my issue still remains that the description wasn’t even truncated, it was absent. Perhaps it didn't like the dash ¯_(ツ)_/¯

It's a separate issue (please don't go stackoverflow on me. i can open a separate issue if necessary), but I'm not getting a preview despite having the settings configured:

spec: 
  structures:
  - content_blocks
  label: "Basic hero"
  description: 'Title section that goes at the top of a page. Image is optional.'
  icon:
  tags: []
  
blueprint: 
  title: ""
  image: ""

preview:
  title: "Page heading"
  image: "/img/about-hero.jpg"

_inputs: 
  title: 
    type: text
  image: 
    type: image 

I did everything according to the docs, but it's showing blanks.

[bglw]

Sorry for not getting back to you — did you make any progress on this?

I haven't seen the preview option not applying in the component browser before, though note that this has no impact on the visual editor within CloudCannon.

Do you have a screenshot of what you are (or aren't) seeing?

[ecupaio]

[bglw]

Ah, yes that's (currently) an unfortunate clash of what Bookshop calls preview and what CloudCannon calls preview. Bookshop's preview only applies to Bookshop's offline component browser, not the component picker in CloudCannon. I definitely need to work on separating these concepts clearly.

Where you're seeing No preview available, you can supply a custom component thumbnail as the preview image. There are plans to use Bookshop's data to generate a preview screenshot here, but that hasn't come to fruition yet.

[ecupaio]

ah got it. so what am i supposed to see when I fill out the component preview data? According to your docs it says "...you might want to see a preview of your component filled out with example data.The preview object will be merged with your blueprint before a component is rendered in the component browser". What steps should I take to see that preview?

[bglw]

When the Bookshop docs refer to the component browser, they're referring to Bookshop's component browser, i.e. on the starter template: https://balmy-goose.cloudvent.net/components#hero:hugo — this is the component browser that you integrate with or alongside your site, which helps develop and test components locally while building your site.

The preview data of a component is used when loading a component in the above browser, so that while building and testing your components you can have the example data more fleshed out than the data used when creating a new component in-CMS.