[Experimental widgets screen] Remove "id" attribute of the legacy-wid…

…get block (WordPress#24817) * Fix saving of duplicated legacy widgets * Remove id attribute from legacy-widget block
mateuswetah · Aug 27, 2020 · 44e1bfa · 44e1bfa
1 parent 25f9e09
commit 44e1bfa
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 13 deletions.
diff --git a/packages/block-library/src/legacy-widget/block.json b/packages/block-library/src/legacy-widget/block.json
@@ -5,9 +5,6 @@
 		"widgetClass": {
 			"type": "string"
 		},
-		"id": {
-			"type": "string"
-		},
 		"idBase": {
 			"type": "string"
 		},

diff --git a/packages/block-library/src/legacy-widget/edit/index.js b/packages/block-library/src/legacy-widget/edit/index.js
@@ -39,14 +39,15 @@ class LegacyWidgetEdit extends Component {
 			hasPermissionsToManageWidgets,
 			isSelected,
 			setAttributes,
+			widgetId,
 		} = this.props;
 		const { isPreview, hasEditForm } = this.state;
-		const { id, widgetClass } = attributes;
+		const { widgetClass } = attributes;
 		const widgetObject =
-			( id && availableLegacyWidgets[ id ] ) ||
+			( widgetId && availableLegacyWidgets[ widgetId ] ) ||
 			( widgetClass && availableLegacyWidgets[ widgetClass ] );
 
-		if ( ! id && ! widgetClass ) {
+		if ( ! widgetId && ! widgetClass ) {
 			return (
 				<LegacyWidgetPlaceholder
 					availableLegacyWidgets={ availableLegacyWidgets }
@@ -123,8 +124,8 @@ class LegacyWidgetEdit extends Component {
 					<LegacyWidgetEditHandler
 						isSelected={ isSelected }
 						isVisible={ ! isPreview }
-						id={ id }
-						idBase={ attributes.idBase || attributes.id }
+						id={ widgetId }
+						idBase={ attributes.idBase || widgetId }
 						number={ attributes.number }
 						widgetName={ get( widgetObject, [ 'name' ] ) }
 						widgetClass={ attributes.widgetClass }
@@ -180,7 +181,10 @@ class LegacyWidgetEdit extends Component {
 	}
 }
 
-export default withSelect( ( select ) => {
+export default withSelect( ( select, { clientId } ) => {
+	const widgetId = select( 'core/edit-widgets' ).getWidgetIdForClientId(
+		clientId
+	);
 	const editorSettings = select( 'core/block-editor' ).getSettings();
 	const {
 		availableLegacyWidgets,
@@ -189,5 +193,6 @@ export default withSelect( ( select ) => {
 	return {
 		hasPermissionsToManageWidgets,
 		availableLegacyWidgets,
+		widgetId,
 	};
 } )( LegacyWidgetEdit );
diff --git a/packages/edit-widgets/src/store/selectors.js b/packages/edit-widgets/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { keyBy } from 'lodash';
+import { invert, keyBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -41,6 +41,12 @@ export const getWidgetAreas = createRegistrySelector( ( select ) => () => {
 	);
 } );
 
+export const getWidgetIdForClientId = ( state, clientId ) => {
+	const widgetIdToClientId = state.mapping;
+	const clientIdToWidgetId = invert( widgetIdToClientId );
+	return clientIdToWidgetId[ clientId ];
+};
+
 export const getEditedWidgetAreas = createRegistrySelector(
 	( select ) => ( state, ids ) => {
 		let widgetAreas = select( 'core/edit-widgets' ).getWidgetAreas();

diff --git a/packages/edit-widgets/src/store/transformers.js b/packages/edit-widgets/src/store/transformers.js
@@ -17,7 +17,6 @@ export function transformWidgetToBlock( widget ) {
 		{
 			rendered: widget.rendered,
 			form: widget.form,
-			id: widget.id,
 			widgetClass: widget.widget_class,
 			instance: widget.settings,
 			idBase: widget.id_base,
@@ -32,9 +31,7 @@ export function transformBlockToWidget( block, relatedWidget = {} ) {
 	if ( name === 'core/legacy-widget' ) {
 		const widget = {
 			...relatedWidget,
-			id: attributes.id,
 			widget_class: attributes.widgetClass,
-			number: attributes.number,
 			id_base: attributes.idBase,
 			settings: attributes.instance,
 		};