Problem/Motivation

Layout Builder block forms (layout_builder.add_block, layout_builder.update_block, ...) are admin routes. A site that detects the interface language from "Account administration pages" runs them in the editor's admin language, for example English on an Arabic page.

CKEditor 5 only sets language.ui, and its content language defaults to that. The editable is lang="en" dir="ltr" inside an RTL page, so Arabic lists, numbers and alignment sit on the wrong side and do not match the front end.

Steps to reproduce

  1. Install Varbase and add Arabic.
  2. At /admin/config/regional/language/detection, enable "Account administration pages" above URL.
  3. Set your user's administration pages language to English.
  4. Open /ar/node/NID/layout, Add block, Create content block, Rich text.
  5. Type a bulleted and a numbered list in Arabic. Expected: right to left, markers on the right. Actual: left to right, markers on the left.

Proposed resolution

Implement hook_editor_js_settings_alter() on layout_builder.* routes and set each CKEditor 5 format's language.content to the page's URL language, mapped to a CKEditor langcode. The toolbar stays in the admin language; the content follows the page. Guarded so it does nothing without CKEditor 5, and procedural on both branches.

  • 10.2.x (Varbase 10.1.x): uses Drupal\ckeditor5\LanguageMapper.
  • 10.0.x (Varbase 9.2.x): also falls back to _ckeditor5_get_langcode_mapping(), since Drupal 10.6 has no LanguageMapper.

Testing

  • Manually tested on Drupal 11.4.12: the 10.0.x change on Varbase 9.2.x (Varbase Layout Builder 10.0.74), the 10.2.x change on Varbase 10.1.x-dev.
  • On /ar/node/NID/layout with an English admin language: the editable is lang="ar" dir="rtl", CKEditor UI en and content ar, toolbar stays LTR, list markers on the right. Before: en, LTR, markers on the left.
  • English pages stay en and LTR.
  • Not tested on Drupal 10.6.

Remaining tasks

  • ✅ File an issue
  • ✅ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • CKEditor 5 in Layout Builder block forms edits content in the page's language and direction.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A

AI-Generated: Yes

CommentFileSizeAuthor
#5 11-ckeditor5-content-language-demo.mp45.23 MBrajab natshah
#5 10-ckeditor5-content-language-after-varbase10-1-x-dev-layout-builder-dialog.png36.23 KBrajab natshah
#5 09-ckeditor5-content-language-before-varbase10-1-x-dev-layout-builder-dialog.png36.16 KBrajab natshah
#5 08-ckeditor5-content-language-after-varbase10-1-2-editor-closeup.png22.81 KBrajab natshah
#5 07-ckeditor5-content-language-before-varbase10-1-2-editor-closeup.png22.84 KBrajab natshah
#5 06-ckeditor5-content-language-after-varbase10-1-1-layout-builder-dialog.png116.05 KBrajab natshah
#5 05-ckeditor5-content-language-before-varbase10-1-1-layout-builder-dialog.png115.32 KBrajab natshah
#5 04-ckeditor5-content-language-after-varbase9-2-2-editor-closeup.png19.58 KBrajab natshah
#5 03-ckeditor5-content-language-before-varbase9-2-2-editor-closeup.png19.61 KBrajab natshah
#5 02-ckeditor5-content-language-after-varbase9-2-1-layout-builder-dialog.png92.87 KBrajab natshah
#5 01-ckeditor5-content-language-before-varbase9-2-1-layout-builder-dialog.png92.87 KBrajab natshah

Issue fork varbase_layout_builder-3637712

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

rajab natshah created an issue. See original summary.

rajab natshah opened merge request !119

rajab natshah opened merge request !120

rajab natshah’s picture

rajab natshah
he/him
commented
Status: Active » Needs review

Merge requests, one per branch:

  • 10.2.x (Varbase 10.1.x): !119
  • 10.0.x (Varbase 9.2.x): !120

