WP Manifestindependent plugin directory
manifest / editor / custom-affiliate-block

Custom Affiliate Block

Part 3: Custom Plugin/Theme Adjustment

by You · github.com/nik-coder/custom-affiliate-block

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/nik-coder/custom-affiliate-block/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/nik-coder/custom-affiliate-block ↗

Custom Affiliate Block — Setup & Walkthrough

A demo plugin: an ACF/SCF field group on post, a custom block whose text/ image/CTA are wired to those fields via native Block Bindings ("source": "acf/field"), and Tailwind-utility styling on the front end.

0. Prerequisites

  • A fresh WordPress install (LocalWP, DevKinsta, Docker, etc.)
  • A block theme active (Twenty Twenty-Four or similar)
  • ACF (free) or SCF – Secure Custom Fields (free) installed & active
  • WordPress 6.5+ (needed for the native Block Bindings API)

1. Install the plugin

  1. Unzip custom-affiliate-block.zip.
  2. Copy the custom-affiliate-block folder into wp-content/plugins/.
  3. In wp-admin → Plugins, activate Custom Affiliate Block.
  4. Make sure ACF or SCF is also active — the plugin's field group won't appear otherwise.

On activation, the plugin:

  • Registers the "Affiliate Product Details" ACF/SCF field group (also synced from acf-json/group_affiliate_product.json, so it'll show as "Sync available" in the ACF admin if you ever edit it via the UI).
  • Registers the Affiliate Product Card block (affiliate/product-card).
  • Registers a fallback acf/field block-bindings source (skipped automatically if your ACF/SCF version already ships one).
  • Enqueues the Tailwind stylesheet on the front end and in the editor.

2. The field group (Step 1 of the task)

Go to Custom Fields → Field Groups → Affiliate Product Details. It's attached to the post post type and contains:

Field Type Name
Headline / Product Name Text affiliate_headline
Product Image Image product_image
Affiliate / CTA URL URL affiliate_url
Price / Offer Text Text price
Merchant Offers Repeater (merchant, merchant_url, merchant_price) offers
Related / Comparable Products Relationship (→ post) related_products

This satisfies the "text + image + repeater/relationship" requirement in one group (it actually has both a repeater and a relationship field).

📸 Screenshot #1: the Field Group edit screen showing all six fields and their type/settings.

3. Fill in a post

  1. Edit (or create) a normal Post.
  2. Scroll down to the Affiliate Product Details meta box.
  3. Fill in a headline, upload a product image, add a price, an affiliate URL, and a couple of repeater rows.

📸 Screenshot #2: this meta box filled out — this is "the fields available to an editor," proving they're editable outside of code.

4. Insert the block (Steps 2 & 4 of the task)

  1. Still editing that post, in the block editor add the Affiliate Product Card block (search "Affiliate" in the inserter).
  2. It will appear pre-populated with an image, heading, price paragraph and a "Get This Deal" button — already showing your real field values.
  3. Click into the heading or paragraph and edit the text directly in the block editor: this writes straight back to the ACF field (that's the point of Block Bindings — no shortcode, no custom meta box needed for the editor to change it from here too).
  4. Click the image to replace it — same thing, updates product_image.

📸 Screenshot #3: the block selected in the editor, ideally with the List View open showing core/image / core/heading / core/paragraph / core/buttons nested inside "Affiliate Product Card" — that visually proves the binding wiring described in blocks/product-card/index.js.

*(Optional but nice: open the browser dev tools or the Code Editor view (⌘/Ctrl+Shift+Alt+... → Code Editor) and screenshot the serialized `