Post Inserter Block Customization

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 docid\ sfolj8v8qcn3m3jibzbuk ) can be displayed in newsletter article teasers configuration happens in the newsletter settings page (see 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 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 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 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}} 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