--- title: "Getting Started with FooBox in the Block Editor" id: "196430" type: "knowledgebase" slug: "foobox-block-editor-getting-started" published_at: "2026-07-24T09:19:30+00:00" modified_at: "2026-07-24T09:19:30+00:00" url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-block-editor-getting-started/" markdown_url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-block-editor-getting-started.md" excerpt: "FooBox controls are added directly to supported WordPress blocks. You configure the trigger in the editor, save the page, and FooBox reads those settings on the frontend." taxonomy_knowledgebase_cat: - "Block Editor" --- [Block Editor](https://fooplugins.com/documentation/foobox/block-editor/) # Getting Started with FooBox in the Block Editor ## Related Articles - [Creating Image Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-image-lightboxes-block-editor/) - [Creating Gallery Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-gallery-lightboxes-block-editor/) - [Creating Video and Iframe Lightboxes (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-video-iframe-lightboxes/) - [Creating Button Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-button-lightboxes-block-editor/) - [Opening Hidden Block Content (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-hidden-block-content/) - [Creating Custom Lightbox Groups](https://fooplugins.com/documentation/foobox/block-editor/foobox-custom-lightbox-groups/) - [Using FooBox with the WordPress Core Lightbox](https://fooplugins.com/documentation/foobox/block-editor/foobox-wordpress-core-lightbox/) - [Opening Shortcodes and FooGallery in FooBox (Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-shortcodes-foogallery/) **Need more help?** Browse all documentation or open a support ticket. [All docs](/documentation/) [Support](/support/) FooBox controls are added directly to supported WordPress blocks. You configure the trigger in the editor, save the page, and FooBox reads those settings on the frontend. ## 1. Review the compatibility settings Go to **FooBox → Settings → General → Compatibility** before building lightboxes. ![FooBox Compatibility settings showing Default Image Link, Auto Link Existing Images, and WordPress Lightbox](https://fooplugins.com/wp-content/uploads/2026/07/01-compatibility-settings.webp)The settings serve different purposes: - **Default Image Link** makes newly inserted WordPress images link to their media files by default. - **Auto Link Existing Images** helps older attachment images that were inserted without links. - **WordPress Lightbox** lets FooBox take over Image and Gallery blocks configured with WordPress’s own lightbox option. It is off by default so existing sites are not changed unexpectedly. For the most predictable new content, link Image and Gallery blocks to their media files. [See the dedicated compatibility guide](https://fooplugins.com/documentation/foobox/block-editor/foobox-wordpress-core-lightbox/) if you prefer using the core WordPress lightbox control. ## 2. Add and select a supported block Add an **Image**, **Gallery**, **Button**, or **Group** block. Select the actual block you want to configure, then open the settings sidebar. In WordPress 7, choose the **Block** tab and then its **Content** tab. The FooBox section appears below the block’s native controls. ![WordPress 7 Image block inspector with the Block and Content tabs and FooBox section](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201290%20920'%3E%3C/svg%3E)If the FooBox section is not visible, confirm that: - the outer block is selected, rather than text or an inner block; - the settings sidebar is open; - the **Content** tab is selected; - the block is a supported core block. ## 3. Enable FooBox Expand **FooBox** and turn on **Enable FooBox**. Group blocks use the equivalent **Use as hidden FooBox content** control. ![Enable FooBox switched on for an Image block](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20390%20320'%3E%3C/svg%3E)The panel now exposes the settings appropriate to that block. Common settings include dimensions, style, theme, opening effect, Gallery group, and captions. ## 4. Check the editor indicator FooBox-enabled blocks receive a visible editor outline. Hidden Group content uses a different outline so it can still be found and edited even when it will not appear in the normal frontend page flow. ![A FooBox-enabled Image block outlined in the editor](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20720%20540'%3E%3C/svg%3E)The outline is editor-only and is not included in the published page. ## 5. Preview before publishing Use **Preview** and activate every trigger. Check the selected media, dimensions, captions, gallery navigation, and content handler. FooBox settings are saved with the block, so changing one block does not have to change the site-wide defaults or another lightbox on the same page. ## What to read next - Start with a [single Image lightbox](https://fooplugins.com/documentation/foobox/block-editor/foobox-image-lightboxes-block-editor/) . - Build a [Gallery lightbox](https://fooplugins.com/documentation/foobox/block-editor/foobox-gallery-lightboxes-block-editor/) . - Use a [Button as the trigger](https://fooplugins.com/documentation/foobox/block-editor/foobox-button-lightboxes-block-editor/) . - See the [Free and Pro feature table](#free-and-pro-at-a-glance) . ## Free and Pro at a glance | Feature | FooBox Free | FooBox Pro | | --- | --- | --- | | Image lightboxes | Yes | Yes | | Gallery lightboxes | Yes | Yes | | Button with image or auto-detected image target | Yes | Yes | | Styles, themes, captions, grouping, and dimensions | Yes | Yes | | WordPress core lightbox takeover | Yes | Yes | | Opening effects | Configuration is visible | Yes | | Hidden Group/HTML content | Configuration is visible | Yes | | Video and iframe content | Configuration is visible | Yes | | Video poster images | Configuration is visible | Yes | | Large-image panning interaction and overview | No | Yes | Pro controls remain visible in the Free editor. This lets a page be prepared before an upgrade, but the Pro content handler or effect is required on the frontend. Resources ## Find the right next step Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages. ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Documentation Search setup guides, product docs, and troubleshooting articles. [Browse docs](/documentation/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Support Open a ticket with product details so we can help quickly. [Get support](/support/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Licensing Review account, renewal, refund, and license information. [View details](/licensing/)