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

anton-vlasenko · 2021-08-19T19:29:52Z

Description

Legacy Widget block has a preview function. However, it uses a relative URL.
iframe cannot load the widgets.php file when the code is no longer running from the /wp-admin/ URL.
This PR fixes that by using a REST API endpoint instead of the widgets.php file to fetch preview HTML. It doesn't depend on the admin URL.
Fixes #30049

Based on #34230

How has this been tested?

Go to Appearance -> Widgets page.
Click on the "plus sign" button at the very bottom of the page.
Add a Legacy Widget block.
Select Meta widget from the dropdown.
Click somewhere on the background of the page (not on the Meta widget itself). You should see a preview of the Meta widget now.
Open your browser's developer tools and find an <iframe /> element with the wp-block-legacy-widget__edit-preview-iframe class. Check its srcdoc attribute.

Expected result:

The srcdoc attribute of the <iframe /> should contain html code of the preview.
Please see the screenshots section for reference.

Screenshots

Types of changes

Bug fix.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

packages/widgets/src/blocks/legacy-widget/edit/preview.js

anton-vlasenko · 2021-08-25T04:42:00Z

I've merged #34230 into this PR to make the e2e tests pass.
~~So please ignore the code from #34230 during the code review.~~
UPD: now it should only show changes related to this PR because I've changed the target branch.

kevin940726 · 2021-08-25T08:25:06Z

@anton-vlasenko You can target the base branch to #34230's branch so that it won't show the commits from that PR. Just have to remember to rebase to trunk once it's merged :).

anton-vlasenko · 2021-08-25T09:58:02Z

@kevin940726

@anton-vlasenko You can target the base branch to #34230's branch so that it won't show the commits from that PR. Just have to remember to rebase to trunk once it's merged :).

That's a good idea. I tried to do it as you said and I got this popup message:

I understand it's doable but I'm afraid to screw something up.

kevin940726 · 2021-08-25T10:43:31Z

@anton-vlasenko I believe you just have to remove the commits that's already on that branch and rebase your branch onto that.

packages/e2e-tests/specs/widgets/editing-widgets.test.js

…iew was loaded. 2. Refactor the function. Use return early approach.

2. Add error handling. 3. Abort request if the iframe is unmounted. 4. Use useEffect to make a request (per kevin940726's comment). 5. Use states instead of manipulating DOM values.

…dability. 2. Remove isPreviewFetched state (useEffect is enough). 3. Add idBase and instance as dependencies to useEffect method. We have to fetch the preview html again if any of those parameter gets changed. 4. Move abortController and fetchPreviewHTML inside the useEffect callback to avoid recreating them on each component redraw.

… error message can't be minified.

2. Fix code style.

…he original PR).

We have to include id_base parameter.

kevin940726

Code LGTM 👍. We need to wait for #34230 before merging this though, or just merge this onto that branch.

anton-vlasenko · 2021-08-30T17:00:15Z

This PR has been closed by GitHub (unintentionally).
So let's continue with the review here.

anton-vlasenko mentioned this pull request Aug 19, 2021

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

Closed

7 tasks

kevin940726 reviewed Aug 20, 2021

View reviewed changes

packages/widgets/src/blocks/legacy-widget/edit/preview.js Outdated Show resolved Hide resolved

packages/widgets/src/blocks/legacy-widget/edit/preview.js Outdated Show resolved Hide resolved

adamziel reviewed Aug 20, 2021

View reviewed changes

packages/widgets/src/blocks/legacy-widget/edit/preview.js Show resolved Hide resolved

adamziel mentioned this pull request Aug 20, 2021

[Widgets editor] TypeError: Cannot read property 'body' of null at onLoad #34164

Closed

2 tasks

anton-vlasenko requested a review from kevin940726 August 20, 2021 17:45

kevin940726 requested changes Aug 21, 2021

View reviewed changes

noisysocks mentioned this pull request Aug 23, 2021

Legacy widget rendering endpoint WordPress/wordpress-develop#1508

Closed

adamziel added 3 commits August 23, 2021 13:24

Add a polyfill for the widget render endpoint

a35a963

Remove unnecessary whitespace

8a05852

Fill some blanks in docstrings

2707540

anton-vlasenko requested a review from noisysocks as a code owner August 23, 2021 13:20

adamziel added 3 commits August 23, 2021 15:42

