WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 4 months ago

#46335 closed defect (bug) (fixed)

Custom HTML Issues

Reported by: swagatam1975 Owned by: audrasjb
Milestone: 5.1.1 Priority: normal
Severity: normal Version: 5.1
Component: Widgets Keywords: has-patch commit
Focuses: javascript Cc:

Description

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.

Attachments (5)

46335.diff (741 bytes) - added by audrasjb 5 months ago.
Remove change event to avoid "dirty" state.
46335.1.diff.gif (83.8 KB) - added by audrasjb 5 months ago.
46335.diff result
46335.1.diff-customizer.gif (253.9 KB) - added by audrasjb 5 months ago.
@afercia @westonruter that works on both widget and customizer screen.
widget-screen.png (26.3 KB) - added by audrasjb 4 months ago.
Widget screen with unfiltered_html disabled
customizer-screen.png (44.3 KB) - added by audrasjb 4 months ago.
Customizer screen with unfiltered_html disabled

Download all attachments as: .zip

Change History (23)

#1 @afercia
5 months ago

  • Component changed from General to Widgets
  • Focuses javascript added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.1.1
  • Version set to 5.1

@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.

#2 @swagatam1975
5 months ago

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!

This ticket was mentioned in Slack in #core-customize by lukecarbis. View the logs.


5 months ago

This ticket was mentioned in Slack in #core by lukecarbis. View the logs.


5 months ago

@audrasjb
5 months ago

Remove change event to avoid "dirty" state.

@audrasjb
5 months ago

46335.diff result

#5 @audrasjb
5 months ago

  • Keywords has-patch dev-feedback added; needs-patch removed
  • Owner set to audrasjb
  • Status changed from new to accepted

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… :-)

#6 @afercia
5 months ago

@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

Last edited 5 months ago by afercia (previous) (diff)

#7 @westonruter
5 months ago

@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
5 months ago

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

#8 @audrasjb
5 months ago

  • Keywords commit added; dev-feedback removed

This ticket was mentioned in Slack in #core by pbiron. View the logs.


5 months ago

#10 @audrasjb
5 months ago

  • Keywords dev-feedback added; commit removed

This ticket was mentioned in Slack in #core-customize by pbiron. View the logs.


4 months ago

#12 @westonruter
4 months ago

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

#13 @westonruter
4 months ago

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.

#14 @audrasjb
4 months ago

  • Keywords dev-feedback removed

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
4 months ago

Widget screen with unfiltered_html disabled

@audrasjb
4 months ago

Customizer screen with unfiltered_html disabled

This ticket was mentioned in Slack in #core by lukecarbis. View the logs.


4 months ago

#16 @audrasjb
4 months ago

  • Keywords commit added

#17 @desrosj
4 months ago

Committed to trunk in [44816].

#18 @desrosj
4 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.