View Categories

Directorist Gutenberg Integration

Directorist Gutenberg Integration lets you build and design Directorist directory layouts with the native WordPress block editor. You can create listing archive pages, listing cards, search forms, single listing templates, author profiles, category sections, location sections, and pricing plan layouts without writing code.

This guide is written for site admins and non-technical users. It explains where to find the settings, how to add the blocks, what the main options mean, and how to publish the final layout.

Before You Start #

Make sure these items are ready before you build a Gutenberg directory layout:

  • Directorist core plugin is installed and active.
  • Directorist Gutenberg Integration is installed and active.
  • Your directory has at least a few test listings.
  • Categories and locations are created if you want to show category or location sections.
  • Related extensions are installed and active if you want to use extension-specific blocks such as Booking, FAQ, Gallery, Job Manager, Claim Listing, or Live Chat.

Developer note: Directorist Gutenberg Integration requires WordPress 6.5 or later and PHP 8.0 or later.

[Screenshot: Installed Plugins screen showing Directorist and Directorist Gutenberg Integration active]

Basic Setup Flow #

You can use Directorist Gutenberg Integration in two ways:

  1. Import a ready-made Directorist Gutenberg theme or layout package.
  2. Build pages and templates manually with Directorist blocks.

If you are new to Gutenberg layouts, start with the import method. If you want full control over a specific page, use the manual method.

Method 1: Import a Directorist Gutenberg Theme #

The extension adds a Gutenberg theme import area inside Directorist.

Path: Dashboard > Directorist > Gutenberg Themes

Use this area when you want to import a ready-made Directorist Gutenberg layout package instead of building every page from scratch.

How to Import a Gutenberg Theme #

  1. Go to Dashboard > Directorist > Gutenberg Themes.
  2. Browse the available Gutenberg themes.
  3. Use the search box if you are looking for a specific layout type.
  4. Use the category filter if available.
  5. Preview the theme if the preview option is available.
  6. Click Import.
  7. Wait until the import finishes.
  8. After import, review the imported pages, templates, listings, media, and settings.

There is also an upload option for importing a Directorist Gutenberg theme package as a ZIP file.

Use the upload option if you already have a Gutenberg theme package exported from a Directorist template source.

[Screenshot: Directorist Gutenberg Themes import screen]

After Import #

After importing a Gutenberg theme, check these items:

  • Pages were created correctly.
  • Templates were imported correctly.
  • Menu links go to the right pages.
  • Directorist required pages are assigned correctly.
  • Listings, categories, and locations show on the front end.
  • Search forms submit to the correct result page.
  • Pricing plans, booking fields, or extension sections show only if the related extensions are active.

Method 2: Build Manually With Directorist Blocks #

Use this method when you want to create your own layout from the WordPress editor.

You can add Directorist blocks in two main places:

  • Pages: Use this for normal pages such as homepage, all listings page, pricing page, category page, or location page.
  • Site Editor templates: Use this for reusable layouts such as single listing templates or archive templates.

How to Find Directorist Blocks on a Page #

Use this method when you want to add Directorist sections to a normal WordPress page.

Path: Dashboard > Pages > Add New

Or:

Dashboard > Pages > All Pages > Edit

Steps:

  1. Open the page where you want to add Directorist content.
  2. Click the + icon in the editor.
  3. Search for Directorist.
  4. Choose the block you need.
  5. Click the block after adding it.
  6. Open the right sidebar settings panel.
  7. Adjust the block options.
  8. Click Preview to check the page.
  9. Click Publish or Update.

If the right sidebar is hidden, click the settings icon in the top-right corner of the editor.

[Screenshot: Gutenberg block inserter showing Directorist blocks]

How to Find Directorist Blocks in the Site Editor #

Use this method when you want to edit a reusable template, such as a single listing layout.

Path: Dashboard > Appearance > Editor

Then open: Templates

Steps:

  1. Go to Appearance > Editor.
  2. Open Templates.
  3. Choose the template you want to edit.
  4. Click the + icon.
  5. Search for Directorist.
  6. Add the block you need.
  7. Select the block and adjust the right sidebar settings.
  8. Save the template.
  9. Open the front end and check a real listing.

