Blocks and patterns

Add TierMint blocks and starter patterns to your pages in the block editor, and see how block settings and editor previews work.

Find the TierMint blocks

Every TierMint block sits in its own TierMint category in the block inserter. Open the inserter (the + button in the editor toolbar, or type / on a new line) and search for "TierMint".

The block inserter searched for TierMint, listing the twenty TierMint blocks

The blocks and the TierMint shortcodes render through the same components. A block setting and the shortcode attribute with the same name hold the same value, so turning off a block's Show price toggle does the same as show_price="false" in a shortcode.

Available blocks

Block	Name	What it shows	Settings
Buy Button	`tiermint/buy-button`	A button that adds one pricing tier of a product to the cart.	Product, Price tier, Button label, Show price
Pricing Table	`tiermint/pricing-table`	One column per product, each with its default tier, feature list and buy button.	Products, Highlighted product, Show features, Columns, Button text, Show license length, Show activation limit
Product Grid	`tiermint/product-grid`	Cards for your published products, with an optional filter bar.	Categories, Tags, Include child categories, Show filter bar, Columns, Products per page, Order by, Order, Show price, Show buy buttons, Show thumbnails, Link to product page
Cart Summary	`tiermint/cart-summary`	The cart lines and total, with update and remove controls.	Show cart actions, Checkout page, Title, Show plan details
Login Form	`tiermint/login`	A sign-in form, or a greeting and log-out link for a signed-in visitor.	Redirect URL, Show registration link, Registration URL
Registration Form	`tiermint/registration-form`	A sign-up form. The customer sets a password from an emailed link.	Show the name field, Sign-in URL
Password Reset Form	`tiermint/password-reset-form`	The lost-password request and the set-new-password form.	Sign-in URL
Checkout	`tiermint/checkout`	The checkout: order summary, buyer details and payment.	Title, Button text, Show order summary, Editable order summary, Show plan details, Show discount code field, Layout
License Manager	`tiermint/license-manager`	The signed-in customer's licenses and site activations.	Heading, Show license key, Show site activations
Downloads List	`tiermint/downloads-list`	The signed-in customer's purchased files and available updates.	Title, Show available updates
Purchase Confirmation	`tiermint/purchase-confirmation`	The receipt after checkout: order, license keys and download links.	Heading, Show license keys, Show download links
Account Dashboard	`tiermint/account-dashboard`	The customer account area with Purchases, Downloads and Licenses tabs.	Heading, Show purchases, Show downloads, Show licenses

The Login Form block is registered as tiermint/login, not tiermint/login-form.

The shortcode reference explains what each setting does, with its default. The customer dashboard page covers the four account blocks in more detail.

Product page blocks

Eight more blocks build a product details page. Each one shows a product, or one part of it. Left at its default, a block shows the product the visitor opened. Pick a product in its Product setting to pin the block to that product, for example to show one product's pricing on a landing page.

Block	Name	What it shows
Product Details	`tiermint/product-details`	The whole product in one block: image, name, overview, plans, description and screenshots, in one or two columns.
Product Image	`tiermint/product-images`	The product's main image.
Product Overview	`tiermint/product-overview`	The product name as a heading, and its short overview.
Product Pricing Tiers	`tiermint/product-pricing-tiers`	The plan selector, the quantity box and the add-to-cart button.
Product Description	`tiermint/product-description`	The product's full description.
Product Screenshots	`tiermint/product-screenshots`	The product's screenshot gallery, with a lightbox.
Product Meta	`tiermint/product-meta`	The product's categories, tags, latest version and last-updated date.
Product Changelog	`tiermint/product-changelog`	Release notes from the product's latest releases.

The product details page explains each of these blocks and their settings.

Wide and full width

Account Dashboard, Checkout, Pricing Table, Product Grid, Product Details, Product Meta and Product Changelog support the Wide width and Full width alignments in the block toolbar. They work on themes that define those widths.

Change a block's settings

Select the block and open the Settings panel in the editor sidebar. Each field shows the same help text as its shortcode attribute.

