Skip to content

feat: add grid block with two-column layout to block editor#34789

Open
fmontes wants to merge 3 commits intoissue-33882-primeng-updatefrom
issue-33882-grid-block
Open

feat: add grid block with two-column layout to block editor#34789
fmontes wants to merge 3 commits intoissue-33882-primeng-updatefrom
issue-33882-grid-block

Conversation

@fmontes
Copy link
Member

@fmontes fmontes commented Feb 26, 2026

Summary

  • Adds a new gridBlock TipTap node with two-column layout, following the same pure-node pattern as tables (no Angular components needed)
  • Each column (gridColumn) supports independent nested blocks (paragraphs, headings, images, lists, etc.)
  • Includes CSS Grid styling with dashed borders, focus highlighting, and drag support
  • Integrates into the slash menu as "Grid (2 columns)" and supports Tab/Shift-Tab column navigation

Test plan

  • Open block editor, type / and search for "Grid" — should see "Grid (2 columns)"
  • Select it — should insert a two-column grid with dashed borders
  • Type in each column independently — content should stay in its column
  • Add headings, images, lists inside columns — should work normally
  • Tab between columns — should navigate left→right, Shift-Tab right→left
  • Drag the grid block — should move the entire grid
  • Backspace in a column — should not delete the column itself

🤖 Generated with Claude Code

Adds a new grid block node that provides a two-column layout where each
column can contain independent sub-blocks. Uses pure TipTap node
definitions (same pattern as tables) with CSS Grid for layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@semgrep-code-dotcms-test
Copy link

Legal Risk

The following dependencies were released under a license that
has been flagged by your organization for consideration.

Recommendation

While merging is not directly blocked, it's best to pause and consider what it means to use this license before continuing. If you are unsure, reach out to your security team or Semgrep admin to address this issue.

MPL-2.0

fmontes and others added 2 commits February 26, 2026 16:56
Remove all 25 SCSS files from the block editor and replace with plain
CSS using CSS custom properties and literal values. All selectors are
fully flattened (no CSS nesting) for compatibility with Angular view
encapsulation. ProseMirror DOM styles are inlined in the main component
CSS with ::ng-deep selectors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

1 participant