Post Inserter Block Customization
15 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, turn on the specific date filter toggle enabling it does two things it adds two date acf fields — valid from and valid until — to all content types it adds a use specific date filter option to every post inserter block (see post inserter block docid\ tpihbxiunuemwkedmyhul ) 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