[wp-trac] [WordPress Trac] #54075: Disabling legacy widget previews in the block editor

[WordPress Trac]

#54075: Disabling legacy widget previews in the block editor
-------------------------+------------------------------------------------
 Reporter:  eatingrules  |       Owner:  (none)
     Type:  enhancement  |      Status:  new
 Priority:  normal       |   Milestone:  Awaiting Review
Component:  Widgets      |     Version:
 Severity:  normal       |  Resolution:
 Keywords:               |     Focuses:  ui, accessibility, administration
-------------------------+------------------------------------------------

Comment (by costdev):

 Here's an updated snippet as an example of how a toggle could look
 (entirely illustrative and by no means complete nor tested for coding
 standards etc!).

 To view this:

 1. Go to Appearance > Widgets.
 2. Open DevTools (F12).
 3. In the console, paste the following and press enter:

 {{{
 const togglePreviewsBtn = document.createElement('button'),
       redoBtn = document.querySelector('[aria-label="Redo"]');

 togglePreviewsBtn.id = 'toggle-previews';
 togglePreviewsBtn.type = 'button';
 togglePreviewsBtn.tabIndex = '-1';
 togglePreviewsBtn.setAttribute( 'data-toolbar-item', true );
 togglePreviewsBtn.setAttribute( 'data-hidden', 'false' );
 togglePreviewsBtn.setAttribute( 'aria-label', 'Toggle Legacy Widget
 Previews' );
 togglePreviewsBtn.classList.add( 'components-button', 'components-toolbar-
 button', 'has-icon' );
 togglePreviewsBtn.innerHTML = '<svg width="24" height="24" viewBox="0 0
 488.85 488.85" xmlns="http://www.w3.org/2000/svg" role="img" aria-
 hidden="true" focusable="false"><path
 d="M244.425,98.725c-93.4,0-178.1,51.1-240.6,134.1c-5.1,6.8-5.1,16.3,0,23.1c62.5,83.1,147.2,134.2,240.6,134.2
 s178.1-51.1,240.6-134.1c5.1-6.8,5.1-16.3,0-23.1C422.525,149.825,337.825,98.725,244.425,98.725z
 M251.125,347.025
 c-62,3.9-113.2-47.2-109.3-109.3c3.2-51.2,44.7-92.7,95.9-95.9c62-3.9,113.2,47.2,109.3,109.3
 C343.725,302.225,302.225,343.725,251.125,347.025z
 M248.025,299.625c-33.4,2.1-61-25.4-58.8-58.8c1.7-27.6,24.1-49.9,51.7-51.7
 c33.4-2.1,61,25.4,58.8,58.8C297.925,275.625,275.525,297.925,248.025,299.625z"></path></svg>';

 redoBtn.parentElement.appendChild( togglePreviewsBtn );

 togglePreviewsBtn.addEventListener('click', function() {
     const legacyWidgets = document.querySelectorAll( '.wp-block-legacy-
 widget' );
     legacyWidgets.forEach( ( widget ) => {
         const form    = widget.querySelector( '.wp-block-legacy-
 widget__edit-form' ),
               preview = widget.querySelector( '.wp-block-legacy-
 widget__edit-preview' );

         if ( 'true' === togglePreviewsBtn.dataset.hidden ) {
             form.setAttribute( 'hidden', true );
             preview.classList.remove( 'is-offscreen' );
         } else {
             form.removeAttribute( 'hidden' );
             preview.classList.add( 'is-offscreen' );
         }
     });

     togglePreviewsBtn.setAttribute( 'data-hidden', 'false' ===
 togglePreviewsBtn.dataset.hidden );
 });
 }}}

 You ''should'' now see an eye icon at the top left of the Widget Block
 Editor toolbar. Click it to toggle Legacy Widget Previews.

 **Notes:**
 1. This is a rough targeting of elements. It is by no means intended to
 reflect the typical approach in Gutenberg.
 2. The `focusin` / `focusout` handlers on `.wp-block-legacy-widget` would
 need to be added/removed depending on the toggle state.
 3. Clicking the toggle button should probably be saved as a persistent
 preference, and likely on a per-user basis.
 4. Accessibility testing hasn't been done, although keyboard navigation
 appears to work the same as before at least.
 5. The tooltip for the icon isn't working - I didn't see this as something
 worth resolving for this illustration.
 6. The icon would obviously need an alternate state.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54075#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform