WordPress · ockham · Oct 18, 2022 · Oct 17, 2022 · Oct 17, 2022 · Oct 16, 2022
@@ -144,6 +144,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getSelectedBlockCount,
 			getBlockName,
 			__unstableGetContentLockingParent,
+			getTemplateLock,
 		} = select( blockEditorStore );
 
 		const _selectedBlockClientId = getSelectedBlockClientId();
@@ -157,9 +158,11 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockClientId: _selectedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			topLevelLockedBlock: __unstableGetContentLockingParent(
-				_selectedBlockClientId
-			),
+			topLevelLockedBlock:
+				__unstableGetContentLockingParent( _selectedBlockClientId ) ||
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+					? _selectedBlockClientId
+					: undefined ),
 		};
 	}, [] );
 

@@ -2,6 +2,11 @@
 	cursor: pointer;
 	margin-bottom: $grid-unit-30;
 
+	// The list item contains absolutely positioned visually hidden text,
+	// so make this container relative. This prevents the bug experienced in
+	// https://github.com/WordPress/gutenberg/issues/44842.
+	position: relative;
+
 	&.is-placeholder {
 		min-height: 100px;
 	}

@@ -36,8 +36,9 @@
 .block-list-appender:only-child {
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
-	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > & {
+	// Legacy groups have an inner container so need to be targeted separately
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > & {
 		pointer-events: none;
 
 		&::after {

@@ -40,7 +40,7 @@ export default function useInnerBlockTemplateSync(
 	templateLock,
 	templateInsertUpdatesSelection
 ) {
-	const { getSelectedBlocksInitialCaretPosition } =
+	const { getSelectedBlocksInitialCaretPosition, isBlockSelected } =
 		useSelect( blockEditorStore );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const innerBlocks = useSelect(
@@ -86,7 +86,8 @@ export default function useInnerBlockTemplateSync(
 					nextBlocks,
 					currentInnerBlocks.length === 0 &&
 						templateInsertUpdatesSelection &&
-						nextBlocks.length !== 0,
+						nextBlocks.length !== 0 &&
+						isBlockSelected( clientId ),
 					// This ensures the "initialPosition" doesn't change when applying the template
 					// If we're supposed to focus the block, we'll focus the first inner block
 					// otherwise, we won't apply any auto-focus.

@@ -221,6 +221,7 @@ export default function SpacingInputControl( {
 						hideLabelFromVision={ true }
 						className="components-spacing-sizes-control__custom-value-input"
 						style={ { gridColumn: '1' } }
+						size={ '__unstable-large' }
 					/>
 
 					<RangeControl
@@ -279,6 +280,7 @@ export default function SpacingInputControl( {
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
 					__nextUnconstrainedWidth={ true }
+					size={ '__unstable-large' }
 				/>
 			) }
 		</>

@@ -2,7 +2,7 @@
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
-	grid-template-rows: 25px auto;
+	grid-template-rows: 16px auto;
 }
 
 .component-spacing-sizes-control {
@@ -27,7 +27,7 @@
 		grid-column: 1 / 1;
 		justify-content: left;
 		height: $grid-unit-20;
-		margin-top: $grid-unit-15;
+		margin-top: $grid-unit-20;
 	}
 
 	.components-spacing-sizes-control__side-label {
@@ -37,8 +37,9 @@
 	}
 
 	&.is-unlinked {
-		.components-range-control.components-spacing-sizes-control__range-control {
-			margin-top: $grid-unit-15;
+		.components-range-control.components-spacing-sizes-control__range-control,
+		.components-spacing-sizes-control__custom-value-input {
+			margin-top: $grid-unit-10;
 		}
 	}
 
@@ -60,12 +61,7 @@
 		grid-column: 2 / 2;
 		grid-row: 1 / 1;
 		justify-self: end;
-		padding: 0;
-		&.is-small.has-icon {
-			padding: 0;
-			min-width: $icon-size;
-			height: $grid-unit-20;
-		}
+		margin-top: -4px;
 	}
 
 	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
@@ -75,33 +71,43 @@
 	.components-spacing-sizes-control__custom-toggle-single {
 		grid-column: 3 / 3;
 		justify-self: end;
-		&.is-small.has-icon {
-			padding: 0;
-			min-width: $icon-size;
-			height: $grid-unit-20;
-			margin-top: $grid-unit-15;
-		}
+		margin-top: $grid-unit-15;
 	}
 
 	.component-spacing-sizes-control__linked-button {
 		grid-column: 3 / 3;
 		grid-row: 1 / 1;
 		justify-self: end;
+		line-height: 0;
+		margin-top: -4px;
 	}
 
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
-		margin-left: $grid-unit-10;
-		height: 30px;
+		margin-left: $grid-unit-20;
+		margin-top: 8px;
 	}
 
 	.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
+		margin-top: 8px;
+	}
+
+	.components-range-control {
+		height: 40px;
+		/* Vertically center the RangeControl until it has true 40px height. */
+		display: flex;
+		align-items: center;
+
+		> .components-base-control__field {
+			/* Fixes RangeControl contents when the outer wrapper is flex */
+			flex: 1;
+		}
 	}
 
 	.components-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		height: 40px;
+		margin-top: 8px;
 	}
 
 	.components-range-control__mark {
@@ -125,5 +131,6 @@
 
 	.components-spacing-sizes-control__custom-select-control {
 		grid-column: span 3;
+		margin-top: $grid-unit-10;
 	}
 }
@@ -127,7 +127,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 			$label = 'aria-label="' . sprintf( esc_attr__( '(%s website link, opens in a new tab)' ), $comment->comment_author ) . '"';
 		}
 		// translators: %1$s: Comment Author website link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
-		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', $comment->comment_author_url, esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
+		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( $comment->comment_author_url ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 	}
 	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
 }

@@ -20,12 +20,16 @@ export default function useOutdentListItem( clientId ) {
 	const registry = useRegistry();
 	const { canOutdent } = useSelect(
 		( innerSelect ) => {
-			const { getBlockRootClientId } = innerSelect( blockEditorStore );
+			const { getBlockRootClientId, getBlockName } =
+				innerSelect( blockEditorStore );
 			const grandParentId = getBlockRootClientId(
 				getBlockRootClientId( clientId )
 			);
+			const grandParentName = getBlockName( grandParentId );
+			const isListItem = grandParentName === listItemName;
+
 			return {
-				canOutdent: !! grandParentId,
+				canOutdent: isListItem,
 			};
 		},
 		[ clientId ]

@@ -646,7 +646,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$toggle_aria_label_close,
 		esc_attr( implode( ' ', $responsive_container_classes ) ),
 		esc_attr( implode( ' ', $open_button_classes ) ),
-		safecss_filter_attr( $colors['overlay_inline_styles'] ),
+		esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
 		__( 'Menu' ),
 		$toggle_button_content,
 		$toggle_close_button_content

@@ -20,7 +20,7 @@ function render_block_core_rss( $attributes ) {
 	$rss = fetch_feed( $attributes['feedURL'] );
 
 	if ( is_wp_error( $rss ) ) {
-		return '<div class="components-placeholder"><div class="notice notice-error"><strong>' . __( 'RSS Error:' ) . '</strong> ' . $rss->get_error_message() . '</div></div>';
+		return '<div class="components-placeholder"><div class="notice notice-error"><strong>' . __( 'RSS Error:' ) . '</strong> ' . esc_html( $rss->get_error_message() ) . '</div></div>';
 	}
 
 	if ( ! $rss->get_item_quantity() ) {
@@ -48,8 +48,8 @@ function render_block_core_rss( $attributes ) {
 			if ( $date ) {
 				$date = sprintf(
 					'<time datetime="%1$s" class="wp-block-rss__item-publish-date">%2$s</time> ',
-					date_i18n( get_option( 'c' ), $date ),
-					date_i18n( get_option( 'date_format' ), $date )
+					esc_attr( date_i18n( get_option( 'c' ), $date ) ),
+					esc_attr( date_i18n( get_option( 'date_format' ), $date ) )
 				);
 			}
 		}

@@ -367,12 +367,12 @@ function styles_for_block_core_search( $attributes ) {
 	// Add color styles.
 	$has_text_color = ! empty( $attributes['style']['color']['text'] );
 	if ( $has_text_color ) {
-		$button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) );
+		$button_styles[] = sprintf( 'color: %s;', $attributes['style']['color']['text'] );
 	}
 
 	$has_background_color = ! empty( $attributes['style']['color']['background'] );
 	if ( $has_background_color ) {
-		$button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) );
+		$button_styles[] = sprintf( 'background-color: %s;', $attributes['style']['color']['background'] );
 	}
 
 	$has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
@@ -399,9 +399,9 @@ function styles_for_block_core_search( $attributes ) {
 	}
 
 	return array(
-		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '',
-		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '',
-		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '',
+		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $input_styles ) ) ) ) : '',
+		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $button_styles ) ) ) ) : '',
+		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) ) : '',
 		'label'   => ! empty( $label_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $label_styles ) ) ) ) : '',
 	);
 }