Note: The Site Editor is available when your site uses a block theme. If your theme does not support the Site Editor, you can still use Directorist blocks inside normal WordPress pages.

[Screenshot: Site Editor template with Directorist blocks]

Understanding the Block Settings Sidebar #

After you add a Directorist block, click the block to see its options in the right sidebar.

Most blocks have settings like these:

  • View: Controls the layout style, such as grid, list, map, or slider.
  • Columns: Controls how many items show in one row.
  • Items per page: Controls how many listings, categories, locations, or plans appear before pagination.
  • Order by: Controls what the items are sorted by, such as date, ID, title, or menu order.
  • Order: Controls whether the newest, oldest, highest, or lowest items show first depending on the selected order type.
  • Directory type: Controls which directory type the block should use.
  • Block width: Controls how wide the block is inside the page.
  • Design settings: Controls spacing, colors, typography, borders, and other visual settings when available.
  • Responsive settings: Controls how the block behaves on desktop, tablet, and mobile when available.

Not every block has the same options. The options change based on what the block does.

Create an All Listings Page #

Use the All Listings block when you want a simple all listings page.

Path: Dashboard > Pages > Add New

Steps:

  1. Add a page title, such as All Listings.
  2. Click the + icon.
  3. Search for All Listings.
  4. Add the All Listings block.
  5. Select the block.
  6. Configure the block settings from the right sidebar.
  7. Preview the page.
  8. Publish the page.

All Listings Block Options #

View: Choose how listings appear. Use Grid for card-style layouts. Use List when you want more details in a row-based layout. Use map-related views only when your map setup is ready.

Order by: Choose what controls the listing order. For example, date shows listings based on publish date.

Order: Choose ascending or descending order. Descending usually shows newer listings first.

Listings per page: Set how many listings appear before pagination.

Show pagination: Turn this on if you want visitors to move between listing pages.

Header: Turn this on if you want the listing header area to appear.

Header title: Change the title shown in the listing header.

Columns: Choose how many listing cards show in each row.

Featured only: Turn this on if you only want featured listings to appear.

Popular only: Turn this on if you only want popular listings to appear.

Advanced filter: Turn this on if you want the advanced filter area to appear with the listing layout.

Display preview image: Turn this on if listing cards should show listing images.

Logged-in user only: Turn this on if the block should show listings connected to the logged-in user.

Map height: Set the map height if you use a map-based layout.

Map zoom level: Set the default map zoom level. A higher number shows a closer map view.

Sidebar: Choose or define sidebar placement if the layout supports a sidebar.

Query type: Choose the listing query behavior. Keep the default option unless you have a specific reason to change it.

Category: Enter a category slug if you only want to show listings from a specific category.

Location: Enter a location slug if you only want to show listings from a specific location.

Tag: Enter a tag slug if you only want to show listings with a specific tag.

IDs: Enter listing IDs if you only want to show specific listings.

Directory type: Choose which directory type the listings should come from if your site uses multiple directory types.

Redirect page URL: 

Set a URL if the block needs to redirect visitors to another page for a specific action.

Block width: Set how wide the block should be. Keep it at 100 for full-width inside its container.

[Screenshot: All Listings block settings sidebar]

Build an Advanced Listing Archive Layout #

Use this method when you want more control than the single All Listings block gives you. Open your archive page or template, add the recommended blocks, and capture the full editor layout.

Recommended block order:

  1. Listings Search
  2. Listings Header
  3. Listings Filters
  4. Listings Loop
  5. Listing Card Template
  6. Listings Pagination

Listings Search #

This block displays the search form for listings.

Use it when visitors need to search by keyword, category, location, directory type, or other configured search fields.

Important options:

  • Directory type: Choose which directory type the search should use.
  • Search design controls: Adjust the wrapper, form box, field labels, field inputs, submit area, and submit button.
  • Block width: Control how wide the search form appears.

Listings Loop #

This block displays the actual listing results.

