Skip to content

feat: Component slots#648

Draft
stravo1 wants to merge 3 commits into
frappe:developfrom
stravo1:component-slots
Draft

feat: Component slots#648
stravo1 wants to merge 3 commits into
frappe:developfrom
stravo1:component-slots

Conversation

@stravo1

@stravo1 stravo1 commented Jun 29, 2026

Copy link
Copy Markdown
Member

Summary

Adds component slots so saved components can keep their internal block order locked while still allowing page authors to inject editable content into declared slot areas.

This introduces a Vue/React-style slot model for Builder components:

  • Component authors can mark eligible container blocks as named slots.
  • Page instances can edit content inside those slots without unlocking the rest of the component structure.
  • Slot content is treated as detached instance content, so it can be deleted/reordered independently from component-owned blocks.
  • Empty filled slots intentionally stay empty; deleting filled slot content does not restore fallback automatically.

Changes

Component slot authoring

  • Added slot metadata to blocks: slotName and slotFilled.
  • Added a block property section for declaring named component slots.
  • Validates component slots server-side:
    • slot names must be unique
    • slots cannot be nested
    • slots cannot live inside repeaters
    • slots must be declared on supported container blocks

Slot behavior in component instances

  • Slot fallback children are materialized as detached instance blocks.
  • Blocks inside slots can be edited, deleted, duplicated, wrapped, and reordered independently.
  • Component-owned blocks outside slots remain protected from structure/order changes.
  • Filled slots are preserved by slot name when components are updated or synced.
  • Empty filled slots remain empty instead of restoring fallback content.
  • Added a “Reset Slot to Fallback” action for slot instances.

Block layers UX

  • Slot blocks now use a slot-style icon prefix instead of a visible tag.
  • Drag/drop restrictions now respect the distinction between component-owned blocks and detached slot content.

Component sync/update behavior

  • Component sync preserves filled slot content where the slot name still exists.
  • Generic warning is shown before component updates/syncs because slot removal/renaming may discard detached slot content.

Demo - Popover Component with a slot named body:

Screen.Recording.2026-06-29.at.9.19.14.PM.mp4
Screenshot 2026-06-29 at 9 16 06 PM

Assigning slots

@codecov

codecov Bot commented Jun 29, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 79.72973% with 30 lines in your changes missing coverage. Please review.
✅ Project coverage is 56.64%. Comparing base (6229a87) to head (74c4bed).
⚠️ Report is 1 commits behind head on develop.

Files with missing lines Patch % Lines
...ilder/builder/doctype/builder_page/builder_page.py 20.00% 20 Missing ⚠️
...der/doctype/builder_component/builder_component.py 87.50% 10 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop     #648      +/-   ##
===========================================
+ Coverage    55.13%   56.64%   +1.51%     
===========================================
  Files           34       34              
  Lines         4001     4143     +142     
===========================================
+ Hits          2206     2347     +141     
- Misses        1795     1796       +1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

1 participant