feat: support adding custom editors to Studio

This:
1. Introduces a variable for the Course Outline view in Studio.
   A custom theme can override it to add new editors.
2. Exports a function for creating new editor modals.
   A custom theme can use it to create editors without adding boilerplate code.
3. Adds a pluggable override for XBlock fields that are passed to the Studio.
   Without this, custom editors in Studio cannot retrieve values of XBlock fields.

cms/djangoapps/contentstore/views/item.py

@@ -13,6 +13,7 @@ from django.core.exceptions import PermissionDenied
 from django.http import Http404, HttpResponse, HttpResponseBadRequest
 from django.utils.translation import gettext as _
 from django.views.decorators.http import require_http_methods
+from edx_django_utils.plugins import pluggable_override
 from edx_proctoring.api import (
     does_backend_support_onboarding,
     get_exam_by_content_id,
@@ -1116,6 +1117,7 @@ def _get_gating_info(course, xblock):
     return info
 
 
+@pluggable_override('OVERRIDE_CREATE_XBLOCK_INFO')
 def create_xblock_info(xblock, data=None, metadata=None, include_ancestor_info=False, include_child_info=False,  # lint-amnesty, pylint: disable=too-many-statements
                        course_outline=False, include_children_predicate=NEVER, parent_xblock=None, graders=None,
                        user=None, course=None, is_concise=False):
@@ -1134,6 +1136,13 @@ def create_xblock_info(xblock, data=None, metadata=None, include_ancestor_info=F
 
     In addition, an optional include_children_predicate argument can be provided to define whether or
     not a particular xblock should have its children included.
+
+    You can customize the behavior of this function using the `OVERRIDE_CREATE_XBLOCK_INFO` pluggable override point.
+    For example:
+    >>> def create_xblock_info(default_fn, xblock, *args, **kwargs):
+    ...     xblock_info = default_fn(xblock, *args, **kwargs)
+    ...     xblock_info['icon'] = xblock.icon_override
+    ...     return xblock_info
     """
     is_library_block = isinstance(xblock.location, LibraryUsageLocator)
     is_xblock_unit = is_unit(xblock, parent_xblock)

cms/envs/common.py

@@ -832,6 +832,7 @@ XBLOCK_MIXINS = (
     EditInfoMixin,
     AuthoringMixin,
 )
+XBLOCK_EXTRA_MIXINS = ()
 
 XBLOCK_SELECT_FUNCTION = prefer_xmodules
 

cms/envs/production.py

@@ -591,6 +591,9 @@ EXPLICIT_QUEUES = {
 
 LOGO_IMAGE_EXTRA_TEXT = ENV_TOKENS.get('LOGO_IMAGE_EXTRA_TEXT', '')
 
+############## XBlock extra mixins ############################
+XBLOCK_MIXINS += tuple(XBLOCK_EXTRA_MIXINS)
+
 ############## Settings for course import olx validation ############################
 COURSE_OLX_VALIDATION_STAGE = ENV_TOKENS.get('COURSE_OLX_VALIDATION_STAGE', COURSE_OLX_VALIDATION_STAGE)
 COURSE_OLX_VALIDATION_IGNORE_LIST = ENV_TOKENS.get(

cms/static/js/views/modals/course_outline_modals.js

@@ -1208,6 +1208,19 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
             }, options));
         },
 
+        /**
+         * This function allows comprehensive themes to create custom editors without adding boilerplate code.
+         *
+         * A simple example theme for this can be found at https://github.com/open-craft/custom-unit-icons-theme
+         **/
+        getCustomEditModal: function(tabs, editors, xblockInfo, options) {
+            return new SettingsXBlockModal($.extend({
+                tabs: tabs,
+                editors: editors,
+                model: xblockInfo
+            }, options));
+        },
+
         getPublishModal: function(xblockInfo, options) {
             return new PublishXBlockModal($.extend({
                 editors: [PublishEditor],

cms/static/js/views/pages/course_outline.js

@@ -34,6 +34,9 @@ define([
                 collapsedClass: 'is-collapsed'
             },
 
+            // Extracting this to a variable allows comprehensive themes to replace or extend `CourseOutlineView`.
+            outlineViewClass: CourseOutlineView,
+
             initialize: function() {
                 var self = this;
                 this.initialState = this.options.initialState;
@@ -90,7 +93,7 @@ define([
                     this.highlightsEnableView.render();
                 }
 
-                this.outlineView = new CourseOutlineView({
+                this.outlineView = new this.outlineViewClass({
                     el: this.$('.outline'),
                     model: this.model,
                     isRoot: true,

openedx/core/lib/xblock_utils/__init__.py

@@ -558,6 +558,6 @@ def get_icon(block):
     """
     A function that returns the CSS class representing an icon to use for this particular
     XBlock (in the courseware navigation bar). Mostly used for Vertical/Unit XBlocks.
-    It can be overridden by setting `GET_UNIT_ICON_IMPL` to an alternative implementation.
+    It can be overridden by setting `OVERRIDE_GET_UNIT_ICON` to an alternative implementation.
     """
     return block.get_icon_class()