Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Editor: use site locale in editor iframe #63883

Draft
wants to merge 13 commits into
base: trunk
Choose a base branch
from
Draft

Editor: use site locale in editor iframe #63883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d1dc06b
First commit: testing passing locale to block editor settings.
ramonjd Jul 24, 2024
3836f71
Lint and force 'ltr'
ramonjd Jul 24, 2024
ede0ade
Adding WP's `rtl` to the body tag
ramonjd Jul 25, 2024
bf353d8
Add e2e tests
ramonjd Jul 26, 2024
f2ed832
Move settings filter to compat/6.7
ramonjd Jul 26, 2024
fd10caa
Remove user locale and use current locale
ramonjd Jul 26, 2024
3ea1c01
Making things backwards compatible by defaulting to ownerdocument att…
ramonjd Jul 29, 2024
e24e4c9
Removed placeholder rule. Notes:
ramonjd Jul 29, 2024
5358a35
Remove is_locale_switched() check and update comment to reflect inten…
ramonjd Jul 30, 2024
1410000
Sending language and rtl through from the site index REST response.
ramonjd Aug 15, 2024
4bc2ad8
Removing block editor settings test for now.
ramonjd Aug 15, 2024
a309123
Removed unused arg
ramonjd Sep 17, 2024
3a92868
LINTY
ramonjd Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions lib/compat/wordpress-6.7/rest-api.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,3 +114,45 @@ function gutenberg_override_default_rest_server() {
return 'Gutenberg_REST_Server';
}
add_filter( 'wp_rest_server_class', 'gutenberg_override_default_rest_server', 1 );

/**
* Filters the REST API root index data, and adds the language direction of the site to the site settings.
*
* @param WP_REST_Response $response Response data.
* @param WP_REST_Request $request Request data.
*
* @return WP_REST_Response The API root index data.
*/
function gutenberg_add_language_direction_to_site_capabilities( $response ) {
/*
* Locale settings.
*
* Add user and site locale settings to site index.
* Because the current value of is_rtl() refers to the current locale,
* we need to switch to the site locale to get the correct is_rtl() value for the site.
*
* Core backport notes:
* WordPress backport: `is_rtl` and `language` could be added to the response of WP_REST_Settings_Controller::get_item().
* Or, `is_rtl` could be added to WP_REST_Settings_Controller::get_item() as `language` already exists (?) in the response.
*/
// Current user locale in the block editor.
$current_user_locale = get_user_locale();
$current_user_is_rtl = is_rtl();

// Current site locale.
$current_site_locale = get_locale();
$current_site_is_rtl = $current_user_is_rtl;

if ( $current_user_locale !== $current_site_locale ) {
$switched_locale = switch_to_locale( $current_site_locale );
if ( $switched_locale ) {
$current_site_is_rtl = is_rtl();
restore_previous_locale();
}
}
$response->data['language'] = $current_site_locale;
$response->data['is_rtl'] = $current_site_is_rtl;
return $response;
}

add_filter( 'rest_index', 'gutenberg_add_language_direction_to_site_capabilities', 10, 1 );
24 changes: 19 additions & 5 deletions packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function bubbleEvent( event, Constructor, frame ) {
}

/**
* Bubbles some event types (keydown, keypress, and dragover) to parent document
* Bubbles some event types (keydown, keypress, and dragover) to parent
* document to ensure that the keyboard shortcuts and drag and drop work.
*
* Ideally, we should remove event bubbling in the future. Keyboard shortcuts
Expand Down Expand Up @@ -110,6 +110,8 @@ function Iframe( {
readonly,
forwardedRef: ref,
title = __( 'Editor canvas' ),
lang,
dir,
...props
} ) {
const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
Expand All @@ -122,6 +124,7 @@ function Iframe( {
}, [] );
const { styles = '', scripts = '' } = resolvedAssets;
const [ iframeDocument, setIframeDocument ] = useState();
const [ iframeOwnerDocument, setIframeOwnerDocument ] = useState();
const prevContainerWidthRef = useRef();
const [ bodyClasses, setBodyClasses ] = useState( [] );
const clearerRef = useBlockSelectionClearer();
Expand All @@ -134,6 +137,7 @@ function Iframe( {
const setRef = useRefEffect( ( node ) => {
node._load = () => {
setIframeDocument( node.contentDocument );
setIframeOwnerDocument( node.ownerDocument );
};
let iFrameDocument;
// Prevent the default browser action for files dropped outside of dropzones.
Expand Down Expand Up @@ -161,8 +165,6 @@ function Iframe( {
)
);

contentDocument.dir = ownerDocument.dir;

for ( const compatStyle of getCompatibilityStyles() ) {
if ( contentDocument.getElementById( compatStyle.id ) ) {
continue;
Expand Down Expand Up @@ -260,11 +262,20 @@ function Iframe( {
isZoomedOut ? iframeResizeRef : null,
] );

// Fallback locale values from parent frame.
let defaultLang = iframeOwnerDocument?.lang;
let defaultDir = iframeOwnerDocument?.dir;

if ( lang && dir ) {
defaultLang = lang;
defaultDir = dir;
}

// Correct doctype is required to enable rendering in standards
// mode. Also preload the styles to avoid a flash of unstyled
// content.
const html = `<!doctype html>
<html>
<html lang="${ defaultLang }" dir="${ defaultDir }">
<head>
<meta charset="utf-8">
<script>window.frameElement._load()</script>
Expand Down Expand Up @@ -429,7 +440,10 @@ function Iframe( {
className={ clsx(
'block-editor-iframe__body',
'editor-styles-wrapper',
...bodyClasses
...bodyClasses,
{
rtl: 'rtl' === dir,
}
) }
>
{ contentResizeListener }
Expand Down
2 changes: 2 additions & 0 deletions packages/core-data/src/entities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ export const rootEntitiesConfig = [
'description',
'gmt_offset',
'home',
'is_rtl',
'language',
'name',
'site_icon',
'site_icon_url',
Expand Down
10 changes: 9 additions & 1 deletion packages/editor/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,8 @@ function VisualEditor( {
isDesignPostType,
postType,
isPreview,
siteIsRTL,
siteLang,
} = useSelect( ( select ) => {
const {
getCurrentPostId,
Expand All @@ -128,9 +130,11 @@ function VisualEditor( {
getRenderingMode,
getDeviceType,
} = select( editorStore );
const { getPostType, getEditedEntityRecord } = select( coreStore );
const { getPostType, getEntityRecord, getEditedEntityRecord } =
select( coreStore );
const postTypeSlug = getCurrentPostType();
const _renderingMode = getRenderingMode();
const siteData = getEntityRecord( 'root', '__unstableBase' );
let _wrapperBlockName;

if ( postTypeSlug === PATTERN_POST_TYPE ) {
Expand Down Expand Up @@ -167,6 +171,8 @@ function VisualEditor( {
isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord,
postType: postTypeSlug,
isPreview: editorSettings.__unstableIsPreviewMode,
siteIsRTL: !! siteData?.is_rtl,
siteLang: siteData?.language,
};
}, [] );
const { isCleanNewPost } = useSelect( editorStore );
Expand Down Expand Up @@ -398,6 +404,8 @@ function VisualEditor( {
styles={ iframeStyles }
height="100%"
iframeProps={ {
lang: siteLang,
dir: siteIsRTL ? 'rtl' : 'ltr',
...iframeProps,
...zoomOutProps,
style: {
Expand Down
Loading