Add ability to preview different A/B test block variants

[rmccue]

As a marketer, I want to be able to preview what my different A/B test variants are for a block in line so that I can see what they look like in context.

This should be a block level control.

Acceptance criteria:

• [x] Tabs to switch variant should appear inline above the block to allow switching between variants
• [x] For blocks in post content the tabs should only show if user has edit permission for that post
• [x] For blocks in layout (templates & widgets) the tabs should only show if user has edit permission for the template or layout or widgets

[rmccue]

@rmccue to sketch a potential design for this.

[robindevitt]

@rmccue Do you have a sketch for this?

[yumito]

Linking you to the guid sketch from Ryan on the epic ticket https://app.zenhub.com/workspaces/altis-5c378365e15075539771e4e3/issues/humanmade/product-dev/812

[robindevitt]

Slack thread for some questions and communication around this task as I have been getting through it : https://hmn.slack.com/archives/C5WSNGC9F/p1638362120249900

1. Is there a need for a user to individually preview a single variant through a link when the user would be able to use the tabs on the front end when previewing the post? The link currently that I have in place. Should it link directly to a specific A/B Test Variant? Given when viewing the variant you will see these:

2. If page/post has multiple A/B test blocks on it, should they be able to preview all of the A/B test blocks on the page?

3. Currently a single variant is displayed through the render_block function. For the user to preview the different variants, could should the render_block be adjusted above to render all of the variants and the tabs to toggle between them? Essentially on when the user has edit permission will the "render_all_block"(eg) show else the render_block is used.

[roborourke]

Is there a need for a user to individually preview a single variant through a link when the user would be able to use the tabs on the front end when previewing the post?

Not necessarily, though it's a quick and easy option. If it's proving to be too much of a pain then move on to just doing the tabs.

If page/post has multiple A/B test blocks on it, should they be able to preview all of the A/B test blocks on the page?

Yep.

Currently a single variant is displayed through the render_block function. For the user to preview the different variants, could should the render_block be adjusted above to render all of the variants and the tabs to toggle between them? Essentially on when the user has edit permission will the "render_all_block"(eg) show else the render_block is used.

Not quite - the primary block web component is rendered e.g. <ab-test-block ...></ab-test-block> and then each variant is rendered as a <template>.

For a logged in user with appropriate permissions previewing the post you could output some additional UI above the <ab-test-block>, or replace it altogether, then write the JS to handle clicks on the tabs to clone the target template content into a display div eg.

if ( is_preview() ) {
   return sprintf( '%s<div class="ab-test-xb-preview" data-client-id="%s"><div class="ab-test-xb-preview__tabs"></div><div class="ab-test-xb-preview__content"></div></div>', $inner_content, $client_id );
}

and some JS like:

document.querySelectorAll( '.ab-test-xb-preview' ).forEach( function ( xb ) {
   var templates = document.querySelectorAll( 'template[data-parent-id="' + xb.dataset.clientId + '"]' );
   // for each template add a tab button to the tabs div
   // add a click handler for each to set the content divs content by cloning the chosen template content
   // trigger click on the first tab to get initial default content
} );

I just pseudo-coded the last bit with comments but hopefully that makes some sense.

[robindevitt]

Thanks Rob this made a huge help and gave some direction to getting the content. I am currently getting an unstyled version of the tabs working.

[robindevitt]

I have updated my PR with some further WIP changes. I currently have the content of the tabs and tabs rendering on the front end when previewing the page. Working on getting the tabs and content linked.

[robindevitt]

I have made some progress on this and just need to sort out one "bug" I discovered late today.

Should have it ready for review tomorrow.

PR has been updated.

[robindevitt]

This has been completed and the PR has been merged.