How do I add a booking block in Gutenberg?

To add a booking form in the WordPress block editor (Gutenberg), click +, type “Kraft” to display the Kraft Booking category, insert the block you want, then set it up in the Settings panel on the right. GDA Kraft Booking, the WordPress plugin by Global Digital Agency, provides native blocks that also work in the site editor (Full Site Editing). This guide shows how to structure a listing page with the core WordPress blocks and reuse your layouts.

Why choose the block editor?

The block editor is WordPress's native editor: it requires no extra page-building plugin. With a block theme, you also build headers, footers and templates in the site editor. It is the lightest solution for a booking website, provided you accept slightly fewer styling options than with a builder such as Elementor or Divi.

How do I insert a block step by step?

1. Open the page or post in the editor.
2. Click + (block inserter) and type “Kraft”.
3. Choose the block: “Availability search”, “Search results”, “Booking form”, “Availability calendar”, “Customer area” or “Book an appointment”.
4. In the Settings panel, adjust the options: “Unit (ID, 0 = automatic)”, “Number of months” and “Show prices” for the calendar; “Payment”, “Show guests”, “Show phone” and “Show summary” for the form; “Service (ID, 0 = all)” and “Staff member (ID, 0 = any)” for appointments. To take payments online, choose “Online payment (Stripe / Kraft Pay)”.
5. In the block toolbar, choose wide or full width alignment if needed.
6. Save and preview on mobile.

How this maps to the other builders is described in Using Kraft Booking with Divi, Gutenberg, Elementor and Bricks.

How do I structure an accommodation page with core blocks?

The native WordPress blocks are enough for a complete listing page:

1. a Cover block with the main photo, the name of the accommodation and its capacity;
2. a Columns block with two columns (66% and 33%): on the left, Paragraph, List and Gallery blocks for the description and amenities; on the right, the Availability calendar block followed by the Booking form block: the guest picks their dates in the calendar, then the form confirms that stay;
3. a Group block with your cancellation terms and practical information;
4. one Details block (collapsible heading) per frequently asked question: arrival, pets, linen, cancellation.

On mobile, the Columns block stacks its columns by default: the form moves below the description. Add a Buttons block at the top of the page with a link to the HTML anchor of the Booking form block (the block's Advanced setting), for direct access.

How do I reuse the layout on every listing page?

Two native tools save you from rebuilding each page:

• Patterns: save your listing page structure as an unsynced pattern. Each new page starts from this base; on an accommodation page, the calendar (“Unit” set to 0) automatically shows that property.
• Synced patterns: for an element that is identical everywhere, such as the “Cancellation policy” box or the header Search block. A change is reflected on every page.

In the site editor, you can also place the Search block in a template or template part (the home page header, for example). For a template shared by all listing pages, leave “Unit (ID, 0 = automatic)” at 0 and test that each page does display its own calendar.

How do I organise a service page?

1. A Heading with the duration and price.
2. Paragraphs and a List for how the session runs and practical information.
3. The Book an appointment block, with “Service (ID, 0 = all)” filled in.
4. A Paragraph reminding clients of the cancellation rule, with a link to the dedicated page.

For setting up the services themselves, see How do I add online appointment booking to a WordPress site?.

How do I make the most of global styles?

Kraft Booking blocks are displayed within your theme, whose global styles (colours, typography) are defined in the site editor. For a consistent result:

• first define the palette and fonts in the site editor's Styles;
• check that the button colour has a contrast of at least 4.5:1 with its text (WCAG level AA);
• avoid overloading each block with local settings: changing the global style then fixes the whole site.

What are the good practices for accessibility and performance?

• Keep visible labels on fields and a clearly visible focus.
• Fill in the alt text of gallery images (“Double room overlooking the garden”).
• Use a logical heading hierarchy: a single main heading, then subheadings.
• Only insert booking blocks on the pages that need them.
• With a caching plugin, check after a test booking that availability is up to date; exclude booking pages if necessary, and always the guest portal page.

Which errors come up often?

Frequently asked questions

Do the blocks work with a classic theme?

Yes, in the block editor for pages and posts. The site editor and its templates are only available with a block theme.

Can I put the form in a sidebar widget?

This case is not documented: if your theme handles widgets as blocks, test it. In any case, it is better to place the form on the accommodation page, next to its description.

Are the blocks translated on a multilingual site?

Yes, with the built-in multilingual support: on the /en/, /it/, /es/ and /de/ addresses, the block texts are translated automatically. There is no language option in the blocks; see Multilingual sites.

Do I need a Kraft GDA account to use the blocks?

The plugin is downloaded from your Kraft GDA customer area (free account, no credit card, sign up at /en/inscription). This edition includes everything, online payment, the Book an appointment block, Kraft Console, the design modules, Kraft Fields and multilingual support: no add-on to install.