First pass at using the new sidebars and widget endpoints. (#26086)

* Draft batch-processing module

* committing/rudimentary API_FETCH integration

* Make batch processing functional!

* Roll back integration changes

* Cleanup package.json

* Update package-lock.json

* Update terminology

* yield from commitTransaction

* Correct yield from

* Move the comment where it belongs

* First pass at enqueueItemAndWaitForResults.

* First pass at using the new sidebars and widget endpoints.

* Add test for saving multiple widgets in a row

* Generate better error message when creating fails

* Add basic batch integration.

Works off of #26205.

* Allow mixing HTTP methods in a batch.

* Fix disappearing data, add basic error handling.

We need to get the full list of widget ids from the client, we can't use the
returned widget ids from the batch because not all widgets will be dirty.

Also implements basic error handling for when the batch fails. A snackbar is
added with the names of the widgets that failed to save. We also now propagate
a dummy error to the apiFetch callers for the requests that didn't have a
validation error, but need something to short circuit their handling.

* yield from the widget area saving.

* Move batch-processing into edit-widgets package

Co-authored-by: Adam Zieliński <[email protected]>

lib/class-wp-rest-batch-controller.php

@@ -25,7 +25,7 @@ public function register_routes() {
 			array(
 				'callback'            => array( $this, 'serve_batch_request' ),
 				'permission_callback' => '__return_true',
-				'methods'             => array( 'POST', 'PUT', 'PATCH', 'DELETE' ),
+				'methods'             => 'POST',
 				'args'                => array(
 					'validation' => array(
 						'type'    => 'string',
@@ -39,6 +39,12 @@ public function register_routes() {
 						'items'    => array(
 							'type'       => 'object',
 							'properties' => array(
+								'method'  => array(
+									'type'     => 'string',
+									'enum'     => array( 'POST', 'PUT', 'PATCH', 'DELETE' ),
+									'default'  => 'POST',
+									'required' => true,
+								),
 								'path'    => array(
 									'type'     => 'string',
 									'required' => true,
@@ -86,7 +92,7 @@ public function serve_batch_request( WP_REST_Request $batch_request ) {
 				continue;
 			}
 
-			$single_request = new WP_REST_Request( $batch_request->get_method(), $parsed_url['path'] );
+			$single_request = new WP_REST_Request( $args['method'], $parsed_url['path'] );
 
 			if ( ! empty( $parsed_url['query'] ) ) {
 				$query_args = null; // Satisfy linter.

lib/class-wp-rest-sidebars-controller.php

@@ -306,8 +306,13 @@ public function update_item( $request ) {
 
 			foreach ( $sidebars as $sidebar_id => $widgets ) {
 				foreach ( $widgets as $i => $widget_id ) {
+					// This automatically removes the passed widget ids from any other sidebars in use.
 					if ( $sidebar_id !== $request['id'] && in_array( $widget_id, $request['widgets'], true ) ) {
 						unset( $sidebars[ $sidebar_id ][ $i ] );
+					}
+
+					// This automatically removes omitted widget ids to the inactive sidebar.
+					if ( $sidebar_id === $request['id'] && ! in_array( $widget_id, $request['widgets'], true ) ) {
 						$sidebars['wp_inactive_widgets'][] = $widget_id;
 					}
 				}

lib/class-wp-rest-widgets-controller.php

@@ -181,6 +181,11 @@ public function create_item( $request ) {
 		$request['context'] = 'edit';
 
 		$response = $this->prepare_item_for_response( compact( 'sidebar_id', 'widget_id' ), $request );
+
+		if ( is_wp_error( $response ) ) {
+			return $response;
+		}
+
 		$response->set_status( 201 );
 
 		return $response;
@@ -387,20 +392,14 @@ protected function save_widget( $request ) {
 			// Just because we saved new widget doesn't mean it was added to $wp_registered_widgets.
 			// Let's make sure it's there so that it's included in the response.
 			if ( ! isset( $wp_registered_widgets[ $input_widget['id'] ] ) || 1 === $number ) {
-				$first_widget_id = substr( $input_widget['id'], 0, strrpos( $input_widget['id'], '-' ) ) . '-1';
-
-				if ( isset( $wp_registered_widgets[ $first_widget_id ] ) ) {
-					$wp_registered_widgets[ $input_widget['id'] ] = $wp_registered_widgets[ $first_widget_id ];
-
-					$widget_class = get_class( $update_control['callback'][0] );
-					$new_object   = new $widget_class(
-						$input_widget['id_base'],
-						$input_widget['name'],
-						$input_widget['settings']
-					);
-					$new_object->_register();
-					$wp_registered_widgets[ $input_widget['id'] ]['callback'][0] = $new_object;
-				}
+				$widget_class = get_class( $update_control['callback'][0] );
+				$new_object   = new $widget_class(
+					$input_widget['id_base'],
+					$input_widget['name'],
+					$input_widget['settings']
+				);
+				$new_object->_set( $number );
+				$new_object->_register();
 			}
 		} else {
 			$registered_widget_id = null;
@@ -550,8 +549,8 @@ public function prepare_item_for_response( $item, $request ) {
 		) {
 			$control   = $wp_registered_widget_controls[ $widget_id ];
 			$arguments = array();
-			if ( ! empty( $widget['number'] ) ) {
-				$arguments[0] = array( 'number' => $widget['number'] );
+			if ( ! empty( $prepared['number'] ) ) {
+				$arguments[0] = array( 'number' => $prepared['number'] );
 			}
 			ob_start();
 			call_user_func_array( $control['callback'], $arguments );

lib/widgets-page.php

@@ -85,7 +85,8 @@ function gutenberg_widgets_init( $hook ) {
 
 	$preload_paths = array(
 		array( '/wp/v2/media', 'OPTIONS' ),
-		'/__experimental/sidebars?context=edit&per_page=-1',
+		'/wp/v2/sidebars?context=edit&per_page=-1',
+		'/wp/v2/widgets?context=edit&per_page=-1',
 	);
 	$preload_data  = array_reduce(
 		$preload_paths,

packages/batch-processing/package.json

@@ -27,8 +27,9 @@
 		"!((src|build|build-module)/(components|utils)/**)"
 	],
 	"dependencies": {
-	  "@wordpress/data": "file:../data",
-	  "uuid": "^8.3.1"
+		"@wordpress/data": "file:../data",
+		"lodash": "^4.17.20",
+		"uuid": "^8.3.1"
 	},
 	"publishConfig": {
 		"access": "public"

packages/core-data/src/entities.js

@@ -57,11 +57,19 @@ export const defaultEntities = [
 	{
 		name: 'sidebar',
 		kind: 'root',
-		baseURL: '/__experimental/sidebars',
+		baseURL: '/wp/v2/sidebars',
 		plural: 'sidebars',
 		transientEdits: { blocks: true },
 		label: __( 'Widget areas' ),
 	},
+	{
+		name: 'widget',
+		kind: 'root',
+		baseURL: '/wp/v2/widgets',
+		plural: 'widgets',
+		transientEdits: { blocks: true },
+		label: __( 'Widgets' ),
+	},
 	{
 		label: __( 'User' ),
 		name: 'user',

packages/edit-widgets/package.json

@@ -29,6 +29,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.11.2",
 		"@wordpress/api-fetch": "file:../api-fetch",
+		"@wordpress/batch-processing": "file:../batch-processing",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/block-library": "file:../block-library",
 		"@wordpress/blocks": "file:../blocks",
@@ -53,7 +54,8 @@
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.19",
 		"reakit": "^1.1.0",
-		"rememo": "^3.0.0"
+		"rememo": "^3.0.0",
+		"uuid": "^8.3.1"
 	},
 	"publishConfig": {
 		"access": "public"

packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js

@@ -41,6 +41,7 @@ export default function WidgetAreasBlockEditorProvider( {
 				true
 			),
 			widgetAreas: select( 'core/edit-widgets' ).getWidgetAreas(),
+			widgets: select( 'core/edit-widgets' ).getWidgets(),
 			reusableBlocks: select( 'core' ).getEntityRecords(
 				'postType',
 				'wp_block'