Embedding with Gutenberg Blocks

If you're using the WordPress block editor (Gutenberg), you have three FlipBook blocks at your disposal. They cover every common embedding scenario: inline embeds, popup links, and image-clickable triggers. This article walks through each block, every setting, and a complete first-time tutorial.

Before you start

  • Your FlipBook must already exist in FlipBooks → All FlipBooks. If you haven't created one yet, see Quick Start.
  • You don't need a separate addon — the blocks are built into the main TNC FlipBook 3D plugin.

Where to find the blocks

In the block editor, click the + Add block button anywhere on your page or post. Type FlipBook in the search box. Three blocks appear under the TNC FlipBook 3D category:

  • TNC FlipBook 3D Embed
  • TNC FlipBook 3D Link
  • TNC FlipBook 3D Image Link

Pick the one that matches what you want to do.

Block 1: TNC FlipBook 3D Embed

Embeds the FlipBook directly inside your page or post. Visitors see and read the FlipBook without leaving the page.

Step-by-step

  1. Click + Add block and search for FlipBook.
  2. Select TNC FlipBook 3D Embed.
  3. In the block sidebar on the right, open the FlipBook panel and pick your FlipBook from the dropdown.
  4. The block preview loads in the editor immediately so you can see how it looks.
  5. Adjust the other settings (below) as needed.
  6. Update or publish the page.

All Embed block settings

The block sidebar (right side of the editor) groups settings into panels.

FlipBook panel

Setting

Default

What it does

Select FlipBook

—

The FlipBook you want to embed. Required.

Start Page

(empty)

Page number the FlipBook opens on. Leave empty for page 1.

Width

100%

CSS width of the embed container. Accepts %, px, vw, etc.

Height

600px

CSS height of the embed container. Accepts px, vh, etc.

Iframe Title

(empty)

Title attribute for the iframe — used by screen readers. Helpful for accessibility.

Fullscreen Link panel

Adds a small text or button link above or below the embed that opens the same FlipBook in a popup (or new tab). Useful when the inline embed feels too small.

Setting

Default

What it does

Show Fullscreen Link

Off

Turn the link on or off

Link Text

View FlipBook

Label for the link/button

Position

Above

Place the link Above or Below the embed

Alignment

Left

Left, Center, or Right alignment

Open In

Popup

Popup, New Tab, or Same Tab

Popup Width

90vw

Popup width (only relevant when Open In = Popup)

Popup Height

90vh

Popup height

Popup Theme

Dark

Dark or Light popup chrome

Transparent Background

Off

Transparent popup background

Add nofollow

Off

Adds rel="nofollow" to the link

Advanced panel

Standard WordPress block advanced controls: HTML anchor, additional CSS classes. Use these only if you're styling the block with custom CSS.

When to use the Embed block

  • The FlipBook is the main content of the page (e.g. a digital magazine page).
  • You want visitors to start reading immediately, without clicking through.
  • Page real estate is generous — laptops and desktops will show the embed at a comfortable size.

Block 2: TNC FlipBook 3D Link

Shows a text link or button. When clicked, the FlipBook opens in a popup, a new tab, or the same tab.

Step-by-step

  1. Click + Add block and search FlipBook.
  2. Select TNC FlipBook 3D Link.
  3. In the block sidebar, pick your FlipBook from the dropdown.
  4. Type the link text directly in the editor (e.g. "Open the catalog") or set Link Text in the sidebar.
  5. Pick a Link Style (Text or Button) and Open Mode (Popup, New Tab, Same Tab).
  6. Adjust styling as needed.

All Link block settings

FlipBook panel

Setting

Default

What it does

Select FlipBook

—

The FlipBook to link to

Link Text

View FlipBook

What the link/button says

Link Style

Text

Text (plain link) or Button (styled button)

Open Mode

Popup

Popup, New Tab, or Same Tab

Start Page

(empty)

Starting page when the popup opens

Popup Width

90vw

Popup width (only when Open Mode = Popup)

Popup Height

90vh

Popup height

Popup Theme

Dark

Dark or Light popup chrome

Transparent Background

Off

Transparent popup background

Add nofollow

Off

Adds rel="nofollow" to the link

Color & Typography

Because the Link block supports standard WordPress block design controls, you can style the trigger with the block editor's color picker (text color, background color, link color), the font size selector, and spacing controls. No CSS required.

Advanced panel

HTML anchor and custom CSS classes — useful if you want to target the trigger from your theme's stylesheet.

