Block Editor: Update the packages to match Gutenberg 10.7.0

package.json

@@ -26,9 +26,9 @@
 	"devDependencies": {
 		"@wordpress/custom-templated-path-webpack-plugin": "2.0.4",
 		"@wordpress/dependency-extraction-webpack-plugin": "3.1.3",
-		"@wordpress/e2e-test-utils": "5.1.4",
+		"@wordpress/e2e-test-utils": "5.2.0",
 		"@wordpress/library-export-default-webpack-plugin": "2.0.4",
-		"@wordpress/scripts": "16.0.0",
+		"@wordpress/scripts": "16.1.0",
 		"autoprefixer": "^9.8.6",
 		"chalk": "4.1.0",
 		"check-node-version": "4.1.0",
@@ -77,55 +77,55 @@
 	},
 	"dependencies": {
 		"@babel/polyfill": "7.10.1",
-		"@wordpress/a11y": "3.0.0",
-		"@wordpress/annotations": "2.0.0",
-		"@wordpress/api-fetch": "5.0.0",
-		"@wordpress/autop": "3.0.0",
-		"@wordpress/blob": "3.0.0",
-		"@wordpress/block-directory": "2.0.0",
-		"@wordpress/block-editor": "6.0.0",
-		"@wordpress/block-library": "3.0.0",
-		"@wordpress/block-serialization-default-parser": "4.0.0",
-		"@wordpress/blocks": "9.0.0",
-		"@wordpress/components": "14.0.0",
-		"@wordpress/compose": "4.0.0",
-		"@wordpress/core-data": "3.0.0",
-		"@wordpress/data": "5.0.0",
-		"@wordpress/data-controls": "2.0.0",
-		"@wordpress/date": "4.0.0",
-		"@wordpress/deprecated": "3.0.0",
-		"@wordpress/dom": "3.0.0",
-		"@wordpress/dom-ready": "3.0.0",
-		"@wordpress/edit-post": "4.0.0",
-		"@wordpress/editor": "10.0.0",
-		"@wordpress/element": "3.0.0",
-		"@wordpress/escape-html": "2.0.0",
-		"@wordpress/format-library": "2.0.0",
-		"@wordpress/hooks": "3.0.0",
-		"@wordpress/html-entities": "3.0.0",
-		"@wordpress/i18n": "4.0.0",
-		"@wordpress/icons": "3.0.0",
-		"@wordpress/interface": "3.0.0",
-		"@wordpress/is-shallow-equal": "4.0.0",
-		"@wordpress/keyboard-shortcuts": "2.0.0",
-		"@wordpress/keycodes": "3.0.0",
-		"@wordpress/list-reusable-blocks": "2.0.0",
-		"@wordpress/media-utils": "2.0.0",
-		"@wordpress/notices": "3.0.0",
-		"@wordpress/nux": "4.0.0",
-		"@wordpress/plugins": "3.0.0",
-		"@wordpress/primitives": "2.0.0",
-		"@wordpress/priority-queue": "2.0.0",
-		"@wordpress/redux-routine": "4.0.0",
-		"@wordpress/reusable-blocks": "2.0.0",
-		"@wordpress/rich-text": "4.0.0",
-		"@wordpress/server-side-render": "2.0.0",
-		"@wordpress/shortcode": "3.0.0",
-		"@wordpress/token-list": "2.0.0",
-		"@wordpress/url": "3.0.0",
-		"@wordpress/viewport": "3.0.0",
-		"@wordpress/warning": "2.0.0",
-		"@wordpress/wordcount": "3.0.0",
+		"@wordpress/a11y": "3.1.0",
+		"@wordpress/annotations": "2.1.0",
+		"@wordpress/api-fetch": "5.1.0",
+		"@wordpress/autop": "3.1.0",
+		"@wordpress/blob": "3.1.0",
+		"@wordpress/block-directory": "2.1.0",
+		"@wordpress/block-editor": "6.1.0",
+		"@wordpress/block-library": "3.1.0",
+		"@wordpress/block-serialization-default-parser": "4.1.0",
+		"@wordpress/blocks": "9.1.0",
+		"@wordpress/components": "14.1.0",
+		"@wordpress/compose": "4.1.0",
+		"@wordpress/core-data": "3.1.0",
+		"@wordpress/data": "5.1.0",
+		"@wordpress/data-controls": "2.1.0",
+		"@wordpress/date": "4.1.0",
+		"@wordpress/deprecated": "3.1.0",
+		"@wordpress/dom": "3.1.0",
+		"@wordpress/dom-ready": "3.1.0",
+		"@wordpress/edit-post": "4.1.0",
+		"@wordpress/editor": "10.1.0",
+		"@wordpress/element": "3.1.0",
+		"@wordpress/escape-html": "2.1.0",
+		"@wordpress/format-library": "2.1.0",
+		"@wordpress/hooks": "3.1.0",
+		"@wordpress/html-entities": "3.1.0",
+		"@wordpress/i18n": "4.1.0",
+		"@wordpress/icons": "4.0.0",
+		"@wordpress/interface": "3.1.0",
+		"@wordpress/is-shallow-equal": "4.1.0",
+		"@wordpress/keyboard-shortcuts": "2.1.0",
+		"@wordpress/keycodes": "3.1.0",
+		"@wordpress/list-reusable-blocks": "2.1.0",
+		"@wordpress/media-utils": "2.1.0",
+		"@wordpress/notices": "3.1.0",
+		"@wordpress/nux": "4.1.0",
+		"@wordpress/plugins": "3.1.0",
+		"@wordpress/primitives": "2.1.0",
+		"@wordpress/priority-queue": "2.1.0",
+		"@wordpress/redux-routine": "4.1.0",
+		"@wordpress/reusable-blocks": "2.1.0",
+		"@wordpress/rich-text": "4.1.0",
+		"@wordpress/server-side-render": "2.1.0",
+		"@wordpress/shortcode": "3.1.0",
+		"@wordpress/token-list": "2.1.0",
+		"@wordpress/url": "3.1.0",
+		"@wordpress/viewport": "3.1.0",
+		"@wordpress/warning": "2.1.0",
+		"@wordpress/wordcount": "3.1.0",
 		"backbone": "1.4.0",
 		"clipboard": "2.0.8",
 		"core-js-url-browser": "3.6.4",

src/wp-includes/block-supports/colors.php

@@ -83,7 +83,6 @@ function wp_apply_colors_support( $block_type, $block_attributes ) {
 
 	$has_text_colors_support       = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'text' ), true ) );
 	$has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
