Custom HTML Issues

[swagatam1975]

Issue#1: After adding and saving a custom html in Widget area, the "done" button is not available, only the "delete" button is visible.

Isssue#2: After saving the custom html, the save button remains bright and alive, it doesn't grey out. And while trying to exit the page the Warning pop up comes up asking to save the details before leaving, even though the details are already saved.

[afercia]

@swagatam1975 thanks for your report and welcome to Trac.

I'm able to reproduce this in WordPress 5.1 and trunk. Works correctly in 5.0.

Seems to me the change in [44474] surfaced some pre-existing defect in the logic. Specifically, now that the check for control.contentUpdateBypassed works as intended, a change event is triggered so the widgets is in a "dirty" state.

See https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/wp/widgets/custom-html.js?rev=44474&marks=115-120#L110

if ( ! control.contentUpdateBypassed ) {
	syncInput = control.syncContainer.find( '.sync-input.content' );
	control.fields.content.val( syncInput.val() ).trigger( 'change' );
}

Basically the widget is still flagged as "dirty" after it gets saved. Therefore, the UI doesn't change to the saved state and navigating away from the page triggers the JS alert for unsaved changes.

[swagatam1975]

Thank you @afercia,

Actually I am not a developer so understanding all these can be too complex for me, but I am glad I could notify this to you experts!

Many Thanks for your time, Appreciate your support and efforts very much!

[audrasjb]

Remove change event to avoid "dirty" state.

[audrasjb]

46335.diff result

[audrasjb]

46335.diff works fine on my side but I'm not sure it's totally fine to just remove the change event… I'd appreciate some feedback. @afercia if you have a chance… :-)

[afercia]

@audrasjb thanks. Same here :) I know removing .trigger( 'change' ); solves the issue but I'm not sure why it was introduced in the first place. Needs feedback from someone with more historical knowledge of this implementation. @westonruter

[westonruter]

@afercia check the behavior in the Customizer. The change event is probably introduced there to cause the setting for the widget control to become dirty. That being said, the widget's dirty state seems to work fine in the widgets admin screen (due to the Save button enabling/disabling) so it may not be needed. Test the widget in the Customizer to confirm.

[audrasjb]

@afercia @westonruter that works on both widget and customizer screen.

[westonruter]

The change trigger was introduced in this commit: ​https://github.com/WordPress/better-code-editing/pull/21/commits/2485cbf1df1a472135e5a1ef39c845871e7e7cb7#diff-a8e59ff68e829597118926c5bb9f280eR91

Apparently it was needed when I wrote that code. The reason for the change would be to make sure that the Customizer picks up the change to sync to the preview here: ​https://github.com/WordPress/wordpress-develop/blob/14cebbe9877c4ef79ea4d79e3d8e1a5581930377/src/js/_enqueues/wp/customize/widgets.js#L933-L938

[westonruter]

Taking another look at this, see there is this comment before the code in question:

/*
 * Prevent updating content when the editor is focused or if there are current error annotations,
 * to prevent the editor's contents from getting sanitized as soon as a user removes focus from
 * the editor. This is particularly important for users who cannot unfiltered_html.
 */

Make sure that editing the HTML is tested when the user does not have unfiltered_html. When testing, try adding a <script> and see what happens, particularly in the Customizer.

[audrasjb]

Hi,

Thanks @westonruter for your feedback.

I tried to disable unfiltered_html and all is working as expected: both Widget and Customizer screen works fine :)
I will add some screenshots below.

Cheers,
Jb

[audrasjb]

Widget screen with unfiltered_html disabled

[audrasjb]

Customizer screen with unfiltered_html disabled

[desrosj]

Committed to trunk in [44816].

[desrosj]

In 44817:

Widgets: Remove change event when editing a Custom HTML widget.

The change event was previously required to ensure that the Customizer picked detected changes to the widget's content and synced them to the preview. In the current state, though, the trigger( 'change' ) is no longer required and is causing issues with the widget's “Done” and “Save” buttons.

Merges [44816] to the 5.1 branch.

Fixes #46335.
Props audrasjb, afercia, westonruter.