Gutenberg Block

4 min read

Updated June 10, 2026

FotoGrids ships two blocks for the WordPress block editor: FotoGrids Gallery and FotoGrids Album. Each block inserts an existing Gallery or Album you have already built in FotoGrids, renders a live preview right inside the editor, and lets you change the selection or jump to the Gallery’s settings without leaving the page. The blocks expose no layout or styling controls of their own — every visual setting lives on the Gallery or Album itself, so a block always matches what visitors see on the published page.

Location Block editor Add block FotoGrids Gallery / FotoGrids Album


Adding the Block #

Open any post or page in the WordPress block editor, click the block inserter, and search for FotoGrids. Two blocks appear under the Media category: FotoGrids Gallery and FotoGrids Album. You can also type /fotogrids directly in an empty paragraph to bring up the same two options.

When you insert either block before picking a collection, it shows a placeholder with a short instruction — Choose a gallery to insert, or create a new one — and two buttons. Select a gallery (or Select an album) opens the picker. Create new gallery (or Create new album) opens the FotoGrids editor in a new tab so you can build a collection first and come back. If you have not created any Galleries yet, the placeholder reads Create your first gallery instead.


Selecting a Gallery or Album #

The Select button opens the picker — a searchable modal listing every Gallery (or Album) on the site.

Each entry shows the collection’s cover thumbnail, its title, the number of items it contains, and when it was last updated. Type in the Search field to filter the list by title, and use the sort control to reorder it:

  • Newest first — most recently created collections at the top (the default).
  • Oldest first — earliest created collections first.
  • Title A–Z — alphabetical by title.
  • Recently updated — collections you edited most recently first.

Click any card to select it. The picker closes, the block stores the collection’s ID, and the live preview renders immediately. If you have not built the collection yet, Create new gallery at the bottom of the picker opens the FotoGrids editor in a new tab.

The block stores only the Gallery or Album ID, not a copy of its contents. Editing the collection in FotoGrids updates every page that embeds it the next time the page is viewed — there is nothing to re-insert.


The Live Preview #

Once a collection is selected, the block renders the real Gallery or Album inside the editor, using the exact layout, columns, captions, and effects configured on the collection. This is the same output visitors see, served through the same render pipeline as the published page — not a simplified mock-up.

A small FotoGrids Gallery (or FotoGrids Album) tag appears in the corner of the preview while the block is selected, so you can tell a FotoGrids block apart from native WordPress media at a glance.


Editor Preview Options #

Because the live preview is a fully working Gallery, clicking an item inside the editor would normally open the Lightbox or follow the item’s link — which makes the block hard to select and move. Two toggles under the block’s Preview controls (in the block toolbar and in the settings sidebar) control this behaviour. Both affect the editor only and have no effect on the published page.

Make Items Clickable

SettingMake items clickable
OptionsOn Off
DefaultOff

When off, clicking an item in the preview selects the block instead of triggering the item’s action, so you can reposition or configure the block without opening a Lightbox. Turn it on to test the real click behaviour — the Lightbox, an external link, or whatever the Gallery is configured to do — from inside the editor.

Enable Pagination Controls

SettingEnable pagination controls
OptionsOn Off
DefaultOff

Galleries that use pagination still render their pagination chrome in the preview so the layout matches the published page. When this is off, the pagination buttons stay visible but inactive, keeping every item on screen so you can see the whole collection while editing. Turn it on to click through the pages exactly as a visitor would.


Changing or Editing the Collection #

After a collection is selected, the block toolbar and the settings sidebar give you two actions:

  • Change gallery — reopens the picker so you can swap in a different Gallery or Album. The block keeps its position in the content; only the selection changes.
  • Edit gallery — opens that Gallery or Album in the FotoGrids editor in a new tab, where you can change its layout, items, and settings.

The settings sidebar also shows a summary card for the selected collection — its title, item count, last-updated date, and the layout it uses — plus a Show gallery settings used control that expands the key settings the collection is rendering with.


Alignment and Spacing #

The blocks support WordPress’s standard alignment and spacing tools. The block toolbar offers left, center, right, wide, and full alignment, and the block’s Dimensions controls in the sidebar expose margin and padding. These apply to the block’s placement on the page; the Gallery’s internal layout — columns, gaps, item sizing — is controlled on the Gallery itself.


Converting a Core Gallery Block #

If a post already contains a native WordPress Gallery block, you can convert it into a FotoGrids Gallery from the block’s transform menu. FotoGrids imports the images from the core block into a new FotoGrids Gallery, stores the new Gallery’s ID on the block, and renders the live preview in its place. The import runs once, the moment you convert; after that the block behaves like any other FotoGrids Gallery block.

Conversion creates a new FotoGrids Gallery from the core block’s images. The original images stay in your Media Library — nothing is deleted — and the new Gallery becomes editable from the FotoGrids editor like any other.

Was this article helpful?