Fixes targeted for WordPress 5.8 RC3

docs/how-to-guides/themes/theme-json.md

@@ -170,6 +170,7 @@ The settings section has the following structure:
 		},
 		"color": {
 			"custom": true,
+			"customDuotone": true,
 			"customGradient": true,
 			"duotone": [],
 			"gradients": [],

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

@@ -94,14 +94,18 @@ class WP_Theme_JSON_Gutenberg {
 		),
 		'color'      => array(
 			'custom'         => null,
+			'customDuotone'  => null,
 			'customGradient' => null,
 			'duotone'        => null,
 			'gradients'      => null,
 			'link'           => null,
 			'palette'        => null,
 		),
 		'custom'     => null,
-		'layout'     => null,
+		'layout'     => array(
+			'contentSize' => null,
+			'wideSize'    => null,
+		),
 		'spacing'    => array(
 			'customMargin'  => null,
 			'customPadding' => null,
@@ -1172,8 +1176,8 @@ public function merge( $incoming ) {
 		foreach ( $nodes as $metadata ) {
 			foreach ( $to_replace as $property_path ) {
 				$path = array_merge( $metadata['path'], $property_path );
-				$node = _wp_array_get( $incoming_data, $path, array() );
-				if ( ! empty( $node ) ) {
+				$node = _wp_array_get( $incoming_data, $path, null );
+				if ( isset( $node ) ) {
 					gutenberg_experimental_set( $this->theme_json, $path, $node );
 				}
 			}

lib/client-assets.php

@@ -102,6 +102,20 @@ function gutenberg_override_script( $scripts, $handle, $src, $deps = array(), $v
 		$output = sprintf( "wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ '%s' ] }, 'default' );", $ltr );
 		$scripts->add_inline_script( 'wp-i18n', $output, 'after' );
 	}
+
+	/*
+	 * Wp-editor module is exposed as window.wp.editor.
+	 * Problem: there is quite some code expecting window.wp.oldEditor object available under window.wp.editor.
+	 * Solution: fuse the two objects together to maintain backward compatibility.
+	 * For more context, see https://github.com/WordPress/gutenberg/issues/33203
+	 */
+	if ( 'wp-editor' === $handle ) {
+		$scripts->add_inline_script(
+			'wp-editor',
+			'Object.assign( window.wp.editor, window.wp.oldEditor );',
+			'after'
+		);
+	}
 }
 
 /**

lib/compat/wordpress-5.8/index.php

@@ -103,3 +103,64 @@ function build_query_vars_from_query_block( $block, $page ) {
 		return $query;
 	}
 }
+
+if ( ! function_exists( 'gutenberg_register_legacy_query_loop_block' ) ) {
+	/**
+	 * Renders the legacy `core/query-loop` block on the server.
+	 * It triggers a developer warning and then calls the renamed
+	 * block's `render_callback` function output.
+	 *
+	 * @param array    $attributes Block attributes.
+	 * @param string   $content    Block default content.
+	 * @param WP_Block $block      Block instance.
+	 *
+	 * @return string Returns the output of the query, structured using the layout defined by the block's inner blocks.
+	 */
+	function gutenberg_render_legacy_query_loop_block( $attributes, $content, $block ) {
+		trigger_error(
+		/* translators: %1$s: Block type */
+			sprintf( __( 'Block %1$s has been renamed to Post Template. %1$s will be supported until WordPress version 5.9.', 'gutenberg' ), $block->name ),
+			headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE
+		);
+		return render_block_core_post_template( $attributes, $content, $block );
+	}
+}
+
+if ( ! function_exists( 'gutenberg_register_legacy_query_loop_block' ) ) {
+	/**
+	 * Complements the renaming of `Query Loop` to `Post Template`.
+	 * This ensures backwards compatibility for any users running the Gutenberg
+	 * plugin who have used Query Loop prior to its renaming.
+	 *
+	 * @see    https://github.com/WordPress/gutenberg/pull/32514
+	 */
+	function gutenberg_register_legacy_query_loop_block() {
+		$registry = WP_Block_Type_Registry::get_instance();
+		if ( $registry->is_registered( 'core/query-loop' ) ) {
+			unregister_block_type( 'core/query-loop' );
+		}
+		register_block_type(
+			'core/query-loop',
+			array(
+				'category'          => 'design',
+				'uses_context'      => array(
+					'queryId',
+					'query',
+					'queryContext',
+					'displayLayout',
+					'templateSlug',
+				),
+				'supports'          => array(
+					'reusable' => false,
+					'html'     => false,
+					'align'    => true,
+				),
+				'style'             => 'wp-block-post-template',
+				'render_callback'   => 'gutenberg_render_legacy_query_loop_block',
+				'skip_inner_blocks' => true,
+			)
+		);
+	}
+
+	add_action( 'init', 'gutenberg_register_legacy_query_loop_block' );
+}

lib/experimental-default-theme.json

@@ -169,8 +169,9 @@
 				}
 			],
 			"custom": true,
-			"link": false,
-			"customGradient": true
+			"customDuotone": true,
+			"customGradient": true,
+			"link": false
 		},
 		"typography": {
 			"dropCap": true,

packages/block-editor/src/components/duotone-control/duotone-picker-popover.js

@@ -11,6 +11,7 @@ function DuotonePickerPopover( {
 	duotonePalette,
 	colorPalette,
 	disableCustomColors,
+	disableCustomDuotone,
 } ) {
 	return (
 		<Popover
@@ -23,6 +24,7 @@ function DuotonePickerPopover( {
 					colorPalette={ colorPalette }
 					duotonePalette={ duotonePalette }
 					disableCustomColors={ disableCustomColors }
+					disableCustomDuotone={ disableCustomDuotone }
 					value={ value }
 					onChange={ onChange }
 				/>

packages/block-editor/src/components/duotone-control/index.js

@@ -15,15 +15,12 @@ function DuotoneControl( {
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
+	disableCustomDuotone,
 	value,
 	onChange,
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	if ( ! duotonePalette ) {
-		return null;
-	}
-
 	const onToggle = () => {
 		setIsOpen( ( prev ) => ! prev );
 	};
@@ -55,6 +52,7 @@ function DuotoneControl( {
 					duotonePalette={ duotonePalette }
 					colorPalette={ colorPalette }
 					disableCustomColors={ disableCustomColors }
+					disableCustomDuotone={ disableCustomDuotone }
 				/>
 			) }
 		</>

packages/block-editor/src/components/writing-flow/use-tab-nav.js

@@ -12,12 +12,6 @@ import { useRef } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 
-/**
- * Useful for positioning an element within the viewport so focussing the
- * element does not scroll the page.
- */
-const PREVENT_SCROLL_ON_FOCUS = { position: 'fixed' };
-
 function isFormElement( element ) {
 	const { tagName } = element;
 	return (
@@ -75,7 +69,6 @@ export default function useTabNav() {
 			ref={ focusCaptureBeforeRef }
 			tabIndex={ focusCaptureTabIndex }
 			onFocus={ onFocusCapture }
-			style={ PREVENT_SCROLL_ON_FOCUS }
 		/>
 	);
 
@@ -84,7 +77,6 @@ export default function useTabNav() {
 			ref={ focusCaptureAfterRef }
 			tabIndex={ focusCaptureTabIndex }
 			onFocus={ onFocusCapture }
-			style={ PREVENT_SCROLL_ON_FOCUS }
 		/>
 	);
 
@@ -131,16 +123,62 @@ export default function useTabNav() {
 			// doesn't refocus this block and so it allows default behaviour
 			// (moving focus to the next tabbable element).
 			noCapture.current = true;
-			next.current.focus();
+
+			// Focusing the focus capture element, which is located above and
+			// below the editor, should not scroll the page all the way up or
+			// down.
+			next.current.focus( { preventScroll: true } );
 		}
 
 		function onFocusOut( event ) {
 			lastFocus.current = event.target;
 		}
 
+		// When tabbing back to an element in block list, this event handler prevents scrolling if the
+		// focus capture divs (before/after) are outside of the viewport. (For example shift+tab back to a paragraph
+		// when focus is on a sidebar element. This prevents the scrollable writing area from jumping either to the
+		// top or bottom of the document.
+		//
+		// Note that it isn't possible to disable scrolling in the onFocus event. We need to intercept this
+		// earlier in the keypress handler, and call focus( { preventScroll: true } ) instead.
+		// https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#parameters
+		function preventScrollOnTab( event ) {
+			if ( event.keyCode !== TAB ) {
+				return;
+			}
+
+			if ( event.target?.getAttribute( 'role' ) === 'region' ) {
+				return;
+			}
+
+			if ( container.current === event.target ) {
+				return;
+			}
+
+			const isShift = event.shiftKey;
+			const direction = isShift ? 'findPrevious' : 'findNext';
+			const target = focus.tabbable[ direction ]( event.target );
+			// only do something when the next tabbable is a focus capture div (before/after)
+			if (
+				target === focusCaptureBeforeRef.current ||
+				target === focusCaptureAfterRef.current
+			) {
+				event.preventDefault();
+				target.focus( { preventScroll: true } );
+			}
+		}
+
+		node.ownerDocument.defaultView.addEventListener(
+			'keydown',
+			preventScrollOnTab
+		);
 		node.addEventListener( 'keydown', onKeyDown );
 		node.addEventListener( 'focusout', onFocusOut );
 		return () => {
+			node.ownerDocument.defaultView.removeEventListener(
+				'keydown',
+				preventScrollOnTab
+			);
 			node.removeEventListener( 'keydown', onKeyDown );
 			node.removeEventListener( 'focusout', onFocusOut );
 		};

packages/block-editor/src/hooks/color.js

@@ -218,9 +218,11 @@ function immutableSet( object, path, value ) {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const isLinkColorEnabled = useSetting( 'color.link' );
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
+	const solids = useSetting( 'color.palette' ) || EMPTY_ARRAY;
 	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const areCustomSolidsEnabled = useSetting( 'color.custom' );
+	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
+	const isLinkEnabled = useSetting( 'color.link' );
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
@@ -235,19 +237,39 @@ export function ColorEdit( props ) {
 		return null;
 	}
 
-	const hasBackground = hasBackgroundColorSupport( blockName );
-	const hasGradient = hasGradientSupport( blockName );
+	const hasLinkColor =
+		hasLinkColorSupport( blockName ) &&
+		isLinkEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasTextColor =
+		hasTextColorSupport( blockName ) &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasBackgroundColor =
+		hasBackgroundColorSupport( blockName ) &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasGradientColor =
+		hasGradientSupport( blockName ) &&
+		( gradients.length > 0 || areCustomGradientsEnabled );
+
+	if (
+		! hasLinkColor &&
+		! hasTextColor &&
+		! hasBackgroundColor &&
+		! hasGradientColor
+	) {
+		return null;
+	}
 
 	const { style, textColor, backgroundColor, gradient } = attributes;
 	let gradientValue;
-	if ( hasGradient && gradient ) {
+	if ( hasGradientColor && gradient ) {
 		gradientValue = getGradientValueBySlug( gradients, gradient );
-	} else if ( hasGradient ) {
+	} else if ( hasGradientColor ) {
 		gradientValue = style?.color?.gradient;
 	}
 
 	const onChangeColor = ( name ) => ( value ) => {
-		const colorObject = getColorObjectByColorValue( colors, value );
+		const colorObject = getColorObjectByColorValue( solids, value );
 		const attributeName = name + 'Color';
 		const newStyle = {
 			...localAttributes.current.style,
@@ -306,7 +328,7 @@ export function ColorEdit( props ) {
 	};
 
 	const onChangeLinkColor = ( value ) => {
-		const colorObject = getColorObjectByColorValue( colors, value );
+		const colorObject = getColorObjectByColorValue( solids, value );
 		const newLinkColorValue = colorObject?.slug
 			? `var:preset|color|${ colorObject.slug }`
 			: value;
@@ -326,45 +348,45 @@ export function ColorEdit( props ) {
 			}
 			clientId={ props.clientId }
 			settings={ [
-				...( hasTextColorSupport( blockName )
+				...( hasTextColor
 					? [
 							{
 								label: __( 'Text color' ),
 								onColorChange: onChangeColor( 'text' ),
 								colorValue: getColorObjectByAttributeValues(
-									colors,
+									solids,
 									textColor,
 									style?.color?.text
 								).color,
 							},
 					  ]
 					: [] ),
-				...( hasBackground || hasGradient
+				...( hasBackgroundColor || hasGradientColor
 					? [
 							{
 								label: __( 'Background color' ),
-								onColorChange: hasBackground
+								onColorChange: hasBackgroundColor
 									? onChangeColor( 'background' )
 									: undefined,
 								colorValue: getColorObjectByAttributeValues(
-									colors,
+									solids,
 									backgroundColor,
 									style?.color?.background
 								).color,
 								gradientValue,
-								onGradientChange: hasGradient
+								onGradientChange: hasGradientColor
 									? onChangeGradient
 									: undefined,
 							},
 					  ]
 					: [] ),
-				...( isLinkColorEnabled && hasLinkColorSupport( blockName )
+				...( hasLinkColor
 					? [
 							{
 								label: __( 'Link Color' ),
 								onColorChange: onChangeLinkColor,
 								colorValue: getLinkColorFromAttributeValue(
-									colors,
+									solids,
 									style?.elements?.link?.color?.text
 								),
 								clearable: !! style?.elements?.link?.color