gamaleldientarek / oxygenbuilder-rtl-fix

A JavaScript code snippet to fix the Oxygen Builder's UI on RTL Sites

RTL OxygenBuilder Fix

Why this script?

If you have an RTL site running OxygenBuilder, then you'll need to add this snippet to your site. RTL Languages: Arabic, Aramaic, Azeri, Dhivehi/Maldivian, Hebrew, Kurdish (Sorani), Persian/Farsi, and Urdu.

The issue

If you install the OxygenBuilder plugin for the first time, and have your site in one of the RTL languages, the editor layout will be broken, page preview is not complete, tabs and settings will appear in weird places and a lot of funny stuff:

How to fix the issue?

1. First you'll need to install a plugin that let's you add/manage code snippets on your site. I use the free WPCode Plugin. Go ahead to Plugins > Add New > and search for WPCode and Install & Activate the plugin
2. After installing WPCode, go to Code Snippets > + Add Snippet and add the following snippet. Full snippet located inside the script.js file on this repo.

// Fix Oxygen Builder Editor Layout for RTL sites
// Get the current window location
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const oxy_builder = urlParams.get("ct_builder");

// Check if the current page is an editor page
if (oxy_builder == "true") {
  // if it's the editor, make the page direction LTR
  // Making the page direction LTR will ensure that the builder itself will show up correctly
  // While the page's content will remain RTL
  // It works!

  document
    .querySelector('html[ng-app="CTFrontendBuilderUI"]')
    .setAttribute("dir", "ltr");
}

3. Save the snippet and don't forget to make it active
4. That's it. Now everytime the editor loads, it will be set to display correctl