feat: add include_theme toggle to the Text XBlock [WIP] by rpenido · Pull Request #3271 · openedx/frontend-app-authoring

rpenido · 2026-09-25T20:46:33Z

Description

Adds a Use MFE Theme toggle to the Text (HTML) block editor in Studio, so an author can opt an individual text block into the deployment's theme. The block's learner view (openedx/xblocks-core#308) renders opted-in content inside a shadow root with the Paragon theme attached, so page styles cannot reach the content and the content cannot leak styles back out.

User roles impacted: Course Author (new opt-in toggle on the Text block; the editing area picks up the theme when it is on).

Supporting information

feat: add an opt-in MFE theme to the Text (HTML) XBlock [WIP] xblocks-core#308 — the XBlock half: the include_theme field and the learner-view rendering.
fix: serialize the Text (HTML) XBlock's include_theme setting [WIP] openedx-platform#39178 — serializer half. Without it the block API drops include_theme on export, so the setting silently reverts after a course export/import.

Testing instructions

See feat: add an opt-in MFE theme to the Text (HTML) XBlock [WIP] xblocks-core#308 for instructions.

Other information

Best Practices Checklist

Any new files are using TypeScript (.ts, .tsx).
Avoid propTypes and defaultProps in any new or modified code.
Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
All new i18n messages in messages.ts files have a description for translators to use.
Avoid using ../ in import paths. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

Private ref: FAL-4394

openedx-webhooks · 2026-09-25T20:46:39Z

Thanks for the pull request, @rpenido!

This repository is currently maintained by @bradenmacdonald.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Update the status of your PR

Your PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2026-09-25T20:57:17Z

Codecov Report

❌ Patch coverage is 96.59091% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 96.12%. Comparing base (40ebb41) to head (b925d3d).

Files with missing lines	Patch %	Lines
src/editors/data/redux/thunkActions/requests.js	0.00%	3 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##           master    #3271    +/-   ##
========================================
  Coverage   96.12%   96.12%            
========================================
  Files        1428     1428            
  Lines       34717    34771    +54     
  Branches     8295     8037   -258     
========================================
+ Hits        33372    33425    +53     
- Misses       1304     1305     +1     
  Partials       41       41

☔ 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.

samuelallan72 · 2026-10-05T04:51:47Z

+  const urls = [pickUrl(themeUrls.core), pickUrl(variant)]
+    .filter((url): url is string => Boolean(url));


@rpenido This method only includes the two custom override css files. However, I believe we also need the base paragon css urls included too. For normal operation (I know theming is in active development, so it could change in future), this should end up as an array of 4 urls:

https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/core.min.css

https://custom.brandOverride.example.com/core.css

https://cdn.jsdelivr.net/npm/@openedx/paragon@23/dist/light.min.css

https://custom.brandOverride.example.com/light.css

cc @xitij2000

samuelallan72 · 2026-10-05T04:57:21Z

+  if (!urls.length) {
+    return tinyMCEStyles;
+  }
+  return `${urls.map((url) => `@import url("${url}");`).join('\n')}\n${tinyMCEStyles}`;


@rpenido the trouble with loading the tinymce content styles after the theming, is that the tinymce content styles will override a lot of theme styling.

It's tricky though, because the tinymce content styles include accessibility and functionality for editing, as well as setting unwanted visual styles here. I wonder if tinymce has options to turn off the visual styles so we can use the mfe theme here? Or maybe we can manually include just the functional/a11y css from tinymce content styles?

samuelallan72 · 2026-10-05T04:57:59Z

+      const assetFormatRegex = /\/asset-v1:\S+[+]\S+[@]\S+[+]\S+[@]/;
+      const isCorrectAssetFormat = assetFormatRegex.test(assetSrc);


Flagging an unrelated refactoring

samuelallan72 · 2026-10-05T04:58:49Z

+      : 'olx' in content
+      ? { ...content, olx: content.olx.replace(imageBS64, imagePath) }
+      : { ...content, data: content.data.replace(imageBS64, imagePath) };


What's this for?

samuelallan72 · 2026-10-05T05:00:13Z

+                <Form.Switch
+                  name="include_theme"
+                  checked={includeTheme}
+                  onChange={handleIncludeThemeChange}
+                  floatLabelLeft
+                  className="mb-0"
+                >


@rpenido I think this could benefit from some short explanation text about the implications of this (especially since the differences are greater than just including the theme - there is shadowroot sandboxing as well)? It may be worth pinging Cassie or Ali for UI/UX review about the toggle too.

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Sep 25, 2026

openedx-webhooks added this to Contributions Sep 25, 2026

github-project-automation Bot moved this to Needs Triage in Contributions Sep 25, 2026

rpenido force-pushed the rpenido/text-xblock-include-theme branch 7 times, most recently from 3a3f6d1 to d6cddae Compare October 1, 2026 14:26

rpenido changed the title ~~feat(editors): add include_theme toggle to the Text XBlock [WIP]~~ feat: add include_theme toggle to the Text XBlock [WIP] Oct 1, 2026

rpenido force-pushed the rpenido/text-xblock-include-theme branch from d6cddae to a48590d Compare October 1, 2026 18:19

This was referenced Oct 1, 2026

fix: serialize the Text (HTML) XBlock's include_theme setting [WIP] openedx/openedx-platform#39178

Draft

feat: add an opt-in MFE theme to the Text (HTML) XBlock [WIP] openedx/xblocks-core#308

Draft

rpenido force-pushed the rpenido/text-xblock-include-theme branch from a48590d to e235716 Compare October 1, 2026 20:03

refactor: convert TextEditor from JSX to TypeScript

857e51a

rpenido force-pushed the rpenido/text-xblock-include-theme branch 12 times, most recently from 37a21e6 to fc5aa20 Compare October 2, 2026 03:54

rpenido force-pushed the rpenido/text-xblock-include-theme branch from fc5aa20 to 30179e5 Compare October 2, 2026 04:30

feat: add include_theme toggle to the Text XBlock

b925d3d

rpenido force-pushed the rpenido/text-xblock-include-theme branch from 30179e5 to b925d3d Compare October 2, 2026 07:00

samuelallan72 reviewed Oct 5, 2026

View reviewed changes

Navigation Menu

Repository navigation

feat: add include_theme toggle to the Text XBlock [WIP] - #3271

feat: add include_theme toggle to the Text XBlock [WIP]#3271
rpenido wants to merge 2 commits into
openedx:masterfrom
open-craft:rpenido/text-xblock-include-theme

rpenido commented Sep 25, 2026 •

edited

Loading

Uh oh!

openedx-webhooks commented Sep 25, 2026

Uh oh!

codecov Bot commented Sep 25, 2026 •

edited

Loading

Uh oh!

samuelallan72 Oct 5, 2026 •

edited

Loading

Uh oh!

samuelallan72 Oct 5, 2026

Uh oh!

samuelallan72 Oct 5, 2026

Uh oh!

samuelallan72 Oct 5, 2026

Uh oh!

samuelallan72 Oct 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const urls = [pickUrl(themeUrls.core), pickUrl(variant)]
		.filter((url): url is string => Boolean(url));

		const assetFormatRegex = /\/asset-v1:\S+[+]\S+[@]\S+[+]\S+[@]/;
		const isCorrectAssetFormat = assetFormatRegex.test(assetSrc);

Conversation

rpenido commented Sep 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Supporting information

Testing instructions

Other information

Best Practices Checklist

Uh oh!

openedx-webhooks commented Sep 25, 2026

Uh oh!

codecov Bot commented Sep 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

samuelallan72 Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

samuelallan72 Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

samuelallan72 Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

samuelallan72 Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

samuelallan72 Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rpenido commented Sep 25, 2026 •

edited

Loading

codecov Bot commented Sep 25, 2026 •

edited

Loading

samuelallan72 Oct 5, 2026 •

edited

Loading