Post Inserter Block Customization
16 min
post inserter block customization this guide covers advanced customization options for the post inserter block, intended for administrators configuring newsletter templates and custom field integration acf fields in newsletters custom fields created with acf (see create custom fields in purple hub docid\ sfolj8v8qcn3m3jibzbuk ) can be displayed in newsletter article teasers configuration happens in the newsletter settings page (see setup + configuration docid\ g78ozv8d90jalackfluzx ) important the acf field's "return format" setting determines how the field data is accessed in templates image fields use "image url" or "image array" return format (not "image id") text fields standard text return toggle fields returns boolean values specific date filter by default, the post inserter filters content by its publication date the specific date filter is an alternative mode where each piece of content carries its own validity period, and the newsletter pulls in everything that is valid on the day it is sent this is useful for content with a fixed lifespan — such as ads, banners, or job listings — that should appear in newsletters only between a start and end date, regardless of when it was published the feature is enabled globally and is off by default enabling the feature on the post inserter settings page, set the specific date filter dropdown to one of three modes off — the feature is disabled no validity date fields are added to your content optional — the "valid from" / "valid until" date fields are added to all content types, and a "use specific date filter" option is added to every post inserter block (see post inserter block docid\ tpihbxiunuemwkedmyhul ) editors may leave either date field empty ("valid from the beginning" / "never expires") required — same as optional, but both date fields are mandatory editors must fill in "valid from" and "valid until" before they can save affected content switching from off to optional or required automatically adds the date fields and the block option; switching back to off removes them again valid from / valid until on content while the feature is enabled, every post of every post type shows a newsletter validity period section with two date fields valid from — the first day the content may appear in a newsletter leave empty for "valid from the beginning" valid until — the last day the content may appear leave empty for "never expires" content that has neither date set is never included by a post inserter that uses the specific date filter both fields also can be sortable columns in the post overview, so you can review validity at a glance (see set columns in overview pages docid\ xv f9i59othora1dk7nge ) custom template blocks custom template blocks allow combining multiple acf fields with html and conditional logic these are configured in the newsletter settings page and can be inserted into post inserter layouts handlebars syntax templates use handlebars js syntax to dynamically display content based on article metadata see e g https //handlebarsjs com/guide/builtin helpers html https //handlebarsjs com/guide/builtin helpers html for guides on that language basic acf field display display a simple acf field (e g , an overline/dachzeile) {{#if acf overline}} \<h4>{{acf overline}}\</h4> {{/if}} you can use any html tag h1 h6 , b , i , code , span style="color blue" , etc using gutenberg block syntax for better compatibility with the wordpress editor, wrap content in gutenberg block comments {{#if acf dachzeile}} \<! wp\ heading {"level" 4} > \<h4 class="wp block heading">{{acf dachzeile}}\</h4> \<! /wp\ heading > {{/if}} conditional logic display content only when specific conditions are met paywall badge example (shows badge only for premium articles) {{#if acf is premium article}} \<img src="https //example com/badge premium png" alt="premium content"> {{/if}} combining multiple fields sponsored content example (combines sponsor image and url) given an acf field promoter image (return format url) and a text field promoter url {{#if acf promoter image}} {{#if acf promoter url}} \<a href="{{acf promoter url}}"> {{/if}} \<img src="{{acf promoter image}}" style="width 200px;" alt=""> {{#if acf promoter url}} \</a> {{/if}} {{/if}} this displays the sponsor image when available and makes it clickable if a url is also provided linking to the article besides the acf fields, the post itself is available in templates as the post object its most useful field is {{post link}} , which contains the resolved public url of the article — the same url the built in title link and the "continue reading" link point to, resolved through purple (see url resolver docid\ gkzy7wd58h fc2qwqurgr ) rather than the wordpress internal url see also frontend links in purple hub docid\ wz7w 0fokon0mlpxupgvv \<a href="{{post link}}">{{post title rendered}}\</a> debug helper to see all available acf fields and their values for testing, define a custom block with the following handlebars code and use it in a post inserter block {{json acf}} the same works for the post object, to see all of its available fields {{json post}} custom css custom css can be applied to inbuilt post inserter blocks for advanced styling the custom css editor in newsletter settings supports either direct css rules or individual selectors often, these rules are conflicting with the default styles from the hub or from the newsletter styling, so adding !important is usually necessary example change text styling for e g the post title via direct css rules font family monospace !important; text decoration none !important; example style e g the continue reading link as a button via individual selectors a { background #080; border radius 100px; padding 10px; text decoration none !important; } a\ hover { background #2a2; } note newsletter buttons use css only (no javascript), so all styling must be css based "continue reading " label the "continue reading " block is a link to the article itself, and the label text of this link can be adjusted here, to e g be in german if your newsletters should be german default excerpt length the "excerpt" post inserter block is set by default to include 15 words of a posts excerpt or content this number can be changed here, so that new post inserter blocks automatically have the number selected that you prefer claude code instructions md you are helping manage newsletter templates in purple hub (wordpress/gutenberg cms) templates use handlebars js syntax key variables available in every template \ post title rendered — post title \ post excerpt raw — post excerpt \ post link — resolved public url of the post (via purple url resolver) \ post id — post id \ post featuredimagemediumurl — featured image url (plain string, not object) \ post featuredimage acf \[fieldname] — an acf field set on the featured image itself (the attachment), e g post featuredimage acf copyright editors set these on the image in the media library, not on the article access follows the same return format rules as the article level acf fieldname fields below \ post featuredimage \[property] — the full featured image media object, for when the url only variables above aren't enough useful properties `source url`, `alt text`, `caption rendered`, `title rendered` \ post \[taxonomy slug] — boolean, true if post belongs to that taxonomy term taxonomy slugs with hyphens must use bracket notation post \[my category] \ post \[taxonomy slug] \[0] — first term value of a taxonomy (plain string name) example post \[advertiser] \[0] \ acf — acf custom fields; access depends on the field's return format setting \ image field "image url" → {{acf fieldname}} (plain string) \ image field "image array" → {{acf fieldname url}} \ text field → {{acf fieldname}} \ toggle field → boolean available taxonomies and acf fields are project specific and must be confirmed per project use the debug helpers during development to inspect what is available \ {{json acf}} — outputs all acf fields and their current values \ {{json post}} — outputs all post fields and their current values html structure newsletters are rendered in email clients always use html tables for layout, never css flexbox or grid use inline styles for all styling the standard pattern for a post block with an optional image is \<table cellpadding="0" cellspacing="0" border="0" style="width 100%;"> \<tr> \<td style="width 120px; vertical align top; padding right 24px;"> \<! optional image > \</td> \<td style="vertical align top;"> \<! text content > \</td> \</tr> \</table> when the image cell is conditionally omitted, the text cell automatically expands to full width — no colspan needed known workaround post inserter skips posts without a featured image unless the template outputs something unconditionally fix add a hidden row at the end of every table \<tr style="display\ none">\<td>{{post id}}\</td>\</tr> when there is no featured image, omit the image \<td> entirely so the text \<td> uses full width the hidden row ensures the post still renders regardless global css handles link styling (color, font weight, text decoration) via the `a` selector do not repeat these in inline styles on \<a> tags — only keep font family inline global css uses !important, so inline styles without !important will lose each newsletter layout has its own global css, so never hardcode brand colors in templates