@@ -5,6 +5,7 @@
 ### Bug Fix
 
 -   `FontSizePicker`: Ensure that fluid font size presets appear correctly in the UI controls ([#44791](https://github.com/WordPress/gutenberg/pull/44791))
+-   `Navigator`: restore focus only once per location  ([#44972](https://github.com/WordPress/gutenberg/pull/44972)).
 -   The `LinkedButton` to unlink sides in `BoxControl`, `BorderBoxControl` and `BorderRadiusControl` have changed from a rectangular primary button to an icon-only button, with a sentence case tooltip, and default-size icon for better legibility. The `Button` component has been fixed so when `isSmall` and `icon` props are set, and no text is present, the button shape is square rather than rectangular.
 -   `Popover`: fix limitShift logic by adding iframe offset correctly [#42950](https://github.com/WordPress/gutenberg/pull/42950)).
 

@@ -116,7 +116,7 @@ function FontSizePicker(
 		}
 
 		// Calculate the `hint` for toggle group control.
-		let hint = selectedOption.name;
+		let hint = selectedOption?.name || selectedOption.slug;
 		if (
 			! fontSizesContainComplexValues &&
 			typeof selectedOption.size === 'string'

@@ -49,6 +49,7 @@ function NavigatorProvider(
 					...options,
 					path,
 					isBack: false,
+					hasRestoredFocus: false,
 				},
 			] );
 		},
@@ -62,6 +63,7 @@ function NavigatorProvider(
 				{
 					...locationHistory[ locationHistory.length - 2 ],
 					isBack: true,
+					hasRestoredFocus: false,
 				},
 			] );
 		}

@@ -79,7 +79,13 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 		// - if the current location is not the initial one (to avoid moving focus on page load)
 		// - when the screen becomes visible
 		// - if the wrapper ref has been assigned
-		if ( isInitialLocation || ! isMatch || ! wrapperRef.current ) {
+		// - if focus hasn't already been restored for the current location
+		if (
+			isInitialLocation ||
+			! isMatch ||
+			! wrapperRef.current ||
+			location.hasRestoredFocus
+		) {
 			return;
 		}
 
@@ -103,10 +109,12 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}
 
+		location.hasRestoredFocus = true;
 		elementToFocus.focus();
 	}, [
 		isInitialLocation,
 		isMatch,
+		location.hasRestoredFocus,
 		location.isBack,
 		previousLocation?.focusTargetSelector,
 	] );

