Admin Control Panel language changes Post text allignment as well

Where do you want the direction changed? Front or back end, or both? Which language are your posts in? Please distinguish between language direction and text alignment. Applying a RTL direction to a LTR language can result in strange artifacts, word order being reversed in small sections. In contrast, aligning text in whatever language is strictly an appearance thing and does not affect word order.

In the post edit (post-new.php) so back end.

My posts are in arabic and front end is in arabic however editors have their profile set in English.
RTL direction is applied using site language (arabic) so it shows the site correctly in RTL format.

So here comes the problem, site is set as RTL so it shows correctly (front end wise) and admin panel is shown in LTR (English) so editors can easily navigate through the control panel in english, However when they are typing they are typing in RTL (arabic) which means everytime they have to write an article they need to manually align the title and text to RTL.

I hope i made this clear… Is it possible to make wordpress new post edits align automatically to RTL to match the site language and content (which should make sense more then aligning according to the Control Panel Language)

https://ibb.co/2d7VTBz

As mentioned this can be done manually in the paragraph block by aligning the text to the right but i was hoping that this could be done in some way even if it required code modification as its a hassle to do that on every article.

Thank you

So editors like to have English nav even though they type posts in Arabic. We can apply custom post editor styles. This is meant for enabling themes to have the editor style match that of the theme. We can apply direction: rtl; CSS rule to editor elements to cause whatever is typed to be handled as an RTL language.

First enable editor styling in functions.php:
add_theme_support('editor-styles');

Then enqueue an editor .css stylesheet with add_editor_style(). Ignore the part about -rtl file names since WP is set for a LTR language. There is example code in the user notes near the bottom of the doc.

Probably all you need on the stylesheet is * {direction: rtl;} though it might be a good idea to define a .ltr class style in case someone needs to use a LTR language in a post.

Yes that’s what I want.

you said:
First enable editor styling in functions.php:
add_theme_support('editor-styles');

Adding that to functions.php made the site inaccessible (something went wrong with wordpress message)

I tried adding the below as well to functions.php:
https://i.ibb.co/BVgy8ML/Capture.png

and creating a custom-editor-style.css in my theme root folder with the below CSS Code:
* {direction: rtl;}

with the same result…
adding add_theme_support('editor-styles'); is breaking wordpress.

To recap what i need is to only make the title field and “post/text” paragraph aligned for RTL as per the wordpress language set (which is RTL):
https://ibb.co/2d7VTBz (those by default/automatically aligned to RTL instead of LTR)

• This reply was modified 4 years, 3 months ago by jameshallow1. Reason: adding info

As it turns out, despite what I saw in docs about add_theme_support('editor-styles');, you don’t really need it, you only need to call add_editor_style();, assuming editor-style.css is your CSS file in the theme’s root folder. Pass the relative path to the correct .css file if it’s named differently or located somewhere else. If that call alone doesn’t break anything, it should do what we want.

I did confirm that * {direction: rtl;} added as we discussed does in fact cause editor text to have RTL direction on my test site running a child theme of twentysixteen.

If just add_editor_style() alone still causes trouble with your theme, we could output our CSS rule from the “admin_print_styles” action. Done this way, we’d output <style>.editor-styles-wrapper * {direction: rtl;}</style>. The editor style mechanism automatically adds .editor-styles-wrapper selector. We have to do so ourselves using this approach.

Once you find something that works, I recommend you move your added custom code into a child theme. I didn’t wish to complicate things to start with, but directly editing your theme (unless it’s a custom theme that’s not part of the update process) is not a good long term solution.

• This reply was modified 4 years, 3 months ago by bcworkz.

Thanks a lot for your help! i really appreciate it.

I added the below to functions.php:

function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

It did not “break” wordpress.

then created a file called editor-style.css in my theme root folder, and wrote the below code in it:
* {direction: rtl;}

However it did not have any effect, the text alignment is still LTR in post-new.php (new post)

• This reply was modified 4 years, 3 months ago by jameshallow1.

wrongly reported that its working

• This reply was modified 4 years, 3 months ago by jameshallow1.

Your exact code works on my test site. Are you using the default block editor?

There could be a conflict with other editor styling from elsewhere. Use your browser’s element inspector developer tool to inspect a paragraph of editor content. There should be an active rule listed:

.editor-styles-wrapper * {
    direction: rtl;
}

direction rule not lined or grayed out. If it is, try adding the !important modifier:
direction: rtl !important;

I tried doing it with !important but it still wouldn’t work.

As per your suggestion i did inspect the element and there was no direction:rtl. here is a screenshot of the Inspect Element:
https://ibb.co/28CdyP0

Just for testing purposes i added the direction: rtl (without important) to .editor-styles-wrapper using the inspect element and it worked..

So the problem is that its not getting the direction: rtl from the new css file.

To recap:
The code was added to the functions.php found in the root folder of my theme.
The .css file was added to the root folder of my theme

I am using the default editor (Gutenberg) that comes with the latest wordpress version.
Screenshot of the editor: https://ibb.co/ZV12csx

Found this just now: https://github.com/WordPress/gutenberg/issues/7913
I’m not sure if its related to the problem I’m facing. are you using Gutenberg as well?

• This reply was modified 4 years, 3 months ago by jameshallow1. Reason: added editor screenshot
• This reply was modified 4 years, 3 months ago by jameshallow1.
• This reply was modified 4 years, 3 months ago by jameshallow1. Reason: Gutenberg

Solved! It worked as follows:

style-editor.CSS File:
* {direction: rtl;}

functions.PHP File:

function wpdocs_theme_add_editor_styles() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'style-editor.css' );
}
add_action( 'after_setup_theme', 'wpdocs_theme_add_editor_styles' );

• This reply was modified 4 years, 3 months ago by jameshallow1.

Yes, I was checking with Gutenberg. “Block Editor” == “Gutenberg” ?? Gutenberg was the editor’s development code name. As it is used in WP, it’s officially “Block Editor“. The code name has stuck though and the editor is commonly referred to as that.

I think the Git issue you linked was resolved by having WP prepend .editor-styles-wrapper selector to all editor style rules. Obviously add_editor_style() does work now and application does not bleed out of the editor.

The only substantive change in your working code is the action hook used. (add_theme_support() is called by add_editor_style(), so it’s not needed, but it does no harm in using it either) That’s odd, as either action hook should work. They both work on my site. Anyway, you got it working, that’s all that really matters.