Create Custom Preview Images for Tour Operator Blocks

[ashleyshaw]

Create Custom Preview Images for Tour Operator Blocks

Is your feature request related to a problem? Please describe.
Some of the Tour Operator Plugin blocks have a highly visual or interactive component, making it difficult for users to understand their functionality without a preview image in the block editor.

Describe the solution you'd like
We propose adding custom preview images for the following blocks to help users visualize their design and functionality before they add them to the page:

• Image Gallery Block (Tours, Destinations & Accommodation)
• Video Gallery Block (Tours, Destinations & Accommodation)
• Itinerary Block
• Highlights Block
• Rooms/Units Block (Accommodation)
• Travel Info Block
• Map Blocks (WETU and Google)
• Carousel Block (galleries and connected content)
• Tour Collections Block

These preview images should be added by localizing the block's script and using a preview attribute to ensure they display correctly.

Describe alternatives you've considered
Alternatively, we could leave the blocks without preview images, but this would significantly reduce the usability and clarity of these visual components in the block editor.

Additional context
Following the approach from Gutenberg Kits, we'll use wp_localize_script() to pass the image URL to the block’s script and set up the preview image display logic in the block's edit function.

Acceptance Criteria:

• Create custom preview images for each listed block.
• Use wp_localize_script() to pass these images to the block editor.
• Implement the logic to display the preview images in the block's edit function.

Tasks:

• Design and optimize custom preview images for each block.
• Update the block's script to include the localized preview image URL.
• Test the implementation to ensure the preview images are displayed properly.