-	$has_link_colors_support       = _wp_array_get( $color_support, array( 'link' ), false );
 	$has_gradients_support         = _wp_array_get( $color_support, array( 'gradients' ), false );
 	$classes                       = array();
 	$styles                        = array();
@@ -106,24 +105,6 @@ function wp_apply_colors_support( $block_type, $block_attributes ) {
 		}
 	}
 
-	// Link colors.
-	if ( $has_link_colors_support ) {
-		$has_link_color = isset( $block_attributes['style']['color']['link'] );
-		// Apply required class and style.
-		if ( $has_link_color ) {
-			$classes[] = 'has-link-color';
-			// If link is a named color.
-			if ( strpos( $block_attributes['style']['color']['link'], 'var:preset|color|' ) !== false ) {
-				// Get the name from the string and add proper styles.
-				$index_to_splice = strrpos( $block_attributes['style']['color']['link'], '|' ) + 1;
-				$link_color_name = substr( $block_attributes['style']['color']['link'], $index_to_splice );
-				$styles[]        = sprintf( '--wp--style--color--link: var(--wp--preset--color--%s);', $link_color_name );
-			} else {
-				$styles[] = sprintf( '--wp--style--color--link: %s;', $block_attributes['style']['color']['link'] );
-			}
-		}
-	}
-
 	// Background colors.
 	if ( $has_background_colors_support ) {
 		$has_named_background_color  = array_key_exists( 'backgroundColor', $block_attributes );

src/wp-includes/block-supports/elements.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * Elements styles block support.
+ *
+ * @package WordPress
+ * @since 5.8.0
+ */
+
+/**
+ * Render the elements stylesheet.
+ *
+ * @since 5.8.0
+ * @access private
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ * @return string                Filtered block content.
+ */
+function wp_render_elements_support( $block_content, $block ) {
+	$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
+
+	/*
+	* For now we only care about link color.
+	* This code in the future when we have a public API
+	* should take advantage of WP_Theme_JSON::compute_style_properties
+	* and work for any element and style.
+	*/
+	if ( null === $link_color ) {
+		return $block_content;
+	}
+
+	$class_name = 'wp-elements-' . uniqid();
+
+	if ( strpos( $link_color, 'var:preset|color|' ) !== false ) {
+		// Get the name from the string and add proper styles.
+		$index_to_splice = strrpos( $link_color, '|' ) + 1;
+		$link_color_name = substr( $link_color, $index_to_splice );
+		$link_color      = "var(--wp--preset--color--$link_color_name)";
+	}
+	$link_color_declaration = esc_html( safecss_filter_attr( "color: $link_color" ) );
+
+	$style = "<style>.$class_name a{" . $link_color_declaration . " !important;}</style>\n";
+
+	// Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
+	// Retrieve the opening tag of the first HTML element.
+	$html_element_matches = array();
+	preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE );
+	$first_element = $html_element_matches[0][0];
+	// If the first HTML element has a class attribute just add the new class
+	// as we do on layout and duotone.
+	if ( strpos( $first_element, 'class="' ) !== false ) {
+		$content = preg_replace(
+			'/' . preg_quote( 'class="', '/' ) . '/',
+			'class="' . $class_name . ' ',
+			$block_content,
+			1
+		);
+	} else {
+		// If the first HTML element has no class attribute we should inject the attribute before the attribute at the end.
+		$first_element_offset = $html_element_matches[0][1];
+		$content              = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 );
+	}
+
+	return $content . $style;
+
+}
+
+add_filter( 'render_block', 'wp_render_elements_support', 10, 2 );

