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
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/nik-coder/custom-affiliate-block/archive/refs/heads/main.zip
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 `