New Frontend Plugin Slots for the Teak Release#
Utilizing frontend plugin slots, site operators now have the ability to customize various portions of the site.
A “frontend plugin slot” refers to an area of a web page - comprising one or more visual elements - that can be “swapped out” with other visual elements. For example, one plugin slot allows you to remove the “Help” button in the header.
Overhead and hassle is minimized using the plugin slot system. Site operators
can leverage a plugin slot using a configuration file; the codebase does not
need to be copied (“forked”) nor are extensive changes needed. A snippet of code
is all that is needed to use a plugin slot. A site operator places that code
within a configuration file. Site operators should refer to the
src/plugin-slots directory within each MFE’s codebase to view documentation
for that MFE’s plugin slot(s).
In these release notes, we’ll detail the new plugin slots found in the Teak release. The full list of existing plugin slots can be found in Available Frontend Plugin Slots, and usage instructions are available at * Use A Frontend Plugin Framework Slot.
Where possible, descriptions of the plugin slots are provided. Click the name of the slot to be brought to the documentation page which contains example screenshots.
Note: Instance operators using these slots will need to use their
fully-qualified slot id provided in the descriptions, such as
org.openedx.frontend.authoring.course_unit_sidebar.v1.
Learner Dashboard MFE#
CourseBannerSlot: This slot is used for replacing or adding content for the “Course Banner” component. This banner is rendered as a child of the “Course Card”.
DashboardModalSlot: This slot is used for rendering a modal on a dashboard.
Learning MFE#
ContentIFrameLoaderSlot: This slot is used to customize the loading indicator displayed while course content is being loaded in an iframe. It appears when content is loading but hasn’t fully rendered yet, providing a customizable loading experience for learners.
CourseBreadcrumbsSlot: This slot is used to replace/modify/hide the courseware top-navigation breadcrumbs.
CourseHomeSectionOutlineSlot: This slot is used to replace/modify/hide the course home section outline.
CourseOutlineMobileSidebarTriggerSlot: This slot is used to replace/modify/hide the course outline sidebar mobile trigger.
CourseOutlineSidebarSlot: This slot is used to replace/modify/hide the course outline sidebar.
CourseOutlineSidebarTriggerSlot: This slot is used to replace/modify/hide the course outline sidebar trigger.
CourseOutlineTabNotificationsSlot: This slot is used to add custom notification components to the course outline tab sidebar. It appears in the right sidebar of the course outline/home tab, positioned between the Course Tools widget and the Course Dates widget.
CourseRecommendationsSlot: This slot is used for modifying the recommendations provided when a course is completed.
GatedUnitContentMessageSlot: This slot is used to customize the message displayed when course content is gated or locked for learners who haven’t upgraded to a verified track. It appears when a unit contains content that requires a paid enrollment (such as graded assignments) and the learner is on the audit track.
NextUnitTopNavTriggerSlot: This slot is used to replace/modify/hide the next button used for unit and sequence navigation at the top of the unit page.
NotificationTraySlot: This slot is used to customize the notification tray that appears in the courseware sidebar. The notification tray displays upgrade-related notifications and alerts for learners in verified mode courses. It provides a way to show contextual notifications about course access, deadlines, and upgrade opportunities.
NotificationWidgetSlot: This slot is used to customize the notification widget that appears in the discussions-notifications sidebar. The widget is displayed as a compact notification component that shows upgrade-related alerts and can trigger the full notification tray when clicked.
NotificationsDiscussionsSidebarSlot: This slot is used to replace/modify/hide the notifications discussions sidebar.
NotificationsDiscussionsSidebarTriggerSlot: This slot is used to replace/modify/hide the notifications discussions sidebar trigger.
ProgressCertificateStatusSlot: This slot is used for modify the content in the “Certificate Status” in the progress page for specific enrollment tracks.
ProgressTabCertificateStatusMainBodySlot: This slot is used to replace or modify the “Certificate Status” component in the main body of the Progress Tab.
ProgressTabCertificateStatusSidePanelSlot: This slot is used to replace or modify the “Certificate Status” component in the side panel of the Progress Tab.
ProgressTabCourseGradeSlot: This slot is used to replace or modify the Course Grades view in the Progress Tab.
ProgressTabGradeBreakdownSlot: This slot is used to replace or modify the “Grade Summary” and “Details Breakdown” view in the Progress Tab.
ProgressTabRelatedLinksSlot: This slot is used to replace or modify the related links view in the Progress Tab.
See also
Maintenance chart
Review Date |
Working Group Reviewer |
Release |
Test situation |
2025-05-08 |
Frontend WG |
Teak |
Pass |