Skip to content

Commit

Permalink
Fix the RTL editor styles and the theme styles option (#27947)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Jan 5, 2021
1 parent 470e644 commit bf2fc09
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 13 deletions.
12 changes: 9 additions & 3 deletions lib/client-assets.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -579,7 +579,9 @@ function gutenberg_register_vendor_script( $scripts, $handle, $src, $deps = arra
* @return array Filtered editor settings.
*/
function gutenberg_extend_block_editor_styles( $settings ) {
$editor_styles_file = gutenberg_dir_path() . 'build/editor/editor-styles.css';
$editor_styles_file = is_rtl() ?
gutenberg_dir_path() . 'build/editor/editor-styles-rtl.css' :
gutenberg_dir_path() . 'build/editor/editor-styles.css';

/*
* If, for whatever reason, the built editor styles do not exist, avoid
Expand All @@ -601,7 +603,9 @@ function gutenberg_extend_block_editor_styles( $settings ) {
*/

$default_styles = file_get_contents(
ABSPATH . WPINC . '/css/dist/editor/editor-styles.css'
is_rtl() ?
ABSPATH . WPINC . '/css/dist/editor/editor-styles-rtl.css' :
ABSPATH . WPINC . '/css/dist/editor/editor-styles.css'
);

/*
Expand Down Expand Up @@ -640,7 +644,9 @@ function gutenberg_extend_block_editor_styles( $settings ) {
* @return array Filtered editor settings.
*/
function gutenberg_extend_block_editor_settings_with_default_editor_styles( $settings ) {
$editor_styles_file = gutenberg_dir_path() . 'build/editor/editor-styles.css';
$editor_styles_file = is_rtl() ?
gutenberg_dir_path() . 'build/editor/editor-styles-rtl.css' :
gutenberg_dir_path() . 'build/editor/editor-styles.css';
$settings['defaultEditorStyles'] = array(
array(
'css' => file_get_contents( $editor_styles_file ),
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const interfaceLabels = {
footer: __( 'Editor footer' ),
};

function Layout( { settings } ) {
function Layout( { styles } ) {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isHugeViewport = useViewportMatch( 'huge', '>=' );
const {
Expand Down Expand Up @@ -171,7 +171,7 @@ function Layout( { settings } ) {
const ref = useRef();

useDrop( ref );
useEditorStyles( ref, settings.styles );
useEditorStyles( ref, styles );
const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
onClose: () => setIsInserterOpened( false ),
} );
Expand Down
14 changes: 6 additions & 8 deletions packages/edit-post/src/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,9 +102,7 @@ function Editor( {

const editorSettings = useMemo( () => {
const result = {
...( hasThemeStyles
? settings
: omit( settings, [ 'defaultEditorStyles' ] ) ),
...omit( settings, [ 'defaultEditorStyles', 'styles' ] ),

This comment has been minimized.

Sign in to view

Copy link
@ellatrix

ellatrix Jul 8, 2021

Member

@youknowriad Why was it needed to remove the styles from the settings here? I need it in the block editor packages in #28165.

This comment has been minimized.

Sign in to view

Copy link
@youknowriad

youknowriad Jul 8, 2021

Author Contributor

I removed it because it was useless for the block-editor package, meaning it was not the responsibility of this package to apply the styles, it's more the wrapper (edit-post). Now, it's arguable if there's a good reason for this to be a setting of any block editor instance.

This comment has been minimized.

Sign in to view

Copy link
@youknowriad

youknowriad Jul 8, 2021

Author Contributor

If you decide to restore it, #32966 gets solved (also see discussion there).
__experimentalPreferredStyleVariations: {
value: preferredStyleVariations,
onChange: updatePreferredStyleVariations,
Expand All @@ -117,9 +115,6 @@ function Editor( {
// This is marked as experimental to give time for the quick inserter to mature.
__experimentalSetIsInserterOpened: setIsInserterOpened,
keepCaretInsideBlock,
styles: hasThemeStyles
? settings.styles
: settings.defaultEditorStyles,
};

// Omit hidden block types if exists and non-empty.
Expand All @@ -144,7 +139,6 @@ function Editor( {
hasFixedToolbar,
focusMode,
hasReducedUI,
hasThemeStyles,
hiddenBlockTypes,
blockTypes,
preferredStyleVariations,
Expand All @@ -154,6 +148,10 @@ function Editor( {
keepCaretInsideBlock,
] );

const styles = useMemo( () => {
return hasThemeStyles ? settings.styles : settings.defaultEditorStyles;
}, [ settings, hasThemeStyles ] );

if ( ! post ) {
return null;
}
Expand All @@ -175,7 +173,7 @@ function Editor( {
>
<ErrorBoundary onError={ onError }>
<EditorInitialization postId={ postId } />
<Layout settings={ settings } />
<Layout styles={ styles } />
<KeyboardShortcuts
shortcuts={ preventEventDiscovery }
/>
Expand Down

0 comments on commit bf2fc09

Please sign in to comment.