Gutenberg Block

Introduction

The ASA2 Gutenberg Block is the modern way to embed products in your WordPress posts and pages using the block editor (Gutenberg). It provides a user-friendly interface that makes it easy to add ASA2 products without needing to know shortcode syntax.

The block integrates seamlessly with the ASA2 Product Picker and supports all ASA2 templates, including advanced features like the Carousel template.

Adding the ASA2 block in Gutenberg

To add an ASA2 product block to your content:

  1. In the Gutenberg editor, click the + button to add a new block

  2. Search for “ASA2” or find it in the “Embeds” category

  3. Click on the ASA2 block to add it

Using the Block

This video demonstrates the complete workflow of using the ASA2 Gutenberg Block.

Product Selection

When you first add the ASA2 block, you’ll see an “Embed ASA2 Product” button. Click this button to open the ASA2 Product Picker.

The embed button of the ASA2 Gutenberg block

The Product Picker allows you to:

  • Search for products in your Products section

  • Create new products from Amazon

  • Use keywords to search Amazon directly

  • Select from existing collections

  • Choose templates for product display

Live Preview

Once you’ve selected a product, the block will show a live preview of how the product will appear on your website. This preview updates in real-time as you make changes to the product or template.

Editing Products

To change the selected product:

  1. Click on the ASA2 block to select it

  2. In the block toolbar, click the Replace button

  3. This will open the Product Picker again to select a different product

Block Settings

The ASA2 block provides several settings that can be accessed through the block sidebar:

Shortcode Settings

In the block sidebar, you’ll find a Shortcode field where you can:

  • View the generated shortcode

  • Manually edit the shortcode if needed

  • Add additional shortcode options

This gives you full control over the ASA2 functionality while maintaining the visual editor experience.

Alignment

The ASA2 block supports WordPress alignment options:

  • None: Default alignment

  • Left: Align the product to the left

  • Center: Center the product

  • Right: Align the product to the right

  • Wide: Use more space than the content width

  • Full: Use the full page width

Spacing

You can control the spacing around your products using the block’s spacing controls:

  • Margin: Add space around the outside of the block

  • Padding: Add space inside the block

Template Compatibility

The ASA2 Gutenberg Block supports all ASA2 Managed Templates, including:

  • Basic templates (Horizontal Box, Vertical Box, etc.)

  • Advanced templates (Robust, Flex layouts)

  • Carousel template with full JavaScript functionality

  • Custom templates you’ve created

Advantages over Shortcodes

The ASA2 Gutenberg Block offers several advantages over using shortcodes directly:

User-Friendly Interface

  • No need to remember shortcode syntax

  • Visual product selection through the Product Picker

  • Live preview of how products will appear

Block Editor Integration

  • Native WordPress block features (alignment, spacing, etc.)

  • Consistent with other Gutenberg blocks

  • Better content organization and layout control

Live Preview

  • See exactly how your products will look before publishing

  • Test different templates visually

  • Immediate feedback on changes

Troubleshooting

Block Not Available

If you don’t see the ASA2 block in your block inserter:

  1. Ensure ASA2 is activated and up to date

  2. Check that your WordPress installation supports Gutenberg blocks

  3. Verify that you’re using a compatible WordPress version

Product Not Displaying

If the product preview doesn’t appear:

  1. Check that the product exists in your Products section

  2. Verify your ASA2 configuration and API credentials

  3. Look for JavaScript errors in your browser’s developer console

Template Issues

If templates don’t display correctly:

  1. Ensure the template is properly configured

  2. Check for CSS conflicts with your theme

  3. Verify that required JavaScript files are loading

Migration from Shortcodes

Existing Content

Your existing shortcode-based content will continue to work normally. The ASA2 Gutenberg Block doesn’t affect existing shortcodes.

Converting Shortcodes

To convert existing shortcodes to blocks:

  1. Edit the post or page containing shortcodes

  2. Select the shortcode text

  3. Use the block converter (usually appears as a tooltip) to convert to an ASA2 block

  4. The block will automatically populate with your existing shortcode

This allows for a gradual migration to the new block-based approach while maintaining all your existing content.