Both pipelines are green and match their target branches job for job. Ready for review.

AI-Generated: Yes

rajab natshah’s picture

rajab natshah
he/him
commented
StatusFileSize
new 01-ckeditor5-content-language-before-varbase9-2-1-layout-builder-dialog.png92.87 KB
new 02-ckeditor5-content-language-after-varbase9-2-1-layout-builder-dialog.png92.87 KB
new 03-ckeditor5-content-language-before-varbase9-2-2-editor-closeup.png19.61 KB
new 04-ckeditor5-content-language-after-varbase9-2-2-editor-closeup.png19.58 KB
new 05-ckeditor5-content-language-before-varbase10-1-1-layout-builder-dialog.png115.32 KB
new 06-ckeditor5-content-language-after-varbase10-1-1-layout-builder-dialog.png116.05 KB
new 07-ckeditor5-content-language-before-varbase10-1-2-editor-closeup.png22.84 KB
new 08-ckeditor5-content-language-after-varbase10-1-2-editor-closeup.png22.81 KB
new 09-ckeditor5-content-language-before-varbase10-1-x-dev-layout-builder-dialog.png36.16 KB
new 10-ckeditor5-content-language-after-varbase10-1-x-dev-layout-builder-dialog.png36.23 KB
new 11-ckeditor5-content-language-demo.mp45.23 MB

Before and after screenshots and a short demo video for the fix in MR !119 (10.2.x) and MR !120 (10.0.x).

Varbase 9.2.x (10.0.x branch)

Rich text block dialog on the Arabic page. Before: content is left to right, bullets and numbers on the left.

CKEditor 5 in a Layout Builder dialog on an Arabic page, content left to right with list markers on the left

After: right to left, toolbar still English.

CKEditor 5 in a Layout Builder dialog on an Arabic page, content right to left with the toolbar still in English

Editor close-up. Before: lang="en" dir="ltr".

close-up of the CKEditor 5 editable with lang en and dir ltr on an Arabic page

After: lang="ar" dir="rtl", markers on the right.

close-up of the CKEditor 5 editable with lang ar and dir rtl, list markers on the right

Varbase 10.1 (~10.1.0, 10.2.x branch)

Dialog before.

CKEditor 5 in a Layout Builder dialog on an Arabic page, content left to right

Dialog after.

CKEditor 5 in a Layout Builder dialog on an Arabic page, content right to left

Close-up before.

close-up of the CKEditor 5 editable on an Arabic page, left to right

Close-up after.

close-up of the CKEditor 5 editable on an Arabic page, right to left

Varbase 10.1.x-dev

Dialog before.

CKEditor 5 in a Layout Builder dialog on an Arabic page, content left to right

Dialog after.

CKEditor 5 in a Layout Builder dialog on an Arabic page, content right to left

Demo video

11-ckeditor5-content-language-demo.mp4 (1 min 25 s, narrated): walkthrough on Varbase 9.2.x of the Arabic page, the editor before, then after.

The screenshots and video were recorded with the same hook code running from a local test module before it was moved into varbase_layout_builder; the behaviour is identical with the MR applied.

AI-Generated: Yes

rajab natshah’s picture

rajab natshah
he/him
commented

Both MRs now use an OOP #[Hook] class, EditorLanguageHooks. On 10.0.x a #[LegacyHook] procedural shim delegates to it for Drupal 10.6; Drupal 11.1+ runs only the OOP hook.

  • 10.2.x: !119, pipeline passes
  • 10.0.x: !120, pipeline passes

Not yet runtime-tested on Drupal 10.6.

AI-Generated: Yes

  • rajab natshah committed 00079ea1 on 10.0.x 
    fix: #3637712 Use the page language for CKEditor 5 content in Layout...

  • rajab natshah committed 873e5628 on 10.2.x 
    fix: #3637712 Use the page language for CKEditor 5 content in Layout...