Gutenberg Blocks
UnysonPlus elements normally live in the Page Builder. This extension makes a selected few available as native Gutenberg blocks as well, so they can be used on sites — or by editors — that work in the block editor.
It is deliberately additive. Activating it changes nothing about the page builder, the shortcodes or any existing page.
The blocks
| Block | Element | What it is |
|---|---|---|
| Products | wc_products | A grid or carousel of products |
| Single Product | wc_product | One product as a card |
| Product Page | wc_product_page | A product's full page |
| Product Categories | wc_product_categories | A grid of product categories |
| Product Filters | wc_product_filters | Filter controls for a product grid |
| Product Search | wc_product_search | A search field scoped to products |
| Add to Cart | wc_add_to_cart | An add-to-cart button for one product |
| Cart Link | wc_cart_link | A cart link with count and total |
| Mini Cart | wc_mini_cart | A cart drawer with contents and checkout |
| Account Link | wc_account | A link to the account page |
| Free Shipping Bar | wc_free_shipping | Progress toward free shipping |
| Cart | wc_cart | WooCommerce's cart page |
| Checkout | wc_checkout | WooCommerce's checkout |
| My Account | wc_my_account | WooCommerce's account area |
| Order Tracking | wc_order_tracking | An order lookup form |
| Portfolio Grid | portfolio | A filterable grid of projects |
| Project Details | project_details | A project's detail fields |
| Project Gallery | project_gallery | A project's image gallery |
| Project Navigation | project_nav | Previous / next between projects |
| Project Results | project_results | A project's outcome figures |
| Project Testimonial | project_testimonial | The client quote on a project |
| Related Projects | related_projects | Other projects like this one |
| Table | table | A data table with sorting, search and pagination |
| Contact Form | contact_form | A contact form with your own fields |
| Section | section | A full-width band holding other blocks |
| Column | column | A column with a responsive width |
| Container | container | A width-constrained wrapper |
| Flexbox | flexbox | A flex container |
| Bleed Section | bleed_section | A section with an image bleeding off one edge |
| Masonry Section | masonry_section | A staggered masonry layout |
| Flip Box | flip_box | A two-faced card that flips on hover or click |
| 3D Gallery | gallery_3d | Images in a WebGL 3D scene |
| Post Title | post_title | The current post's title |
| Post Content | post_content | The current post's content, for templates |
| Post Date | post_date | The published or modified date |
| Post Excerpt | post_excerpt | The current post's excerpt |
| Post Meta Field | post_meta | A custom field value |
| Post Terms | post_terms | Terms from any taxonomy |
| Post Author | post_author | The author byline |
| Site Logo | site_logo | The site logo |
| Navigation Menu | nav_menu | A WordPress menu |
| Menu Toggle | menu_toggle | A hamburger button |
| Widget Area | widget_area | A registered sidebar |
| Scroll to Top | scroll_to_top | A back-to-top button and progress bar |
| Call to Action | call_to_action | A heading, message and button band |
| Image + Content | image_content | An image beside rich text |
| Countdown | countdown | A countdown to a date and time |
| Code Block | code_block | A code sample, or raw HTML |
| Posts | posts | A query-driven grid or list of posts |
| Table of Contents | toc | A contents list built from the page headings |
| Button | button | A link button with presets, icons and hover effects |
| Pricing Table | pricing_table | Pricing plans with a billing toggle |
| Image Sequence | image_sequence | Frames scrubbed by scroll — a product spin |
| SVG Morph | svg_morph | One SVG shape morphing into the next |
| WebGL Object | webgl_object | A generated 3D object rendered with WebGL |
| Global Section | global_section | A saved section placed by reference |
| Snippet | snippet | A saved snippet, output by name |
| Scroll Indicator | scroll_indicator | A scroll-down cue for a hero |
| Site Search | site_search | A site search field |
| Lottie | lottie | A Lottie JSON animation with playback triggers |
| SVG Draw | svg_draw | An SVG whose strokes draw themselves |
| 3D Model | model_viewer | An interactive glTF / GLB model with AR |
| Avatar | avatar | A user avatar — photo, initials or icon |
| Image | media_image | A single image with a style treatment and priority hint |
| Video | media_video | A video — self-hosted or embedded |
| Text Block | text_block | Rich text with columns, drop caps and measure |
| Featured Image | featured_image | The current post's featured image |
| Audio Player | audio_player | An audio player with a playlist |
| Author Box | author_box | An author card with avatar, bio and links |
| Calendar | calendar | A month calendar with events |
| Image Hotspots | image_hotspots | An image with pins that reveal text |
| Map | map | An embedded map with markers |
| Image Box | image_box | An image with a heading, text and a button |
| Gallery | gallery | An image gallery with captions and a lightbox |
| Team Member | team_member | A person card — photo, name, role and links |
| Progress | progress | Progress bars or circular meters |
| Business Info | business_info | Opening hours, contact details and a live open/closed status |
| Carousel | carousel | A slider of image or content slides |
| Feature List | feature_list | A list of features with icons or markers |
| Comparison Table | comparison_table | A feature-comparison table with a highlighted column |
| Icon | icon | A single icon with an optional title and badge |
| Accordion | accordion | Collapsible panels with icons, numbering and FAQ schema |
| Testimonials | testimonials | Customer quotes with avatars, ratings and an optional carousel |
| Social Icons | social_icons | A row of social profile links |
| Divider | divider | A separator — a line, an icon, text or a shape |
| Tabs | tabs | Tabbed panels with optional media, autoplay and deep links |
| Steps | steps | A numbered sequence with markers and connectors |
| Timeline | timeline | A vertical timeline of dated entries |
| Logo Grid | logo_grid | A grid or scrolling row of client logos |
| Notification | notification | A notice, announcement bar or floating toast |
| Highlight Text | highlight_text | Text with an animated marker, underline or circle highlight |
| Tooltip | tooltip | Text or an icon that reveals a tooltip on hover, focus or click |
| Social Share | social_share | Share buttons for the current page |
| Modal Popup | modal_popup | A button, link, icon or image that opens content in a modal dialog |
| Animated Heading | animated_heading | A heading whose last words rotate through a list — typewriter, slide, flip |
| Newsletter | newsletter | An email signup form — heading, fields, consent line and a subscribe button |
| Blockquote | blockquote | A pull quote with author, role and source link |
| Badge | badge | A small pill of text — label, announcement or status marker |
| Tag List | tag_list | A row of small tags from a list of lines |
| Text Expander | text_expander | A short excerpt with a Read more toggle that reveals the rest |
| Special Heading | special_heading | An overline, title and subtitle — the standard way to open a section |
| Icon Box | icon_box | An icon above a heading and text — the standard feature or service card |
| Video Popup | video_popup | A poster image with a play button that opens the video in a lightbox |
| Star Rating | star_rating | A star rating with optional score, label and review count |
| Counter | counter | An animated number that counts up when scrolled into view |
| Before / After | before_after | An image comparison slider — drag, hover or click to reveal |
They appear under a UnysonPlus category in the block inserter.
How a block relates to the element
Each block is a dynamic block that delegates its rendering to the existing shortcode:
Block editor → React inspector, generated from the option schema
Front end → PHP renders the shortcode, exactly as the page builder does
That split is the point. React handles editing; PHP still handles rendering, so a block can never drift away from what the element actually outputs. There is no second implementation to keep in sync — fix the shortcode and the block is fixed too.
A block's sidebar is produced from the same option schema an options.php file declares, rendered
by the React control layer.
Adding a block is therefore mostly a matter of choosing which options to expose — not writing a
settings UI.
What the sidebar shows
Each block exposes a curated subset of its element's options, not the whole schema. A page builder panel is a wide, tabbed surface; a block sidebar is a narrow column, and every element also carries shared Advanced and Animations tabs that would swamp it.
Anything not shown still round-trips untouched. The block only ever writes the values you change, so an element styled in the page builder and then opened as a block keeps every setting the sidebar does not display.
An option type with no React control shows a short "no React control yet" notice rather than a broken field, and stays fully editable in the page builder. That is a coverage gap, not an error.
The composite types — repeaters (addable-popup), multi-picker, wp-editor, code-editor — are
the main ones, which is why blocks exist for elements whose interesting options are simple.
Previews are inert on purpose
A block's canvas preview is a picture of the element, not a working copy:
- Before / After would otherwise swallow the click that selects the block, and a drag on its handle would become a Gutenberg block drag.
- Counter would re-run its count-up every time the editor scrolls it into view, which reads as the preview flickering while you work.
Visitors get the fully interactive element on the front end.
Requirements
Core 2.16.29 or later, with the Shortcodes extension active — the blocks render through it.
Every block has a page
Each block above links to its own page listing exactly which options its sidebar exposes, and anything block-specific worth knowing — an inert preview, an empty state, a setting that stays page-builder-only.
That is a rule rather than a nicety: a block exposes a curated subset of its element's options, so without a page there is no way to know what you get in the sidebar short of inserting one and looking. Any new block ships with its page in the same change.