First batch of package updates for WordPress 5.8 beta 3

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

@@ -281,10 +281,14 @@ public function delete_item_permissions_check( $request ) { // phpcs:ignore Vari
 	 *
 	 * @since 5.6.0
 	 *
+	 * @global array $wp_registered_widget_updates The registered widget update functions.
+	 *
 	 * @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 delete_item( $request ) {
+		global $wp_registered_widget_updates;
+
 		$widget_id  = $request['id'];
 		$sidebar_id = wp_find_widgets_sidebar( $widget_id );
 
@@ -299,17 +303,46 @@ public function delete_item( $request ) {
 		$request['context'] = 'edit';
 
 		if ( $request['force'] ) {
-			$prepared = $this->prepare_item_for_response( compact( 'widget_id', 'sidebar_id' ), $request );
+			$response = $this->prepare_item_for_response( compact( 'widget_id', 'sidebar_id' ), $request );
+
+			$parsed_id = wp_parse_widget_id( $widget_id );
+			$id_base   = $parsed_id['id_base'];
+
+			$original_post    = $_POST;
+			$original_request = $_REQUEST;
+
+			$_POST    = array(
+				'sidebar'         => $sidebar_id,
+				"widget-$id_base" => array(),
+				'the-widget-id'   => $widget_id,
+				'delete_widget'   => '1',
+			);
+			$_REQUEST = $_POST;
+
+			$callback = $wp_registered_widget_updates[ $id_base ]['callback'];
+			$params   = $wp_registered_widget_updates[ $id_base ]['params'];
+
+			if ( is_callable( $callback ) ) {
+				ob_start();
+				call_user_func_array( $callback, $params );
+				ob_end_clean();
+			}
+
+			$_POST    = $original_post;
+			$_REQUEST = $original_request;
+
 			wp_assign_widget_to_sidebar( $widget_id, '' );
-			$prepared->set_data(
+
+			$response->set_data(
 				array(
 					'deleted'  => true,
-					'previous' => $prepared->get_data(),
+					'previous' => $response->get_data(),
 				)
 			);
 		} else {
 			wp_assign_widget_to_sidebar( $widget_id, 'wp_inactive_widgets' );
-			$prepared = $this->prepare_item_for_response(
+
+			$response = $this->prepare_item_for_response(
 				array(
 					'sidebar_id' => 'wp_inactive_widgets',
 					'widget_id'  => $widget_id,
@@ -318,7 +351,7 @@ public function delete_item( $request ) {
 			);
 		}
 
-		return $prepared;
+		return $response;
 	}
 
 	/**

lib/class-wp-theme-json-gutenberg.php

@@ -714,11 +714,11 @@ private static function compute_preset_classes( $settings, $selector ) {
 			foreach ( $preset['classes'] as $class ) {
 				foreach ( $preset_by_slug as $slug => $value ) {
 					$stylesheet .= self::to_ruleset(
-						self::append_to_selector( $selector, '.has-' . $slug . '-' . $class['class_suffix'] ),
+						self::append_to_selector( $selector, '.has-' . gutenberg_experimental_to_kebab_case( $slug ) . '-' . $class['class_suffix'] ),
 						array(
 							array(
 								'name'  => $class['property_name'],
-								'value' => 'var(--wp--preset--' . $preset['css_var_infix'] . "--$slug) !important",
+								'value' => 'var(--wp--preset--' . $preset['css_var_infix'] . '--' . gutenberg_experimental_to_kebab_case( $slug ) . ') !important',
 							),
 						)
 					);
@@ -752,7 +752,7 @@ private static function compute_preset_vars( $settings ) {
 			$preset_by_slug    = self::get_merged_preset_by_slug( $preset_per_origin, $preset['value_key'] );
 			foreach ( $preset_by_slug as $slug => $value ) {
 				$declarations[] = array(
-					'name'  => '--wp--preset--' . $preset['css_var_infix'] . '--' . $slug,
+					'name'  => '--wp--preset--' . $preset['css_var_infix'] . '--' . gutenberg_experimental_to_kebab_case( $slug ),
 					'value' => $value,
 				);
 			}

lib/full-site-editing/block-templates.php

@@ -333,7 +333,7 @@ function gutenberg_get_block_templates( $query = array(), $template_type = 'wp_t
 
 	$template_query = new WP_Query( $wp_query_args );
 	$query_result   = array();
-	foreach ( $template_query->get_posts() as $post ) {
+	foreach ( $template_query->posts as $post ) {
 		$template = _gutenberg_build_template_result_from_post( $post );
 
 		if ( ! is_wp_error( $template ) ) {
@@ -392,7 +392,7 @@ function gutenberg_get_block_template( $id, $template_type = 'wp_template' ) {
 		),
 	);
 	$template_query       = new WP_Query( $wp_query_args );
-	$posts                = $template_query->get_posts();
+	$posts                = $template_query->posts;
 
 	if ( count( $posts ) > 0 ) {
 		$template = _gutenberg_build_template_result_from_post( $posts[0] );
@@ -477,7 +477,7 @@ function gutenberg_filter_wp_template_unique_post_slug( $override_slug, $slug, $
 		),
 	);
 	$check_query      = new WP_Query( $check_query_args );
-	$posts            = $check_query->get_posts();
+	$posts            = $check_query->posts;
 
 	if ( count( $posts ) > 0 ) {
 		$suffix = 2;
@@ -487,7 +487,7 @@ function gutenberg_filter_wp_template_unique_post_slug( $override_slug, $slug, $
 			$query_args['post_name__in'] = array( $alt_post_name );
 			$query                       = new WP_Query( $query_args );
 			$suffix++;
-		} while ( count( $query->get_posts() ) > 0 );
+		} while ( count( $query->posts ) > 0 );
 		$override_slug = $alt_post_name;
 	}
 

lib/init.php

@@ -188,4 +188,14 @@ function register_site_icon_url( $response ) {
 add_filter( 'rest_index', 'register_site_icon_url' );
 
 add_theme_support( 'widgets-block-editor' );
-add_theme_support( 'block-templates' );
+
+/**
+ * Enable the block templates (editor mode) for themes with theme.json.
+ */
+function gutenberg_enable_block_templates() {
+	if ( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
+		add_theme_support( 'block-templates' );
+	}
+}
+
+add_action( 'setup_theme', 'gutenberg_enable_block_templates' );

lib/utils.php

@@ -63,3 +63,77 @@ function gutenberg_experimental_set( &$array, $path, $value = null ) {
 	}
 	$array[ $path[ $i ] ] = $value;
 }
+
+/**
+ * This function is trying to replicate what
+ * lodash's kebabCase (JS library) does in the client.
+ *
+ * The reason we need this function is that we do some processing
+ * in both the client and the server (e.g.: we generate
+ * preset classes from preset slugs) that needs to
+ * create the same output.
+ *
+ * We can't remove or update the client's library due to backward compatibility
+ * (some of the output of lodash's kebabCaseare saved in the post content).
+ * We have to make the server behave like the client.
+ *
+ * @link https://github.com/lodash/lodash/blob/4.17/dist/lodash.js#L14369
+ * @link https://github.com/lodash/lodash/blob/4.17/dist/lodash.js#L278
+ * @link https://github.com/lodash-php/lodash-php/blob/master/src/String/kebabCase.php
+ * @link https://github.com/lodash-php/lodash-php/blob/master/src/internal/unicodeWords.php
+ *
+ * @param string $string The string to kebab-case.
+ *
+ * @return string kebab-cased-string.
+ */
+function gutenberg_experimental_to_kebab_case( $string ) {
+	//phpcs:disable WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase
+	// ignore the camelCase names for variables so the names are the same as lodash
+	// so comparing and porting new changes is easier.
+
+	/*
+	 * Some notable things we've removed compared to the lodash version are:
+	 *
+	 * - non-alphanumeric characters: rsAstralRange, rsEmoji, etc
+	 * - the groups that processed the apostrophe, as it's removed before passing the string to preg_match: rsApos, rsOptContrLower, and rsOptContrUpper
+	 *
+	 */
+
+	/** Used to compose unicode character classes. */
+	$rsLowerRange       = 'a-z\\xdf-\\xf6\\xf8-\\xff';
+	$rsNonCharRange     = '\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf';
+	$rsPunctuationRange = '\\x{2000}-\\x{206f}';
+	$rsSpaceRange       = ' \\t\\x0b\\f\\xa0\\x{feff}\\n\\r\\x{2028}\\x{2029}\\x{1680}\\x{180e}\\x{2000}\\x{2001}\\x{2002}\\x{2003}\\x{2004}\\x{2005}\\x{2006}\\x{2007}\\x{2008}\\x{2009}\\x{200a}\\x{202f}\\x{205f}\\x{3000}';
+	$rsUpperRange       = 'A-Z\\xc0-\\xd6\\xd8-\\xde';
+	$rsBreakRange       = $rsNonCharRange . $rsPunctuationRange . $rsSpaceRange;
+
+	/** Used to compose unicode capture groups. */
+	$rsBreak  = '[' . $rsBreakRange . ']';
+	$rsDigits = '\\d+'; // The last lodash version in GitHub uses a single digit here and expands it when in use.
+	$rsLower  = '[' . $rsLowerRange . ']';
+	$rsMisc   = '[^' . $rsBreakRange . $rsDigits . $rsLowerRange . $rsUpperRange . ']';
+	$rsUpper  = '[' . $rsUpperRange . ']';
+
+	/** Used to compose unicode regexes. */
+	$rsMiscLower = '(?:' . $rsLower . '|' . $rsMisc . ')';
+	$rsMiscUpper = '(?:' . $rsUpper . '|' . $rsMisc . ')';
+	$rsOrdLower  = '\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])';
+	$rsOrdUpper  = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])';
+
+	$regexp = '/' . implode(
+		'|',
+		array(
+			$rsUpper . '?' . $rsLower . '+' . '(?=' . implode( '|', array( $rsBreak, $rsUpper, '$' ) ) . ')',
+			$rsMiscUpper . '+' . '(?=' . implode( '|', array( $rsBreak, $rsUpper . $rsMiscLower, '$' ) ) . ')',
+			$rsUpper . '?' . $rsMiscLower . '+',
+			$rsUpper . '+',
+			$rsOrdUpper,
+			$rsOrdLower,
+			$rsDigits,
+		)
+	) . '/u';
+
+	preg_match_all( $regexp, str_replace( "'", '', $string ), $matches );
+	return strtolower( implode( '-', $matches[0] ) );
+	//phpcs:enable WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase
+}

lib/widgets-page.php

@@ -20,6 +20,50 @@ class="blocks-widgets-container"
 	<?php
 }
 
+/**
+ * Creates an array of theme styles to load into the block editor.
+ *
+ * @since 5.8.0
+ *
+ * @global array $editor_styles
+ *
+ * @return array
+ */
+function gutenberg_get_block_editor_theme_styles() {
+	global $editor_styles;
+
+	$styles = array(
+		array(
+			'css'            => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }',
+			'__unstableType' => 'core',
+		),
+	);
+	if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) {
+		foreach ( $editor_styles as $style ) {
+			if ( preg_match( '~^(https?:)?//~', $style ) ) {
+				$response = wp_remote_get( $style );
+				if ( ! is_wp_error( $response ) ) {
+					$styles[] = array(
+						'css'            => wp_remote_retrieve_body( $response ),
+						'__unstableType' => 'theme',
+					);
+				}
+			} else {
+				$file = get_theme_file_path( $style );
+				if ( is_file( $file ) ) {
+					$styles[] = array(
+						'css'            => file_get_contents( $file ),
+						'baseURL'        => get_theme_file_uri( $style ),
+						'__unstableType' => 'theme',
+					);
+				}
+			}
+		}
+	}
+
+	return $styles;
+}
+
 /**
  * Initialize the Gutenberg widgets page.
  *
@@ -37,7 +81,8 @@ function gutenberg_widgets_init( $hook ) {
 	$widgets_editor_context = new WP_Block_Editor_Context();
 	$settings               = array_merge(
 		gutenberg_get_default_block_editor_settings(),
-		gutenberg_get_legacy_widget_settings()
+		gutenberg_get_legacy_widget_settings(),
+		array( 'styles' => gutenberg_get_block_editor_theme_styles() )
 	);
 
 	// This purposefully does not rely on apply_filters( 'block_editor_settings', $settings, null );

packages/block-editor/README.md

@@ -382,7 +382,7 @@ _Parameters_
 
 _Returns_
 
--   `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug and ending with '-font-size'.
+-   `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
 
 <a name="getFontSizeObjectByValue" href="#getFontSizeObjectByValue">#</a> **getFontSizeObjectByValue**
 

packages/block-editor/src/components/block-toolbar/style.scss

@@ -13,7 +13,6 @@
 	transition: border-color 0.1s linear, box-shadow 0.1s linear;
 	@include reduce-motion("transition");
 
-	// Allow overflow on desktop.
 	@include break-small() {
 		overflow: inherit;
 	}

packages/block-editor/src/components/colors/test/utils.js

@@ -109,10 +109,22 @@ describe( 'color utils', () => {
 			).toBeUndefined();
 		} );
 
-		it( 'should return a class name with the color slug without spaces', () => {
+		it( 'should return a class name with the color slug in kebab case', () => {
 			expect(
 				getColorClassName( 'background', 'Light   Purple veryDark' )
-			).toBe( 'has-Light-Purple-veryDark-background' );
+			).toBe( 'has-light-purple-very-dark-background' );
+		} );
+
+		it( 'should return the correct class name if the color slug is not a string', () => {
+			expect( getColorClassName( 'background', 123456 ) ).toBe(
+				'has-123456-background'
+			);
+		} );
+
+		it( 'should return the correct class name if the color slug contains special characters', () => {
+			expect( getColorClassName( 'background', '#abcdef' ) ).toBe(
+				'has-abcdef-background'
+			);
 		} );
 	} );
 } );

packages/block-editor/src/components/colors/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, map } from 'lodash';
+import { find, kebabCase, map } from 'lodash';
 import tinycolor from 'tinycolor2';
 
 /**
@@ -60,14 +60,7 @@ export function getColorClassName( colorContextName, colorSlug ) {
 		return undefined;
 	}
 
-	// We don't want to use kebabCase from lodash here
-	// see https://github.com/WordPress/gutenberg/issues/32347
-	// However, we need to make sure the generated class
-	// doesn't contain spaces.
-	return `has-${ colorSlug.replace(
-		/\s+/g,
-		'-'
-	) }-${ colorContextName.replace( /\s+/g, '-' ) }`;
+	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
 }
 
 /**

packages/block-editor/src/components/editor-styles/index.js

@@ -27,9 +27,27 @@ function useDarkThemeBodyClassName( styles ) {
 			const canvas = ownerDocument.querySelector(
 				EDITOR_STYLES_SELECTOR
 			);
-			const backgroundColor = defaultView
-				.getComputedStyle( canvas, null )
-				.getPropertyValue( 'background-color' );
+
+			let backgroundColor;
+
+			if ( ! canvas ) {
+				// The real .editor-styles-wrapper element might not exist in the
+				// DOM, so calculate the background color by creating a fake
+				// wrapper.
+				const tempCanvas = ownerDocument.createElement( 'div' );
+				tempCanvas.classList.add( EDITOR_STYLES_SELECTOR );
+				body.appendChild( tempCanvas );
+
+				backgroundColor = defaultView
+					.getComputedStyle( tempCanvas, null )
+					.getPropertyValue( 'background-color' );
+
+				body.removeChild( tempCanvas );
+			} else {
+				backgroundColor = defaultView
+					.getComputedStyle( canvas, null )
+					.getPropertyValue( 'background-color' );
+			}
 
 			// If background is transparent, it should be treated as light color.
 			if (