Add responsive controls to the Columns setting in Posts block

Impact: 75 · Confidence: 95 · Complexity: 40

Description

Problem

The Columns setting in the Posts block currently uses a single global value. If a user sets a 4-column layout for desktop, it can result in an unbalanced grid on smaller devices (e.g., 3 posts on the first row and 1 on the second row for tablets). When the user attempts to adjust the column count while in the tablet editor view, it overwrites the desktop configuration as well.

Desired Behavior

The Columns setting should incorporate responsive device toggles (Desktop, Tablet, Mobile) so users can specify different column counts for different screen sizes, enabling balanced grid layouts across all devices.

Acceptance Criteria

• Update the Columns control in the Posts block inspector to include standard device responsive toggles (Desktop, Tablet, Mobile).
• Ensure the block's frontend rendering applies the respective column counts based on screen size.
• Maintain backward compatibility for existing blocks that currently rely on a single integer column value.

Customer Context

A Pro user has set up a 4-column post grid on desktop using the Otter Posts block. On tablets, this defaults to an awkward layout where the first row has 3 posts and the second row has 1 post. They want to easily change the tablet view to 2 or 3 columns while keeping the desktop view at 4, but discovered that the Columns setting applies universally across all devices.

Root Cause Analysis

The user needs to present an aesthetically balanced grid of posts across desktop, tablet, and mobile viewing environments. In the Otter Posts block, the 'Columns' attribute is currently a singular, global setting. Because there are no device-specific responsive controls for this attribute, an optimal desktop layout degrades on smaller screens, and attempting to fix it on a smaller screen breaks the desktop layout. This is a capability gap in block configuration responsiveness.

Reasoning

The customer is asking for the ability to set different column counts for the Otter Posts block across different devices (desktop, tablet, mobile). Currently, changing the columns setting while in the tablet preview also changes the desktop layout, indicating the setting is global rather than responsive. A search of GitHub issues does not show an existing feature request for making the Posts block columns responsive.

Source: HelpScout #3347661609
Generated by feature-request-triage workflow (ID: feature-request-triage_6a25b1b4e82181.90832529)

Start by locating the Posts block inspector's Columns control and the frontend rendering path for its singular integer attribute. Trace how device-responsive controls are implemented elsewhere, then verify separate desktop, tablet, and mobile values, responsive rendering, and compatibility with existing integer-based blocks.