Description:

We need to develop Collection Blocks for all the Post Types: Tours, Accommodation, and Destinations, modelled after the WooCommerce Product Collections Block. These blocks will offer flexible ways to display collections filtered by Featured, Related, On Sale, and Default options. Each block will use WordPress dashicons, support customisation through block attributes and innerBlocks, and allow for dynamic content fetching.

Information

Block Descriptions:

• Tours Collection Block: Display a curated collection of tours, filtered by Featured, Related, On Sale, or Default options.
• Accommodation Collection Block: Display a curated collection of accommodations, filtered by Featured, Related, On Sale, or Default options.
• Destinations Collection Block: Display a curated collection of destinations, filtered by Featured, Related, On Sale, or Default options.

Types of Collections:

Each block will have the following collection types:

• Featured: Highlight key tours, accommodations, or destinations that should stand out.
• Related: Display related items based on the current context (e.g., location, theme, or category).
• On Sale: Show items that are currently discounted.
• Default: Standard collection with no specific filters applied.

Requirements:

Block Supports:

• Alignment: Support full and wide alignment options for all blocks.
• HTML: Allow editing of the block's HTML.
• Reusable: Enable block to be saved and reused across multiple pages.
• Anchor: Support custom anchor links for jump navigation.

InnerContent:

• Populate innerContent with default data (tours, accommodations, or destinations) in the editor view to allow users to see a live preview of the block with sample content.
• Ensure that innerContent supports dynamic data fetching to display live content when placed on the front-end.

Toolbar Options:

• Display Settings:
  • Items per page
  • Offset
  • Max pages to show
• List View
• Grid View
• Standard Block More Options

Acceptance Criteria:

• Blocks should support full alignment, reusable settings, and custom anchors.
• InnerBlocks should be fully customisable, allowing additional content to be added to the collection blocks.
• Ensure that all blocks render correctly both in the editor and on the front-end, using dynamic content.

Additional Notes:

• Ensure that all blocks are fully responsive and work well across all devices.
• Provide appropriate tooltips or help text within the block editor to assist users in setting up the blocks.

Developer Docs

• Extending the Query Loop Block
• Advanced block settings
• Block Toolbar

Example of a Query Block Variation

registerBlockVariation( 'core/query', {
    name: VARIATION_NAME,
    title: 'Book Reviews',
    icon: 'book',
    description: 'Displays a list of book reviews.',
    isActive: [ 'namespace' ],
    // Other variation options...
} );

Images

WooCommerce Product Collection

Block Toolbar Example