From b116acb6d8a9085792eb1145c76faca75a1e46f6 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 22 Mar 2019 18:50:35 +0000 Subject: [PATCH 1/4] Fix: End to end tests do not disable the experiments after they are enabled. --- ...-experimental-wp-widget-blocks-manager.php | 8 +- ...lass-wp-rest-widget-updater-controller.php | 178 +++++++++++++++--- lib/widgets-page.php | 1 + lib/widgets.php | 27 ++- .../src/legacy-widget/edit/dom-manager.js | 42 +++-- .../src/legacy-widget/edit/handler.js | 94 +++++---- .../src/legacy-widget/edit/index.js | 64 +++++-- .../src/legacy-widget/edit/placeholder.js | 34 ++-- .../src/legacy-widget/editor.scss | 12 ++ .../block-library/src/legacy-widget/index.php | 116 ++++++++---- 10 files changed, 423 insertions(+), 153 deletions(-) diff --git a/lib/class-experimental-wp-widget-blocks-manager.php b/lib/class-experimental-wp-widget-blocks-manager.php index c3b609db6738c7..e3bdc63b097fe6 100644 --- a/lib/class-experimental-wp-widget-blocks-manager.php +++ b/lib/class-experimental-wp-widget-blocks-manager.php @@ -125,9 +125,9 @@ public static function get_sidebar_as_blocks( $sidebar_id ) { $blocks[] = array( 'blockName' => 'core/legacy-widget', 'attrs' => array( - 'class' => $widget_class, - 'identifier' => $item, - 'instance' => self::get_sidebar_widget_instance( $wp_registered_sidebars[ $sidebar_id ], $item ), + 'widgetClass' => $widget_class, + 'identifier' => $item, + 'instance' => self::get_sidebar_widget_instance( $wp_registered_sidebars[ $sidebar_id ], $item ), ), 'innerHTML' => '', ); @@ -177,7 +177,7 @@ private static function get_widget_class( $widget_id ) { * @param string $id Identifier of the widget instance. * @return array Array containing the widget instance. */ - private static function get_sidebar_widget_instance( $sidebar, $id ) { + public static function get_sidebar_widget_instance( $sidebar, $id ) { list( $object, $number, $name ) = self::get_widget_info( $id ); if ( ! $object ) { return array(); diff --git a/lib/class-wp-rest-widget-updater-controller.php b/lib/class-wp-rest-widget-updater-controller.php index 22c8a59bec4e24..7fbde9f1b3bd01 100644 --- a/lib/class-wp-rest-widget-updater-controller.php +++ b/lib/class-wp-rest-widget-updater-controller.php @@ -34,13 +34,30 @@ public function __construct() { public function register_routes() { register_rest_route( $this->namespace, - // Regex representing a PHP class extracted from http://php.net/manual/en/language.oop5.basic.php. - '/' . $this->rest_base . '/(?P[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*)/', + '/' . $this->rest_base . '/', array( 'args' => array( - 'identifier' => array( + 'widget_class' => array( 'description' => __( 'Class name of the widget.', 'gutenberg' ), 'type' => 'string', + 'required' => false, + 'default' => null, + ), + 'identifier' => array( + 'description' => __( 'Identifier of the widget.', 'gutenberg' ), + 'type' => 'string', + 'required' => false, + 'default' => null, + ), + 'instance' => array( + 'description' => __( 'Current widget instance', 'gutenberg' ), + 'type' => 'object', + 'default' => array(), + ), + 'instance_changes' => array( + 'description' => __( 'Array of instance changes', 'gutenberg' ), + 'type' => 'object', + 'default' => array(), ), ), array( @@ -76,51 +93,120 @@ public function compute_new_widget_permissions_check() { } /** - * Returns the new widget instance and the form that represents it. + * Checks if the widget being referenced is valid. * * @since 5.2.0 - * @access public + * @param string $identifier Instance identifier of the widget. + * @param string $widget_class Name of the class the widget references. * - * @param WP_REST_Request $request Full details about the request. - * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure. + * @return boolean True if the widget being referenced exists and false otherwise. */ - public function compute_new_widget( $request ) { - $widget = $request->get_param( 'identifier' ); + private function is_valid_widget( $identifier, $widget_class ) { + global $wp_widget_factory, $wp_registered_widgets; + if ( ! $identifier && ! $widget_class ) { + return false; + } + if ( $identifier ) { + return isset( $wp_registered_widgets[ $identifier ] ); + } + return isset( $wp_widget_factory->widgets[ $widget_class ] ) && + ( $wp_widget_factory->widgets[ $widget_class ] instanceof WP_Widget ); + } - global $wp_widget_factory; + /** + * Computes an array with instance changes cleaned of widget specific prefixes and sufixes. + * + * @since 5.7.0 + * @param string $id_base Widget ID Base. + * @param string $id Widget instance identifier. + * @param array $instance_changes Array with the form values being being changed. + * + * @return array An array based on $instance_changes whose keys have the widget specific sufixes and prefixes removed. + */ + private function parse_instance_changes( $id_base, $id, $instance_changes ) { + $instance_changes_parsed = array(); + $start_position = strlen( 'widget-' . $id_base . '[' . $id . '][' ); + foreach ( $instance_changes as $key => $value ) { + $key_parsed = substr( $key, $start_position, -1 ); + $instance_changes_parsed[ $key_parsed ] = $value; + } + return $instance_changes_parsed; + } + /** + * Returns the edit form of the widget being referenced. + * + * @since 5.7.0 + * @param string $identifier Instance identifier of the widget. + * + * @return WP_REST_Response Response object. + */ + private function handle_reference_widgets( $identifier ) { + global $wp_registered_widget_controls; + $form = ''; + $id_base = $identifier; + $id = $identifier; + $number = null; if ( - null === $widget || - ! isset( $wp_widget_factory->widgets[ $widget ] ) || - ! ( $wp_widget_factory->widgets[ $widget ] instanceof WP_Widget ) + isset( $wp_registered_widget_controls[ $identifier ]['callback'] ) && + is_callable( $wp_registered_widget_controls[ $identifier ]['callback'] ) ) { - return new WP_Error( - 'widget_invalid', - __( 'Invalid widget.', 'gutenberg' ), - array( - 'status' => 404, - ) - ); + $control = $wp_registered_widget_controls[ $identifier ]; + ob_start(); + call_user_func_array( $control['callback'], $control['params'] ); + $form = ob_get_clean(); + if ( isset( $control['id_base'] ) ) { + $id_base = $control['id_base']; + } + if ( isset( $control['params'][0]['number'] ) ) { + $number = $control['params'][0]['number']; + } } - $widget_obj = $wp_widget_factory->widgets[ $widget ]; + return rest_ensure_response( + array( + 'instance' => array(), + 'form' => $form, + 'id_base' => $id_base, + 'id' => $id, + 'number' => $number, + ) + ); + } - $instance = $request->get_param( 'instance' ); + /** + * Returns the new class widget instance and the form that represents it. + * + * @since 5.7.0 + * @access public + * + * @param string $widget_class Widget id for callback widgets or widget class name for class widgets. + * @param array $instance Previous widget instance. + * @param array $instance_changes Array with the form values being being changed. + * @param string $id_to_use Identifier of the specific widget instance. + * @return WP_REST_Response Response object on success, or WP_Error object on failure. + */ + private function handle_class_widgets( $widget_class, $instance, $instance_changes, $id_to_use ) { if ( null === $instance ) { $instance = array(); } - $id_to_use = $request->get_param( 'id_to_use' ); if ( null === $id_to_use ) { $id_to_use = -1; } + global $wp_widget_factory; + $widget_obj = $wp_widget_factory->widgets[ $widget_class ]; + $widget_obj->_set( $id_to_use ); + $id_base = $widget_obj->id_base; + $id = $widget_obj->id; ob_start(); - $instance_changes = $request->get_param( 'instance_changes' ); if ( null !== $instance_changes ) { - $old_instance = $instance; - $instance = $widget_obj->update( $instance_changes, $old_instance ); + $instance_changes = $this->parse_instance_changes( $id_base, $id_to_use, $instance_changes ); + $old_instance = $instance; + $instance = $widget_obj->update( $instance_changes, $old_instance ); + /** * Filters a widget's settings before saving. * @@ -164,10 +250,7 @@ public function compute_new_widget( $request ) { */ do_action_ref_array( 'in_widget_form', array( &$widget_obj, &$return, $instance ) ); } - - $id_base = $widget_obj->id_base; - $id = $widget_obj->id; - $form = ob_get_clean(); + $form = ob_get_clean(); return rest_ensure_response( array( @@ -175,9 +258,44 @@ public function compute_new_widget( $request ) { 'form' => $form, 'id_base' => $id_base, 'id' => $id, + 'number' => $id_to_use, ) ); } + + /** + * Returns the new widget instance and the form that represents it. + * + * @since 5.7.0 + * @access public + * + * @param WP_REST_Request $request Full details about the request. + * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure. + */ + public function compute_new_widget( $request ) { + $identifier = $request->get_param( 'identifier' ); + $widget_class = $request->get_param( 'widget_class' ); + + if ( ! $this->is_valid_widget( $identifier, $widget_class ) ) { + return new WP_Error( + 'widget_invalid', + __( 'Invalid widget.', 'gutenberg' ), + array( + 'status' => 404, + ) + ); + } + + if ( $identifier ) { + return $this->handle_reference_widgets( $identifier ); + } + return $this->handle_class_widgets( + $widget_class, + $request->get_param( 'instance' ), + $request->get_param( 'instance_changes' ), + $request->get_param( 'id_to_use' ) + ); + } } /** * End: Include for phase 2 diff --git a/lib/widgets-page.php b/lib/widgets-page.php index 9ecb3b1139cefd..6762b1f0583712 100644 --- a/lib/widgets-page.php +++ b/lib/widgets-page.php @@ -108,6 +108,7 @@ function gutenberg_widgets_init( $hook ) { ); wp_enqueue_script( 'wp-edit-widgets' ); + wp_enqueue_script( 'admin-widgets' ); wp_enqueue_script( 'wp-format-library' ); wp_enqueue_style( 'wp-edit-widgets' ); wp_enqueue_style( 'wp-format-library' ); diff --git a/lib/widgets.php b/lib/widgets.php index 85a9dea30ce99c..de6d08306a9717 100644 --- a/lib/widgets.php +++ b/lib/widgets.php @@ -63,6 +63,15 @@ function gutenberg_block_editor_admin_print_footer_scripts() { */ function gutenberg_block_editor_admin_footer() { if ( gutenberg_is_block_editor() ) { + // The function wpWidgets.save needs this nonce to work as expected. + echo implode( + "\n", + array( + '
', + wp_nonce_field( 'save-sidebar-widgets', '_wpnonce_widgets', false ), + '
', + ) + ); /** This action is documented in wp-admin/admin-footer.php */ // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores do_action( 'admin_footer-widgets.php' ); @@ -124,10 +133,13 @@ function gutenberg_get_legacy_widget_settings() { global $wp_registered_widgets; if ( ! empty( $wp_registered_widgets ) ) { foreach ( $wp_registered_widgets as $widget_id => $widget_obj ) { + $block_widget_start = 'blocks-widget-'; if ( - is_array( $widget_obj['callback'] ) && + ( is_array( $widget_obj['callback'] ) && isset( $widget_obj['callback'][0] ) && - ( $widget_obj['callback'][0] instanceof WP_Widget ) + ( $widget_obj['callback'][0] instanceof WP_Widget ) ) || + // $widget_id starts with $block_widget_start. + strncmp( $widget_id, $block_widget_start, strlen( $block_widget_start ) ) === 0 ) { continue; } @@ -142,7 +154,7 @@ function gutenberg_get_legacy_widget_settings() { $settings['hasPermissionsToManageWidgets'] = $has_permissions_to_manage_widgets; $settings['availableLegacyWidgets'] = $available_legacy_widgets; - return $settings; + return gutenberg_experiments_editor_settings( $settings ); } /** @@ -213,3 +225,12 @@ function gutenberg_create_wp_area_post_type() { add_action( 'init', 'gutenberg_create_wp_area_post_type' ); add_filter( 'sidebars_widgets', 'Experimental_WP_Widget_Blocks_Manager::swap_out_sidebars_blocks_for_block_widgets' ); + +/** + * Function to enqueue admin-widgets as part of the block editor assets. + */ +function gutenberg_enqueue_widget_scripts() { + wp_enqueue_script( 'admin-widgets' ); +} + +add_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_widget_scripts' ); diff --git a/packages/block-library/src/legacy-widget/edit/dom-manager.js b/packages/block-library/src/legacy-widget/edit/dom-manager.js index d4a0b43829f29c..caf8f6ed56317c 100644 --- a/packages/block-library/src/legacy-widget/edit/dom-manager.js +++ b/packages/block-library/src/legacy-widget/edit/dom-manager.js @@ -16,6 +16,8 @@ class LegacyWidgetEditDomManager extends Component { this.containerRef = createRef(); this.formRef = createRef(); this.widgetContentRef = createRef(); + this.idBaseInputRef = createRef(); + this.widgetNumberInputRef = createRef(); this.triggerWidgetEvent = this.triggerWidgetEvent.bind( this ); } @@ -27,11 +29,22 @@ class LegacyWidgetEditDomManager extends Component { } shouldComponentUpdate( nextProps ) { + let shouldTriggerWidgetUpdateEvent = false; // 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.idBase !== this.props.idBase && this.idBaseInputRef.current ) { + this.idBaseInputRef.current.value = nextProps.idBase; + shouldTriggerWidgetUpdateEvent = true; + } + if ( nextProps.widgetNumber !== this.props.widgetNumber && this.widgetNumberInputRef.current ) { + this.widgetNumberInputRef.current.value = nextProps.widgetNumber; + } if ( nextProps.form !== this.props.form && this.widgetContentRef.current ) { const widgetContent = this.widgetContentRef.current; widgetContent.innerHTML = nextProps.form; + shouldTriggerWidgetUpdateEvent = true; + } + if ( shouldTriggerWidgetUpdateEvent ) { this.triggerWidgetEvent( 'widget-updated' ); this.previousFormData = new window.FormData( this.formRef.current @@ -41,7 +54,7 @@ class LegacyWidgetEditDomManager extends Component { } render() { - const { id, idBase, widgetNumber, form } = this.props; + const { id, idBase, widgetNumber, form, identifier } = this.props; return (
@@ -50,6 +63,11 @@ class LegacyWidgetEditDomManager extends Component { method="post" onBlur={ () => { if ( this.shouldTriggerInstanceUpdate() ) { + if ( identifier ) { + if ( this.containerRef.current ) { + window.wpWidgets.save( window.jQuery( this.containerRef.current ) ); + } + } this.props.onInstanceChange( this.retrieveUpdatedInstance() ); @@ -62,8 +80,8 @@ class LegacyWidgetEditDomManager extends Component { dangerouslySetInnerHTML={ { __html: form } } /> - - + + @@ -102,36 +120,32 @@ class LegacyWidgetEditDomManager extends Component { } triggerWidgetEvent( event ) { - window.$( window.document ).trigger( + window.jQuery( window.document ).trigger( event, - [ window.$( this.containerRef.current ) ] + [ window.jQuery( this.containerRef.current ) ] ); } retrieveUpdatedInstance() { if ( this.formRef.current ) { - const { idBase, widgetNumber } = this.props; 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 of formData.keys() ) { + for ( const key 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' ], - rawKey, + key, ) ) { continue; } - const keyParsed = rawKey.substring( keyPrefixLength, rawKey.length - keySuffixLength ); - const value = formData.getAll( rawKey ); + const value = formData.getAll( key ); if ( value.length > 1 ) { - updatedInstance[ keyParsed ] = value; + updatedInstance[ key ] = value; } else { - updatedInstance[ keyParsed ] = value[ 0 ]; + updatedInstance[ key ] = value[ 0 ]; } } return updatedInstance; diff --git a/packages/block-library/src/legacy-widget/edit/handler.js b/packages/block-library/src/legacy-widget/edit/handler.js index 157ab653fb89f5..3a14718a18d0e4 100644 --- a/packages/block-library/src/legacy-widget/edit/handler.js +++ b/packages/block-library/src/legacy-widget/edit/handler.js @@ -1,8 +1,12 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + /** * WordPress dependencies */ import { Component } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import { withInstanceId } from '@wordpress/compose'; @@ -17,6 +21,7 @@ class LegacyWidgetEditHandler extends Component { this.state = { form: null, idBase: null, + widgetNumber: null, }; this.instanceUpdating = null; this.onInstanceChange = this.onInstanceChange.bind( this ); @@ -25,7 +30,9 @@ class LegacyWidgetEditHandler extends Component { componentDidMount() { this.isStillMounted = true; - this.requestWidgetUpdater(); + this.requestWidgetUpdater( undefined, ( response ) => { + this.props.onInstanceChange( null, !! response.form ); + } ); } componentDidUpdate( prevProps ) { @@ -33,7 +40,9 @@ class LegacyWidgetEditHandler extends Component { prevProps.instance !== this.props.instance && this.instanceUpdating !== this.props.instance ) { - this.requestWidgetUpdater(); + this.requestWidgetUpdater( undefined, ( response ) => { + this.props.onInstanceChange( null, !! response.form ); + } ); } if ( this.instanceUpdating === this.props.instance ) { this.instanceUpdating = null; @@ -45,59 +54,79 @@ class LegacyWidgetEditHandler extends Component { } render() { - const { instanceId, identifier } = this.props; - const { id, idBase, form } = this.state; - if ( ! identifier ) { - return __( 'Not a valid widget.' ); - } + const { instanceId, identifier, instance, isSelected, widgetName } = this.props; + const { id, idBase, form, widgetNumber } = this.state; + if ( ! form ) { return null; } + + const widgetTitle = get( instance, [ 'title' ] ); + let title = null; + if ( isSelected ) { + if ( widgetTitle && widgetName ) { + title = `${ widgetName }: ${ widgetTitle }`; + } else if ( ! widgetTitle && widgetName ) { + title = widgetName; + } else if ( widgetTitle && ! widgetName ) { + title = widgetTitle; + } + } return ( -
- { - this.widgetEditDomManagerRef = ref; + <> + { title && ( +
+ { title } +
+ ) } +
-
+ > + + { + this.widgetEditDomManagerRef = ref; + } } + onInstanceChange={ this.onInstanceChange } + widgetNumber={ widgetNumber ? widgetNumber : instanceId * -1 } + id={ id } + idBase={ idBase } + form={ form } + identifier={ identifier } + /> +
+ ); } onInstanceChange( instanceChanges ) { this.requestWidgetUpdater( instanceChanges, ( response ) => { this.instanceUpdating = response.instance; - this.props.onInstanceChange( response.instance ); + this.props.onInstanceChange( response.instance, !! response.form ); } ); } requestWidgetUpdater( instanceChanges, callback ) { - const { identifier, instanceId, instance } = this.props; - if ( ! identifier ) { + const { identifier, instanceId, instance, widgetClass } = this.props; + if ( ! identifier && ! widgetClass ) { return; } apiFetch( { - path: `/wp/v2/widgets/${ identifier }/`, + path: `/wp/v2/widgets/`, data: { identifier, instance, // use negative ids to make sure the id does not exist on the database. id_to_use: instanceId * -1, + widget_class: widgetClass, instance_changes: instanceChanges, }, method: 'POST', @@ -108,6 +137,7 @@ class LegacyWidgetEditHandler extends Component { form: response.form, idBase: response.id_base, id: response.id, + widgetNumber: response.number, } ); if ( callback ) { callback( response ); diff --git a/packages/block-library/src/legacy-widget/edit/index.js b/packages/block-library/src/legacy-widget/edit/index.js index 31f36c2f7fac94..85247f2aa86bcb 100644 --- a/packages/block-library/src/legacy-widget/edit/index.js +++ b/packages/block-library/src/legacy-widget/edit/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + /** * WordPress dependencies */ @@ -26,6 +31,7 @@ class LegacyWidgetEdit extends Component { constructor() { super( ...arguments ); this.state = { + hasEditForm: true, isPreview: false, }; this.switchToEdit = this.switchToEdit.bind( this ); @@ -38,33 +44,39 @@ class LegacyWidgetEdit extends Component { attributes, availableLegacyWidgets, hasPermissionsToManageWidgets, + isSelected, setAttributes, } = this.props; - const { isPreview } = this.state; - const { identifier, isCallbackWidget } = attributes; - const widgetObject = identifier && availableLegacyWidgets[ identifier ]; - if ( ! widgetObject ) { + const { isPreview, hasEditForm } = this.state; + const { identifier, widgetClass } = attributes; + const widgetObject = + ( identifier && availableLegacyWidgets[ identifier ] ) || + ( widgetClass && availableLegacyWidgets[ widgetClass ] ); + if ( ! identifier && ! widgetClass ) { return ( setAttributes( { - instance: {}, - identifier: newWidget, - isCallbackWidget: availableLegacyWidgets[ newWidget ].isCallbackWidget, - } ) } + onChangeWidget={ ( newWidget ) => { + const { isCallbackWidget } = availableLegacyWidgets[ newWidget ]; + setAttributes( { + instance: {}, + identifier: isCallbackWidget ? newWidget : undefined, + widgetClass: isCallbackWidget ? undefined : newWidget, + } ); + } } /> ); } - const inspectorControls = ( + const inspectorControls = widgetObject ? ( { widgetObject.description } - ); + ) : null; if ( ! hasPermissionsToManageWidgets ) { return ( <> @@ -78,14 +90,14 @@ class LegacyWidgetEdit extends Component { <> - { ! widgetObject.isHidden && ( + { ( widgetObject && ! widgetObject.isHidden ) && ( ) } - { ! isCallbackWidget && ( + { hasEditForm && ( <>
); } + trySetNonce() { + const element = document.getElementById( '_wpnonce_widgets' ); + if ( element && element.value ) { + this.widgetNonce = element.value; + } + } + onInstanceChange( instanceChanges ) { + const { widgetId } = this.props; + if ( widgetId ) { + // For reference widgets there is no need to query an endpoint, + // the widget is already saved with ajax. + this.props.onInstanceChange( instanceChanges, true ); + return; + } this.requestWidgetUpdater( instanceChanges, ( response ) => { this.instanceUpdating = response.instance; this.props.onInstanceChange( response.instance, !! response.form ); @@ -114,39 +134,60 @@ class LegacyWidgetEditHandler extends Component { } requestWidgetUpdater( instanceChanges, callback ) { - const { identifier, instanceId, instance, widgetClass } = this.props; - if ( ! identifier && ! widgetClass ) { + const { widgetId, idBase, instance, widgetClass } = this.props; + const { isStillMounted } = this; + if ( ! widgetId && ! widgetClass ) { return; } - apiFetch( { - path: `/__experimental/widget-forms/`, - data: { - identifier, - instance, - // use negative ids to make sure the id does not exist on the database. - id_to_use: instanceId * -1, - widget_class: widgetClass, - instance_changes: instanceChanges, - }, - method: 'POST', - } ).then( - ( response ) => { - if ( this.isStillMounted ) { - this.setState( { - form: response.form, - idBase: response.id_base, - id: response.id, - widgetNumber: response.number, - } ); + // If we are in the presence of a reference widget, do a save ajax request + // with empty changes so we retrieve the widget edit form. + if ( widgetId ) { + const httpRequest = new XMLHttpRequest(); + const formData = new FormData(); + formData.append( 'action', 'save-widget' ); + formData.append( 'id_base', idBase ); + formData.append( 'widget-id', widgetId ); + formData.append( 'widget-width', '250' ); + formData.append( 'widget-height', '200' ); + formData.append( 'savewidgets', this.widgetNonce ); + httpRequest.open( 'POST', window.ajaxurl ); + const self = this; + httpRequest.addEventListener( 'load', function() { + if ( isStillMounted ) { + const form = httpRequest.responseText; + self.setState( { form } ); if ( callback ) { - callback( response ); + callback( { form } ); } } - } - ); + } ); + httpRequest.send( formData ); + return; + } + + if ( widgetClass ) { + apiFetch( { + path: `/__experimental/widget-forms/${ widgetClass }/`, + data: { + instance, + instance_changes: instanceChanges, + }, + method: 'POST', + } ).then( + ( response ) => { + if ( isStillMounted ) { + this.setState( { + form: response.form, + } ); + if ( callback ) { + callback( response ); + } + } + } + ); + } } } export default withInstanceId( LegacyWidgetEditHandler ); - diff --git a/packages/block-library/src/legacy-widget/edit/index.js b/packages/block-library/src/legacy-widget/edit/index.js index 85247f2aa86bcb..e2c960080c011b 100644 --- a/packages/block-library/src/legacy-widget/edit/index.js +++ b/packages/block-library/src/legacy-widget/edit/index.js @@ -48,22 +48,22 @@ class LegacyWidgetEdit extends Component { setAttributes, } = this.props; const { isPreview, hasEditForm } = this.state; - const { identifier, widgetClass } = attributes; + const { widgetId, widgetClass } = attributes; const widgetObject = - ( identifier && availableLegacyWidgets[ identifier ] ) || + ( widgetId && availableLegacyWidgets[ widgetId ] ) || ( widgetClass && availableLegacyWidgets[ widgetClass ] ); - if ( ! identifier && ! widgetClass ) { + if ( ! widgetId && ! widgetClass ) { return ( { - const { isCallbackWidget } = availableLegacyWidgets[ newWidget ]; + const { isReferenceWidget } = availableLegacyWidgets[ newWidget ]; setAttributes( { instance: {}, - identifier: isCallbackWidget ? newWidget : undefined, - widgetClass: isCallbackWidget ? undefined : newWidget, + widgetId: isReferenceWidget ? newWidget : undefined, + widgetClass: isReferenceWidget ? undefined : newWidget, } ); } } /> @@ -120,7 +120,9 @@ class LegacyWidgetEdit extends Component { '', - 'after_widget' => '', - 'class' => '', - 'before_title' => '', - 'after_title' => '', - ), - array( - 'widget_id' => $id, - 'widget_name' => $wp_registered_widgets[ $id ]['name'], + array_merge( + array( + 'before_widget' => '
', + 'after_widget' => '
', + 'before_title' => '

', + 'after_title' => '

', + ), + array( + 'widget_id' => $id, + 'widget_name' => $wp_registered_widgets[ $id ]['name'], + ) ), ), (array) $wp_registered_widgets[ $id ]['params'] @@ -49,10 +50,8 @@ function render_widget_by_id( $id ) { $classname_ = ltrim( $classname_, '_' ); $params[0]['before_widget'] = sprintf( $params[0]['before_widget'], $id, $classname_ ); - $params = apply_filters( 'dynamic_sidebar_params', $params ); - + $params = apply_filters( 'dynamic_sidebar_params', $params ); $callback = $wp_registered_widgets[ $id ]['callback']; - do_action( 'dynamic_sidebar', $wp_registered_widgets[ $id ] ); if ( is_callable( $callback ) ) { @@ -73,29 +72,27 @@ function render_widget_by_id( $id ) { * @return string Returns the post content with the legacy widget added. */ function render_block_legacy_widget( $attributes ) { - $identifier = null; + $widget_id = null; $widget_class = null; - if ( isset( $attributes['identifier'] ) ) { - $identifier = $attributes['identifier']; + if ( isset( $attributes['widgetId'] ) ) { + $widget_id = $attributes['widgetId']; } if ( isset( $attributes['widgetClass'] ) ) { $widget_class = $attributes['widgetClass']; } + if ( $widget_id ) { + return render_widget_by_id( $widget_id ); + } if ( ! $widget_class ) { - if ( ! $identifier ) { - return ''; - } - return render_widget_by_id( $attributes['identifier'] ); + return ''; } + ob_start(); $instance = null; if ( isset( $attributes['instance'] ) ) { $instance = $attributes['instance']; } - if ( $identifier ) { - $instance = Experimental_WP_Widget_Blocks_Manager::get_sidebar_widget_instance( array(), $identifier ); - } the_widget( $widget_class, $instance ); return ob_get_clean(); } @@ -108,13 +105,19 @@ function register_block_core_legacy_widget() { 'core/legacy-widget', array( 'attributes' => array( - 'widgetClass' => array( + 'widgetClass' => array( 'type' => 'string', ), - 'identifier' => array( + 'widgetId' => array( 'type' => 'string', ), - 'instance' => array( + 'idBase' => array( + 'type' => 'string', + ), + 'widgetNumber' => array( + 'type' => 'number', + ), + 'instance' => array( 'type' => 'object', ), ), diff --git a/test/integration/full-content/server-registered.json b/test/integration/full-content/server-registered.json index 9d17c64f5d6ba5..89bcf700b43a62 100644 --- a/test/integration/full-content/server-registered.json +++ b/test/integration/full-content/server-registered.json @@ -1 +1 @@ -{"core\/archives":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/calendar":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"month":{"type":"integer"},"year":{"type":"integer"}}},"core\/categories":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showHierarchy":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-comments":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true}}},"core\/latest-posts":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"categories":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostContent":{"type":"boolean","default":false},"displayPostContentRadio":{"type":"string","default":"excerpt"},"excerptLength":{"type":"number","default":55},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}},"core\/legacy-widget":{"attributes":{"identifier":{"type":"string"},"instance":{"type":"object"},"isCallbackWidget":{"type":"boolean"}}},"core\/navigation-menu":{"category":"layout","attributes":{"automaticallyAdd":{"type":"boolean","default":false}}},"core\/rss":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"columns":{"type":"number","default":2},"blockLayout":{"type":"string","default":"list"},"feedURL":{"type":"string","default":""},"itemsToShow":{"type":"number","default":5},"displayExcerpt":{"type":"boolean","default":false},"displayAuthor":{"type":"boolean","default":false},"displayDate":{"type":"boolean","default":false},"excerptLength":{"type":"number","default":55}}},"core\/search":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"label":{"type":"string","default":"Search"},"placeholder":{"type":"string","default":""},"buttonText":{"type":"string","default":"Search"}}},"core\/shortcode":{"attributes":{"text":{"type":"string","source":"html"}}},"core\/social-link-amazon":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"amazon"}}},"core\/social-link-bandcamp":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"bandcamp"}}},"core\/social-link-behance":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"behance"}}},"core\/social-link-chain":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"chain"}}},"core\/social-link-codepen":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"codepen"}}},"core\/social-link-deviantart":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"deviantart"}}},"core\/social-link-dribbble":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"dribbble"}}},"core\/social-link-dropbox":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"dropbox"}}},"core\/social-link-etsy":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"etsy"}}},"core\/social-link-facebook":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"facebook"}}},"core\/social-link-feed":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"feed"}}},"core\/social-link-fivehundredpx":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"fivehundredpx"}}},"core\/social-link-flickr":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"flickr"}}},"core\/social-link-foursquare":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"foursquare"}}},"core\/social-link-goodreads":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"goodreads"}}},"core\/social-link-google":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"google"}}},"core\/social-link-github":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"github"}}},"core\/social-link-instagram":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"instagram"}}},"core\/social-link-lastfm":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"lastfm"}}},"core\/social-link-linkedin":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"linkedin"}}},"core\/social-link-mail":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"mail"}}},"core\/social-link-mastodon":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"mastodon"}}},"core\/social-link-meetup":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"meetup"}}},"core\/social-link-medium":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"medium"}}},"core\/social-link-pinterest":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"pinterest"}}},"core\/social-link-pocket":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"pocket"}}},"core\/social-link-reddit":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"reddit"}}},"core\/social-link-skype":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"skype"}}},"core\/social-link-snapchat":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"snapchat"}}},"core\/social-link-soundcloud":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"soundcloud"}}},"core\/social-link-spotify":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"spotify"}}},"core\/social-link-tumblr":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"tumblr"}}},"core\/social-link-twitch":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"twitch"}}},"core\/social-link-twitter":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"twitter"}}},"core\/social-link-vimeo":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"vimeo"}}},"core\/social-link-vk":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"vk"}}},"core\/social-link-wordpress":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"wordpress"}}},"core\/social-link-yelp":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"yelp"}}},"core\/social-link-youtube":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"youtube"}}},"core\/tag-cloud":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"taxonomy":{"type":"string","default":"post_tag"},"showTagCounts":{"type":"boolean","default":false}}}} \ No newline at end of file +{"core\/archives":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/calendar":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"month":{"type":"integer"},"year":{"type":"integer"}}},"core\/categories":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showHierarchy":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-comments":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true}}},"core\/latest-posts":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"categories":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostContent":{"type":"boolean","default":false},"displayPostContentRadio":{"type":"string","default":"excerpt"},"excerptLength":{"type":"number","default":55},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}},"core\/legacy-widget":{"attributes":{"identifier":{"type":"string"},"instance":{"type":"object"},"isReferenceWidget":{"type":"boolean"}}},"core\/navigation-menu":{"category":"layout","attributes":{"automaticallyAdd":{"type":"boolean","default":false}}},"core\/rss":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"columns":{"type":"number","default":2},"blockLayout":{"type":"string","default":"list"},"feedURL":{"type":"string","default":""},"itemsToShow":{"type":"number","default":5},"displayExcerpt":{"type":"boolean","default":false},"displayAuthor":{"type":"boolean","default":false},"displayDate":{"type":"boolean","default":false},"excerptLength":{"type":"number","default":55}}},"core\/search":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"label":{"type":"string","default":"Search"},"placeholder":{"type":"string","default":""},"buttonText":{"type":"string","default":"Search"}}},"core\/shortcode":{"attributes":{"text":{"type":"string","source":"html"}}},"core\/social-link-amazon":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"amazon"}}},"core\/social-link-bandcamp":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"bandcamp"}}},"core\/social-link-behance":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"behance"}}},"core\/social-link-chain":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"chain"}}},"core\/social-link-codepen":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"codepen"}}},"core\/social-link-deviantart":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"deviantart"}}},"core\/social-link-dribbble":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"dribbble"}}},"core\/social-link-dropbox":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"dropbox"}}},"core\/social-link-etsy":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"etsy"}}},"core\/social-link-facebook":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"facebook"}}},"core\/social-link-feed":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"feed"}}},"core\/social-link-fivehundredpx":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"fivehundredpx"}}},"core\/social-link-flickr":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"flickr"}}},"core\/social-link-foursquare":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"foursquare"}}},"core\/social-link-goodreads":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"goodreads"}}},"core\/social-link-google":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"google"}}},"core\/social-link-github":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"github"}}},"core\/social-link-instagram":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"instagram"}}},"core\/social-link-lastfm":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"lastfm"}}},"core\/social-link-linkedin":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"linkedin"}}},"core\/social-link-mail":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"mail"}}},"core\/social-link-mastodon":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"mastodon"}}},"core\/social-link-meetup":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"meetup"}}},"core\/social-link-medium":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"medium"}}},"core\/social-link-pinterest":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"pinterest"}}},"core\/social-link-pocket":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"pocket"}}},"core\/social-link-reddit":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"reddit"}}},"core\/social-link-skype":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"skype"}}},"core\/social-link-snapchat":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"snapchat"}}},"core\/social-link-soundcloud":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"soundcloud"}}},"core\/social-link-spotify":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"spotify"}}},"core\/social-link-tumblr":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"tumblr"}}},"core\/social-link-twitch":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"twitch"}}},"core\/social-link-twitter":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"twitter"}}},"core\/social-link-vimeo":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"vimeo"}}},"core\/social-link-vk":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"vk"}}},"core\/social-link-wordpress":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"wordpress"}}},"core\/social-link-yelp":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"yelp"}}},"core\/social-link-youtube":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"youtube"}}},"core\/tag-cloud":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"taxonomy":{"type":"string","default":"post_tag"},"showTagCounts":{"type":"boolean","default":false}}}} From e1e48acf68bbefecc2bb76edd625db6cf287c2d9 Mon Sep 17 00:00:00 2001 From: Jorge Date: Mon, 11 Nov 2019 15:23:39 +0000 Subject: [PATCH 4/4] Minor code "style" fixes --- ...-experimental-wp-widget-blocks-manager.php | 6 ++--- lib/class-wp-rest-widget-forms.php | 2 +- .../src/legacy-widget/edit/dom-manager.js | 21 ++++++++------- .../src/legacy-widget/edit/handler.js | 26 +++++++++---------- .../src/legacy-widget/edit/index.js | 17 ++++++------ .../block-library/src/legacy-widget/index.php | 20 +++++++------- 6 files changed, 46 insertions(+), 46 deletions(-) diff --git a/lib/class-experimental-wp-widget-blocks-manager.php b/lib/class-experimental-wp-widget-blocks-manager.php index 8f124305bf6099..c915807bd769bb 100644 --- a/lib/class-experimental-wp-widget-blocks-manager.php +++ b/lib/class-experimental-wp-widget-blocks-manager.php @@ -126,8 +126,8 @@ public static function get_sidebar_as_blocks( $sidebar_id ) { $new_block = array( 'blockName' => 'core/legacy-widget', 'attrs' => array( - 'widgetId' => $item, - 'instance' => self::get_sidebar_widget_instance( $wp_registered_sidebars[ $sidebar_id ], $item ), + 'id' => $item, + 'instance' => self::get_sidebar_widget_instance( $wp_registered_sidebars[ $sidebar_id ], $item ), ), 'innerHTML' => '', ); @@ -138,7 +138,7 @@ public static function get_sidebar_as_blocks( $sidebar_id ) { $new_block['attrs']['idBase'] = $object->id_base; } if ( is_int( $number ) ) { - $new_block['attrs']['widgetNumber'] = $number; + $new_block['attrs']['number'] = $number; } $blocks[] = $new_block; } diff --git a/lib/class-wp-rest-widget-forms.php b/lib/class-wp-rest-widget-forms.php index ed59f6f8ddc739..c2f7299b557e06 100644 --- a/lib/class-wp-rest-widget-forms.php +++ b/lib/class-wp-rest-widget-forms.php @@ -96,7 +96,7 @@ public function compute_new_widget_permissions_check() { * @return boolean| True if the widget being referenced exists and false otherwise. */ private function is_valid_widget( $widget_class ) { - global $wp_widget_factory, $wp_registered_widgets; + global $wp_widget_factory; if ( ! $widget_class ) { return false; } diff --git a/packages/block-library/src/legacy-widget/edit/dom-manager.js b/packages/block-library/src/legacy-widget/edit/dom-manager.js index 1d6586f24c2779..ccabc4408f0666 100644 --- a/packages/block-library/src/legacy-widget/edit/dom-manager.js +++ b/packages/block-library/src/legacy-widget/edit/dom-manager.js @@ -36,8 +36,8 @@ class LegacyWidgetEditDomManager extends Component { this.idBaseInputRef.current.value = nextProps.idBase; shouldTriggerWidgetUpdateEvent = true; } - if ( nextProps.widgetNumber !== this.props.widgetNumber && this.widgetNumberInputRef.current ) { - this.widgetNumberInputRef.current.value = nextProps.widgetNumber; + if ( nextProps.number !== this.props.number && this.widgetNumberInputRef.current ) { + this.widgetNumberInputRef.current.value = nextProps.number; } if ( nextProps.form !== this.props.form && this.widgetContentRef.current ) { const widgetContent = this.widgetContentRef.current; @@ -54,7 +54,7 @@ class LegacyWidgetEditDomManager extends Component { } render() { - const { id, idBase, widgetNumber, form, isReferenceWidget } = this.props; + const { id, idBase, number, form, isReferenceWidget } = this.props; return (
@@ -79,12 +79,15 @@ class LegacyWidgetEditDomManager extends Component { className="widget-content" dangerouslySetInnerHTML={ { __html: form } } /> - { isReferenceWidget && ( <> - - - - - ) } + { isReferenceWidget && ( + <> + + + + + + + ) }
diff --git a/packages/block-library/src/legacy-widget/edit/handler.js b/packages/block-library/src/legacy-widget/edit/handler.js index 97cb024ffb45c6..96983ffac1bf29 100644 --- a/packages/block-library/src/legacy-widget/edit/handler.js +++ b/packages/block-library/src/legacy-widget/edit/handler.js @@ -59,7 +59,7 @@ class LegacyWidgetEditHandler extends Component { } render() { - const { instanceId, widgetId, widgetNumber, idBase, instance, isSelected, widgetName } = this.props; + const { instanceId, id, number, idBase, instance, isSelected, widgetName } = this.props; const { form } = this.state; if ( ! form ) { @@ -96,16 +96,15 @@ class LegacyWidgetEditHandler extends Component { > { this.widgetEditDomManagerRef = ref; } } onInstanceChange={ this.onInstanceChange } - widgetNumber={ widgetNumber ? widgetNumber : instanceId * -1 } - id={ widgetId } + number={ number ? number : instanceId * -1 } + id={ id } idBase={ idBase } form={ form } - widgetId={ widgetId } />
@@ -120,8 +119,8 @@ class LegacyWidgetEditHandler extends Component { } onInstanceChange( instanceChanges ) { - const { widgetId } = this.props; - if ( widgetId ) { + const { id } = this.props; + if ( id ) { // For reference widgets there is no need to query an endpoint, // the widget is already saved with ajax. this.props.onInstanceChange( instanceChanges, true ); @@ -134,29 +133,28 @@ class LegacyWidgetEditHandler extends Component { } requestWidgetUpdater( instanceChanges, callback ) { - const { widgetId, idBase, instance, widgetClass } = this.props; + const { id, idBase, instance, widgetClass } = this.props; const { isStillMounted } = this; - if ( ! widgetId && ! widgetClass ) { + if ( ! id && ! widgetClass ) { return; } // If we are in the presence of a reference widget, do a save ajax request // with empty changes so we retrieve the widget edit form. - if ( widgetId ) { + if ( id ) { const httpRequest = new XMLHttpRequest(); const formData = new FormData(); formData.append( 'action', 'save-widget' ); formData.append( 'id_base', idBase ); - formData.append( 'widget-id', widgetId ); + formData.append( 'widget-id', id ); formData.append( 'widget-width', '250' ); formData.append( 'widget-height', '200' ); formData.append( 'savewidgets', this.widgetNonce ); httpRequest.open( 'POST', window.ajaxurl ); - const self = this; - httpRequest.addEventListener( 'load', function() { + httpRequest.addEventListener( 'load', () => { if ( isStillMounted ) { const form = httpRequest.responseText; - self.setState( { form } ); + this.setState( { form } ); if ( callback ) { callback( { form } ); } diff --git a/packages/block-library/src/legacy-widget/edit/index.js b/packages/block-library/src/legacy-widget/edit/index.js index e2c960080c011b..3387640fefe872 100644 --- a/packages/block-library/src/legacy-widget/edit/index.js +++ b/packages/block-library/src/legacy-widget/edit/index.js @@ -48,21 +48,20 @@ class LegacyWidgetEdit extends Component { setAttributes, } = this.props; const { isPreview, hasEditForm } = this.state; - const { widgetId, widgetClass } = attributes; + const { id, widgetClass } = attributes; const widgetObject = - ( widgetId && availableLegacyWidgets[ widgetId ] ) || + ( id && availableLegacyWidgets[ id ] ) || ( widgetClass && availableLegacyWidgets[ widgetClass ] ); - if ( ! widgetId && ! widgetClass ) { + if ( ! id && ! widgetClass ) { return ( { const { isReferenceWidget } = availableLegacyWidgets[ newWidget ]; setAttributes( { instance: {}, - widgetId: isReferenceWidget ? newWidget : undefined, + id: isReferenceWidget ? newWidget : undefined, widgetClass: isReferenceWidget ? undefined : newWidget, } ); } } @@ -120,9 +119,9 @@ class LegacyWidgetEdit extends Component { array( - 'widgetClass' => array( + 'widgetClass' => array( 'type' => 'string', ), - 'widgetId' => array( + 'id' => array( 'type' => 'string', ), - 'idBase' => array( + 'idBase' => array( 'type' => 'string', ), - 'widgetNumber' => array( + 'number' => array( 'type' => 'number', ), - 'instance' => array( + 'instance' => array( 'type' => 'object', ), ),