Add lightbox functionality to Post Featured Image block

[freetanga]

Overview

The Image block in Gutenberg includes a native lightbox functionality that allows users to expand images in a modal view. However, this functionality is not available in the Post Featured Image block, even though it would be equally useful in this context.

Current Behavior

• Image block: Has a lightbox option that can be enabled through block settings
• Post Featured Image block: No lightbox functionality available
• Users need to implement workarounds or custom solutions to achieve this functionality

Proposed Enhancement

Add the same lightbox functionality that exists in the Image block to the Post Featured Image block. This would:

• Maintain consistency across image-handling blocks
• Improve user experience when viewing featured images
• Eliminate the need for custom solutions or additional plugins

Use Case

When users view a single post, they often want to see the featured image in more detail. Currently, they have two less-than-ideal options:

1. Link the featured image to the media file (which takes users away from the post)
2. Leave the image without any interaction capability

Having lightbox functionality would solve this by allowing users to:

• View the full-size image without leaving the post
• Close the lightbox and continue reading seamlessly
• Have a consistent experience with other images in the post

Technical Details

The Image block already implements this functionality through:

• Lightbox attribute in block.json
• Interactive state handling
• Modal view implementation

The same implementation could be extended to the Post Featured Image block with minimal modifications, as both blocks handle similar content types.

Example Implementation

I've successfully implemented this functionality as a custom solution. Here's the approach used:

// Converting featured image to use Image block's lightbox
$block = [
    'blockName' => 'core/image',
    'attrs' => [
        'id' => $post_thumbnail_id,
        'sizeSlug' => 'large',
        'linkDestination' => 'none',
        'className' => 'wp-block-post-featured-image',
        'lightbox' => [
            'enabled' => true
        ]
    ],
    'innerHTML' => sprintf(
        '<figure class="wp-block-image size-large wp-lightbox-container">%s</figure>',
        $html
    )
];