Previewing a content block
There are two ways a content block’s rendered content can be previewed - when using the embed code in a publishing app, and when editing an existing content block in Content Block Manager.
Preview logic exists in three different repos - Publishing API, Whitehall and Content Block Tools - with more detail below.
Preview in a publishing app
We are currently only actively supporting this for Mainstream and Whitehall.
Mainstream Publisher
User journey
Copy the embed code from the block’s page on the Content Block Manager, this will look something like
{{embed:content_block_pension:0d7102ad-4481-490a-b768-4a67a2a267dc/rates/third-rate/amount}}
Paste the embed code in the Document you are editing in Mainstream Publisher (aka the Host Document)
Click the ‘Save’ button at bottom of page
Click the ‘Preview’ button at bottom of page
The rendered contents of the block should be visible on the draft content store
Technical explanation
When saving the changes to the Host Document, we trigger an update of the draft Content Store as outlined in Saving a draft
Whitehall
User journey
Copy the embed code from the block’s page on the Content Block Manager, this will look something like
{{embed:content_block_pension:0d7102ad-4481-490a-b768-4a67a2a267dc/rates/third-rate/amount}}
Paste the embed code into the body of the Document you are editing
Click the ‘Preview’ button at top of text area input
The rendered contents of the block should be visible
Technical explanation
This is a different process than the one above for Whitehall, because it’s using a custom preview service:
Inline preview in Whitehall calls the
AdminGovspeakHelper
to convert the textarea govspeak to HTMLThis then calls the Content Block Manager’s
FindAndReplaceEmbedCodesService
which replaces the embed codes in the HTML with the latest content of the block (using Content Block Tools as above).
Preview in Content Block Manager
User journey
Given there is a Content Block that is being embedded by some Host Documents.
Using the edit form for that Content Block, you will come across a “Preview” page containing links to the Host Documents.
These links will open up a new tab rendering the frontend content, with the new embed code content highlighted in yellow.
Technical explanation
There are a few differences in the code to the preview processes in publishing apps:
For this Content Block flow, the block has not yet been published, so we don’t want to update the Host Documents yet
When the Host Document Preview page loads (step 3 of user journey), we go get a
PreviewContent
class, which calls the Publishing API to get the latest content for a Host DocumentWe then make a GET request to the Host Documents live frontend page on Gov.UK, to transform it’s HTML
And use the data attribute on the content block
<span>
to replace the block content with the current draft contentThe transformed page is then served in an iFrame on the Content Block Manager