Skip to content

Add a Column Link option to the native Columns block - #296

Open
Castellon-ACM wants to merge 1 commit into
trunkfrom
column-link
Open

Add a Column Link option to the native Columns block#296
Castellon-ACM wants to merge 1 commit into
trunkfrom
column-link

Conversation

@Castellon-ACM

@Castellon-ACM Castellon-ACM commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

Summary

Closes #295.

Adds a "FrontBlocks - Column Link" panel to the native core/column block's Inspector Controls. Setting a URL makes the whole column clickable on the frontend (optionally in a new tab), without hijacking clicks on a real link, button, or other interactive element already inside it.

  • Attributes registered server-side via register_block_type_args for core/column only (frblColumnLinkUrl, frblColumnLinkNewTab).
  • Output rewritten at render time via render_block_core/column — the wrapper gets class="frbl-column-link", data-frbl-column-link-url (escaped with esc_url(), which also rejects unsafe schemes like javascript:), role="link", tabindex="0", and data-frbl-column-link-target="_blank" when new-tab is enabled. Nothing is altered client-side in the saved block content.
  • Frontend assets (a small stylesheet + a vanilla-JS click/keyboard handler) are only enqueued on pages that actually contain a linked column.
  • Keyboard accessible: Enter/Space activates the column when it itself carries focus; a nested control keeps handling its own activation.
  • The editor canvas shows a dashed-outline hint on a linked column without making the canvas itself navigate on click.
  • Follows the same pattern already used for core/columns (ColumnsSameHeight) and core/button (DownloadButton).

Test plan

  • composer lint and composer phpstan clean
  • Full PHPUnit suite passing (518 tests) — new ColumnLinkTest.php covers attribute registration, the render_block rewrite (classes/attributes/escaping), the unsafe-scheme rejection, and asset registration/enqueueing
  • New tests/js/column-link-frontend.test.js (Node test runner, matching the existing frontend-JS test pattern) covers click delegation (background click navigates, nested link/button clicks are not hijacked), new-tab handling, and keyboard activation
  • Live-verified in a real browser against a test page: correct attributes/CSS on the rendered column, a nested link click navigates to its own href (not hijacked), a background click navigates to the configured URL, and pressing Enter while the column is focused navigates the same way
Open WordPress Playground Preview

Adds a "FrontBlocks - Column Link" panel to core/column's Inspector
Controls. Setting a URL makes the whole column clickable on the
frontend (optionally in a new tab), without hijacking clicks on a real
link, button, or other interactive element already inside it. The
column is keyboard-accessible (role="link", tabindex="0", Enter/Space
activation) and gets a dashed-outline hint in the editor.

Follows the same native-block-extension pattern already used for
core/columns (ColumnsSameHeight) and core/button (DownloadButton):
attributes registered server-side via register_block_type_args, output
rewritten at render time via render_block_core/column — nothing is
altered client-side in the saved block content.
@chatgpt-codex-connector

Copy link
Copy Markdown

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a FrontBlocks Column Link option to the native Columns block

1 participant