When to use the Link block

  • The FlipBook is supplementary content — like a downloadable resource, a "read more" link, or a sidebar promotion.
  • You want to keep the page clean and only show the FlipBook when the visitor asks for it.
  • You're placing the trigger inline in a paragraph or as a call-to-action button.

Mode comparison

Mode

What happens

Best for

Popup

A centered overlay covers the page; close to return

The vast majority of cases — keeps visitors on your page

New Tab

A new browser tab opens with just the FlipBook

When the FlipBook is a major resource and you want a full-window experience

Same Tab

The current page is replaced by the FlipBook URL

When the FlipBook is the destination (rare)

Block 3: TNC FlipBook 3D Image Link

Shows an image that opens the FlipBook when clicked. The image can be auto-resolved from the FlipBook's cover, or you can upload your own thumbnail.

Step-by-step

  1. Click + Add block and search FlipBook.
  2. Select TNC FlipBook 3D Image Link.
  3. In the block sidebar, pick your FlipBook.
  4. Choose the image source:
    • Use Cover — the block automatically pulls the Featured Image (or the first page) of the FlipBook.
    • Upload Custom Image — open the WordPress media library and pick or upload an image.
  5. Set the alt text (for accessibility) and width.
  6. Configure popup behavior just like the Link block.

All Image Link block settings

FlipBook panel

Setting

Default

What it does

Select FlipBook

—

The FlipBook to link to

Use Cover

On

Auto-resolve image from the FlipBook's Featured Image or first source image

Custom Image

—

If you want to override Use Cover, upload an image from the media library

Image Alt Text

(empty)

Alt text for screen readers and SEO. Defaults to the FlipBook title.

Image Width

(empty)

CSS width of the image (e.g. 300px). Leave empty for natural size.

Start Page

(empty)

Starting page when the FlipBook opens

Open Mode

Popup

Popup, New Tab, or Same Tab

Popup Width

90vw

Popup width

Popup Height

90vh

Popup height

Popup Theme

Dark

Dark or Light

Transparent Background

Off

Transparent popup background

Add nofollow

Off

Adds rel="nofollow" to the link

Alignment

The image link supports the standard block alignment controls (left, center, right, wide, full). Use these to position the image in the content area.

When to use the Image Link block

  • Catalog grids — a row or grid of cover thumbnails that each open a different FlipBook.
  • Hero banners and visual call-to-actions.
  • Resource libraries where the cover image is part of the appeal.

Cover image fallback chain

When Use Cover is on and Custom Image is empty, the block tries each of these in order:

  1. The FlipBook's Featured Image (set in the FlipBook editor's right sidebar).
  2. The first image of an Image Gallery FlipBook (if the source type is images).
  3. Nothing — if neither exists, the image renders empty. Either set a Featured Image on the FlipBook, or upload a Custom Image.

Live preview

All three blocks render a preview right in the editor — you don't need to publish the page to see what it'll look like. The preview matches what visitors will see on the front end. If the preview looks broken, save the page once; previews sometimes need a save to refresh after big setting changes.

Block vs. shortcode — which to pick

If you're already in the block editor, use blocks. They're easier to manage for non-technical authors, they preview live, and every setting is a click instead of a typed parameter.

If you're in the Classic editor, a page builder that doesn't have a TNC FlipBook addon, or a PHP template, use shortcodes.

If you're in Elementor, WPBakery, Avada, Beaver Builder, Bricks, or Breakdance, install the matching page-builder addon. The addon gives you dedicated widgets/elements/modules — much smoother than dropping shortcodes into a builder.

Reusable blocks and patterns

You can save any FlipBook block (or group of them) as a reusable block or synced pattern in WordPress. This is handy if you embed the same FlipBook on multiple pages — change it once in the pattern and every page updates. Right-click the block → Add to Reusable blocks (older WordPress) or Create pattern (newer WordPress).

Troubleshooting

The dropdown is empty / I can't see my FlipBook. Make sure the FlipBook is published (not a draft). Drafts don't show in the picker. Save the FlipBook and refresh the editor.

The block preview is blank. Save the page once and reload. Some heavy themes block iframe previews in the editor until first save.

The block shows on the back end but not on the front end. Clear any page or fragment cache (WP Rocket, Cloudflare, server cache). Then reload the front-end page in an incognito window.

The popup doesn't open. Confirm Open Mode is set to Popup. If it's Popup and still not opening, check the browser console for JavaScript errors — a conflicting theme or plugin script may be blocking the popup. Try switching to a default theme to confirm.

Block options don't save. Refresh the editor and try again. If a setting keeps reverting, your browser may have a stale block cache — try a hard reload (Cmd/Ctrl+Shift+R).

Next steps

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us