Skip to content
This repository has been archived by the owner on Mar 9, 2024. It is now read-only.

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

Closed
KTS915 opened this issue Sep 23, 2023 · 5 comments
Labels
status: in-progress When an issue or PR is being worked on now. type: feature request New feature or request

Comments

@KTS915
Copy link
Member

KTS915 commented Sep 23, 2023

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 KTS915 added status: needs triage This issue needs revision, splitting, or other gardening work type: feature request New feature or request labels Sep 23, 2023
@KTS915
Copy link
Member Author

KTS915 commented Sep 23, 2023

Now found and changed the errant div to a li.

@viktorix viktorix added status: in-progress When an issue or PR is being worked on now. and removed status: needs triage This issue needs revision, splitting, or other gardening work labels Sep 23, 2023
@KTS915
Copy link
Member Author

KTS915 commented Sep 23, 2023

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
Copy link
Member Author

KTS915 commented Sep 24, 2023

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
Copy link
Member Author

KTS915 commented Sep 25, 2023

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.

@mattyrob
Copy link
Collaborator

Completed with #240

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
status: in-progress When an issue or PR is being worked on now. type: feature request New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants