Gutenberg Single Builder Addon

The Gutenberg Single Builder Addon is a performance-focused tool designed for users who prioritize website speed over heavy page builders like Divi or Elementor. It enables you to create a wide variety of templates for your single event pages using the default WordPress Gutenberg editor, allowing for complete customization of layouts, fonts, and color schemes.

Initial Setup

Before building custom event templates, ensure your environment meets the necessary requirements and the block editor is correctly activated.

Requirements

• MEC Version: This addon is compatible with both MEC Lite and MEC Pro.
• Installation: Ensure both Modern Events Calendar and the Gutenberg Single Builder Addon are installed and activated.

• Availability: These tools are exclusively available via webnus.net and are not on the WordPress repository.

Enabling the Block Editor

To use this addon, you must manually enable the editor for MEC single event pages:

1. Navigate to M.E. Calendar > Settings > Single Event page.
2. Go to the Advanced tab.
3. Uncheck the option labeled Disable Block Editor (Gutenberg).

Creating and Customizing Templates

Once the addon is active, a new Gutenberg Single Builder section will be available in MEC.

Building a New Template

1. Click the Gutenberg Single Builder menu in the MEC settings.

2. Select Design new event Gutenberg single page to generate a new template.

3. Set a name for your template for easy identification.

4. Add Elements (MEC Blocks): Choose your preferred MEC blocks and place them into the editor on the right side of the screen.

Styling Widgets

You can refine the visual appeal of every element within your template to match your branding:

• Brush Icon: Click the brush icon on a specific widget to open its styling options.

• Right Sidebar: All customizable features for the selected widget will appear in the right sidebar.

• Visual Personalization: You can customize fonts, color schemes, and layouts. For example, you can change a registration button to a “block style” layout.

Important: The Gutenberg editor preview is not a real event preview. It only shows the structure and available MEC blocks.

For accurate results, always check your template on the frontend using an actual event page.

Assigning Templates to Events

After saving your changes with the Update button, you must assign the template to your events.

Global Assignment (Default Style)

To set a template as the default for your entire site:

1. Navigate to MEC Settings > Single Event.
2. Set the single event page style to Gutenberg Single Builder.
3. In the Default Gutenberg Builder for Single Event section, choose the template you created.
4. Reference Event (Custom Event For Editor Gutenberg Builder): Select a specific event to act as the default visual reference while you are editing in Gutenberg .

This option is used only to load sample data into the editor while designing your template. It does not affect the actual event content on the frontend. Each event will still display its own data when viewed by users. This helps you preview how dynamic content (like title, date, or location) will appear in your layout.

Individual Event Assignment

If you want to design a unique page for a specific event:

1. Navigate to the Edit Event page for that specific event.
2. Locate the Choose Gutenberg Single Template option in the lower section of the sidebar on the event edit page and select your template.

Use Cases (When This Addon is Useful)

• Speed Optimization: Ideal for administrators who want high-performance event pages without the resource overhead of external page builders.
• Brand Alignment: Perfect for matching event pages exactly to your website’s unique color palette and typography.
• Professional Presentation: Useful for creating specialized, unique experiences for visitors through personalized layouts.
• Gutenberg-Based Workflow: Best suited for users already familiar with the Gutenberg editor.

Situations This Addon May Not Be Ideal

• Users Seeking Ready-Made Designs: This addon does not come with pre-designed templates; it is a builder tool that requires you to create your own designs.
• Non-Gutenberg Users: If you prefer working within Elementor or Divi, this addon is not necessary as MEC offers builders for those platforms.

Troubleshooting: “Invalid JSON Response”

1. Permalink Settings: Go to Settings > Permalinks and click Save Changes to refresh the server rewrite rules.
2. SSL & Mixed Content: Ensure your site URL in Settings > General is set to HTTPS. Use the Really Simple SSL plugin if mixed content issues persist.
3. REST API Blocked: Temporarily disable security plugins that might be blocking the REST API, which Gutenberg relies on.  

You can also check if `/wp-json/` is accessible in your browser. If not, the REST API is likely blocked.

4. Theme/Plugin Conflicts: Switch to a default theme (like Twenty Twenty-Three) and deactivate other plugins one by one to find the conflict.
5. Server Configuration:Ensure you are running PHP 7.4 or higher. Increase the PHP memory limit by adding define('WP_MEMORY_LIMIT', '512M'); to your wp-config.php file.
   Please note that depending on your setup (e.g., active plugins, theme, and builder complexity), 512M may not always be sufficient. In such cases, increasing the memory limit further (e.g., 1024M or higher) may be required.
6. File Permissions: Verify that directories are set to 755 and files are set to 644.

Advanced Debugging: Add define(‘WP_DEBUG’, true); and define(‘WP_DEBUG_LOG’, true); to your wp-config.php file and check the wp-content/debug.log for more details.

FAQ