How to use Gutenberg with WoodMart

Installing the theme from scratch

If you install the theme from scratch, you will need to select Gutenberg editor during the setup wizard. This will enable all necessary options to load all blocks on your website and mark Gutenberg as a primary page builder.

Switching from other builders to Gutenberg

If you are currently using WPBakery or Elementor and want to switch to Gutenberg, you will need to adjust certain options in the Theme Settings, depending on which parts of Gutenberg’s functionality you want to use. The following options can be found in the Theme Settings → Other. Below, each of the options is explained in more detail.

Description of options related to Gutenberg

• Current builder – this option determines which builder will be used to install prebuild websites and import predefined templates for layouts such as the single product page, product archive, and others.
• Gutenberg blocks – by default, if you were using another builder, the Gutenberg blocks from the WoodMart theme will be disabled. If you want to use our theme’s blocks and install demo content, you need to activate this option.
• Gutenberg editor for products – Enable this option if you would like to use Gutenberg to edit WooCommerce product descriptions.

Content migration from WPBakery or Elementor

Unfortunately, it is not possible to create an automatic mechanism for transferring content from WPBakery or Elementor to Gutenberg due to their fundamentally different architectures and storage methods. WPBakery relies on shortcodes, Elementor uses JSON-based metadata, and Gutenberg utilizes a block-based structure. These formats are incompatible, and many widgets or shortcodes in WPBakery and Elementor have no equivalent blocks in Gutenberg. Additionally, to increase overall performance Gutenberg are heavily reliant on nesting and reuse of common blocks, which making it impossible to maintain the original design during migration.

Furthermore, both WPBakery and Elementor support custom widgets, add-ons, and dynamic content, which Gutenberg does not natively handle. Automating the conversion process would require extensive parsing, mapping, and development for each unique scenario, making it highly complex and unreliable, adding risk of data loss or structure corruption. As a result, manual rebuilding of content in Gutenberg remains the only practical solution to ensure design consistency and functionality.

Using two page builders simultaneously

Since Gutenberg is the native page builder for WordPress, it is always enabled by default and available for use, even in areas where Elementor or WPBakery are being used. The fact that Gutenberg cannot be disabled can potentially create scenarios where two builders (Gutenberg and WPBakery or Gutenberg and Elementor) are used simultaneously.

It is important to note that such usage is not recommended from a performance standpoint. This is because, at times, the site may load styles and scripts for elements with similar functionalities (e.g., an Elementor container and a Gutenberg container both perform the same function, but when present on the same page, they require two different style files to operate).

Nonetheless, such usage is still possible if certain conditions are met:

• Prebuilt website imports, additional pages, and layouts can only be imported for one of the two builders at a time. The active builder is determined by the Current Builder option mentioned earlier.
• Gutenberg has its own slider, implemented as a block that can be edited directly on the page. In contrast, Elementor and WPBakery use a custom post type for sliders and slides, which are edited in a separate theme settings section. Content created using the slider post type cannot be edited with Gutenberg and requires the use of Elementor or WPBakery.
• If you are using a layout builder to create the checkout page, you must use the same builder that you have selected as your primary builder in the Current Builder setting. This is because Elementor/WPBakery and Gutenberg use different structures for building the checkout form layout.