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/components/panel/style.scss b/components/panel/style.scss index 1a0472f9660b4..d5fc7e0059abe 100644 --- a/components/panel/style.scss +++ b/components/panel/style.scss @@ -75,10 +75,20 @@ .dashicon { position: absolute; - right: 10px; + right: $item-spacing; top: 50%; transform: translateY( -50% ); } + + // 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/edit-post/header/style.scss b/editor/edit-post/header/style.scss index 5232e54594d6c..923260171e066 100644 --- a/editor/edit-post/header/style.scss +++ b/editor/edit-post/header/style.scss @@ -54,24 +54,6 @@ right: -$admin-sidebar-width-big; } -/* RTL */ -.rtl.auto-fold .editor-header { - @include break-medium() { - left: 0; - right: $admin-sidebar-width-collapsed; - } - - @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 { display: inline-flex; align-items: center; diff --git a/editor/edit-post/sidebar/style.scss b/editor/edit-post/sidebar/style.scss index ff6e98254cb3e..45a02689fa98c 100644 --- a/editor/edit-post/sidebar/style.scss +++ b/editor/edit-post/sidebar/style.scss @@ -106,9 +106,9 @@ .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; .components-icon-button { margin-left: auto; 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"; } 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', 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' )(), ], }, },