Merge pull request #53 from Automattic/fix/block-widgets

Fix block widget edit shortcuts
Automattic · Sep 13, 2021 · d8a8599 · d8a8599
2 parents 4aeaddd + e37fe6d
commit d8a8599
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/admin.js b/src/admin.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import getAPI from './helpers/api';
-import { off, send } from './helpers/messenger';
+import { send } from './helpers/messenger';
 import addFocusListener from './modules/focus-listener';
 import { bindPreviewEventsListener } from './helpers/record-event';
 import addGuide from './modules/guide';
@@ -18,11 +18,6 @@ api.bind( 'ready', () => {
 	addFocusListener( 'focus-menu', id => api.section( id ) );
 	addFocusListener( 'focus-menu-location', id => api.control( `nav_menu_locations[${ id }]` ) );
 
-	// disable core so we can enhance by making sure the controls panel opens
-	// before trying to focus the widget
-	off( 'focus-widget-control', api.Widgets.focusWidgetFormControl );
-	addFocusListener( 'focus-widget-control', id => api.Widgets.getWidgetFormControlForWidget( id ) );
-
 	// Toggle icons when customizer toggles preview mode
 	$( '.collapse-sidebar' ).on( 'click', () => send( 'cdm-toggle-visible' ) );
 

diff --git a/src/helpers/icon-buttons.js b/src/helpers/icon-buttons.js
@@ -47,6 +47,7 @@ export function addClickHandlerToIcon( element ) {
 	if ( ! element.$icon ) {
 		return element;
 	}
+
 	addClickHandler( `.${ getIconClassName( element.id ) }`, element.handler );
 	return element;
 }

diff --git a/src/modules/focus-listener.js b/src/modules/focus-listener.js
@@ -20,6 +20,7 @@ function makeHandler( eventName, getControlCallback ) {
 		const eventTargetId = args[ 0 ];
 		debug( `received ${ eventName } event for target id ${ eventTargetId }` );
 		const focusableControl = getControlCallback.apply( getControlCallback, args );
+
 		if ( ! focusableControl ) {
 			debug( `no control found for event ${ eventName } and args:`, args );
 			return;

diff --git a/src/preview.js b/src/preview.js
@@ -6,7 +6,6 @@ import { isSafari, isMobileSafari } from './helpers/user-agent';
 import makeFocusable from './modules/focusable';
 import { modifyEditPostLinks, disableEditPostLinks } from './modules/edit-post-links';
 import { getHeaderElements } from './modules/header-focus';
-import { getWidgetElements } from './modules/widget-focus';
 import { getMenuElements } from './modules/menu-focus';
 import { getFooterElements } from './modules/footer-focus';
 import { getSiteLogoElements } from './modules/site-logo-focus';
@@ -20,7 +19,15 @@ const api = getAPI();
 function disableEditShortcuts() {
 	if ( api.selectiveRefresh && api.selectiveRefresh.Partial && api.selectiveRefresh.Partial.prototype.createEditShortcutForPlacement ) {
 		debug( 'disabling edit shortcuts' );
-		api.selectiveRefresh.Partial.prototype.createEditShortcutForPlacement = function() {};
+
+		// This is crude but necessary to fix the broken widget shortcuts that broke when block widgets were introduced
+		// We effectively skip overriding/disabling the default shortcut for widget partials
+		const createEditShortcutForPlacement = api.selectiveRefresh.Partial.prototype.createEditShortcutForPlacement;
+		api.selectiveRefresh.Partial.prototype.createEditShortcutForPlacement = function( ...args ) {
+			if ( args[ 0 ] && args[ 0 ].partial && args[ 0 ].partial.id.startsWith( 'widget' ) ) {
+				createEditShortcutForPlacement.apply( this, args );
+			}
+		};
 	} else {
 		debug( 'no edit shortcuts support detected' );
 	}
@@ -33,11 +40,11 @@ function startDirectManipulation() {
 		{ id: 'blogname', selector: '.site-title, #site-title', type: 'siteTitle', position: 'middle', title: 'site title' },
 	];
 	const headers = ! options.headerImageSupport ? [] : getHeaderElements();
-	const widgets = isDisabled( 'widget-focus' ) ? [] : getWidgetElements();
 	const menus = isDisabled( 'menu-focus' ) ? [] : getMenuElements();
 	const footers = isDisabled( 'footer-focus' ) ? [] : getFooterElements();
 	const siteLogo = isDisabled( 'site-logo-focus' ) ? [] : getSiteLogoElements();
-	makeFocusable( basicElements.concat( headers, widgets, menus, footers, siteLogo ) );
+
+	makeFocusable( basicElements.concat( headers, menus, footers, siteLogo ) );
 
 	if ( ! isDisabled( 'edit-post-links' ) ) {
 		if ( isSafari() && ! isMobileSafari() ) {