prep build 03/26

docs/how-to-guides/notices/README.md

@@ -71,7 +71,7 @@ To better understand the specific code example above:
 -   `wp.data.dispatch('core/notices')` accesses functionality registered to the block editor data store by the Notices package.
 -   `createNotice()` is a function offered by the Notices package to register a new notice. The block editor reads from the notice data store in order to know which notices to display.
 
-Check out the [_Loading JavaScript_](/docs/how-to-guides/javascript/loading-javascript.md) tutorial for a primer on how to load your custom JavaScript into the block editor.
+Check out the [_Enqueueing assets in the Editor_](/docs/how-to-guides/enqueueing-assets-in-the-editor.md) tutorial for a primer on how to load your custom JavaScript into the block editor.
 
 ## Learn more
 

docs/reference-guides/core-blocks.md

@@ -642,7 +642,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
 
 -	**Name:** core/post-featured-image
 -	**Category:** theme
--	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), interactivity (clientNavigation), shadow (), spacing (margin, padding), ~~html~~
+-	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), filter (duotone), interactivity (clientNavigation), shadow (), spacing (margin, padding), ~~html~~
 -	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, useFirstImageFromPost, width
 
 ## Post Navigation Link
@@ -847,7 +847,7 @@ Describe in a few words what the site is about. The tagline can be used in searc
 -	**Name:** core/site-tagline
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** textAlign
+-	**Attributes:** level, textAlign
 
 ## Site Title
 

lib/class-wp-duotone-gutenberg.php