@@ -11,6 +11,7 @@ export type NavigatorLocation = NavigateOptions & {
 	isInitial?: boolean;
 	isBack?: boolean;
 	path?: string;
+	hasRestoredFocus?: boolean;
 };
 
 export type NavigatorContext = {

@@ -122,7 +122,7 @@ async function downloadTestSuite(
 	// Alpha, Beta, and RC versions are bleeding edge and should pull from trunk.
 	let ref;
 	const fetchRaw = [];
-	if ( ! wpVersion || wpVersion.match( /-(?:alpha|beta|rc)/ ) ) {
+	if ( ! wpVersion || wpVersion.match( /-(?:alpha|beta|rc)/i ) ) {
 		ref = 'trunk';
 		fetchRaw.push( 'fetch', 'origin', ref, '--depth', '1' );
 	} else {

@@ -34,7 +34,7 @@ function render_block_core_legacy_widget( $attributes ) {
 
 	if ( isset( $attributes['instance']['encoded'], $attributes['instance']['hash'] ) ) {
 		$serialized_instance = base64_decode( $attributes['instance']['encoded'] );
-		if ( wp_hash( $serialized_instance ) !== $attributes['instance']['hash'] ) {
+		if ( ! hash_equals( wp_hash( $serialized_instance ), (string) $attributes['instance']['hash'] ) ) {
 			return '';
 		}
 		$instance = unserialize( $serialized_instance );

@@ -28,7 +28,7 @@ function render_block_core_widget_group( $attributes, $content, $block ) {
 	$html = '';
 
 	if ( ! empty( $attributes['title'] ) ) {
-		$html .= $before_title . $attributes['title'] . $after_title;
+		$html .= $before_title . esc_html( $attributes['title'] ) . $after_title;
 	}
 
 	$html .= '<div class="wp-widget-group__inner-blocks">';

diff --git a/...specs/editor/blocks/__snapshots__/List-can-be-exited-to-selected-paragraph-1-chromium.txt b/...specs/editor/blocks/__snapshots__/List-can-be-exited-to-selected-paragraph-1-chromium.txt
@@ -0,0 +1,9 @@
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->