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

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

Description

Adds a Use MFE theming toggle to the Text (HTML) block editor in Studio, so an author can control the deployment's theme per block. New blocks start with theming on, so the feature is opt-out; an existing block that has never stored the setting starts with it off. 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 toggle on the Text block, on by default for new blocks; 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 xblocks-core#308 - the XBlock half: the use_mfe_theming field and the learner-view rendering.
fix: serialize the Text (HTML) XBlock's use_mfe_theming setting openedx-platform#39178 - serializer half. Without it the block API drops use_mfe_theming 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 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.73913% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 96.20%. Comparing base (74f0139) to head (869e23a).
⚠️ Report is 1 commits behind head on master.

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.20%   96.20%           
=======================================
  Files        1446     1446           
  Lines       35384    35442   +58     
  Branches     8179     8200   +21     
=======================================
+ Hits        34041    34098   +57     
- Misses       1301     1302    +1     
  Partials       42       42

☔ 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

Fixed here: 869e23a

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?

It's tricky though, because the tinymce content styles include accessibility and functionality for editing, as well as setting unwanted visual styles here.

I'm not sure if I got what you mean here. Do you mean the css from src/editors/data/constants/tinyMCEStyles.js that is in the tinyMCEStyles variable or something else (like a native CSS from the component)?

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

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


Flagging an unrelated refactoring

Just to add context: I changed this as part of the js -> tsx conversion. isCorrectAssetFormat was boolean | undefined before.

Also, calling match would extract all groups, which we don't need here. Using test in this context is cheaper and leaner.

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?

This code was used to replace base64 added images with assets. Since I changed the structure for the text blocks (data is not a string anymore), this would crash while accessing content.olx.replace. I just added a guard for the access.

Furthermore, this code is called in the context of batchUploadAssets, which requires creating a new xblock with content. I think we always create an empty block now, so this whole thing is probably a dead feature.

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 use_mfe_theming setting openedx/openedx-platform#39178

Draft

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

Open

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

Merge branch 'master' into rpenido/text-xblock-include-theme

371a73d

rpenido force-pushed the rpenido/text-xblock-include-theme branch from c1c8a10 to 371a73d Compare October 19, 2026 16:30

rpenido added 3 commits October 19, 2026 14:25

feat: rename to use_mfe_theming and default it on for new blocks

49cb56d

feat: label the toggle "Use MFE theming"

2a5dc21

fix: layer the Paragon and brand stylesheets instead of picking one

869e23a

rpenido changed the title ~~feat: add include_theme toggle to the Text XBlock [WIP]~~ feat: add include_theme toggle to the Text XBlock Oct 19, 2026

Navigation Menu

Repository navigation

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

feat: add include_theme toggle to the Text XBlock#3271
rpenido wants to merge 6 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!

rpenido Oct 19, 2026

Uh oh!

samuelallan72 Oct 5, 2026

Uh oh!

rpenido Oct 19, 2026 •

edited

Loading

Uh oh!

samuelallan72 Oct 5, 2026

Uh oh!

rpenido Oct 19, 2026

Uh oh!

samuelallan72 Oct 5, 2026

Uh oh!

rpenido Oct 19, 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!

rpenido Oct 19, 2026

Choose a reason for hiding this comment

Uh oh!

samuelallan72 Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

rpenido Oct 19, 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!

rpenido Oct 19, 2026

Choose a reason for hiding this comment

Uh oh!

samuelallan72 Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

rpenido Oct 19, 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

rpenido Oct 19, 2026 •

edited

Loading