From 1367a69057b907043e37b502b2443aeef827f84e Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 6 Dec 2017 13:04:20 +0100 Subject: [PATCH 1/5] Improve RTL styles on the desktop breakpoint. --- components/panel/style.scss | 19 ++++++++++++++++++- editor/assets/stylesheets/main.scss | 6 ++++++ editor/edit-post/header/style.scss | 5 +++++ editor/edit-post/sidebar/style.scss | 29 ++++++++++++++++++++++++++++- 4 files changed, 57 insertions(+), 2 deletions(-) diff --git a/components/panel/style.scss b/components/panel/style.scss index 1a0472f9660b4..a7ac202df79c6 100644 --- a/components/panel/style.scss +++ b/components/panel/style.scss @@ -73,11 +73,28 @@ font-weight: 600; text-align: left; + body.rtl & { + text-align: right; + } + .dashicon { position: absolute; - right: 10px; + right: $item-spacing; top: 50%; transform: translateY( -50% ); + + body.rtl & { + right: auto; + left: $item-spacing; + } + } + + // mirror the arrow horizontally in RTL languages + body.rtl & .dashicons-arrow-right { + transform: scaleX(-1); + -ms-filter: fliph; + filter: FlipH; + margin-top: -10px; } } diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index 250e4ef726bc5..950921ee412c9 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -30,6 +30,12 @@ body.gutenberg-editor-page { ul#adminmenu>li.current>a.current:after { border-right-color: $white; } + + &.rtl ul#adminmenu a.wp-has-current-submenu:after, + &.rtl ul#adminmenu>li.current>a.current:after { + border-right-color: transparent; + border-left-color: $white; + } } .gutenberg { diff --git a/editor/edit-post/header/style.scss b/editor/edit-post/header/style.scss index 5232e54594d6c..bf97c08305c99 100644 --- a/editor/edit-post/header/style.scss +++ b/editor/edit-post/header/style.scss @@ -20,6 +20,11 @@ @include break-large() { left: $admin-sidebar-width; + + body.rtl & { + left: 0; + right: $admin-sidebar-width; + } } } diff --git a/editor/edit-post/sidebar/style.scss b/editor/edit-post/sidebar/style.scss index ff6e98254cb3e..d250239cda6a9 100644 --- a/editor/edit-post/sidebar/style.scss +++ b/editor/edit-post/sidebar/style.scss @@ -11,6 +11,13 @@ height: 100vh; overflow: hidden; + body.rtl & { + right: auto; + left: 0; + border-left: none; + border-right: 1px solid $light-gray-500; + } + @include break-small() { top: $admin-bar-height-big + $header-height; z-index: auto; @@ -86,6 +93,11 @@ .editor-layout.is-sidebar-opened .editor-layout__content { @include break-medium() { margin-right: $sidebar-width; + + body.rtl & { + margin-right: 0; + margin-left: $sidebar-width; + } } } @@ -102,16 +114,31 @@ /* Text Editor specific */ .editor-layout.is-sidebar-opened .editor-text-editor__formatting { margin-right: $sidebar-width; + + body.rtl & { + margin-right: 0; + margin-left: $sidebar-width; + } } .components-panel__header.editor-sidebar__panel-tabs { justify-content: flex-start; + border-top: 0; padding-left: 0; padding-right: $panel-padding / 2; - border-top: 0; + + body.rtl & { + padding-right: 0; + padding-left: $panel-padding / 2; + } .components-icon-button { margin-left: auto; + + body.rtl & { + margin-left: 0; + margin-right: auto; + } } } From e2f8433c69fe1eca286d642e10c358c7aa0a632d Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 6 Dec 2017 13:10:00 +0100 Subject: [PATCH 2/5] Improve RTL at mobile breakpoints. --- editor/edit-post/header/style.scss | 45 +++++++++++++++++++----------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/editor/edit-post/header/style.scss b/editor/edit-post/header/style.scss index bf97c08305c99..5fa6a52279f68 100644 --- a/editor/edit-post/header/style.scss +++ b/editor/edit-post/header/style.scss @@ -34,13 +34,30 @@ } } +body.rtl.sticky-menu .editor-header { + @include break-medium() { + left: 0; + right: $admin-sidebar-width; + } +} + .auto-fold .editor-header { /* Auto fold is when on smaller breakpoints, nav menu auto colllapses */ @include break-medium() { left: $admin-sidebar-width-collapsed; + + body.rtl & { + left: 0; + right: $admin-sidebar-width-collapsed; + } } @include break-large() { left: $admin-sidebar-width; + + body.rtl & { + left: 0; + right: $admin-sidebar-width; + } } } @@ -48,8 +65,17 @@ .folded .editor-header { left: 0; + body.rtl & { + right: 0; + } + @include break-medium() { left: $admin-sidebar-width-collapsed; + + body.rtl & { + left: 0; + right: $admin-sidebar-width-collapsed; + } } } @@ -57,24 +83,11 @@ .auto-fold .wp-responsive-open .editor-header { left: $admin-sidebar-width-big; right: -$admin-sidebar-width-big; -} -/* RTL */ -.rtl.auto-fold .editor-header { - @include break-medium() { - left: 0; - right: $admin-sidebar-width-collapsed; + body.rtl & { + left: -$admin-sidebar-width-big; + right: $admin-sidebar-width-big; } - - @include break-large() { - left: 0; - right: $admin-sidebar-width; - } -} - -.rtl.auto-fold .wp-responsive-open .editor-header { - left: -$admin-sidebar-width-big; - right: $admin-sidebar-width-big; } .editor-header__settings { From 8d3862f54e8449d84ab7a700b3b9169d20a84fdc Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 7 Dec 2017 09:29:33 +0100 Subject: [PATCH 3/5] TintMCE: Fix TinyMCE initialization for RTL languages --- lib/client-assets.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 3ca7424d646ad..e1308df8e8bf3 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -620,7 +620,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) { 'baseURL' => includes_url( 'js/tinymce' ), 'suffix' => SCRIPT_DEBUG ? '' : '.min', 'settings' => apply_filters( 'tiny_mce_before_init', array( - 'plugins' => array_unique( apply_filters( 'tiny_mce_plugins', array( + 'plugins' => implode( ',', array_unique( apply_filters( 'tiny_mce_plugins', array( 'charmap', 'colorpicker', 'hr', @@ -639,7 +639,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) { 'wpdialogs', 'wptextpattern', 'wpview', - ) ) ), + ) ) ) ), 'toolbar1' => implode( ',', array_merge( apply_filters( 'mce_buttons', array( 'formatselect', 'bold', From a06079911188242ebabc6ff3aea466930e1755f5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 7 Dec 2017 10:06:02 +0100 Subject: [PATCH 4/5] RTL: Use a postcss plugin to generate RTL styling --- components/panel/style.scss | 11 +-- editor/assets/stylesheets/main.scss | 6 -- editor/edit-post/header/style.scss | 36 ---------- editor/edit-post/sidebar/style.scss | 27 -------- package-lock.json | 100 ++++++++++++++++++++++++++++ package.json | 1 + webpack.config.js | 1 + 7 files changed, 104 insertions(+), 78 deletions(-) diff --git a/components/panel/style.scss b/components/panel/style.scss index a7ac202df79c6..d5fc7e0059abe 100644 --- a/components/panel/style.scss +++ b/components/panel/style.scss @@ -73,29 +73,22 @@ font-weight: 600; text-align: left; - body.rtl & { - text-align: right; - } - .dashicon { position: absolute; right: $item-spacing; top: 50%; transform: translateY( -50% ); - - body.rtl & { - right: auto; - left: $item-spacing; - } } // mirror the arrow horizontally in RTL languages + /* rtl:begin:ignore */ body.rtl & .dashicons-arrow-right { transform: scaleX(-1); -ms-filter: fliph; filter: FlipH; margin-top: -10px; } + /* rtl:end:ignore */ } .components-panel__body-toggle-icon { diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index 950921ee412c9..250e4ef726bc5 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -30,12 +30,6 @@ body.gutenberg-editor-page { ul#adminmenu>li.current>a.current:after { border-right-color: $white; } - - &.rtl ul#adminmenu a.wp-has-current-submenu:after, - &.rtl ul#adminmenu>li.current>a.current:after { - border-right-color: transparent; - border-left-color: $white; - } } .gutenberg { diff --git a/editor/edit-post/header/style.scss b/editor/edit-post/header/style.scss index 5fa6a52279f68..923260171e066 100644 --- a/editor/edit-post/header/style.scss +++ b/editor/edit-post/header/style.scss @@ -20,11 +20,6 @@ @include break-large() { left: $admin-sidebar-width; - - body.rtl & { - left: 0; - right: $admin-sidebar-width; - } } } @@ -34,30 +29,13 @@ } } -body.rtl.sticky-menu .editor-header { - @include break-medium() { - left: 0; - right: $admin-sidebar-width; - } -} - .auto-fold .editor-header { /* Auto fold is when on smaller breakpoints, nav menu auto colllapses */ @include break-medium() { left: $admin-sidebar-width-collapsed; - - body.rtl & { - left: 0; - right: $admin-sidebar-width-collapsed; - } } @include break-large() { left: $admin-sidebar-width; - - body.rtl & { - left: 0; - right: $admin-sidebar-width; - } } } @@ -65,17 +43,8 @@ body.rtl.sticky-menu .editor-header { .folded .editor-header { left: 0; - body.rtl & { - right: 0; - } - @include break-medium() { left: $admin-sidebar-width-collapsed; - - body.rtl & { - left: 0; - right: $admin-sidebar-width-collapsed; - } } } @@ -83,11 +52,6 @@ body.rtl.sticky-menu .editor-header { .auto-fold .wp-responsive-open .editor-header { left: $admin-sidebar-width-big; right: -$admin-sidebar-width-big; - - body.rtl & { - left: -$admin-sidebar-width-big; - right: $admin-sidebar-width-big; - } } .editor-header__settings { diff --git a/editor/edit-post/sidebar/style.scss b/editor/edit-post/sidebar/style.scss index d250239cda6a9..45a02689fa98c 100644 --- a/editor/edit-post/sidebar/style.scss +++ b/editor/edit-post/sidebar/style.scss @@ -11,13 +11,6 @@ height: 100vh; overflow: hidden; - body.rtl & { - right: auto; - left: 0; - border-left: none; - border-right: 1px solid $light-gray-500; - } - @include break-small() { top: $admin-bar-height-big + $header-height; z-index: auto; @@ -93,11 +86,6 @@ .editor-layout.is-sidebar-opened .editor-layout__content { @include break-medium() { margin-right: $sidebar-width; - - body.rtl & { - margin-right: 0; - margin-left: $sidebar-width; - } } } @@ -114,11 +102,6 @@ /* Text Editor specific */ .editor-layout.is-sidebar-opened .editor-text-editor__formatting { margin-right: $sidebar-width; - - body.rtl & { - margin-right: 0; - margin-left: $sidebar-width; - } } .components-panel__header.editor-sidebar__panel-tabs { @@ -127,18 +110,8 @@ padding-left: 0; padding-right: $panel-padding / 2; - body.rtl & { - padding-right: 0; - padding-left: $panel-padding / 2; - } - .components-icon-button { margin-left: auto; - - body.rtl & { - margin-left: 0; - margin-right: auto; - } } } diff --git a/package-lock.json b/package-lock.json index 8bcd877316802..6ab006a74647b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3530,6 +3530,30 @@ "pinkie-promise": "2.0.1" } }, + "findup": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/findup/-/findup-0.1.5.tgz", + "integrity": "sha1-itkpozk7rGJ5V6fl3kYjsGsOLOs=", + "dev": true, + "requires": { + "colors": "0.6.2", + "commander": "2.1.0" + }, + "dependencies": { + "colors": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz", + "integrity": "sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w=", + "dev": true + }, + "commander": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.1.0.tgz", + "integrity": "sha1-0SG7roYNmZKj1Re6lvVliOR8Z4E=", + "dev": true + } + } + }, "flat-cache": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.0.tgz", @@ -8136,6 +8160,15 @@ } } }, + "postcss-rtl": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/postcss-rtl/-/postcss-rtl-1.1.3.tgz", + "integrity": "sha512-vKYVnkyzN9v9LE+YM55SzbWML07sXXqM+DEwyx92325pPywsPjdqd9OeGVVg7UeZRbxQTzLclXQuaRGLcoOPww==", + "dev": true, + "requires": { + "rtlcss": "2.2.1" + } + }, "postcss-value-parser": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", @@ -8906,6 +8939,73 @@ "nearley": "2.11.0" } }, + "rtlcss": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.2.1.tgz", + "integrity": "sha512-JjQ5DlrmwiItAjlmhoxrJq5ihgZcE0wMFxt7S17bIrt4Lw0WwKKFk+viRhvodB/0falyG/5fiO043ZDh6/aqTw==", + "dev": true, + "requires": { + "chalk": "2.3.0", + "findup": "0.1.5", + "mkdirp": "0.5.1", + "postcss": "6.0.14", + "strip-json-comments": "2.0.1" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz", + "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", + "dev": true, + "requires": { + "color-convert": "1.9.0" + } + }, + "chalk": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz", + "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==", + "dev": true, + "requires": { + "ansi-styles": "3.2.0", + "escape-string-regexp": "1.0.5", + "supports-color": "4.5.0" + } + }, + "has-flag": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", + "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", + "dev": true + }, + "postcss": { + "version": "6.0.14", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz", + "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==", + "dev": true, + "requires": { + "chalk": "2.3.0", + "source-map": "0.6.1", + "supports-color": "4.5.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz", + "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=", + "dev": true, + "requires": { + "has-flag": "2.0.0" + } + } + } + }, "run-async": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz", diff --git a/package.json b/package.json index af58ae71d7b6d..c95d19501edb0 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "pegjs-loader": "0.5.4", "phpegjs": "1.0.0-beta7", "postcss-loader": "2.0.6", + "postcss-rtl": "1.1.3", "prismjs": "1.6.0", "raw-loader": "0.5.1", "react-markdown": "2.5.0", diff --git a/webpack.config.js b/webpack.config.js index 6e67b88ed86b7..b41c2a1fc4cd9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -28,6 +28,7 @@ const extractConfig = { options: { plugins: [ require( 'autoprefixer' ), + require( 'postcss-rtl' )(), ], }, }, From 243aba5dcd6951070da4d4f1b9ccba74829a2dd1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 7 Dec 2017 12:02:46 +0100 Subject: [PATCH 5/5] RTL: Adding the `dir` attribute to the HTML tag to fix ltr styling --- components/button/style.scss | 5 +++++ editor/index.js | 6 ++++++ gutenberg.php | 3 ++- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/components/button/style.scss b/components/button/style.scss index 821e942699db0..7c595f40e3494 100644 --- a/components/button/style.scss +++ b/components/button/style.scss @@ -1,3 +1,5 @@ + // If we don't ignore this part we'll have a style ordering issue + /* rtl:begin:ignore */ .components-button { background: none; border: none; @@ -5,7 +7,10 @@ text-decoration: none; margin: 0; border-radius: 0; +} +/* rtl:end:ignore */ +.components-button { &:active { color: currentColor; } diff --git a/editor/index.js b/editor/index.js index 872c5d9e1a243..2a4a6d83f4a51 100644 --- a/editor/index.js +++ b/editor/index.js @@ -99,3 +99,9 @@ export function createEditorInstance( id, post, settings ) { }, }; } + +// Hack to fix LTR, This should be done in WP Core automatically +const isRtl = document.documentElement.getAttribute( 'dir' ) === 'rtl'; +if ( ! isRtl ) { + document.documentElement.setAttribute( 'dir', 'ltr' ); +} diff --git a/gutenberg.php b/gutenberg.php index ceb2cf61e45c9..7e895618dc90f 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -532,5 +532,6 @@ function gutenberg_replace_default_add_new_button() { * @return string The $classes string, with gutenberg-editor-page appended. */ function gutenberg_add_admin_body_class( $classes ) { - return "$classes gutenberg-editor-page"; + $ltr_rtl_class = is_rtl() ? 'dir-rtl' : 'dir-ltr'; + return "$classes gutenberg-editor-page $ltr_rtl_class"; }