-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add release notes for Sumac Header frontend plugin slots
- Loading branch information
Showing
3 changed files
with
58 additions
and
6 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 58 additions & 6 deletions
64
source/community/release_notes/sumac/customizing_header.rst
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,60 @@ | ||
Customizing Site Header and Learner Dashboard | ||
############################################# | ||
Customizing Site Header Using Frontend "Slots" | ||
############################################## | ||
|
||
Coming soon in Sumac: leverage *frontend plugin slots* to quickly and easily | ||
modify visual elements on the site header and on the Learner Dashboard. Be sure | ||
to watch this page for more detail! | ||
Utilizing *frontend plugin slots*, site operators now have the ability to | ||
customize various portions of the site header. | ||
|
||
The Open edX Sumac release comes out in December 2024. | ||
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 new 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 cover three example use cases for the header. Full | ||
documentation is available `within the frontend-component-header codebase | ||
<https://github.com/openedx/frontend-component-header/tree/master/src/plugin-slots>`_. | ||
|
||
.. contents:: | ||
:local: | ||
:depth: 1 | ||
|
||
Simple example: Removing help button | ||
************************************ | ||
|
||
In the default learner dashboard, the default content contains a "Help" button | ||
to the left of the logged in user's username: | ||
|
||
.. image:: /_images/release_notes/sumac/sumac-header-easy-before.png | ||
|
||
With frontend plugin slots, you can now hide the "Help" button: | ||
|
||
.. image:: /_images/release_notes/sumac/sumac-header-easy-after.png | ||
|
||
For site operators, here is a sample of the `env.config.jsx` file used to hide | ||
the the content: | ||
|
||
.. toggle:: | ||
|
||
.. code-block:: javascript | ||
import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; | ||
const config = { | ||
pluginSlots: { | ||
learning_help_slot: { | ||
plugins: [ | ||
{ | ||
op: PLUGIN_OPERATIONS.Hide, | ||
}, | ||
] | ||
}, | ||
}, | ||
} | ||
export default config; |