From 15f91ac64dfb6f7d33f6942d2a391db05ba1ca3d Mon Sep 17 00:00:00 2001
From: Agrendalath <piotr@surowiec.it>
Date: Thu, 22 Jan 2026 21:44:59 +0100
Subject: [PATCH 1/3] feat: implement optional completion

This adds a new XBlock field that allows marking sections, subsections,
and units as optional, which means that their completion is counted separately.
---
 .../course_api/blocks/serializers.py          |  1 +
 .../blocks/transformers/block_completion.py   |  3 +-
 .../course_home_api/outline/serializers.py    |  1 +
 lms/djangoapps/courseware/courses.py          | 39 ++++++++++++-------
 openedx/features/course_experience/utils.py   |  1 +
 xmodule/modulestore/inheritance.py            | 11 ++++++
 xmodule/seq_block.py                          |  1 +
 7 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/lms/djangoapps/course_api/blocks/serializers.py b/lms/djangoapps/course_api/blocks/serializers.py
index f0e1c546b330..da1dbad07ec2 100644
--- a/lms/djangoapps/course_api/blocks/serializers.py
+++ b/lms/djangoapps/course_api/blocks/serializers.py
@@ -85,6 +85,7 @@ def __init__(
     SupportedFieldType(BlockCompletionTransformer.COMPLETION, BlockCompletionTransformer),
     SupportedFieldType(BlockCompletionTransformer.COMPLETE),
     SupportedFieldType(BlockCompletionTransformer.RESUME_BLOCK),
+    SupportedFieldType(BlockCompletionTransformer.OPTIONAL_COMPLETION),
     SupportedFieldType(DiscussionsTopicLinkTransformer.EXTERNAL_ID),
     SupportedFieldType(DiscussionsTopicLinkTransformer.EMBED_URL),
 
diff --git a/lms/djangoapps/course_api/blocks/transformers/block_completion.py b/lms/djangoapps/course_api/blocks/transformers/block_completion.py
index 472555c4c7f9..e2df44ba579f 100644
--- a/lms/djangoapps/course_api/blocks/transformers/block_completion.py
+++ b/lms/djangoapps/course_api/blocks/transformers/block_completion.py
@@ -18,6 +18,7 @@ class BlockCompletionTransformer(BlockStructureTransformer):
     COMPLETION = 'completion'
     COMPLETE = 'complete'
     RESUME_BLOCK = 'resume_block'
+    OPTIONAL_COMPLETION = 'optional_completion'
 
     @classmethod
     def name(cls):
@@ -43,7 +44,7 @@ def get_block_completion(cls, block_structure, block_key):
 
     @classmethod
     def collect(cls, block_structure):
-        block_structure.request_xblock_fields('completion_mode')
+        block_structure.request_xblock_fields('completion_mode', cls.OPTIONAL_COMPLETION)
 
     @staticmethod
     def _is_block_excluded(block_structure, block_key):
diff --git a/lms/djangoapps/course_home_api/outline/serializers.py b/lms/djangoapps/course_home_api/outline/serializers.py
index cfa518138a95..bb88f61dd3ce 100644
--- a/lms/djangoapps/course_home_api/outline/serializers.py
+++ b/lms/djangoapps/course_home_api/outline/serializers.py
@@ -50,6 +50,7 @@ def get_blocks(self, block):  # pylint: disable=missing-function-docstring
             block_key: {
                 'children': [child['id'] for child in children],
                 'complete': block.get('complete', False),
+                'optional_completion': block.get('optional_completion', False),
                 'description': description,
                 'display_name': display_name,
                 'due': block.get('due'),
diff --git a/lms/djangoapps/courseware/courses.py b/lms/djangoapps/courseware/courses.py
index 2fc727623541..df991de0c2cf 100644
--- a/lms/djangoapps/courseware/courses.py
+++ b/lms/djangoapps/courseware/courses.py
@@ -552,38 +552,51 @@ def get_course_assignment_date_blocks(course, user, request, num_return=None,
 
 
 @request_cached()
-def get_course_blocks_completion_summary(course_key, user):
+def get_course_blocks_completion_summary(course_key, user) -> dict[str, int]:
     """
-    Returns an object with the number of complete units, incomplete units, and units that contain gated content
+    Returns a dict with the number of complete units, incomplete units, and units that contain gated content
     for the given course. The complete and incomplete counts only reflect units that are able to be completed by
     the given user. If a unit contains gated content, it is not counted towards the incomplete count.
 
-    The object contains fields: complete_count, incomplete_count, locked_count
+    The dict contains fields:
+      - complete_count
+      - incomplete_count
+      - locked_count
+      - optional_complete_count
+      - optional_incomplete_count
+      - optional_locked_count
     """
     if not user.id:
-        return []
+        return {}
+
     store = modulestore()
     course_usage_key = store.make_course_usage_key(course_key)
     block_data = get_course_blocks(user, course_usage_key, allow_start_dates_in_future=True, include_completion=True)
 
-    complete_count, incomplete_count, locked_count = 0, 0, 0
+    counts = {
+        'complete_count': 0,
+        'incomplete_count': 0,
+        'locked_count': 0,
+        'optional_complete_count': 0,
+        'optional_incomplete_count': 0,
+        'optional_locked_count': 0,
+    }
     for section_key in block_data.get_children(course_usage_key):  # pylint: disable=too-many-nested-blocks
         for subsection_key in block_data.get_children(section_key):
             for unit_key in block_data.get_children(subsection_key):
                 complete = block_data.get_xblock_field(unit_key, 'complete', False)
                 contains_gated_content = block_data.get_xblock_field(unit_key, 'contains_gated_content', False)
+                optional = block_data.get_xblock_field(unit_key, 'optional_completion', False)
+                prefix = "optional_" if optional else ""
+
                 if contains_gated_content:
-                    locked_count += 1
+                    counts[f"{prefix}locked_count"] += 1
                 elif complete:
-                    complete_count += 1
+                    counts[f"{prefix}complete_count"] += 1
                 else:
-                    incomplete_count += 1
+                    counts[f"{prefix}incomplete_count"] += 1
 
-    return {
-        'complete_count': complete_count,
-        'incomplete_count': incomplete_count,
-        'locked_count': locked_count
-    }
+    return counts
 
 
 @request_cached()
diff --git a/openedx/features/course_experience/utils.py b/openedx/features/course_experience/utils.py
index c20b7f077136..270533e3a248 100644
--- a/openedx/features/course_experience/utils.py
+++ b/openedx/features/course_experience/utils.py
@@ -114,6 +114,7 @@ def recurse_mark_auth_denial(block):
             'weight',
             'completion',
             'complete',
+            'optional_completion',
             'resume_block',
             'hide_from_toc',
             'icon_class',
diff --git a/xmodule/modulestore/inheritance.py b/xmodule/modulestore/inheritance.py
index 4c5a14b769cb..980ef8d1773d 100644
--- a/xmodule/modulestore/inheritance.py
+++ b/xmodule/modulestore/inheritance.py
@@ -247,6 +247,17 @@ class InheritanceMixin(XBlockMixin):
         scope=Scope.settings
     )
 
+    optional_completion = Boolean(
+        display_name=_("Optional"),
+        help=_(
+            "Set this to true to mark this block as optional. "
+            "Progress in this block won't count towards course completion progress "
+            "and will count as optional progress instead."
+        ),
+        default=False,
+        scope=Scope.settings,
+    )
+
     @property
     def close_date(self):
         """
diff --git a/xmodule/seq_block.py b/xmodule/seq_block.py
index 944c73400ab5..b95f6d1b86bf 100644
--- a/xmodule/seq_block.py
+++ b/xmodule/seq_block.py
@@ -807,6 +807,7 @@ def _render_student_view_for_blocks(self, context, children, fragment, view=STUD
                 'path': " > ".join(display_names + [block.display_name_with_default]),
                 'graded': block.graded,
                 'contains_content_type_gated_content': contains_content_type_gated_content,
+                'optional_completion': getattr(block, 'optional_completion', False),
             }
             if not render_blocks:
                 # The item url format can be defined in the template context like so:

From da169031a3e2dd391c9dfe33bc2a22aa67e73e64 Mon Sep 17 00:00:00 2001
From: Agrendalath <piotr@surowiec.it>
Date: Tue, 27 Jan 2026 21:38:35 +0100
Subject: [PATCH 2/3] feat: support optional completion for individual XBlocks

---
 common/templates/xblock_wrapper.html      |  4 ++++
 openedx/core/lib/xblock_utils/__init__.py |  8 ++++++++
 xmodule/tests/test_xml_block.py           |  4 ++--
 xmodule/x_module.py                       | 12 ++++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/common/templates/xblock_wrapper.html b/common/templates/xblock_wrapper.html
index 35a0c505e6d8..977514c314f7 100644
--- a/common/templates/xblock_wrapper.html
+++ b/common/templates/xblock_wrapper.html
@@ -1,7 +1,11 @@
 ## xss-lint: disable=mako-missing-default
 <%!
 from openedx.core.djangolib.js_utils import dump_js_escaped_json
+from django.utils.translation import gettext as _
 %>
+% if 'data-is-optional="True"' in data_attributes:
+  <span class="optional-completion-badge text-uppercase border badge badge-light mb-3">${_("Optional")}</span>
+% endif
 <div class="${' '.join(classes) | n, decode.utf8}" ${data_attributes}>
 % if js_init_parameters:
   <script type="json/xblock-args" class="xblock-json-init-args">
diff --git a/openedx/core/lib/xblock_utils/__init__.py b/openedx/core/lib/xblock_utils/__init__.py
index 26127dbfb3b8..62af1f8af57e 100644
--- a/openedx/core/lib/xblock_utils/__init__.py
+++ b/openedx/core/lib/xblock_utils/__init__.py
@@ -23,6 +23,7 @@
 from web_fragments.fragment import Fragment
 from xblock.core import XBlock
 from xblock.exceptions import InvalidScopeError
+from xblock.fields import Scope
 from xblock.scorable import ScorableXBlockMixin
 
 from common.djangoapps import static_replace
@@ -141,6 +142,13 @@ def wrap_xblock(
     if block.name:
         data['name'] = block.name
 
+    # We check whether the block is explicitly set as optional because this information is already displayed for units
+    # in the Learning MFE.
+    has_children = getattr(block, "children", False)
+    is_explicitly_optional = block.get_explicitly_set_fields_by_scope(Scope.settings).get('optional_completion', False)
+    if view != STUDIO_VIEW and not has_children and is_explicitly_optional:
+        data['is-optional'] = getattr(block, 'optional_completion', False)
+
     template_context = {
         'content': block.display_name if display_name_only else frag.content,
         'classes': css_classes,
diff --git a/xmodule/tests/test_xml_block.py b/xmodule/tests/test_xml_block.py
index 7f33aad0f998..504db2228e3d 100644
--- a/xmodule/tests/test_xml_block.py
+++ b/xmodule/tests/test_xml_block.py
@@ -236,7 +236,7 @@ def test_display_name_field(self):
         editable_fields = self.get_xml_editable_fields(DictFieldData({}))
         # Tests that the xblock fields (currently tags and name) get filtered out.
         # Also tests that xml_attributes is filtered out of XmlMixin.
-        assert 1 == len(editable_fields), editable_fields
+        assert 2 == len(editable_fields), editable_fields
         self.assert_field_values(
             editable_fields, 'display_name', XModuleMixin.display_name,
             explicitly_set=False, value=None, default_value=None
@@ -253,7 +253,7 @@ def test_override_default(self):
     def test_integer_field(self):
         block = self.get_block(DictFieldData({'max_attempts': '7'}))
         editable_fields = block.editable_metadata_fields
-        assert 8 == len(editable_fields)
+        assert 9 == len(editable_fields)
         self.assert_field_values(
             editable_fields, 'max_attempts', TestFields.max_attempts,
             explicitly_set=True, value=7, default_value=1000, type='Integer',
diff --git a/xmodule/x_module.py b/xmodule/x_module.py
index d25012275a5e..b76eb3ddb5ae 100644
--- a/xmodule/x_module.py
+++ b/xmodule/x_module.py
@@ -651,6 +651,18 @@ def editable_metadata_fields(self):
 
             metadata_fields[field.name] = self._create_metadata_editor_info(field)
 
+        # The `optional_completion` field can be either explicitly set or inherited from the parent.
+        # While we could query the parent's field, there is a special case that cannot be supported with the platform's
+        # completion calculations that count the completed units instead of individual XBlocks.
+        # If this field is explicitly set to False, then we want to show it in the metadata editor so that the author
+        # can reset it to the default inherited value.
+        if "optional_completion" in self.fields:
+            has_explicitly_set_optional_completion = self.fields['optional_completion'].is_set_on(self)
+            if not self.optional_completion or has_explicitly_set_optional_completion:
+                metadata_fields["optional_completion"] = self._create_metadata_editor_info(
+                    self.fields["optional_completion"]
+                )
+
         return metadata_fields
 
     def _create_metadata_editor_info(self, field):

From 35304d378d7e2b192b1554577dc9991d1a0b576f Mon Sep 17 00:00:00 2001
From: Agrendalath <piotr@surowiec.it>
Date: Thu, 22 Jan 2026 23:02:04 +0100
Subject: [PATCH 3/3] feat: add optional completion editor to Studio

---
 cms/djangoapps/contentstore/utils.py          | 36 ++++++++++---
 .../xblock_storage_handlers/view_handlers.py  |  4 ++
 .../models/settings/course_metadata.py        |  1 +
 cms/static/js/models/xblock_info.js           |  4 ++
 .../js/views/modals/course_outline_modals.js  | 54 ++++++++++++++++++-
 cms/static/sass/elements/_modal-window.scss   | 11 ++++
 cms/templates/base.html                       |  4 +-
 cms/templates/course_outline.html             |  2 +-
 cms/templates/js/course-outline.underscore    |  8 +++
 .../js/optional-completion-editor.underscore  | 26 +++++++++
 10 files changed, 139 insertions(+), 11 deletions(-)
 create mode 100644 cms/templates/js/optional-completion-editor.underscore

diff --git a/cms/djangoapps/contentstore/utils.py b/cms/djangoapps/contentstore/utils.py
index 3080d3582568..0baca15d4b67 100644
--- a/cms/djangoapps/contentstore/utils.py
+++ b/cms/djangoapps/contentstore/utils.py
@@ -631,18 +631,38 @@ def find_staff_lock_source(xblock):
     return find_staff_lock_source(parent)
 
 
+def _get_parent_xblock(xblock, parent_xblock=None):
+    """
+    Returns the parent xblock if provided, otherwise fetches it from the modulestore.
+    Returns None if the xblock has no parent (orphaned).
+    """
+    if parent_xblock is not None:
+        return parent_xblock
+    parent_location = modulestore().get_parent_location(
+        xblock.location,
+        revision=ModuleStoreEnum.RevisionOption.draft_preferred
+    )
+    if not parent_location:
+        return None
+    return modulestore().get_item(parent_location)
+
+
 def ancestor_has_staff_lock(xblock, parent_xblock=None):
     """
-    Returns True iff one of xblock's ancestors has staff lock.
+    Returns True if one of xblock's ancestors has staff lock.
+    Can avoid mongo query by passing in parent_xblock.
+    """
+    parent = _get_parent_xblock(xblock, parent_xblock)
+    return parent.visible_to_staff_only if parent else False
+
+
+def ancestor_has_optional_completion(xblock, parent_xblock=None):
+    """
+    Returns True if one of xblock's ancestors has optional_completion.
     Can avoid mongo query by passing in parent_xblock.
     """
-    if parent_xblock is None:
-        parent_location = modulestore().get_parent_location(xblock.location,
-                                                            revision=ModuleStoreEnum.RevisionOption.draft_preferred)
-        if not parent_location:
-            return False
-        parent_xblock = modulestore().get_item(parent_location)
-    return parent_xblock.visible_to_staff_only
+    parent = _get_parent_xblock(xblock, parent_xblock)
+    return parent.optional_completion if parent else False
 
 
 def get_sequence_usage_keys(course):
diff --git a/cms/djangoapps/contentstore/xblock_storage_handlers/view_handlers.py b/cms/djangoapps/contentstore/xblock_storage_handlers/view_handlers.py
index e2f9d8334a37..c4716562e6ef 100644
--- a/cms/djangoapps/contentstore/xblock_storage_handlers/view_handlers.py
+++ b/cms/djangoapps/contentstore/xblock_storage_handlers/view_handlers.py
@@ -59,6 +59,7 @@
 from xmodule.tabs import CourseTabList
 
 from ..utils import (
+    ancestor_has_optional_completion,
     ancestor_has_staff_lock,
     find_release_date_source,
     find_staff_lock_source,
@@ -1102,6 +1103,7 @@ def create_xblock_info(  # lint-amnesty, pylint: disable=too-many-statements
                 "hide_from_toc": xblock.hide_from_toc,
                 "enable_hide_from_toc_ui": settings.FEATURES.get("ENABLE_HIDE_FROM_TOC_UI", False),
                 "xblock_type": get_icon(xblock),
+                "optional_completion": xblock.optional_completion,
             }
         )
 
@@ -1252,6 +1254,8 @@ def create_xblock_info(  # lint-amnesty, pylint: disable=too-many-statements
                 xblock_info["course_tags_count"] = _get_course_tags_count(course.id)
                 xblock_info["tag_counts_by_block"] = _get_course_block_tags(xblock.location.context_key)
 
+            xblock_info["ancestor_has_optional_completion"] = ancestor_has_optional_completion(xblock, parent_xblock)
+
             xblock_info[
                 "has_partition_group_components"
             ] = has_children_visible_to_specific_partition_groups(xblock)
diff --git a/cms/djangoapps/models/settings/course_metadata.py b/cms/djangoapps/models/settings/course_metadata.py
index d5523e69f8a6..9b0f508ccde0 100644
--- a/cms/djangoapps/models/settings/course_metadata.py
+++ b/cms/djangoapps/models/settings/course_metadata.py
@@ -81,6 +81,7 @@ class CourseMetadata:
         'highlights_enabled_for_messaging',
         'is_onboarding_exam',
         'discussions_settings',
+        'optional_completion',
     ]
 
     @classmethod
diff --git a/cms/static/js/models/xblock_info.js b/cms/static/js/models/xblock_info.js
index 2b82cf72b15b..eb8efc67fecd 100644
--- a/cms/static/js/models/xblock_info.js
+++ b/cms/static/js/models/xblock_info.js
@@ -121,6 +121,10 @@ define(
              */
                 ancestor_has_staff_lock: null,
                 /**
+             * True if any of this xblock's ancestors has optional completion.
+             */
+                ancestor_has_optional_completion: null,
+                /**
              * The xblock which is determining the staff lock value. For instance, for a unit,
              * this will either be the parent subsection or the grandparent section.
              * This can be null if the xblock has no inherited staff lock. Will only be present if
diff --git a/cms/static/js/views/modals/course_outline_modals.js b/cms/static/js/views/modals/course_outline_modals.js
index aac0d7aa1e0d..0b98e19c1fb4 100644
--- a/cms/static/js/views/modals/course_outline_modals.js
+++ b/cms/static/js/views/modals/course_outline_modals.js
@@ -20,7 +20,7 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
         StaffLockEditor, UnitAccessEditor, ContentVisibilityEditor, TimedExaminationPreferenceEditor,
         AccessEditor, ShowCorrectnessEditor, HighlightsEditor, HighlightsEnableXBlockModal, HighlightsEnableEditor,
         DiscussionEditor, SummaryConfigurationEditor, SubsectionShareLinkXBlockModal, FullPageShareLinkEditor,
-        EmbedLinkShareLinkEditor;
+        EmbedLinkShareLinkEditor, OptionalCompletionEditor;
 
     CourseOutlineXBlockModal = BaseModal.extend({
         events: _.extend({}, BaseModal.prototype.events, {
@@ -1359,6 +1359,50 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
         }
     });
 
+    OptionalCompletionEditor = AbstractEditor.extend({
+        templateName: 'optional-completion-editor',
+        className: 'edit-optional-completion',
+
+        afterRender: function() {
+            AbstractEditor.prototype.afterRender.call(this);
+            this.setValue(this.model.get('optional_completion'));
+        },
+
+        setValue: function(value) {
+            this.$('input[name=optional_completion]').prop('checked', value);
+        },
+
+        currentValue: function() {
+            return this.$('input[name=optional_completion]').is(':checked');
+        },
+
+        hasChanges: function() {
+            return this.model.get('optional_completion') !== this.currentValue();
+        },
+
+        getRequestData: function() {
+            if (this.hasChanges()) {
+                return {
+                    publish: 'republish',
+                    metadata: {
+                        // This variable relies on the inheritance mechanism, so we want to unset it instead of
+                        // explicitly setting it to `false`.
+                        optional_completion: this.currentValue() || null
+                    }
+                };
+            } else {
+                return {};
+            }
+        },
+
+        getContext: function() {
+            return {
+                optional_completion: this.model.get('optional_completion'),
+                optional_ancestor: this.model.get('ancestor_has_optional_completion')
+            };
+        },
+    });
+
     return {
         getModal: function(type, xblockInfo, options) {
             if (type === 'edit') {
@@ -1427,6 +1471,14 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
                 }
             }
 
+            if (course.get('completion_tracking_enabled')) {
+                if (tabs.length > 0) {
+                    tabs[0].editors.push(OptionalCompletionEditor);
+                } else {
+                    editors.push(OptionalCompletionEditor);
+                }
+            }
+
             /* globals course */
             if (course.get('self_paced')) {
                 editors = _.without(editors, ReleaseDateEditor, DueDateEditor);
diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss
index 82c6f3da4c16..8b07f853faa7 100644
--- a/cms/static/sass/elements/_modal-window.scss
+++ b/cms/static/sass/elements/_modal-window.scss
@@ -830,6 +830,7 @@
 
     .edit-discussion,
     .edit-staff-lock,
+    .edit-optional-completion,
     .summary-configuration,
     .edit-content-visibility,
     .edit-unit-access {
@@ -915,9 +916,18 @@
     }
   }
 
+  .edit-optional-completion {
+    .field-message {
+      @extend %t-copy-sub1;
+      color: $gray-d1;
+      margin-bottom: ($baseline/4);
+    }
+  }
+
   .edit-discussion,
   .edit-unit-access,
   .edit-staff-lock,
+  .edit-optional-completion,
   .summary-configuration {
     .modal-section-content {
       @include font-size(16);
@@ -961,6 +971,7 @@
   .edit-discussion,
   .edit-unit-access,
   .edit-staff-lock,
+  .edit-optional-completion,
   .summary-configuration {
     .modal-section-content {
       @include font-size(16);
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 68df2d1a0e13..1c70d0097a79 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -8,6 +8,7 @@
 ## Standard imports
 <%namespace name='static' file='static_content.html'/>
 <%!
+from completion.waffle import ENABLE_COMPLETION_TRACKING_SWITCH
 from django.utils.translation import gettext as _
 
 from cms.djangoapps.contentstore.config.waffle import CUSTOM_RELATIVE_DATES
@@ -175,7 +176,8 @@
           self_paced: ${ context_course.self_paced | n, dump_js_escaped_json },
           is_custom_relative_dates_active: ${CUSTOM_RELATIVE_DATES.is_enabled(context_course.id) | n, dump_js_escaped_json},
           start: ${context_course.start | n, dump_js_escaped_json},
-          discussions_settings: ${context_course.discussions_settings | n, dump_js_escaped_json}
+          discussions_settings: ${context_course.discussions_settings | n, dump_js_escaped_json},
+          completion_tracking_enabled: ${ENABLE_COMPLETION_TRACKING_SWITCH.is_enabled() | n, dump_js_escaped_json},
         });
       </script>
     % endif
diff --git a/cms/templates/course_outline.html b/cms/templates/course_outline.html
index 16d9ccbd4ca5..d16ce41100cc 100644
--- a/cms/templates/course_outline.html
+++ b/cms/templates/course_outline.html
@@ -29,7 +29,7 @@
 
 <%block name="header_extras">
 <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
-% for template_name in ['course-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'self-paced-due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor', 'unit-access-editor', 'discussion-editor', 'content-visibility-editor', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs', 'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor', 'course-highlights-enable', 'course-manage-tags', 'course-video-sharing-enable', 'summary-configuration-editor', 'tag-count', 'subsection-share-link-modal-tabs', 'full-page-share-link-editor', 'embed-link-share-link-editor']:
+% for template_name in ['course-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'self-paced-due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor', 'unit-access-editor', 'discussion-editor', 'content-visibility-editor', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs', 'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor', 'course-highlights-enable', 'course-manage-tags', 'course-video-sharing-enable', 'summary-configuration-editor', 'tag-count', 'subsection-share-link-modal-tabs', 'full-page-share-link-editor', 'embed-link-share-link-editor', 'optional-completion-editor']:
 <script type="text/template" id="${template_name}-tpl">
     <%static:include path="js/${template_name}.underscore" />
 </script>
diff --git a/cms/templates/js/course-outline.underscore b/cms/templates/js/course-outline.underscore
index eec4be4cb5cf..f0694cc3c206 100644
--- a/cms/templates/js/course-outline.underscore
+++ b/cms/templates/js/course-outline.underscore
@@ -30,6 +30,8 @@ var addStatusMessage = function (statusType, message) {
     }
     else if (statusType === 'partition-groups') {
         statusIconClass = 'fa-eye';
+    } else if (statusType === 'optional-completion') {
+        statusIconClass = 'fa-lightbulb-o';
     }
 
     statusMessages.push({iconClass: statusIconClass, text: message});
@@ -105,6 +107,12 @@ if (xblockInfo.get('graded')) {
     }
 }
 
+if (xblockInfo.get('optional_completion') && !xblockInfo.get('ancestor_has_optional_completion')) {
+    messageType = 'optional-completion';
+    messageText = gettext('Optional completion');
+    addStatusMessage(messageType, messageText);
+}
+
 var is_proctored_exam = xblockInfo.get('is_proctored_exam');
 var is_practice_exam = xblockInfo.get('is_practice_exam');
 var is_onboarding_exam = xblockInfo.get('is_onboarding_exam');
diff --git a/cms/templates/js/optional-completion-editor.underscore b/cms/templates/js/optional-completion-editor.underscore
new file mode 100644
index 000000000000..9a7d55fe847a
--- /dev/null
+++ b/cms/templates/js/optional-completion-editor.underscore
@@ -0,0 +1,26 @@
+<form>
+<h3 class="modal-section-title">
+    <%- gettext('Completion') %>
+</h3>
+<div class="modal-section-content optional-completion">
+    <label class="label">
+	    <% if (optional_ancestor) { %>
+		    <input disabled type="checkbox" id="optional_completion" name="optional_completion"
+		          class="input input-checkbox" />
+			<%- gettext('Optional') %>
+	        <p class="tip tip-warning">
+	            <% var message = gettext('This %(xblockType)s already has an optional parent.') %>
+	            <%- interpolate(message, { xblockType: xblockType }, true) %>
+	        </p>
+	    <% } else { %>
+		    <input type="checkbox" id="optional_completion" name="optional_completion"
+		          class="input input-checkbox" />
+			<%- gettext('Optional') %>
+          <% } %>
+        <p class="field-message">
+            <% var message = gettext('Optional %(xblockType)ss won\'t count towards course or parent completion.') %>
+            <%- interpolate(message, { xblockType: xblockType }, true) %>
+        </p>
+	</label>
+</div>
+</form>