General improvements

WordPress · Feb 8, 2019 · bcf144c · bcf144c
1 parent 8110ba2
commit bcf144c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 26 deletions.
diff --git a/packages/block-library/src/legacy-widget/WidgetEditDomManager.js b/packages/block-library/src/legacy-widget/WidgetEditDomManager.js
@@ -13,6 +13,8 @@ class WidgetEditDomManager extends Component {
 		super( ...arguments );
 
 		this.containerRef = createRef();
+		this.formRef = createRef();
+		this.widgetContentRef = createRef();
 		this.triggerWidgetEvent = this.triggerWidgetEvent.bind( this );
 	}
 
@@ -23,8 +25,8 @@ class WidgetEditDomManager extends Component {
 	shouldComponentUpdate( nextProps ) {
 		// We can not leverage react render otherwise we would destroy dom changes applied by the plugins.
 		// We manually update the required dom node replicating what the widget screen and the customizer do.
-		if ( nextProps.form !== this.props.form && this.containerRef.current ) {
-			const widgetContent = this.containerRef.current.querySelector( '.widget-content' );
+		if ( nextProps.form !== this.props.form && this.widgetContentRef.current ) {
+			const widgetContent = this.widgetContentRef.current;
 			widgetContent.innerHTML = nextProps.form;
 			this.triggerWidgetEvent( 'widget-updated' );
 		}
@@ -36,9 +38,18 @@ class WidgetEditDomManager extends Component {
 		return (
 			<div className="widget open" ref={ this.containerRef }>
 				<div className="widget-inside">
-					<form method="post">
-						<div className="widget-content" dangerouslySetInnerHTML={ { __html: form } }>
-						</div>
+					<form
+						ref={ this.formRef }
+						method="post"
+						onBlur={ () => {
+							//console.log( 'blur' );
+						} }
+					>
+						<div
+							ref={ this.widgetContentRef }
+							className="widget-content"
+							dangerouslySetInnerHTML={ { __html: form } }
+						/>
 						<input type="hidden" name="widget-id" className="widget-id" value={ id } />
 						<input type="hidden" name="id_base" className="id_base" value={ idBase } />
 						<input type="hidden" name="widget_number" className="widget_number" value={ widgetNumber } />
@@ -58,24 +69,30 @@ class WidgetEditDomManager extends Component {
 	}
 
 	retrieveUpdatedInstance() {
-		if ( this.containerRef.current ) {
+		if ( this.formRef.current ) {
 			const { idBase, widgetNumber } = this.props;
-			const form = this.containerRef.current.querySelector( 'form' );
+			const form = this.formRef.current;
 			const formData = new window.FormData( form );
 			const updatedInstance = {};
 			const keyPrefixLength = `widget-${ idBase }[${ widgetNumber }][`.length;
 			const keySuffixLength = `]`.length;
-			for ( const [ rawKey, value ] of formData ) {
-				const keyParsed = rawKey.substring( keyPrefixLength, rawKey.length - keySuffixLength );
+			for ( const rawKey of formData.keys() ) {
 				// This fields are added to the form because the widget JavaScript code may use this values.
 				// They are not relevant for the update mechanism.
 				if ( includes(
 					[ 'widget-id', 'id_base', 'widget_number', 'multi_number', 'add_new' ],
-					keyParsed,
+					rawKey,
 				) ) {
 					continue;
 				}
-				updatedInstance[ keyParsed ] = value;
+				const keyParsed = rawKey.substring( keyPrefixLength, rawKey.length - keySuffixLength );
+
+				const value = formData.getAll( rawKey );
+				if ( value.length > 1 ) {
+					updatedInstance[ keyParsed ] = value;
+				} else {
+					updatedInstance[ keyParsed ] = value[ 0 ];
+				}
 			}
 			return updatedInstance;
 		}

diff --git a/packages/block-library/src/legacy-widget/edit.js b/packages/block-library/src/legacy-widget/edit.js
@@ -11,10 +11,8 @@ import {
 	Button,
 	IconButton,
 	PanelBody,
-	Path,
 	Placeholder,
 	SelectControl,
-	SVG,
 	Toolbar,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -78,23 +76,11 @@ class LegacyWidgetEdit extends Component {
 				<BlockControls>
 					<Toolbar>
 						<IconButton
-							className="editor-block-switcher__toggle"
 							onClick={ this.changeWidget }
 							label={ __( 'Change widget' ) }
+							icon="update"
 						>
-							<SVG
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
-							>
-								<Path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z" />
-							</SVG>
 						</IconButton>
-						<IconButton
-							className="components-icon-button components-toolbar__control"
-
-							onClick={ this.changeWidget }
-							icon="edit"
-						/>
 						<Button
 							className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` }
 							onClick={ this.switchToEdit }