Important options:

  • Default view: Choose grid, list, slider, or map-related display if available.
  • Listings columns: Choose how many listing cards show per row.
  • Listings per page: Set how many listings show before pagination.
  • Order by and order: Control sorting.
  • Featured only: Show only featured listings.
  • Popular only: Show only popular listings.
  • Logged-in user only: Show listings related to the logged-in user.
  • Category, tag, location, and listing IDs: Limit which listings appear.
  • Pagination type: Choose how visitors move through results.
  • Card gap settings: Adjust spacing between listing cards.

Listing Card Template #

This block controls the design of each listing card inside the loop.

You can add listing field blocks inside it, such as:

  • Listing Thumbnail
  • Listing Title
  • Listing Category
  • Listing Location
  • Listing Address
  • Listing Rating
  • Listing Pricing
  • Listing Phone
  • Listing Website
  • Listing Posted Date
  • Listing View Count
  • Badges
  • Custom fields

Tip: Keep listing cards short and useful. Show the details visitors need before they open the full listing.

Create a Homepage Search Section #

Use the Homepage Search block when you want a search section on your homepage or landing page.

Path: Dashboard > Pages > Home Page > Edit

Steps:

  1. Open your homepage.
  2. Click the + icon where you want the search section.
  3. Search for Homepage Search.
  4. Add the block.
  5. Select the block.
  6. Choose the directory type if needed.
  7. Adjust search fields and design settings.
  8. Preview the page.
  9. Update the page.

Homepage Search Options #

Directory type: Choose which directory type the search form should use.

Directory type navigation: Use this when visitors should switch between directory types before searching.

Search field design: Adjust the search wrapper, form container, field group, field labels, field inputs, submit area, and submit button.

Standalone design directory type: Use this when you want to style the search form for a specific directory type while editing.

Block width: Set how wide the homepage search section should be.

[Screenshot: Homepage Search block on homepage]

Create a Single Listing Template #

Use single listing blocks when you want to control how each listing detail page looks.

Path:

Dashboard > Appearance > Editor > Templates

Steps:

  1. Open the Site Editor.
  2. Go to Templates.
  3. Open the single listing template or create a new listing template if your setup supports it.
  4. Add the Directorist blocks you need.
  5. Arrange the blocks in the order visitors should read them.
  6. Save the template.
  7. Open a real listing on the front end and check the result.

Recommended single listing blocks:

  • Description: Shows the listing description.
  • Map Card Template: Shows the listing map.
  • Author Info: Shows basic listing author information.
  • Author Profile: Shows a full author profile section.
  • Contact Listings Owner Form: Shows the contact form.
  • Listing Review: Shows reviews or comments.
  • Related Listings: Shows related listings.
  • Share: Shows the share action.
  • Bookmark: Shows the bookmark action.
  • Report: Shows the report action.
  • Tag: Shows listing tags.
  • Social Info: Shows listing social links.
  • Custom Content: Shows custom text or shortcode content.

Single Listing Block Options #

Section title: Change the title shown above a section, such as Author Profile.

Show header: Turn this on if you want a section heading to appear.

Display email: Choose how the author email should appear if the block supports email display.

Map height: Set the height of the map block.

Map zoom level: Set how close the map should appear by default.

Editor preview listing ID: Use this to preview the block with a specific listing inside the editor. This is helpful because some blocks need listing data to show content.

Directory type: Choose the directory type if your site has multiple directory types.

Block width: Control the width of the section.

[Screenshot: Single listing template with Directorist blocks]

Build an Author Profile Section #

Use author profile blocks when you want to show information about the listing owner or directory member.

Recommended blocks:

  • Author Profile Template
  • Author Avatar
  • Author Name
  • Author Bio
  • Author Rating
  • Author Listing Count
  • Author Address
  • Author Email
  • Author Phone
  • Author Website
  • Author Social Links
  • Author Profile Button
  • Author Message Button

Setup flow:

  1. Open the page or template where the author profile should appear.
  2. Add Author Profile Template or Author Profile.
  3. Add the author field blocks inside it.
  4. Remove fields you do not need.
  5. Preview with a listing or author that has real data.

If a field appears blank, check whether that author has the related information saved.