Kind of setting	Control	Examples
On or off	Toggle	Show price, Show features
A fixed set of choices	Dropdown showing the stored values	Columns, Order by (`created_at`, `name`, `id`), Layout (`two-column`, `single`)
A number	Number field	Price tier, Highlighted product, Products per page
One product	Searchable product picker. Type part of a name and pick from the results.	Buy Button's Product, the product blocks' Product
A page	Searchable page picker	Cart Summary's Checkout page
Categories or tags	Token field. Type a name and pick from the suggestions.	Product Grid's Categories and Tags
A list of products	Text field with product ids separated by commas, such as `12, 14, 19`	Pricing Table's Products
Anything else	Text field	Labels, headings, URLs

Some pickers have a first option that keeps the default:

On the product page blocks, Current product (from page URL) shows the product the visitor opened.
On the Cart Summary block, Default (site checkout page) links to the checkout page set under TierMint → Settings → General.

Highlighted product and Products take product ids. A product's id is the number at the end of its edit address in TierMint → Products, such as #/products/12. Price tier takes a tier id, which the admin does not show. The REST route GET /wp-json/tiermint/v1/products/{id} lists them under prices. It needs the manage_tiermint capability, which administrators have. A plain browser visit still fails with a 401, because it sends no REST nonce. Run wp.apiFetch( { path: '/tiermint/v1/products/12' } ) in the browser console on a wp-admin page, or call the route with an Application Password. Leave Price tier at 0 to sell the product's default tier, the first active tier in its list. The products page explains tiers.

What the editor preview shows

The block canvas shows a real render from the server. The editor sends the block's current settings to the server, the server runs the same code as the live page, and the editor shows the result. The preview is not interactive, so clicking Buy now or Deactivate in the editor does nothing.

The preview runs as you, so anything that depends on the visitor (your cart, your licenses) reflects your own admin session.

Sample previews

When a block has nothing real to show yet, the editor shows sample content with the caption "Sample preview. Real data appears on the live page." You see it, for example:

on a Buy Button or Pricing Table before you pick a product
on a Product Grid that has no matching products
on a Cart Summary or Checkout while your own cart is empty
on a Product Changelog for a product with no releases
on the License Manager, Downloads List and Purchase Confirmation blocks when there is no order or license to show

The Account Dashboard block always shows sample content in the editor, even if your own user has purchases.

Sample content appears only in the editor. On the live page a block shows real data, or nothing when there is nothing to show, such as a Pricing Table with no products.

Add a starter pattern

TierMint ships five patterns in a TierMint pattern category.

Open the block inserter and click the Patterns tab.
Pick the TierMint category.
Click a pattern to insert it.

The TierMint pattern category in the block inserter with the five starter patterns

Pattern	What it contains	Notes
Account page	A Purchase Confirmation block, then an Account Dashboard block at wide width.	The same content TierMint puts on the Account page it creates.
Checkout page	A Purchase Confirmation block, then a Checkout block at wide width.	The same content as the Checkout page TierMint creates. If you use it on a new page, pick that page in Checkout page under TierMint → Settings → General.
Pricing section	A centered "Simple pricing" heading, the line "Every plan includes updates and support for one year." and a Pricing Table block.	Select the Pricing Table and enter product ids in Products.
Product page	Product Image, Product Overview, Product Pricing Tiers, Product Description, Product Screenshots and Product Meta.	The same content as the Product page TierMint creates.
Product page (two-column)	A Product Details block and a Product Meta block, both at wide width.	The Product Details block uses two columns only where it has room, and one column elsewhere.

The Purchase Confirmation block in the Checkout page and Account page patterns shows nothing on a normal visit. After payment, the buyer returns to the checkout page with the order in the address, and the block shows the receipt there. The customer dashboard page explains when the receipt appears.

The Pricing Table in the Pricing section pattern starts with no products. Until you add some, the live page shows nothing in its place and the editor shows a sample table. With products added, it looks like this:

A pricing table with three products, one marked Most popular

The storefront pages guide lists the pages TierMint creates on activation and where to change them.

Block themes and classic themes

Every TierMint block is a dynamic block. It saves no markup in the post, and the server renders it each time the page loads. So the blocks work the same in classic themes and block themes, in post and page content, in template parts and in Site Editor templates.

Blocks or shortcodes

Both give the same output for the same settings. Use blocks in the block editor and in block themes, where you get the sidebar settings and a preview. Use shortcodes in the Classic Editor, in text widgets, or in a template file that calls do_shortcode(). You can mix both on one site.