build 12/24

bin/build-plugin-zip.sh

@@ -111,8 +111,11 @@ mv gutenberg.tmp.php gutenberg.php
 
 build_files=$(
 	ls build/*/*.{js,css,asset.php} \
-	build/block-library/blocks/*.php build/block-library/blocks/*/block.json \
-	build/edit-widgets/blocks/*.php build/edit-widgets/blocks/*/block.json \
+	build/block-library/blocks/*.php \
+	build/block-library/blocks/*/block.json \
+	build/block-library/blocks/*/*.css \
+	build/edit-widgets/blocks/*.php \
+	build/edit-widgets/blocks/*/block.json \
 )
 
 

docs/designers-developers/developers/block-api/block-registration.md

@@ -222,7 +222,7 @@ example: {
 
 #### variations (optional)
 
-- **Type:** `Object[]`
+-   **Type:** `Object[]`
 
 Similarly to how the block's style variations can be declared, a block type can define block variations that the user can pick from. The difference is that, rather than changing only the visual appearance, this field provides a way to apply initial custom attributes and inner blocks at the time when a block is inserted.
 
@@ -256,19 +256,20 @@ variations: [
 
 An object describing a variation defined for the block type can contain the following fields:
 
-- `name` (type `string`) – The unique and machine-readable name.
-- `title` (type `string`) – A human-readable variation title.
-- `description` (optional, type `string`) – A detailed variation description.
-- `icon` (optional, type `string` | `Object`) – An icon helping to visualize the variation. It can have the same shape as the block type.
-- `isDefault` (optional, type `boolean`) – Indicates whether the current variation is the default one. Defaults to `false`.
-- `attributes` (optional, type `Object`) – Values that override block attributes.
-- `innerBlocks` (optional, type `Array[]`) – Initial configuration of nested blocks.
-- `example` (optional, type `Object`) – Example provides structured data for the block preview. You can set to `undefined` to disable the preview shown for the block type.
-- `scope` (optional, type `WPBlockVariationScope[]`) - the list of scopes where the variation is applicable. When not provided, it defaults to `block` and `inserter`. Available options:
-	- `inserter` - Block Variation is shown on the inserter.
-	- `block` - Used by blocks to filter specific block variations. Mostly used in Placeholder patterns like `Columns` block.
-	- `transform` - Block Variation will be shown in the component for Block Variations transformations.
-- `keywords` (optional, type `string[]`) - An array of terms (which can be translated) that help users discover the variation while searching.
+-   `name` (type `string`) – The unique and machine-readable name.
+-   `title` (type `string`) – A human-readable variation title.
+-   `description` (optional, type `string`) – A detailed variation description.
+-   `icon` (optional, type `string` | `Object`) – An icon helping to visualize the variation. It can have the same shape as the block type.
+-   `isDefault` (optional, type `boolean`) – Indicates whether the current variation is the default one. Defaults to `false`.
+-   `attributes` (optional, type `Object`) – Values that override block attributes.
+-   `innerBlocks` (optional, type `Array[]`) – Initial configuration of nested blocks.
+-   `example` (optional, type `Object`) – Example provides structured data for the block preview. You can set to `undefined` to disable the preview shown for the block type.
+-   `scope` (optional, type `WPBlockVariationScope[]`) - the list of scopes where the variation is applicable. When not provided, it defaults to `block` and `inserter`. Available options:
+    -   `inserter` - Block Variation is shown on the inserter.
+    -   `block` - Used by blocks to filter specific block variations. Mostly used in Placeholder patterns like `Columns` block.
+    -   `transform` - Block Variation will be shown in the component for Block Variations transformations.
+-   `keywords` (optional, type `string[]`) - An array of terms (which can be translated) that help users discover the variation while searching.
+-   `isActive` (optional, type `Function`) - A function that accepts a block's attributes and the variation's attributes and determines if a variation is active. This function doesn't try to find a match dynamically based on all block's attributes, as in many cases some attributes are irrelevant. An example would be for `embed` block where we only care about `providerNameSlug` attribute's value.
 
 It's also possible to override the default block style variation using the `className` attribute when defining block variations.
 
@@ -278,15 +279,17 @@ variations: [
 		name: 'blue',
 		title: __( 'Blue Quote' ),
 		isDefault: true,
-		attributes: { className: 'is-style-blue-quote' },
+		attributes: { color: 'blue', className: 'is-style-blue-quote' },
 		icon: 'format-quote',
+		isActive: ( blockAttributes, variationAttributes ) =>
+			blockAttributes.color === variationAttributes.color
 	},
 ],
 ```
 
 #### supports (optional)
 
--   ***Type:*** `Object`
+-   **_Type:_** `Object`
 
 Supports contains as set of options to control features used in the editor. See the [the supports documentation](/docs/designers-developers/developers/block-api/block-supports.md) for more details.
 

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

@@ -237,7 +237,7 @@ private static function get_user_origin() {
 				$config = $decoded_data;
 			}
 		}
-		self::$user = new WP_Theme_JSON( $config );
+		self::$user = new WP_Theme_JSON( $config, true );
 
 		return self::$user;
 	}
@@ -270,7 +270,6 @@ private static function get_user_origin() {
 	 * @return WP_Theme_JSON
 	 */
 	public function get_origin( $theme_support_data = array(), $origin = 'user', $merged = true ) {
-
 		if ( ( 'user' === $origin ) && $merged ) {
 			$result = new WP_Theme_JSON();
 			$result->merge( self::get_core_origin() );
@@ -301,10 +300,6 @@ public function get_origin( $theme_support_data = array(), $origin = 'user', $me
 	 * Registers a Custom Post Type to store the user's origin config.
 	 */
 	public static function register_user_custom_post_type() {
-		if ( ! gutenberg_experimental_global_styles_has_theme_json_support() ) {
-			return;
-		}
-
 		$args = array(
 			'label'        => __( 'Global Styles', 'gutenberg' ),
 			'description'  => 'CPT to store user design tokens',

lib/class-wp-theme-json.php

@@ -135,8 +135,8 @@ class WP_Theme_JSON {
 				'dropCap'               => null,
 				'fontFamilies'          => null,
 				'fontSizes'             => null,
-				'customFontStyle'      => null,
-				'customFontWeight'     => null,
+				'customFontStyle'       => null,
+				'customFontWeight'      => null,
 				'customTextDecorations' => null,
 				'customTextTransforms'  => null,
 			),
@@ -301,9 +301,10 @@ class WP_Theme_JSON {
 	/**
 	 * Constructor.
 	 *
-	 * @param array $contexts A structure that follows the theme.json schema.
+	 * @param array   $contexts A structure that follows the theme.json schema.
+	 * @param boolean $should_escape_styles Whether the incoming styles should be escaped.
 	 */
-	public function __construct( $contexts = array() ) {
+	public function __construct( $contexts = array(), $should_escape_styles = false ) {
 		$this->contexts = array();
 
 		if ( ! is_array( $contexts ) ) {
@@ -324,8 +325,9 @@ public function __construct( $contexts = array() ) {
 			// Process styles subtree.
 			$this->process_key( 'styles', $context, self::SCHEMA );
 			if ( isset( $context['styles'] ) ) {
-				$this->process_key( 'color', $context['styles'], self::SCHEMA['styles'] );
-				$this->process_key( 'typography', $context['styles'], self::SCHEMA['styles'] );
+				$this->process_key( 'color', $context['styles'], self::SCHEMA['styles'], $should_escape_styles );
+				$this->process_key( 'spacing', $context['styles'], self::SCHEMA['styles'], $should_escape_styles );
+				$this->process_key( 'typography', $context['styles'], self::SCHEMA['styles'], $should_escape_styles );
 
 				if ( empty( $context['styles'] ) ) {
 					unset( $context['styles'] );
@@ -337,6 +339,7 @@ public function __construct( $contexts = array() ) {
 			// Process settings subtree.
 			$this->process_key( 'settings', $context, self::SCHEMA );
 			if ( isset( $context['settings'] ) ) {
+				$this->process_key( 'border', $context['settings'], self::SCHEMA['settings'] );
 				$this->process_key( 'color', $context['settings'], self::SCHEMA['settings'] );
 				$this->process_key( 'spacing', $context['settings'], self::SCHEMA['settings'] );
 				$this->process_key( 'typography', $context['settings'], self::SCHEMA['settings'] );
@@ -469,11 +472,12 @@ private static function get_blocks_metadata() {
 	 * This function modifies the given input by removing
 	 * the nodes that aren't valid per the schema.
 	 *
-	 * @param string $key Key of the subtree to normalize.
-	 * @param array  $input Whole tree to normalize.
-	 * @param array  $schema Schema to use for normalization.
+	 * @param string  $key Key of the subtree to normalize.
+	 * @param array   $input Whole tree to normalize.
+	 * @param array   $schema Schema to use for normalization.
+	 * @param boolean $should_escape Whether the subproperties should be escaped.
 	 */
-	private static function process_key( $key, &$input, $schema ) {
+	private static function process_key( $key, &$input, $schema, $should_escape = false ) {
 		if ( ! isset( $input[ $key ] ) ) {
 			return;
 		}
@@ -493,6 +497,21 @@ private static function process_key( $key, &$input, $schema ) {
 			$schema[ $key ]
 		);
 
+		if ( $should_escape ) {
+			$subtree = $input[ $key ];
+			foreach ( $subtree as $property => $value ) {
+				$name = 'background-color';
+				if ( 'gradient' === $property ) {
+					$name = 'background';
+				}
+				$result = safecss_filter_attr( "$name: $value" );
+
+				if ( '' === $result ) {
+					unset( $input[ $key ][ $property ] );
+				}
+			}
+		}
+
 		if ( 0 === count( $input[ $key ] ) ) {
 			unset( $input[ $key ] );
 		}

lib/global-styles.php

@@ -162,6 +162,10 @@ function gutenberg_experimental_global_styles_get_stylesheet( $tree, $type = 'al
  * and enqueues the resulting stylesheet.
  */
 function gutenberg_experimental_global_styles_enqueue_assets() {
+	if ( ! gutenberg_experimental_global_styles_has_theme_json_support() ) {
+		return;
+	}
+
 	$settings           = gutenberg_get_common_block_editor_settings();
 	$theme_support_data = gutenberg_experimental_global_styles_get_theme_support_settings( $settings );
 
@@ -196,45 +200,74 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
 	unset( $settings['gradients'] );
 
 	$resolver = new WP_Theme_JSON_Resolver();
-	$all      = $resolver->get_origin( $theme_support_data );
-	$base     = $resolver->get_origin( $theme_support_data, 'theme' );
+	$origin   = 'theme';
+	if (
+		gutenberg_experimental_global_styles_has_theme_json_support() &&
+		gutenberg_is_fse_theme()
+	) {
+		// Only lookup for the user data if we need it.
+		$origin = 'user';
+	}
+	$tree = $resolver->get_origin( $theme_support_data, $origin );
 
 	// STEP 1: ADD FEATURES
-	// These need to be added to settings always.
-	$settings['__experimentalFeatures'] = $all->get_settings();
+	//
+	// These need to be always added to the editor settings,
+	// even for themes that don't support theme.json.
+	// An example of this is that the presets are configured
+	// from the theme support data.
+	$settings['__experimentalFeatures'] = $tree->get_settings();
 
 	// STEP 2 - IF EDIT-SITE, ADD DATA REQUIRED FOR GLOBAL STYLES SIDEBAR
-	// The client needs some information to be able to access/update the user styles.
-	// We only do this if the theme has support for theme.json, though,
-	// as an indicator that the theme will know how to combine this with its stylesheet.
+	//
+	// In the site editor, the user can change styles, so the client
+	// needs the ability to create them. Hence, we pass it some data
+	// for this: base styles (core+theme) and the ID of the user CPT.
 	$screen = get_current_screen();
 	if (
 		! empty( $screen ) &&
 		function_exists( 'gutenberg_is_edit_site_page' ) &&
 		gutenberg_is_edit_site_page( $screen->id ) &&
-		gutenberg_experimental_global_styles_has_theme_json_support()
+		gutenberg_experimental_global_styles_has_theme_json_support() &&
+		gutenberg_is_fse_theme()
 	) {
-		$settings['__experimentalGlobalStylesUserEntityId'] = WP_Theme_JSON_Resolver::get_user_custom_post_type_id();
-		$settings['__experimentalGlobalStylesBaseStyles']   = $base->get_raw_data();
-	} else {
-		// STEP 3 - OTHERWISE, ADD STYLES
+		$user_cpt_id = WP_Theme_JSON_Resolver::get_user_custom_post_type_id();
+		$base_styles = $resolver->get_origin( $theme_support_data, 'theme' )->get_raw_data();
+
+		$settings['__experimentalGlobalStylesUserEntityId'] = $user_cpt_id;
+		$settings['__experimentalGlobalStylesBaseStyles']   = $base_styles;
+	} elseif ( gutenberg_experimental_global_styles_has_theme_json_support() ) {
+		// STEP 3 - ADD STYLES IF THEME HAS SUPPORT
 		//
 		// If we are in a block editor context, but not in edit-site,
-		// we need to add the styles via the settings. This is because
-		// we want them processed as if they were added via add_editor_styles,
-		// which adds the editor wrapper class.
+		// we add the styles via the settings, so the editor knows that
+		// some of these should be added the wrapper class,
+		// as if they were added via add_editor_styles.
 		$settings['styles'][] = array(
-			'css'                     => gutenberg_experimental_global_styles_get_stylesheet( $all, 'css_variables' ),
+			'css'                     => gutenberg_experimental_global_styles_get_stylesheet( $tree, 'css_variables' ),
 			'__experimentalNoWrapper' => true,
 		);
 		$settings['styles'][] = array(
-			'css' => gutenberg_experimental_global_styles_get_stylesheet( $all, 'block_styles' ),
+			'css' => gutenberg_experimental_global_styles_get_stylesheet( $tree, 'block_styles' ),
 		);
 	}
 
 	return $settings;
 }
 
-add_action( 'init', array( 'WP_Theme_JSON_Resolver', 'register_user_custom_post_type' ) );
+/**
+ * Register CPT to store/access user data.
+ *
+ * @return array|undefined
+ */
+function gutenberg_experimental_global_styles_register_user_cpt() {
+	if ( ! gutenberg_experimental_global_styles_has_theme_json_support() ) {
+		return;
+	}
+
+	WP_Theme_JSON_Resolver::register_user_custom_post_type();
+}
+
+add_action( 'init', 'gutenberg_experimental_global_styles_register_user_cpt' );
 add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX );
 add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "9.6.0-rc.1",
+	"version": "9.6.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

packages/block-editor/README.md

@@ -19,12 +19,12 @@ import {
 	BlockEditorProvider,
 	BlockList,
 	WritingFlow,
-	ObserveTyping
+	ObserveTyping,
 } from '@wordpress/block-editor';
 import { SlotFillProvider, Popover } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
-function MyEditorComponent () {
+function MyEditorComponent() {
 	const [ blocks, updateBlocks ] = useState( [] );
 
 	return (
@@ -568,6 +568,26 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/url-popover/README.md>
 
+<a name="useBlockDisplayInformation" href="#useBlockDisplayInformation">#</a> **useBlockDisplayInformation**
+
+Hook used to try to find a matching block variation and return
+the appropriate information for display reasons. In order to
+to try to find a match we need to things:
+1\. Block's client id to extract it's current attributes.
+2\. A block variation should have set `isActive` prop to a proper function.
+
+If for any reason a block variaton match cannot be found,
+the returned information come from the Block Type.
+If no blockType is found with the provided clientId, returns null.
+
+_Parameters_
+
+-   _clientId_ `string`: Block's client id.
+
+_Returns_
+
+-   `?WPBlockDisplayInformation`: Block's display information, or `null` when the block or its type not found.
+
 <a name="useBlockEditContext" href="#useBlockEditContext">#</a> **useBlockEditContext**
 
 Undocumented declaration.

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

@@ -1,9 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
 
-function BlockCard( { blockType: { icon, title, description } } ) {
+function BlockCard( { title, icon, description, blockType } ) {
+	if ( blockType ) {
+		deprecated( '`blockType` property in `BlockCard component`', {
+			alternative: '`title, icon and description` properties',
+		} );
+		( { title, icon, description } = blockType );
+	}
 	return (
 		<div className="block-editor-block-card">
 			<BlockIcon icon={ icon } showColors />