Missing Block Content ID for Visual Builder Integration

[rawnanoob]

The visual builder requires the data-epi-block-id attribute for proper component rendering and interaction, but there is currently no way to retrieve the block/content key from the Infer type.

Expected Behavior
We should be able to retrieve and use the block ID like this:

export default function FAQ({ opti }: FAQProps) {
  const { pa } = getPreviewUtils(opti);
  return (
    <section 
      className="about-us"
      data-epi-block-id={opti.key} // ← This should be available
    >
      <h2>{opti.heading}</h2>
      <div className="about-us-content">
        <div className="about-us-text">
          <div
            {...pa('body')}
            dangerouslySetInnerHTML={{ __html: opti.body?.html ?? '' }}
          />
        </div>
      </div>
    </section>
  );
}

[exacs]

Hi @rawnanoob, thanks for your question.

The key needed for rendering preview attributes is only available in components that support it, the ones that you pass to OptimizelyExperience and OptimizelyGridSection.

OptimizelyExperience

When defining an Experience component, you can define a "Wrapper" component that will wrap section components.

export default function MyExperience({ opti }: Props) {
  const { pa } = getPreviewUtils(opti);
  return (
    <main className="blog-experience">
      <OptimizelyExperience
        nodes={opti.composition.nodes ?? []}
        ComponentWrapper={ComponentWrapper} // <--- here
      />
    </main>
  );
}

In that ComponentWrapper defined by you, you will find the key property. You can also use getPreviewUtils(node) to render the preview attributes:

function ComponentWrapper({ children, node }: ComponentContainerProps) {
  // `node.key` contains the key
  const { pa } = getPreviewUtils(node);
  return <div {...pa(node)}>{children}</div>;
}

OptimizelyGridSection

When you use OptimizelyGridSection, you can define your own Row and Column components:

export function BlankSection({ opti }: BlankSectionProps) {
  return (
    <>
      <h2>This is BlankSection2 {opti.key}</h2>
      <OptimizelyGridSection nodes={opti.nodes} row={Row} column={Column} /> // <-- here
    </>
  );
}

In those Row and Column components defined by you, you can find the "key". You can also use getPreviewUtils to render the preview attributes.

export function Row({ children, node }: StructureContainerProps) {
  // `node.key` contains the key
  const { pa } = getPreviewUtils(node);

  return (
    <div {...pa(node)}>
      <h3>This is row (Row) {node.key}</h3>
      {children}
    </div>
  );
}

[rawnanoob]

Thank you for the explanation but this does not fix the problem. f.i.

function Column({ children, displaySettings, node }: StructureContainerProps) {
  const { pa } = getPreviewUtils(node);

  return (
    <div {...pa(node)} className={css.BlankSectionColumn}>
      {children}
    </div>
  );

{...pa(node)} wil output this:
<div class="BlankSection_BlankSectionColumn__53hd2" data-epi-block-id="7e1cd7ee-68cf-4ca2-bc11-54e81867a0ae">

What if there are multiple elements in a column:

In visual builder when trying to click on the text "Test" the column is highlighted. The desired behaviour is that it should open the selected element inside the column.

Hope it is clear.

[exacs]

@rawnanoob Thanks for your clarification.

Unfortunately, we don't have a way to add preview attributes in element-level at this moment. I will keep this issue opened so we can notify you once the solution is ready.