Merge branch 'trunk' into add/combobox-loading-spinner-combobox-only

backport-changelog/6.8/7903.md

@@ -1,3 +1,5 @@
 https://github.com/WordPress/wordpress-develop/pull/7903
 
 * https://github.com/WordPress/gutenberg/pull/67199
+* https://github.com/WordPress/gutenberg/pull/68971
+

docs/reference-guides/core-blocks.md

@@ -14,7 +14,7 @@ Display a date archive of your posts. ([Source](https://github.com/WordPress/gut
 
 -	**Name:** core/archives
 -	**Category:** widgets
--	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** displayAsDropdown, showLabel, showPostCounts, type
 
 ## Audio

lib/compat/wordpress-6.8/site-editor.php

@@ -15,6 +15,16 @@ function ( $settings ) {
 	}
 );
 
+/**
+ * Maps old site editor urls to the new updated ones.
+ *
+ * @since 6.8.0
+ * @access private
+ *
+ * @global string $pagenow The filename of the current screen.
+ *
+ * @return string|false The new URL to redirect to, or false if no redirection is needed.
+ */
 function gutenberg_get_site_editor_redirection() {
 	global $pagenow;
 	if ( 'site-editor.php' !== $pagenow || isset( $_REQUEST['p'] ) || ! $_SERVER['QUERY_STRING'] ) {
@@ -96,10 +106,13 @@ function gutenberg_get_site_editor_redirection() {
 	return add_query_arg( array( 'p' => '/' ) );
 }
 
+/**
+ * Redirect old site editor urls to the new updated ones.
+ */
 function gutenberg_redirect_site_editor_deprecated_urls() {
 	$redirection = gutenberg_get_site_editor_redirection();
 	if ( false !== $redirection ) {
-		wp_redirect( $redirection, 301 );
+		wp_safe_redirect( $redirection );
 		exit;
 	}
 }

packages/block-directory/src/components/downloadable-blocks-panel/no-results.js

@@ -2,17 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Icon, blockDefault } from '@wordpress/icons';
 import { Tip, ExternalLink } from '@wordpress/components';
 
 function DownloadableBlocksNoResults() {
 	return (
 		<>
 			<div className="block-editor-inserter__no-results">
-				<Icon
-					className="block-editor-inserter__no-results-icon"
-					icon={ blockDefault }
-				/>
 				<p>{ __( 'No results found.' ) }</p>
 			</div>
 			<div className="block-editor-inserter__tips">

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

@@ -201,6 +201,11 @@ function Items( {
 						getDefaultBlockName(),
 						rootClientId
 					) );
+			const hasSelectedRoot = !! (
+				rootClientId &&
+				selectedBlockClientId &&
+				rootClientId === selectedBlockClientId
+			);
 
 			return {
 				order: _order,
@@ -214,8 +219,8 @@ function Items( {
 					hasAppender &&
 					! _isZoomOut() &&
 					( hasCustomAppender ||
-						showRootAppender ||
-						rootClientId === selectedBlockClientId ),
+						hasSelectedRoot ||
+						showRootAppender ),
 			};
 		},
 		[ rootClientId, hasAppender, hasCustomAppender ]

packages/block-editor/src/components/global-styles/shadow-panel-components.js

@@ -13,8 +13,8 @@ import {
 	Composite,
 	Tooltip,
 } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+import { useMemo, useRef } from '@wordpress/element';
+import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
 
 /**
  * External dependencies
@@ -119,7 +119,7 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
 		<Dropdown
 			popoverProps={ popoverProps }
 			className="block-editor-global-styles__shadow-dropdown"
-			renderToggle={ renderShadowToggle() }
+			renderToggle={ renderShadowToggle( shadow, onShadowChange ) }
 			renderContent={ () => (
 				<DropdownContentWrapper paddingSize="medium">
 					<ShadowPopoverContainer
@@ -133,25 +133,54 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
 	);
 }
 
-function renderShadowToggle() {
+function renderShadowToggle( shadow, onShadowChange ) {
 	return ( { onToggle, isOpen } ) => {
+		const shadowButtonRef = useRef( undefined );
+
 		const toggleProps = {
 			onClick: onToggle,
 			className: clsx( { 'is-open': isOpen } ),
 			'aria-expanded': isOpen,
+			ref: shadowButtonRef,
+		};
+
+		const removeButtonProps = {
+			onClick: () => {
+				if ( isOpen ) {
+					onToggle();
+				}
+				onShadowChange( undefined );
+				// Return focus to parent button.
+				shadowButtonRef.current?.focus();
+			},
+			className: clsx(
+				'block-editor-global-styles__shadow-editor__remove-button',
+				{ 'is-open': isOpen }
+			),
+			label: __( 'Remove' ),
 		};
 
 		return (
-			<Button __next40pxDefaultSize { ...toggleProps }>
-				<HStack justify="flex-start">
-					<Icon
-						className="block-editor-global-styles__toggle-icon"
-						icon={ shadowIcon }
-						size={ 24 }
+			<>
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<HStack justify="flex-start">
+						<Icon
+							className="block-editor-global-styles__toggle-icon"
+							icon={ shadowIcon }
+							size={ 24 }
+						/>
+						<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
+					</HStack>
+				</Button>
+				{ !! shadow && (
+					<Button
+						__next40pxDefaultSize
+						size="small"
+						icon={ reset }
+						{ ...removeButtonProps }
 					/>
-					<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
-				</HStack>
-			</Button>
+				) }
+			</>
 		);
 	};
 }

packages/block-editor/src/components/global-styles/style.scss

@@ -24,6 +24,7 @@
 .block-editor-global-styles__shadow-dropdown {
 	display: block;
 	padding: 0;
+	position: relative;
 
 	button {
 		width: 100%;
@@ -35,6 +36,28 @@
 	}
 }
 
+.block-editor-global-styles__shadow-editor__remove-button {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s ease-in-out;
+	}
+
+	.block-editor-global-styles__shadow-dropdown:hover &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}
+
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	appearance: none;

packages/block-editor/src/components/inner-blocks/index.js

@@ -174,11 +174,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * returns. Optionally, you can also pass any other props through this hook, and
  * they will be merged and returned.
  *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
+ *
  * @param {Object} props   Optional. Props to pass to the element. Must contain
  *                         the ref if one is defined.
  * @param {Object} options Optional. Inner blocks options.
- *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
 	const {

packages/block-editor/src/components/inner-blocks/index.native.js

@@ -35,11 +35,11 @@ import { MAX_NESTING_DEPTH } from './constants';
  * returns. Optionally, you can also pass any other props through this hook, and
  * they will be merged and returned.
  *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
+ *
  * @param {Object} props   Optional. Props to pass to the element. Must contain
  *                         the ref if one is defined.
  * @param {Object} options Optional. Inner blocks options.
- *
- * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
 	const fallbackRef = useRef();

packages/block-editor/src/components/inserter/no-results.js

@@ -2,15 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Icon, blockDefault } from '@wordpress/icons';
 
 function InserterNoResults() {
 	return (
 		<div className="block-editor-inserter__no-results">
-			<Icon
-				className="block-editor-inserter__no-results-icon"
-				icon={ blockDefault }
-			/>
 			<p>{ __( 'No results found.' ) }</p>
 		</div>
 	);

packages/block-library/src/archives/block.json

@@ -54,6 +54,15 @@
 				"fontSize": true
 			}
 		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}

packages/block-library/src/social-links/editor.scss

@@ -89,7 +89,6 @@
 // Unconfigured placeholder links are semitransparent.
 .wp-social-link.wp-social-link__is-incomplete {
 	opacity: 0.5;
-	@include reduce-motion("transition");
 }
 
 .wp-block-social-links .is-selected .wp-social-link__is-incomplete,

packages/edit-site/src/components/media/index.js

@@ -6,11 +6,11 @@ import { useEntityRecord } from '@wordpress/core-data';
 function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
 	const { record: media } = useEntityRecord( 'root', 'media', id );
 	const currentSize = size.find(
-		( s ) => !! media?.media_details?.sizes[ s ]
+		( s ) => !! media?.media_details?.sizes?.[ s ]
 	);
 
 	const mediaUrl =
-		media?.media_details?.sizes[ currentSize ]?.source_url ||
+		media?.media_details?.sizes?.[ currentSize ]?.source_url ||
 		media?.source_url;
 
 	if ( ! mediaUrl ) {

packages/editor/src/components/editor/index.js

@@ -31,24 +31,30 @@ function Editor( {
 	extraSidebarPanels,
 	...props
 } ) {
-	const { post, template, hasLoadedPost } = useSelect(
+	const { post, template, hasLoadedPost, error } = useSelect(
 		( select ) => {
-			const { getEntityRecord, hasFinishedResolution } =
-				select( coreStore );
+			const {
+				getEntityRecord,
+				getResolutionError,
+				hasFinishedResolution,
+			} = select( coreStore );
+
+			const postArgs = [ 'postType', postType, postId ];
 			return {
-				post: getEntityRecord( 'postType', postType, postId ),
+				post: getEntityRecord( ...postArgs ),
 				template: templateId
 					? getEntityRecord(
 							'postType',
 							TEMPLATE_POST_TYPE,
 							templateId
 					  )
 					: undefined,
-				hasLoadedPost: hasFinishedResolution( 'getEntityRecord', [
-					'postType',
-					postType,
-					postId,
-				] ),
+				hasLoadedPost: hasFinishedResolution(
+					'getEntityRecord',
+					postArgs
+				),
+				error: getResolutionError( 'getEntityRecord', postArgs )
+					?.message,
 			};
 		},
 		[ postType, postId, templateId ]
@@ -57,10 +63,15 @@ function Editor( {
 	return (
 		<>
 			{ hasLoadedPost && ! post && (
-				<Notice status="warning" isDismissible={ false }>
-					{ __(
-						"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-					) }
+				<Notice
+					status={ !! error ? 'error' : 'warning' }
+					isDismissible={ false }
+				>
+					{ ! error
+						? __(
+								"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+						  )
+						: error }
 				</Notice>
 			) }
 			{ !! post && (

test/integration/fixtures/blocks/core__separator-color.json

@@ -4,8 +4,8 @@
 		"isValid": true,
 		"attributes": {
 			"opacity": "alpha-channel",
-			"backgroundColor": "accent",
-			"tagName": "hr"
+			"tagName": "hr",
+			"backgroundColor": "accent"
 		},
 		"innerBlocks": []
 	}

test/integration/fixtures/blocks/core__separator-custom-color.json

@@ -4,12 +4,12 @@
 		"isValid": true,
 		"attributes": {
 			"opacity": "alpha-channel",
+			"tagName": "hr",
 			"style": {
 				"color": {
 					"background": "#5da54c"
 				}
-			},
-			"tagName": "hr"
+			}
 		},
 		"innerBlocks": []
 	}