Contents

Gutenberg Block — Plugixa Testimonial

The Plugixa Testimonial block is the block-editor equivalent of the [plugixa_testimonials] shortcode. Everything the shortcode can do, the block exposes through a visual sidebar — no attribute typing.

Adding the block

  1. Edit a page or post in the block editor.
  2. Click the + inserter.
  3. Search for Plugixa Testimonial, or scroll to the Widgets category.
  4. Click the block to insert.

Alternatively, type /plugixa in an empty paragraph block for a quick-insert menu.

Plugixa Testimonial Gutenberg block

Block sidebar

The sidebar mirrors the Shortcode Builder tabs:

Content

  • Display mode — existing (load a saved shortcode config) or custom (configure inline).
  • Saved shortcode — dropdown of saved configurations (when existing).
  • View — dropdown of views (when custom).
  • Category — comma-separated IDs or slug.
  • Limit — max testimonials.
  • Order by — display_order / created_at / rating / client_name / random.
  • Order — ASC / DESC.

Display options (custom mode only)

Nine toggle controls:

  • Show photo
  • Show rating
  • Show role
  • Show company
  • Show date
  • Show website
  • Show quote icon
  • Show video PRO
  • Show custom fields PRO

Filters

  • Featured only — boolean.
  • Minimum rating — 1–5.

Live preview (ServerSideRender)

The block renders a live preview inside the editor using WordPress’ ServerSideRender component. You see the actual testimonial output while editing — no save-and-check cycle.

When the block is first inserted, the preview may briefly show a loading spinner while the REST call resolves.

Swiper re-init

For slider layouts, a MutationObserver script watches for DOM changes inside the block and calls window.PlugixaTestimonialApp.init() after each ServerSideRender update — ensuring Swiper re-binds to the new slide markup every time you change a setting.

Saving a configuration from the block

The block doesn’t support saving named configurations directly — that’s a feature of the Shortcode Builder. If you build a block configuration you want to reuse across many pages:

  1. Copy the shortcode from the block toolbar’s Copy shortcode action.
  2. Paste it into a saved shortcode config under Plugixa Testimonial → Shortcodes → Add New.
  3. Use [plugixa_testimonials id="7"] in future places.

Block patterns

The plugin does not ship block patterns out of the box. Developers can register patterns via register_block_pattern() and drop in a pre-configured Plugixa Testimonial block inside custom layouts.

Reusable blocks (patterns)

To reuse the same block on multiple pages:

  1. Insert and configure a Plugixa Testimonial block.
  2. Click the block menu (⋮) → Create pattern.
  3. Name it.
  4. Use from Patterns → My patterns.

Changes to the synced pattern propagate to all instances.

Theming the block in the editor

The editor-side block styles are in assets/blocks/testimonial-block/editor.scss (compiled to the built index.css). Theme developers can override via block_editor_assets enqueues or the theme’s editor-style.css.

Under the hood

The block is a server-rendered block (apiVersion: 3, no React render on save). Its render_callback delegates to the same shortcode renderer, so output is identical to [plugixa_testimonials].

Block slug: plugixa-testimonial/testimonial-display.

Built assets live at assets/build/blocks/testimonial-block/:

  • block.json — block metadata.
  • index.js — editor script.
  • index.css — editor styles.
  • index.asset.php — WordPress dependency manifest.

Elementor users

If your site primarily uses Elementor, use the Elementor widget — it offers the same options through Elementor’s control panel.

Rebuilding the block

Developers working on the block source:

cd assets/blocks
npm install
npm run build     # Production build
npm run start     # Watch mode

Output is assets/build/blocks/testimonial-block/.

Troubleshooting

Block says “Loading…” forever

  • Check the REST API is reachable. Try GET /wp-json/plugixatestimonial/v1/views in a browser — expect JSON.
  • A security plugin (WordFence, iThemes) might be blocking the preview endpoint. Whitelist /wp-json/plugixatestimonial/v1/*.

Preview doesn’t match frontend

The editor loads the admin-side CSS plus the frontend frontend.css. If your theme applies different styles on the frontend (e.g., typography overrides), the preview can look slightly different. The frontend is the source of truth.

Block not showing in inserter

  • Plugin active? Plugins screen.
  • Block theme compatible? The block works in classic and block themes.
  • Clear block-editor cache — log out and back in.

Slider doesn’t work in the editor

  • Check the browser console — Swiper may be missing.
  • The MutationObserver should re-init Swiper after each ServerSideRender update. If Swiper isn’t binding, open a ticket with a reproduction.

Quick Links

Plugin page Changelog