Has anyone gotten CTA card visibility working with the API and source:html?

Developer help
1

I know, I’m sometimes the leading edge on these things, but I’m stumped, so figured I’d post it here. I think I’m looking at a bug, not user error, but just in case.

I’m trying to create a new post with the Ghost Admin API. I have a CTA card, that should only be available to free members.
Here’s the start of the html I’m passing in:

<!--kg-gated-block:begin nonMember:false memberSegment:"status:free" -->        <div class="kg-cta-content">
            
            
                <div class="kg-cta-content-inner">
                
                    <div class="kg-cta-text">
                        <p><span style="white-space: pre-wrap;">Thanks for reading. Paying subscribers receive access to each article on Fridays. Free subscribers receive access on the following Monday. Want faster access? Upgrade now!</span></p>
                    </div>
                
                
                    <a href="#/portal/account/plans" class="kg-cta-button " style="background-color: #000000; color: #ffffff;">
                        Upgrade your plan
                    </a>
                    
                </div>
            
        </div>
    </div>
<!--kg-gated-block:end-->

(I got this HTML by inspecting what came from the Admin API so I’m pretty sure I’ve got it right!)

The CTA card is created correctly, based on my viewing in the editor, EXCEPT that all the visibility toggles are ‘on’, although they should not be.

Steps to Reproduce

Here’s the function I’m using:

async function createNewsletterDraft(html, dateRange, options = {}) {
const api = getAdminAPI();

const title = options.title || Newsletter - ${dateRange.after} to ${dateRange.before};const tags = options.tags || ['#newsletter-draft'];

try {let result;
  // Create new draft
  const post = {
    title: title,
    html: html,
    status: 'draft',
    tags: tags,
    custom_excerpt: `Newsletter covering ${dateRange.after} to ${dateRange.before}`
  };
  
  result = await api.posts.add(post, { source: 'html' });


return result;
} catch (error) {console.error('Error creating newsletter draft:', error);throw error;}}

Also posted over on Github, but will happily close it if someone can point out my problem :slight_smile:

2

Just guessing based on snippet shared, could you try with an extra line brake after the opening of kg-comment? I wonder if it’s not parsing the comment block correctly and just ignoring it since it’s showing up on the same line as the opening div. :crossed_fingers:

3

@Cathy_Sarisky it’s not working because there’s no support for parsing the gated block comments when converting to lexical right now. The comments are there because they are used by the API (and by extension the front-end) to modify the rendered html values based on access level but we never got as far as adding support into our node parsers for the HTML→lexical flow.

4

Thanks! That’s what I was afraid of. Back to lexical then!