Rebuild widgets screen (and equivalent in Customizer) to use details and summary tags
Closed this issue ยท 5 comments
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
andsummary
tags. - Rebuilt all the widgets using
details
andsummary
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 athediv
that needs changing to aul
, but I haven't found where yet, anddetails
tags need to be made to open and close properly. (Seesrc/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 issrc/wp-admin/js/widgets/text-widgets.js
.The core Audio, Image, Gallery, and Video widgets also need work. (I believe they all rely on themedia-widgets.js
file (insrc/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 insrc/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
Now found and changed the errant div
to a li
.
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.
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.
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.