ClassicPress/ClassicPress-v2

Rebuild widgets screen (and equivalent in Customizer) to use details and summary tags

Closed this issue ยท 5 comments

KTS915 commented

Context

For greater accessibility (and significantly less reliance on JavaScript), half of the menu screen has already been rebuilt using details and summary tags. A PR will also soon be merged that rebuilds the admin dashboard and post screen metaboxes using details and summary tags.

The logical next step is to re-build the widgets screen in the same manner. I have begun this task in a branch of my CP v2 fork at https://github.com/KTS915/ClassicPress-v2/tree/widgets

I am creating this issue partly to track progress and partly to invite help.

Implementation So Far

What I have done so far is as follows:

  • Rebuilt all the sidebars using details and summary tags.
  • Rebuilt all the widgets using details and summary tags.
  • Ensured that dragging, dropping, and sorting all works as expected.
  • Ensured that saving, deleting, and the "done" button all work as expected.
  • Ensured that all the above works even if JavaScript is deactivated.
  • The core Tags widget works with the above without making any changes.
  • The core Custom HTML widget now works with the above after making some tweaks to it (recorded in the branch noted above).

Possible Solution

What still needs to be done:

  • I have started work on the Customizer version of the widgets screen, but this needs more work to get it operating properly. In particular, there is a div that needs changing to a ul, but I haven't found where yet, and the details tags need to be made to open and close properly. (See src/wp-admin/js/customize-widgets.js.)
  • I have made the same changes to the core Text widget as I made to the Custom HTML widget, but it still needs more work to operate properly as there is quite a lot more going on here (mainly because it also incorporates a TinyMCE instance). The relevant file is src/wp-admin/js/widgets/text-widgets.js.
  • The core Audio, Image, Gallery, and Video widgets also need work. (I believe they all rely on the media-widgets.js file (in src/wp-admin/js/widgets) and I have already made the same edits to that file that I made to get the Custom HTML widget working, but they also need work on their own JS files (also in src/wp-admin/js/widgets).
  • I haven't checked whether the "Orphaned Sidebar" works yet. (This is the sidebar to which widgets are moved when the theme is changed and there is no sidebar for a current widget in the new theme.)

Will you be able to help with the implementation?

I have already started working on this at https://github.com/KTS915/ClassicPress-v2/tree/widgets

KTS915 commented

Now found and changed the errant div to a li.

KTS915 commented

Current state of play is that the widgets now work in the Customizer as expected, except that they do not expose their contents beyond the Remove and Done buttons after a page reload. (The contents are fully shown when a widget is first added to the sidebar panel.)

Interestingly, all the core widgets behave the same, presumably because the Customizer is in JS and so is whatever is causing the problems on the old-school widgets page.

KTS915 commented

The core Audio, Image, Gallery, and Video widgets now work. EDIT: Now ALL the core widgets work properly on the admin page. Still have work to do on the Customizer, where they work after initially added, but not when the page is (re-)loaded.

KTS915 commented

I have it all working now, EXCEPT that, after testing the behavior of orphaned widgets by changing themes, I ended up with a very long list of widgets on the Inactive Widgets sidebar, while the CSS for the Custom HTML widget has got messed up, even after going back to the original theme and re-loading the page.

Completed with #240