src/wp-includes/block-supports/spacing.php

@@ -0,0 +1,95 @@
+<?php
+/**
+ * Spacing block support flag.
+ *
+ * @package WordPress
+ * @since 5.8.0
+ */
+
+/**
+ * Registers the style block attribute for block types that support it.
+ *
+ * @since 5.8.0
+ * @access private
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function wp_register_spacing_support( $block_type ) {
+	$has_spacing_support = block_has_support( $block_type, array( 'spacing' ), false );
+
+	// Setup attributes and styles within that if needed.
+	if ( ! $block_type->attributes ) {
+		$block_type->attributes = array();
+	}
+
+	if ( $has_spacing_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
+		$block_type->attributes['style'] = array(
+			'type' => 'object',
+		);
+	}
+}
+
+/**
+ * Add CSS classes for block spacing to the incoming attributes array.
+ * This will be applied to the block markup in the front-end.
+ *
+ * @since 5.8.0
+ * @access private
+ *
+ * @param WP_Block_Type $block_type       Block Type.
+ * @param array         $block_attributes Block attributes.
+ *
+ * @return array Block spacing CSS classes and inline styles.
+ */
+function wp_apply_spacing_support( $block_type, $block_attributes ) {
+	$has_padding_support = wp_has_spacing_feature_support( $block_type, 'padding' );
+	$has_margin_support  = wp_has_spacing_feature_support( $block_type, 'margin' );
+	$styles              = array();
+
+	if ( $has_padding_support ) {
+		$padding_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'padding' ), null );
+		if ( null !== $padding_value ) {
+			foreach ( $padding_value as $key => $value ) {
+				$styles[] = sprintf( 'padding-%s: %s;', $key, $value );
+			}
+		}
+	}
+
+	if ( $has_margin_support ) {
+		$margin_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'margin' ), null );
+		if ( null !== $margin_value ) {
+			foreach ( $margin_value as $key => $value ) {
+				$styles[] = sprintf( 'margin-%s: %s;', $key, $value );
+			}
+		}
+	}
+
+	return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) );
+}
+
+/**
+ * Checks whether the current block type supports the spacing feature requested.
+ *
+ * @since 5.8.0
+ * @access private
+ *
+ * @param WP_Block_Type $block_type Block type to check for support.
+ * @param string        $feature    Name of the feature to check support for.
+ * @param mixed         $default    Fallback value for feature support, defaults to false.
+ *
+ * @return boolean                  Whether or not the feature is supported.
+ */
+function wp_has_spacing_feature_support( $block_type, $feature, $default = false ) {
+	// Check if the specific feature has been opted into individually
+	// via nested flag under `spacing`.
+	return block_has_support( $block_type, array( 'spacing', $feature ), $default );
+}
+
+// Register the block support.
+WP_Block_Supports::get_instance()->register(
+	'spacing',
+	array(
+		'register_attribute' => 'wp_register_spacing_support',
+		'apply'              => 'wp_apply_spacing_support',
+	)
+);