Display Categories #

Use the All Categories block to show listing categories.

Path: Dashboard > Pages > Add New

Steps:

  1. Create or edit a page.
  2. Add the All Categories block.
  3. Select the block.
  4. Choose the view and display mode.
  5. Set how many categories to show.
  6. Turn image, icon, or description on or off.
  7. Preview and publish.

All Categories Options #

View: Choose the layout style for category cards.

Display mode: Choose how categories load. Use pagination when you want visitors to move between pages. Use slider if you want a carousel-style layout.

Slides per view: Set how many category cards show at once in slider mode.

Arrow navigation: Turn this on if visitors should move through the slider with arrows.

Dot navigation: Turn this on if visitors should see slider dots.

Slider autoplay: Turn this on if the slider should move automatically.

Order by: Choose how categories are sorted.

Order: Choose ascending or descending order.

Categories per page: Set how many categories appear before pagination.

Show all categories: Turn this on if you want to display every category.

Columns: Set how many category cards show in each row.

Show image: Turn this on to show category images.

Show icon: Turn this on to show category icons.

Show description: Turn this on to show category descriptions.

Directory type: Choose the directory type if your categories are connected to a specific directory type.

Category count label: Change the singular and plural text used for listing counts.

Block width: Set the width of the block.

Display Locations #

Use the All Locations block to show listing locations.

The setup flow is the same as categories:

  1. Create or edit a page.
  2. Add the All Locations block.
  3. Choose the view and display mode.
  4. Set how many locations to show.
  5. Turn image, icon, or description on or off.
  6. Preview and publish.

All Locations Options #

Most options work like the All Categories block.

  • View controls the layout style.
  • Display mode controls pagination or slider behavior.
  • Locations per page controls how many locations show.
  • Show all locations displays every location.
  • Columns control the number of cards in each row.
  • Show image, show icon, and show description control what appears inside each location card.
  • Directory type limits the block to a selected directory type.
  • Location count label changes the text used for listing counts.
  • Block width controls the width of the block.

Show Pricing Plans #

Use the Pricing Plans block when your directory uses paid listing plans or memberships.

Path: Dashboard > Pages > Add New

Steps:

  1. Create or edit your pricing page.
  2. Add the Pricing Plans block.
  3. Select which plans should appear if the option is available.
  4. Set the number of columns.
  5. Adjust the gap between plan cards.
  6. Add or arrange pricing plan field blocks if using a composable layout.
  7. Preview and publish.

Pricing Plans Options #

Plan IDs: Choose specific pricing plans to show. Leave empty if you want the default plan list.

Enable duration tabs: Turn this on if visitors should switch between plans by duration or package type.

Tab type: Choose how pricing tabs are grouped.

Default tab: Choose which tab opens first.

Columns: Set how many pricing plans appear in each row.

Gap: Set the space between pricing plan cards.

Design settings: Adjust the visual style where available.

Recommended pricing field blocks:

  • Plan Title
  • Plan Price
  • Plan Duration
  • Plan Features
  • Plan Description
  • Plan Action Button
  • Plan Recommended Badge
  • Plan Active Badge
  • Plan Trial Note
  • Plan Type Badge

[Screenshot: Pricing Plans block with plan cards]

Use Extension-Specific Blocks #

Some blocks only work when the related Directorist extension is active.

Examples:

  • Booking: Requires Directorist Booking.
  • Claim Listing: Requires Claim Listing.
  • Compare Listing: Requires Compare Listing.
  • FAQ: Requires Listing FAQs.
  • Gallery: Requires Image Gallery.
  • Job Details, Job Type, Salary, Deadline, Open Position, and Application Form: Require Job Manager.
  • Live Chat: Requires Live Chat.
  • Digital Marketplace: Requires Digital Marketplace.

Setup flow:

  1. Install and activate the related extension.
  2. Add real data to a test listing.
  3. Open the single listing template.
  4. Add the related extension block.
  5. Preview the listing on the front end.

If the block appears blank, the extension may not be active or the listing may not have data for that feature.

Design and Responsive Settings #

