Using the Gutenberg Block

Reading time: 3 minutes | Difficulty: Beginner

Overview

Add payment forms using the WordPress Block Editor (Gutenberg) with a dedicated block. This guide covers using the WP Payment Pal checkout block.

Prerequisites

• WordPress 5.0+ with Block Editor
• At least one payment form created

Adding the Block

Step 1: Open Block Editor

1. Edit a page or post
2. Ensure you’re in the Block Editor (not Classic)

Step 2: Add New Block

1. Click the + button to add a block
2. Search for “WP Payment Pal” or “Checkout”
3. Click the WP Payment Pal Checkout block

Step 3: Select Your Form

1. The block appears with a dropdown
2. Select the form you want to display
3. The form preview loads in the editor

Block Interface

Once added, you’ll see:

• Form selector dropdown
• Preview of the selected form
• Block toolbar options

Block Settings

Form Selection

In the block itself:

• Dropdown lists all published forms
• Select to change which form displays

Block Toolbar

Standard block options:

• Move up/down
• Block alignment
• More options (duplicate, remove)

Sidebar Settings

When block is selected, check the right sidebar for any additional options.

Preview in Editor

The block shows a preview of your form:

• See form layout
• Verify correct form selected
• Note: Full functionality only on frontend

Examples

Single Form

1. Add the block
2. Select your form
3. Publish

Multiple Forms

1. Add first block, select form A
2. Add second block, select form B
3. Forms display in order placed

Form with Content

Mix blocks:

[Heading: Complete Your Purchase]
[Paragraph: Description text here]
[WP Payment Pal Checkout: Form 123]

Block vs Shortcode

Feature	Block	Shortcode
Visual preview	✓	✗
Point and click	✓	Type required
Form selection	Dropdown	Know ID
Classic Editor	✗	✓
Widgets	Limited	✓

When to Use Block

• Using Block Editor
• Prefer visual interface
• Easy form selection

When to Use Shortcode

• Classic Editor
• Widgets
• PHP templates
• Quick insertion

Converting Between

Block to Shortcode

1. Select block
2. Click More Options (three dots)
3. Choose “Convert to Shortcode” (if available)
4. Or note form ID and use shortcode manually

Shortcode to Block

1. Delete shortcode text
2. Add WP Payment Pal block
3. Select the same form

Alignment Options

Use block alignment controls:

• None – Default width
• Wide – Wider than content
• Full – Full width

Depends on theme support.

Spacing

Add spacing around the form:

• Use Spacer blocks above/below
• Or wrap in Group block with padding

Troubleshooting

Block Not Found

• Search for “Payment” or “Checkout”
• Verify plugin is active
• Clear browser cache

No Forms in Dropdown

• Check forms are published
• Verify forms exist
• Try creating a new form

Preview Not Loading

• JavaScript may be blocked
• Check browser console
• Try refreshing page

Form Not Displaying on Frontend

• Verify form is published
• Check form restrictions
• Test in incognito mode

Block Patterns

Create reusable patterns:

1. Add and configure the block
2. Add surrounding content
3. Select all blocks
4. Create as Reusable Block or Pattern

Theme Compatibility

The block works with any block-enabled theme:

• Inherits some theme styles
• Payment UI remains consistent
• Test with your specific theme

Classic Editor Users

If using Classic Editor:

• Block not available
• Use shortcode instead
• See Payment Form Shortcode

Full Site Editing

For FSE themes:

• Block works in templates
• Add to site-wide areas
• Use in template parts

Mobile Preview

Preview at different sizes:

1. Click Preview in editor
2. Use responsive preview options
3. Check mobile display

Best Practices

1. Preview before publishing – Check appearance
2. Test on frontend – Editor preview is limited
3. One form per location – Unless specifically needed
4. Check mobile – Verify responsive display
5. Update blocks – Keep plugin updated

What’s Next?

• Using the Payment Form Shortcode – Shortcode method
• Embedding Forms on Your Website – All methods
• Understanding Form Types – Display options