@@ -623,7 +623,7 @@ private static function get_svg_definitions( $sources ) {
 	 * @return string The CSS for global styles.
 	 */
 	private static function get_global_styles_presets( $sources ) {
-		$css = 'body{';
+		$css = WP_Theme_JSON_Gutenberg::ROOT_CSS_PROPERTIES_SELECTOR . '{';
 		foreach ( $sources as $filter_id => $filter_data ) {
 			$slug              = $filter_data['slug'];
 			$colors            = $filter_data['colors'];

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

@@ -37,6 +37,14 @@ class WP_Theme_JSON_Gutenberg {
 	 */
 	protected static $blocks_metadata = array();
 
+	/**
+	 * The CSS selector for the top-level preset settings.
+	 *
+	 * @since 6.6.0
+	 * @var string
+	 */
+	const ROOT_CSS_PROPERTIES_SELECTOR = ':root';
+
 	/**
 	 * The CSS selector for the top-level styles.
 	 *
@@ -1751,7 +1759,7 @@ static function ( $carry, $element ) {
 	 * @return string The result of processing the presets.
 	 */
 	protected static function compute_preset_classes( $settings, $selector, $origins ) {
-		if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
+		if ( static::ROOT_BLOCK_SELECTOR === $selector || static::ROOT_CSS_PROPERTIES_SELECTOR === $selector ) {
 			// Classes at the global level do not need any CSS prefixed,
 			// and we don't want to increase its specificity.
 			$selector = '';
@@ -2277,7 +2285,7 @@ protected static function get_setting_nodes( $theme_json, $selectors = array() )
 		// Top-level.
 		$nodes[] = array(
 			'path'     => array( 'settings' ),
-			'selector' => static::ROOT_BLOCK_SELECTOR,
+			'selector' => static::ROOT_CSS_PROPERTIES_SELECTOR,
 		);
 
 		// Calculate paths for blocks.
@@ -2704,6 +2712,7 @@ static function ( $pseudo_selector ) use ( $selector ) {
 	 * Outputs the CSS for layout rules on the root.
 	 *
 	 * @since 6.1.0
+	 * @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties.
 	 *
 	 * @param string $selector The root node selector.
 	 * @param array  $block_metadata The metadata for the root block.
@@ -2714,16 +2723,6 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
 		$settings         = $this->theme_json['settings'] ?? array();
 		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
 
-		/*
-		* Reset default browser margin on the root body element.
-		* This is set on the root selector **before** generating the ruleset
-		* from the `theme.json`. This is to ensure that if the `theme.json` declares
-		* `margin` in its `spacing` declaration for the `body` element then these
-		* user-generated values take precedence in the CSS cascade.
-		* @link https://github.com/WordPress/gutenberg/issues/36147.
-		*/
-		$css .= 'body { margin: 0;';
-
 		/*
 		* If there are content and wide widths in theme.json, output them
 		* as custom properties on the body element so all blocks can use them.
@@ -2733,11 +2732,19 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
 			$content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
 			$wide_size    = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
 			$wide_size    = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
-			$css         .= '--wp--style--global--content-size: ' . $content_size . ';';
-			$css         .= '--wp--style--global--wide-size: ' . $wide_size . ';';
+			$css         .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';';
+			$css         .= '--wp--style--global--wide-size: ' . $wide_size . '; }';
 		}
 
-		$css .= ' }';
+		/*
+		* Reset default browser margin on the body element.
+		* This is set on the body selector **before** generating the ruleset
+		* from the `theme.json`. This is to ensure that if the `theme.json` declares
+		* `margin` in its `spacing` declaration for the `body` element then these
+		* user-generated values take precedence in the CSS cascade.
+		* @link https://github.com/WordPress/gutenberg/issues/36147.
+		*/
+		$css .= 'body { margin: 0; }';
 
 		if ( $use_root_padding ) {
 			// Top and bottom padding are applied to the outer block container.
@@ -2767,7 +2774,7 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
 			$css            .= ':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
 
 			// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
-			$css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
+			$css .= static::ROOT_CSS_PROPERTIES_SELECTOR . " { --wp--style--block-gap: $block_gap_value; }";
 		}
 		$css .= $this->get_layout_styles( $block_metadata );
 

packages/block-editor/src/components/block-patterns-list/index.js

@@ -45,6 +45,7 @@ function BlockPattern( {
 	pattern,
 	onClick,
 	onHover,
+	showTitle = true,
 	showTooltip,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
@@ -122,25 +123,27 @@ function BlockPattern( {
 								viewportWidth={ viewportWidth }
 							/>
 
-							<HStack className="block-editor-patterns__pattern-details">
-								{ pattern.type ===
-									INSERTER_PATTERN_TYPES.user &&
-									! pattern.syncStatus && (
-										<div className="block-editor-patterns__pattern-icon-wrapper">
-											<Icon
-												className="block-editor-patterns__pattern-icon"
-												icon={ symbol }
-											/>
+							{ showTitle && (
+								<HStack className="block-editor-patterns__pattern-details">
+									{ pattern.type ===
+										INSERTER_PATTERN_TYPES.user &&
+										! pattern.syncStatus && (
+											<div className="block-editor-patterns__pattern-icon-wrapper">
+												<Icon
+													className="block-editor-patterns__pattern-icon"
+													icon={ symbol }
+												/>
+											</div>
+										) }
+									{ ( ! showTooltip ||
+										pattern.type ===
+											INSERTER_PATTERN_TYPES.user ) && (
+										<div className="block-editor-block-patterns-list__item-title">
+											{ pattern.title }
 										</div>
 									) }
-								{ ( ! showTooltip ||
-									pattern.type ===
-										INSERTER_PATTERN_TYPES.user ) && (
-									<div className="block-editor-block-patterns-list__item-title">
-										{ pattern.title }
-									</div>
-								) }
-							</HStack>
+								</HStack>
+							) }
 
 							{ !! pattern.description && (
 								<VisuallyHidden id={ descriptionId }>
@@ -170,6 +173,7 @@ function BlockPatternsList(
 		onClickPattern,
 		orientation,
 		label = __( 'Block patterns' ),
+		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
 	},
@@ -203,6 +207,7 @@ function BlockPatternsList(
 						onClick={ onClickPattern }
 						onHover={ onHover }
 						isDraggable={ isDraggable }
+						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
 					/>
 				) : (

packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

@@ -16,7 +16,7 @@ import {
 	getStylesDeclarations,
 	processCSSNesting,
 } from '../use-global-styles-output';
-import { ROOT_BLOCK_SELECTOR } from '../utils';
+import { ROOT_BLOCK_SELECTOR, ROOT_CSS_PROPERTIES_SELECTOR } from '../utils';
 
 describe( 'global styles renderer', () => {
 	describe( 'getNodesWithStyles', () => {
@@ -254,7 +254,7 @@ describe( 'global styles renderer', () => {
 							],
 						},
 					},
-					selector: ROOT_BLOCK_SELECTOR,
+					selector: ROOT_CSS_PROPERTIES_SELECTOR,
 				},
 				{
 					presets: {
@@ -342,7 +342,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toCustomProperties( tree, blockSelectors ) ).toEqual(
-				'body{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--preset--color--white-2-black: value;--wp--custom--white-2-black: value;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
+				':root{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--preset--color--white-2-black: value;--wp--custom--white-2-black: value;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
 			);
 		} );
 	} );
@@ -614,7 +614,7 @@ describe( 'global styles renderer', () => {
 				},
 			};
 			expect( toStyles( Object.freeze( tree ), 'body' ) ).toEqual(
-				'body {margin: 0; --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+				':root { --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}body {margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
 			);
 		} );
 	} );
@@ -734,7 +734,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 0.5em; }body { --wp--style--block-gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -751,7 +751,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 12px; }body { --wp--style--block-gap: 12px; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 12px; }:root { --wp--style--block-gap: 12px; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
 			);
 		} );
 

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -19,6 +19,7 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import {
 	PRESET_METADATA,
 	ROOT_BLOCK_SELECTOR,
+	ROOT_CSS_PROPERTIES_SELECTOR,
 	scopeSelector,
 	appendToSelector,
 	getBlockStyleVariationSelector,
@@ -543,7 +544,7 @@ export function getLayoutStyles( {
 		);
 		// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
 		if ( selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport ) {
-			ruleset += `${ selector } { --wp--style--block-gap: ${ gapValue }; }`;
+			ruleset += `${ ROOT_CSS_PROPERTIES_SELECTOR } { --wp--style--block-gap: ${ gapValue }; }`;
 		}
 	}
 
@@ -729,7 +730,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 		nodes.push( {
 			presets,
 			custom,
-			selector: ROOT_BLOCK_SELECTOR,
+			selector: ROOT_CSS_PROPERTIES_SELECTOR,
 		} );
 	}
 
@@ -781,24 +782,28 @@ export const toStyles = (
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 	const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
 	const { contentSize, wideSize } = tree?.settings?.layout || {};
+	let ruleset = '';
+
+	if ( contentSize || wideSize ) {
+		ruleset += `${ ROOT_CSS_PROPERTIES_SELECTOR } {`;
+		ruleset = contentSize
+			? ruleset + ` --wp--style--global--content-size: ${ contentSize };`
+			: ruleset;
+		ruleset = wideSize
+			? ruleset + ` --wp--style--global--wide-size: ${ wideSize };`
+			: ruleset;
+		ruleset += '}';
+	}
 
 	/*
-	 * Reset default browser margin on the root body element.
-	 * This is set on the root selector **before** generating the ruleset
+	 * Reset default browser margin on the body element.
+	 * This is set on the body selector **before** generating the ruleset
 	 * from the `theme.json`. This is to ensure that if the `theme.json` declares
 	 * `margin` in its `spacing` declaration for the `body` element then these
 	 * user-generated values take precedence in the CSS cascade.
 	 * @link https://github.com/WordPress/gutenberg/issues/36147.
 	 */
-	let ruleset = 'body {margin: 0;';
-
-	if ( contentSize ) {
-		ruleset += ` --wp--style--global--content-size: ${ contentSize };`;
-	}
-
-	if ( wideSize ) {
-		ruleset += ` --wp--style--global--wide-size: ${ wideSize };`;
-	}
+	ruleset += 'body {margin: 0;';
 
 	// Root padding styles should only be output for full templates, not patterns or template parts.
 	if ( useRootPaddingAlign && isTemplate ) {
@@ -1000,7 +1005,10 @@ export const toStyles = (
 	}
 
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
-		if ( ROOT_BLOCK_SELECTOR === selector ) {
+		if (
+			ROOT_BLOCK_SELECTOR === selector ||
+			ROOT_CSS_PROPERTIES_SELECTOR === selector
+		) {
 			// Do not add extra specificity for top-level classes.
 			selector = '';
 		}
@@ -1211,6 +1219,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			updatedConfig,
 			blockSelectors
 		);
+
 		const globalStyles = toStyles(
 			updatedConfig,
 			blockSelectors,

packages/block-editor/src/components/global-styles/utils.js

@@ -11,6 +11,7 @@ import { getValueFromObjectPath } from '../../utils/object';
 
 /* Supporting data. */
 export const ROOT_BLOCK_SELECTOR = 'body';
+export const ROOT_CSS_PROPERTIES_SELECTOR = ':root';
 
 export const PRESET_METADATA = [
 	{

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

@@ -765,4 +765,8 @@ $block-inserter-tabs-height: 44px;
 	.block-editor-inserter__patterns-category-dialog {
 		position: static;
 	}
+
+	.block-editor-inserter__media-dialog {
+		position: static;
+	}
 }

packages/block-library/src/post-featured-image/block.json

@@ -61,22 +61,23 @@
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
 		"color": {
-			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
 				"radius": true,
 				"width": true
 			}
 		},
+		"filter": {
+			"duotone": true
+		},
 		"shadow": {
 			"__experimentalSkipSerialization": true
 		},
@@ -90,7 +91,11 @@
 		}
 	},
 	"selectors": {
-		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder"
+		"border": ".wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay",
+		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder",
+		"filter": {
+			"duotone": ".wp-block-post-featured-image img, .wp-block-post-featured-image .wp-block-post-featured-image__placeholder, .wp-block-post-featured-image .components-placeholder__illustration, .wp-block-post-featured-image .components-placeholder::before"
+		}
 	},
 	"editorStyle": "wp-block-post-featured-image-editor",
 	"style": "wp-block-post-featured-image"