Adjust the registered callback name

5bc0ea1

Lint

836be1c

Lint

984a27d

anton-vlasenko requested review from spacedmonkey, TimothyBJacobs, ajitbohra, nerrad and ntwb as code owners August 24, 2021 09:59

kevin940726 reviewed Aug 25, 2021

View reviewed changes

packages/widgets/src/blocks/legacy-widget/edit/preview.js Outdated Show resolved Hide resolved

anton-vlasenko requested a review from kevin940726 August 25, 2021 04:40

anton-vlasenko changed the base branch from trunk to add/legacy-widget-rendering-api August 25, 2021 10:08

anton-vlasenko changed the base branch from add/legacy-widget-rendering-api to trunk August 25, 2021 10:10

anton-vlasenko changed the base branch from trunk to add/legacy-widget-rendering-api August 25, 2021 13:50

adamziel added 2 commits August 25, 2021 16:41

Polyfill the entire /encode endpoint

799efa2

Adjust directory and class names

285c593

Revert to /render polyfill for WordPress 5.8.1

bf6e432

kevin940726 reviewed Aug 27, 2021

View reviewed changes

packages/e2e-tests/specs/widgets/editing-widgets.test.js Show resolved Hide resolved

adamziel and others added 23 commits August 27, 2021 14:12

Rename id_base parameter to id

42d147e

Lint

09a1d67

Load preview using the new REST API endpoint.

40160a9

1. Use previewLoaded instead of srcdoc attribute to check if the prev…

f93ce36

…iew was loaded. 2. Refactor the function. Use return early approach.

1. Rename renderPreview function (code review feedback).

8d60517

2. Add error handling. 3. Abort request if the iframe is unmounted. 4. Use useEffect to make a request (per kevin940726's comment). 5. Use states instead of manipulating DOM values.

Fix bug related to isPreviewFetched state.

5ad0b85

Don't call fetchPreviewHTML with arguments because we use closures now.

4301240

useEffect should always return a cleanup function.

7012d92

Don't call useEffect on each component rerender.

d728285

1. Don't use a custom message as it increases the bundle size and the…

22e5c24

… error message can't be minified.

An attempt to fix the failing test.

e4fef28

2nd attempt to fix the failing test.

9f3b885

3rd attempt to fix the failing test.

4d7312d

4rd attempt to fix the failing test.

f8b35eb

5th attempt to fix the failing test.

6b4bf23

A small change to trigger CI checks.

7a04cd2

Remove irrelevant comment.

213ca44

Change REST API endpoint url because it was changed in #34230

c633a85

1. Fix parameter names (we should use id and instance parameters).

0dd5753

2. Fix code style.

1. Fix parameter names (we should use id and instance parameters).

81cdf5e

2. Fix code style.

1. Revert endpoint and use /render again (because it was changed in t…

1dab283

…he original PR).

Fix request parameters.

6941256

We have to include id_base parameter.

kevin940726 approved these changes Aug 30, 2021

View reviewed changes

adamziel force-pushed the add/legacy-widget-rendering-api branch from 09a1d67 to c6b6664 Compare August 30, 2021 10:30

adamziel deleted the branch WordPress:add/legacy-widget-rendering-api August 30, 2021 11:17

adamziel closed this Aug 30, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

anton-vlasenko commented Aug 19, 2021 •

edited by draganescu

Loading

anton-vlasenko commented Aug 25, 2021 •

edited

Loading

kevin940726 commented Aug 25, 2021

anton-vlasenko commented Aug 25, 2021

kevin940726 commented Aug 25, 2021

kevin940726 left a comment

anton-vlasenko commented Aug 30, 2021

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

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

Conversation

anton-vlasenko commented Aug 19, 2021 • edited by draganescu Loading

Description

How has this been tested?

Expected result:

Screenshots

Types of changes

Checklist:

anton-vlasenko commented Aug 25, 2021 • edited Loading

kevin940726 commented Aug 25, 2021

anton-vlasenko commented Aug 25, 2021

kevin940726 commented Aug 25, 2021

kevin940726 left a comment

Choose a reason for hiding this comment

anton-vlasenko commented Aug 30, 2021

anton-vlasenko commented Aug 19, 2021 •

edited by draganescu

Loading

anton-vlasenko commented Aug 25, 2021 •

edited

Loading