Many Directorist Gutenberg blocks include design settings.

Common design options:

  • Width: Controls how wide the block appears.
  • Padding: Adds space inside the block.
  • Margin: Adds space outside the block.
  • Gap: Controls spacing between cards or fields.
  • Typography: Controls font size, weight, and style.
  • Color: Controls text, icon, background, or button colors where available.
  • Border: Controls border width, style, radius, and color where available.
  • Alignment: Controls left, center, or right alignment.
  • Responsive settings: Adjust desktop, tablet, and mobile views.

Recommended process:

  1. Finish the layout first.
  2. Add real listing data.
  3. Style desktop view.
  4. Check tablet view.
  5. Check mobile view.
  6. Preview on the front end.

Recommended Setup Checklist #

Use this checklist before publishing:

  • Directorist core plugin is active.
  • Directorist Gutenberg Integration is active.
  • Required Directorist pages are created.
  • Directory settings are configured.
  • At least one test listing is published.
  • Categories and locations are created.
  • Search form has the correct fields.
  • Listing archive shows real listings.
  • Listing cards show the right fields.
  • Single listing template shows listing data.
  • Extension blocks only appear where the related extension is active.
  • Desktop, tablet, and mobile layouts are checked.
  • Buttons and links go to the correct pages.
  • Empty fields do not leave awkward blank spaces.

Troubleshooting #

I Do Not See Directorist Blocks #

Check these items:

  1. Go to Plugins > Installed Plugins.
  2. Make sure Directorist is active.
  3. Make sure Directorist Gutenberg Integration is active.
  4. Edit a page or template.
  5. Search for Directorist in the block inserter.

If Directorist core is not active, the Gutenberg blocks will not load properly.

I Do Not See the Gutenberg Themes Menu #

Go to:

Dashboard > Directory Listings > Gutenberg Themes

If you do not see it:

  • Make sure Directorist Gutenberg Integration is active.
  • Make sure your account has administrator permission.
  • Make sure Directorist core is active.

A Block Shows No Data #

This usually means the block needs real Directorist data.

Check these items:

  • The listing is published.
  • The listing has the field you are trying to show.
  • The category, location, or custom field has data.
  • The related extension is active if it is an extension block.
  • You are previewing the block inside the correct page or template context.

Search Is Not Working as Expected #

Check these items:

  • The search form is connected to the correct directory type.
  • The search result page exists.
  • Search fields are configured in Directorist settings.
  • Listings have matching category, location, or custom field data.

Template Changes Are Not Showing #

Check these items:

  • You saved the template.
  • You edited the correct template.
  • Your active theme supports the Site Editor if you are editing templates.
  • Your browser or site cache is cleared.

Extension Blocks Are Blank #

Check these items:

  • The related extension is installed and active.
  • The listing has data for that extension.
  • The block is placed in the right template, usually a single listing template.

FAQ #

Do I need coding knowledge to use Directorist Gutenberg Integration? #

No. You can add and arrange Directorist blocks from the WordPress editor. Developers can still add custom styling if needed.

Is this only for block themes? #

No. You can use Directorist blocks inside normal pages. The Site Editor template workflow needs a block theme.

Can I replace shortcodes with Gutenberg blocks? #

Yes, in many cases you can use Directorist Gutenberg blocks instead of shortcodes. Blocks give you more visual control inside the editor.

Can I build a complete directory homepage with these blocks? #

Yes. You can add homepage search, listing blocks, category blocks, location blocks, and pricing blocks to build a directory homepage.

Why does a block look different in the editor and on the front end? #

Your theme styles, cache, or responsive settings may affect the front-end view. Always preview the page after editing.

Can developers customize the layout further? #

Yes. Developers can use theme CSS, child themes, and custom template work to refine the final output.

Conclusion #

Directorist Gutenberg Integration gives site admins a WordPress-native way to build advanced directory layouts. Start with the Gutenberg Themes importer if you want a ready-made setup. Use manual Directorist blocks when you want full control over pages and templates.

After creating your layout, always test it with real listings, check mobile responsiveness, and preview the final pages before publishing.

What are your Feelings