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

Legacy widget's preview functionality is broken when the page is moved #34011

Closed
wants to merge 18 commits into from
Closed

Legacy widget's preview functionality is broken when the page is moved #34011

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9829ad8
1. Add new getWPAdminURL and setWPAdminURL functions to be able to se…
anton-vlasenko Aug 10, 2021
dac4f40
Use getWPAdminURL instead of addQueryArgs to generate correct absolut…
anton-vlasenko Aug 10, 2021
fdeac24
Use getWPAdminURL from @wordpress/url becase we removed it from util…
anton-vlasenko Aug 10, 2021
bf2401e
Add wpAbsoluteAdminUrl to the block editor settings.
anton-vlasenko Aug 11, 2021
54238b3
Revert the changes as we are not going to implement it like that.
anton-vlasenko Aug 11, 2021
7af12cd
Use an absolute URL for widget preview.
anton-vlasenko Aug 11, 2021
ed4d56f
Fix code style (automatic).
anton-vlasenko Aug 11, 2021
f11a7e7
Rename the variable.
anton-vlasenko Aug 11, 2021
42a3aa0
Fix code style.
anton-vlasenko Aug 11, 2021
62a956a
Remove redundant line at the end of the file.
anton-vlasenko Aug 11, 2021
b30ec6b
1. Check if the admin_url function exists before calling it.
anton-vlasenko Aug 12, 2021
36370d9
1. Use destruct assignment to get the value of admin URL.
anton-vlasenko Aug 12, 2021
b6f24f3
1. Use destruct assignment to get the value of admin URL.
anton-vlasenko Aug 12, 2021
288266d
Fix code style.
anton-vlasenko Aug 12, 2021
198191e
Use function_exists instead of is_callable because using function_exi…
anton-vlasenko Aug 12, 2021
bb21211
Use context to get adminUrl value.
anton-vlasenko Aug 16, 2021
2e4e645
Use context to get adminUrl value (customizer page).
anton-vlasenko Aug 16, 2021
5ac6a14
Get rid of the WidgetsSettings and load preview using the new REST AP…
anton-vlasenko Aug 19, 2021
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
3 changes: 3 additions & 0 deletions lib/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ function gutenberg_extend_post_editor_settings( $settings ) {
$settings['defaultTemplatePartAreas'] = gutenberg_get_allowed_template_part_areas();
}

// Some blocks have to use absolute url.
$settings['adminUrl'] = function_exists( 'admin_url' ) ? admin_url() : '';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we better create our own filter? This function is a shim that exists for WordPress 5.7 and may get removed so we should not tie into it. I think it's better to define something like gutenberg_add_admin_url_to_editor_settings and run that through add_filter just like gutenberg_extend_post_editor_settings.

Copy link
Contributor

@azaozz azaozz Aug 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't think there's a chance admin_url() will be missing. It is in wp-includes/link-template.php which is included before the REST API and plugins.


return $settings;
}
// This can be removed when plugin support requires WordPress 5.8.0+.
Expand Down
20 changes: 14 additions & 6 deletions packages/widgets/src/blocks/legacy-widget/edit/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,19 @@ import { addQueryArgs } from '@wordpress/url';
import { useState } from '@wordpress/element';
import { Placeholder, Spinner, Disabled } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';

export default function Preview( { idBase, instance, isVisible } ) {
const [ isLoaded, setIsLoaded ] = useState( false );
const { adminUrl } = useSelect( ( select ) => {
kevin940726 marked this conversation as resolved.
Show resolved Hide resolved
return select( blockEditorStore ).getSettings();
}, [] );

const widgetPreviewUrl = ( adminUrl ?? '' ) + 'widgets.php';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will we ever not have adminUrl?

const widgetPreviewUrlQueryParameters = {
'legacy-widget-preview': { idBase, instance },
};

// Resize the iframe on either the load event, or when the iframe becomes visible.
const ref = useRefEffect(
Expand Down Expand Up @@ -96,12 +106,10 @@ export default function Preview( { idBase, instance, isVisible } ) {
// TODO: This chokes when the query param is too big.
// Ideally, we'd render a <ServerSideRender>. Maybe by
// rendering one in an iframe via a portal.
src={ addQueryArgs( 'widgets.php', {
'legacy-widget-preview': {
idBase,
instance,
},
} ) }
src={ addQueryArgs(
widgetPreviewUrl,
widgetPreviewUrlQueryParameters
) }
onLoad={ ( event ) => {
// To hide the scrollbars of the preview frame for some edge cases,
// such as negative margins in the Gallery Legacy Widget.
Expand Down