# Challenge Block

The Challenge block displays detailed information about an individual challenge from your Tourismo admin platform. It's designed for challenge template pages where you want to showcase a single challenge with comprehensive details including hero images, descriptions, dates, rewards, and tags.

## Overview

Use the Challenge block to create detailed challenge pages that showcase individual challenges with rich content. This block is perfect for:
- Challenge detail pages with comprehensive information
- Tourism websites featuring specific challenges and competitions
- Event sites displaying detailed challenge descriptions and rewards
- Community platforms with individual challenge showcases

## Block Features & Options

### Display Modes
- **Hero Image Display**: Show challenge hero images with responsive layout
- **Content Layout**: Two-column layout (image + content) or single-column display
- **Responsive Design**: Automatically adapts to different screen sizes

### Layout Options
- **Alignment**: Wide alignment by default for better content display
- **Custom CSS Class**: Add custom styling classes
- **Template Customization**: Use custom template names for advanced styling

### Content Display Options
- **Name Display**: Show challenge names as H2 headings
- **Subtitle**: Display challenge subtitles in muted text
- **Short Description**: Show brief challenge descriptions in italics
- **Full Description**: Display complete challenge descriptions with markdown support
- **Date Range**: Display start and end dates with calendar emoji
- **Rewards**: Show challenge rewards with gift emoji and titles
- **Tags**: Display associated tags for categorization

### Display Toggles
- **Show Hero**: Toggle challenge hero images on/off
- **Show Name**: Toggle challenge name display
- **Show Subtitle**: Toggle subtitle display
- **Show Short Description**: Toggle brief description display
- **Show Description**: Toggle full description display
- **Show Dates**: Toggle date range display
- **Show Rewards**: Toggle rewards display
- **Show Tags**: Toggle tag display

## How it Works

The Challenge block displays detailed information about a single challenge from your Tourismo admin platform. It automatically adapts its layout based on which content elements are enabled, showing either a two-column layout (hero image + content) or single-column display. The block includes comprehensive challenge information including descriptions, dates, rewards, and tags with proper formatting and responsive design.

## How to Add & Configure

1. **Add the Block**: In the WordPress editor, add the "Challenge" block to your challenge template page
2. **Configure Display Options**: Use the block settings sidebar to toggle which elements to show
3. **Set Layout**: Choose between hero image display and content-only layouts
4. **Customize Styling**: Add custom CSS classes for advanced styling
5. **Test Responsive Design**: Preview how the layout adapts on different screen sizes

## Shortcode Usage

### Basic Shortcode
```
[tourismo-challenge]
```

### Available Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `custom_template_name` | string | "" | Custom template name for advanced styling |
| `class_name` | string | "" | Custom CSS class for styling |
| `align` | string | "wide" | Block alignment (wide by default) |
| `show_hero` | boolean | false | Show challenge hero images |
| `show_name` | boolean | true | Show challenge names |
| `show_subtitle` | boolean | false | Show challenge subtitles |
| `show_short_description` | boolean | false | Show brief challenge descriptions |
| `show_description` | boolean | false | Show full challenge descriptions |
| `show_dates` | boolean | true | Show challenge date ranges |
| `show_rewards` | boolean | false | Show challenge rewards |
| `show_tags` | boolean | false | Show challenge tags |

### Practical Examples

**Basic Challenge Display**
```
[tourismo-challenge]
```

**Challenge with Hero Image**
```
[tourismo-challenge show_hero="true" show_description="true"]
```

**Challenge with Full Content**
```
[tourismo-challenge show_hero="true" show_subtitle="true" show_short_description="true" show_description="true" show_rewards="true" show_tags="true"]
```

**Challenge with Custom Styling**
```
[tourismo-challenge class_name="custom-challenge" show_hero="true" show_description="true"]
```

**Minimal Challenge Display**
```
[tourismo-challenge show_hero="false" show_description="false" show_rewards="false" show_tags="false"]
```

## Content Displayed

The Challenge block displays comprehensive challenge information in a responsive layout:

- **Hero Images**: Challenge hero images with proper aspect ratios and alt text
- **Challenge Names**: Displayed as H2 headings when enabled
- **Subtitles**: Challenge subtitles in muted text styling
- **Short Descriptions**: Brief descriptions displayed in italics
- **Full Descriptions**: Complete descriptions with markdown support
- **Date Ranges**: Start and end dates with calendar emoji (📅)
- **Rewards**: Gift emoji (🎁) followed by reward titles and descriptions
- **Tags**: Associated tags for categorization and filtering

The layout automatically adapts based on which elements are enabled, showing either a two-column layout (hero image + content) or single-column display. The block uses wide alignment by default for better content presentation.

## Related Blocks

- **Challenges Block** - Display collections of challenges on collection pages
- **Events Block** - Display individual event details on template pages
- **Itinerary Block** - Display individual itinerary details on template pages
- **Listing Block** - Display individual listing details on template pages