Blocks

Three blocks, doing exactly what the three shortcodes do. In the block editor, open the inserter and look under Widgets, or type "Freemius" into its search box:

Block	What it renders
Freemius price	One live price: a plan, a licence tier and a billing cycle
Freemius buy button	A link to your Freemius checkout for that same row
Freemius currency toggle	The currency switcher, where there is more than one currency

Everything the shortcodes do, the blocks do. They are the same code: a block renders through the same PHP as the shortcode of the same name, so a page built with blocks and a page built with shortcodes cannot drift apart.

The shortcodes are not going anywhere. Page builders, classic editor, widget areas and template files are all better served by a shortcode, and the product's own screen under Freemius Pricing, Products still hands you a ready-made one for every plan and pricing row.

Nothing has to be chosen

Insert a block and it already shows your headline price, or the button that sells it. Every setting is optional and defaults the same way a shortcode does: the plan Freemius marks as featured, that plan's lowest numbered licence tier, and annual falling through to monthly and then lifetime.

Each dropdown's first entry says what the default currently works out to, for example Default (Annual), so the panel tells you what the block is rendering rather than looking unset. Choose something else and that choice is kept: it is never second-guessed, so a billing cycle you picked against a row with no price renders nothing rather than quietly showing a different figure.

The free plan

A plan with no price is not offered in the Plan dropdown of the price block or the buy button: it has no figure to show and no checkout to link to, so nothing could render from it. For the free tier of a pricing table, use an ordinary button, the core Buttons block or your theme's, linking to the plugin's download page (its WordPress.org listing, usually). That link is a fixed fact rather than a live price, so there is nothing for this plugin to keep current.

What is in the sidebar

Select the block and open the settings sidebar.

Freemius price

• Product - only shown when your site has more than one configured
• Plan - the plans your product sells
• Licences - the licence tiers that plan sells
• Billing cycle - only the cycles that tier actually has a price for
• Currency - "Follow the visitor" by default. Pin it to one currency and that price is never swapped and the toggle leaves it alone
• Style - $25, or USD 25 for prose where a bare symbol reads oddly

Freemius buy button

The same Product, Plan, Licences, Billing cycle and Currency, plus:

• Label - the words on this button. Left empty, the site-wide label from Freemius Pricing, Settings is used
• Anchor id - an HTML id, for linking straight to this button. The editor's own Advanced panel writes the same field
• Width - 25, 50, 75 or 100 percent of the block around it, the same choices as the core Buttons block. On a pricing card, 100 spans the card. Pick the chosen one again to take it off

Freemius currency toggle

• Product - and nothing else. The toggle lists the currencies the product is sold in, and renders nothing at all when there is only one

Aligning a block

Select any of the three blocks and the block toolbar carries the usual left, centre and right alignment buttons. All three render an inline element, so without an alignment the text around them decides where they sit; choosing one puts the block in a line of its own and moves it across it. The preview shows the alignment, because the preview is the page's own markup.

Nothing else about the block changes: the classes, the id and anything the colour, typography, spacing and border panels set all stay where they were. The shortcodes take the same thing as align="center".

A price left unaligned stays exactly where it was, inline, which is what makes [pflp_price] work in the middle of a sentence. Align it only when the price is a thing on its own line, such as a figure at the top of a pricing card.

Styling

The price and the buy button both carry the WordPress colour, typography and spacing panels, so a headline figure can be set in the size, weight, letter spacing and colour the page wants without writing any CSS. The button adds a border panel. The toggle carries colour and typography.

Underneath all of that, the button still leads with wp-element-button, the class WordPress gives its own buttons, so in most block themes it already looks right before you touch a single control. The plugin's own styling is a fallback with no specificity at all: anything your theme or the editor says wins.

A border set in the border panel draws as a solid line; the plugin adds the border style WordPress leaves out, the way the core Buttons block does for itself, so an outline button is a width and a colour in the panel and nothing else.

The panels cannot set what a button does under the pointer, so that is one choice for the whole site: Hover effect under Buttons on Freemius Pricing, Settings. Lift raises every button 1px with a soft shadow of its own colour, on screens 1025px and wider only, so a phone never leaves a tapped button lifted. It is off unless you turn it on.

Additional CSS class(es), in the Advanced panel, is the block spelling of the shortcode's class attribute, on all three blocks. Classes are added to the ones the price, button or toggle already carries, never replacing them.

Turning a shortcode into a block

Select a Shortcode block holding [pflp_price], [pflp_button] or [pflp_currency] and the editor offers to transform it. Every attribute comes across, including align, and class and id, which become the block's Additional CSS classes and HTML anchor. The conversion runs the other way too, which is the next section.

It is a one-way convenience rather than a migration you have to run. A shortcode left alone keeps working exactly as it did.

Converting a block to a shortcode

Select a block, open the block type button at the left of its toolbar and choose Shortcode. The block becomes an ordinary Shortcode block holding the equivalent shortcode, ready to copy into a page builder, a widget area or a template file. It is the same menu that turns a shortcode into a block, so the conversion runs both ways.

What comes across

Everything you chose in the sidebar: product, plan, licences, billing cycle, currency, style, label, alignment, your Additional CSS classes and the HTML anchor. Anything left at its default is left out rather than written down, so a block nobody has configured becomes a plain [pflp_price].

A block set to the 3-site annual price of a plan called b2, centred, with a class of its own becomes:

[pflp_price plan="b2" licenses="3" cycle="annual" align="center" class="my-price"]

What does not

Styling set in the colour, typography and spacing panels does not travel. A custom colour, a typed-in font size, padding or a line height are all written into the page as inline CSS on the block, and a shortcode has nowhere to carry inline CSS. The editor says so once, in a message at the bottom of the screen, the first time you convert a block that has any of it.

What does survive is anything you chose from a preset: a font size from the size picker, or a colour from your theme's palette. Those are class names your theme already defines, so they are added to the shortcode's class attribute and keep working:

[pflp_price align="center" class="has-accent-primary-color has-x-large-font-size"]

The conversion goes ahead either way rather than refusing, because the alternative is undoing your own styling by hand to get a shortcode. If the result needs to look the same, style it in your theme's CSS against the class, or keep the block.

Converting back gives you the block again with every attribute intact. Only the inline styling has to be set again, because by then there is nothing left saying what it was.

What the preview shows

The editor preview is the real thing, rendered by the server: the same figure, in the same markup, that the published page will carry. If a block renders nothing, the editor says why rather than showing a blank, because all three blocks have honest reasons for rendering nothing:

• a price with no row behind it renders an empty space, never a 0
• a button with no row behind it renders no button at all, because a link to a checkout that sells nothing is worse than no link
• a currency toggle renders nothing when the product is sold in one currency

The currency a visitor actually sees is chosen in their own browser, so the editor preview shows your site's default currency. That is a preview of the page, not of one visitor's view of it.