Cherry-pick bugfixes for 6.3.2 (#53623)

* Update document title buttons radius (#53221)

* Fix: Sync status overlaps for some languages in Patterns post type page (#53243)

* Image block: Fix stretched images constrained by max-width (#53274)

* Fix dragging to resize from stretching image in the frontend

* Add image block v7 deprecation

* Update deprecation comment

* Prevent image losing its aspect ratio at smaller window dimensions

* Revert "Prevent image losing its aspect ratio at smaller window dimensions"

This reverts commit 8ac9f8c.

---------

Co-authored-by: scruffian <ben@scruffian.com>

* Image Block: Don't render `DimensionsTool` if it is not resizable (#53181)

* Fix missing Replace button in content-locked Image blocks (#53410)

* Revert "don't display BlockContextualToolbar at all in contentonly locking (#53110)"

This reverts commit 5efce0e.

* Alternative fix to hide BlockContextualToolbar when there are no controls

* fix the go to for non pages by showing it only for pages (#53408)

* Site Editor: Fix document actions label helper method (#52974)

* Site Editor: Fix document actions label helper method
* Add missing useSelect dep
* Fix e2e tests
* Move the label map at the file level to avoid recreating the object on every render

* Image: Clear aspect ratio when wide aligned (#53439)

* RichText: Remove 'Footnotes' when interactive formatting is disabled (#53474)

Introduce a new 'interactive' setting for format types

* Preserve block style variations when securing theme json (#53466)

* Preserve block style variations when securing theme json

Valid and safe block style variations were being removed by
`WP_Theme_JSON_Gutenberg::remove_insecure_properties` when securing the
theme.json. When this was a problem varied depending upon site
configuration, but out-of-the-box it was a problem for administrators on
multi-site installs.

This change adds explicit processing of variations in
`remove_insecure_properties` so that they won't get removed.

* Add another variation sanitisation test

This test checks that when removing insecure properties an
unknown/unsupported property is removed from the variation.

* Site editor: add missing i18n in `HomeTemplateDetails` (#53543)

* Site editor: add missing i18n in `HomeTemplateDetails`

* Lint fix

* Fix: Snack bar not fixed on certain pages in the Site Editor (#53207)

* Fix document title alignment in command palette button (#53224)

* Fallback to default max viewport if layout wide size is fluid. (#53551)

* Link Control: persist advanced settings toggle state to preferences if available (#52799)

* Link Control: Create a preference for whether the advanced section is open

* move the useSelect to the component that uses it

* Supply preference setter via settings

* Pass setter to Post Editor

* Provide local state fallbacks in absence of preference store settings

* Conditionalise display of settings drawer to “edit” mode only

* Extract to constant to improve comprehension

* Fix bug in preferences resolution

* Improve comments

* Add e2e scaffold

* Fix e2e test to correctly assert on feature

* Remove focused test

* Reinstate original logic to hide settings when not required

* Scaffold documentation

* Revert providing prefs via settings

* Refactor to use `core/block-editor` as preference scope

* Update docs

* Reinstate remaining original conditional

* tentative fix for the e2e test

* Try a different syntax for shiftAlt

* another attempt to fix the e2e test

---------

Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>

* Add tests for fluid layout + typography (#53554)

* Fix support of sticky position in non-iframed post editor (#53540)

* Fix support of sticky position in non-iframed post editor

* Revert "Footnotes: Fix recursion into updating attributes when attributes is not an object (#53257)"

This reverts commit ab04074.

* Fix: indicator style when block moving mode (#53972)

* Fix post editor top toolbar with custom fields in Safari (#53688)

* Set top toolbar size dynamically (#53526)

* fix the top toolbar size in the space remaining after plugin items are pinned

* only resize above the tablet breakpoint

* fix fixed block toolbar collapse button when icon labels are shown

* Update height and scroll behavior

* move the layout effect to the affected component, fixes for fullscreen, no block selected, icon labels height

---------

Co-authored-by: jasmussen <joen@automattic.com>

* Roll back camelCase change in 96b6b1e

---------

Co-authored-by: James Koster <james@jameskoster.co.uk>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Alex Lende <alex+github.com@lende.xyz>
Co-authored-by: scruffian <ben@scruffian.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Dean Sas <dean.sas@automattic.com>
Co-authored-by: Pascal Birchler <pascalb@google.com>
Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>
Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>
Co-authored-by: jasmussen <joen@automattic.com>
Co-authored-by: ramon <ramonjd@gmail.com>

lib/block-supports/typography.php

@@ -451,7 +451,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 	$fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
 
 	// Defaults.
-	$default_maximum_viewport_width       = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px';
+	$default_maximum_viewport_width       = isset( $layout_settings['wideSize'] ) && ! empty( gutenberg_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : '1600px';
 	$default_minimum_viewport_width       = '320px';
 	$default_minimum_font_size_factor_max = 0.75;
 	$default_minimum_font_size_factor_min = 0.25;

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

@@ -2906,6 +2906,20 @@ public static function remove_insecure_properties( $theme_json ) {
 			if ( ! empty( $output ) ) {
 				_wp_array_set( $sanitized, $metadata['path'], $output );
 			}
+
+			if ( isset( $metadata['variations'] ) ) {
+				foreach ( $metadata['variations'] as $variation ) {
+					$variation_input = _wp_array_get( $theme_json, $variation['path'], array() );
+					if ( empty( $variation_input ) ) {
+						continue;
+					}
+
+					$variation_output = static::remove_insecure_styles( $variation_input );
+					if ( ! empty( $variation_output ) ) {
+						_wp_array_set( $sanitized, $variation['path'], $variation_output );
+					}
+				}
+			}
 		}
 
 		$setting_nodes = static::get_setting_nodes( $theme_json );

packages/base-styles/_z-index.scss

@@ -189,6 +189,7 @@ $z-layers: (
 	".edit-site-layout__hub": 3,
 	".edit-site-layout__header": 2,
 	".edit-site-page-header": 2,
+	".edit-site-page-content": 1,
 	".edit-site-layout__canvas-container": 2,
 	".edit-site-layout__sidebar": 1,
 	".edit-site-layout__canvas-container.is-resizing::after": 100,

packages/block-editor/src/components/block-controls/use-has-block-controls.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import groups from './groups';
+
+export function useHasAnyBlockControls() {
+	let hasAnyBlockControls = false;
+	for ( const group in groups ) {
+		// It is safe to violate the rules of hooks here as the `groups` object
+		// is static and will not change length between renders. Do not return
+		// early as that will cause the hook to be called a different number of
+		// times between renders.
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		if ( useHasBlockControls( group ) ) {
+			hasAnyBlockControls = true;
+		}
+	}
+	return hasAnyBlockControls;
+}
+
+export function useHasBlockControls( group = 'default' ) {
+	const Slot = groups[ group ]?.Slot;
+	const fills = useSlotFills( Slot?.__unstableName );
+	if ( ! Slot ) {
+		warning( `Unknown BlockControls group "${ group }" provided.` );
+		return null;
+	}
+	return !! fills?.length;
+}

packages/block-editor/src/components/block-list/content.scss

@@ -85,7 +85,6 @@
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
 	.block-editor-block-list__block:not([contenteditable]):focus {
 		outline: none;
 
@@ -113,8 +112,6 @@
 
 	// Moving blocks using keyboard (Ellipsis > Move).
 	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
-		box-shadow: none;
-		outline: none;
 
 		&::after {
 			content: "";
@@ -130,6 +127,8 @@
 			top: -$default-block-margin * 0.5;
 			border-radius: $radius-block-ui;
 			border-top: 4px solid $gray-400;
+			bottom: auto;
+			box-shadow: none;
 		}
 	}
 

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

@@ -252,6 +252,16 @@
 		flex-shrink: 1;
 	}
 
+	@include break-medium() {
+		.block-editor-block-contextual-toolbar.is-fixed {
+			.components-toolbar,
+			.components-toolbar-group {
+				flex-shrink: 0;
+			}
+		}
+	}
+
+
 	.block-editor-rich-text__inline-format-toolbar-group {
 		.components-button + .components-button {
 			margin-left: 6px;

packages/block-editor/src/components/block-tools/block-contextual-toolbar.js

@@ -7,7 +7,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import {
+	useLayoutEffect,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
@@ -25,6 +30,7 @@ import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	// When the toolbar is fixed it can be collapsed
@@ -34,10 +40,10 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		blockType,
+		blockEditingMode,
 		hasParents,
 		showParentSelector,
 		selectedBlockClientId,
-		isContentOnly,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -58,9 +64,8 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			blockType:
 				_selectedBlockClientId &&
 				getBlockType( getBlockName( _selectedBlockClientId ) ),
+			blockEditingMode: getBlockEditingMode( _selectedBlockClientId ),
 			hasParents: parents.length,
-			isContentOnly:
-				getBlockEditingMode( _selectedBlockClientId ) === 'contentOnly',
 			showParentSelector:
 				parentBlockType &&
 				getBlockEditingMode( firstParentClientId ) === 'default' &&
@@ -78,10 +83,84 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 		setIsCollapsed( false );
 	}, [ selectedBlockClientId ] );
 
+	const isLargerThanTabletViewport = useViewportMatch( 'large', '>=' );
+	const isFullscreen =
+		document.body.classList.contains( 'is-fullscreen-mode' );
+
+	useLayoutEffect( () => {
+		// don't do anything if not fixed toolbar
+		if ( ! isFixed || ! blockType ) {
+			return;
+		}
+
+		const blockToolbar = document.querySelector(
+			'.block-editor-block-contextual-toolbar'
+		);
+
+		if ( ! blockToolbar ) {
+			return;
+		}
+
+		if ( ! isLargerThanTabletViewport ) {
+			// set the width of the toolbar to auto
+			blockToolbar.style = {};
+			return;
+		}
+
+		if ( isCollapsed ) {
+			// set the width of the toolbar to auto
+			blockToolbar.style.width = 'auto';
+			return;
+		}
+
+		// get the width of the pinned items in the post editor
+		const pinnedItems = document.querySelector(
+			'.edit-post-header__settings'
+		);
+
+		// get the width of the left header in the site editor
+		const leftHeader = document.querySelector(
+			'.edit-site-header-edit-mode__end'
+		);
+
+		const computedToolbarStyle = window.getComputedStyle( blockToolbar );
+		const computedPinnedItemsStyle = pinnedItems
+			? window.getComputedStyle( pinnedItems )
+			: false;
+		const computedLeftHeaderStyle = leftHeader
+			? window.getComputedStyle( leftHeader )
+			: false;
+
+		const marginLeft = parseFloat( computedToolbarStyle.marginLeft );
+		const pinnedItemsWidth = computedPinnedItemsStyle
+			? parseFloat( computedPinnedItemsStyle.width ) + 10 // 10 is the pinned items padding
+			: 0;
+		const leftHeaderWidth = computedLeftHeaderStyle
+			? parseFloat( computedLeftHeaderStyle.width )
+			: 0;
+
+		// set the new witdth of the toolbar
+		blockToolbar.style.width = `calc(100% - ${
+			leftHeaderWidth +
+			pinnedItemsWidth +
+			marginLeft +
+			( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
+		}px)`;
+	}, [
+		isFixed,
+		isLargerThanTabletViewport,
+		isCollapsed,
+		isFullscreen,
+		blockType,
+	] );
+
+	const isToolbarEnabled =
+		! blockType ||
+		hasBlockSupport( blockType, '__experimentalToolbar', true );
+	const hasAnyBlockControls = useHasAnyBlockControls();
 	if (
-		isContentOnly ||
-		( blockType &&
-			! hasBlockSupport( blockType, '__experimentalToolbar', true ) )
+		! isToolbarEnabled ||
+		( blockEditingMode !== 'default' && ! hasAnyBlockControls )
 	) {
 		return null;
 	}

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

@@ -110,6 +110,12 @@
 		z-index: z-index(".block-editor-block-popover");
 		display: block;
 		width: 100%;
+		overflow: hidden;
+
+		.block-editor-block-toolbar {
+			overflow: auto;
+			overflow-y: hidden;
+		}
 
 		border: none;
 		border-bottom: $border-width solid $gray-200;
@@ -121,10 +127,6 @@
 		}
 	}
 
-	&:has(.block-editor-block-toolbar:empty) {
-		display: none;
-	}
-
 	// Add a scrim to the right of the collapsed button.
 	&.is-collapsed::after {
 		content: "";
@@ -137,33 +139,47 @@
 
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
+	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
 	@include break-medium() {
 		&.is-fixed {
-
 			// leave room for block inserter, undo and redo, list view
-			margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
+			margin-left: $toolbar-margin;
 			// position on top of interface header
 			position: fixed;
-			top: $admin-bar-height + $grid-unit - $border-width;
+			top: $admin-bar-height;
 			// Don't fill up when empty
 			min-height: initial;
 			// remove the border
 			border-bottom: none;
 			// has to be flex for collapse button to fit
 			display: flex;
 
+			// Mimic the height of the parent, vertically align center, and provide a max-height.
+			height: $header-height;
+			align-items: center;
+
 			&.is-collapsed {
 				width: initial;
 			}
 
+			&:empty {
+				width: initial;
+			}
+
 			.is-fullscreen-mode & {
 				// leave room for block inserter, undo and redo, list view
 				// and some margin left
 				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
-				top: $grid-unit - $border-width;
+
+				top: 0;
+
 				&.is-collapsed {
 					width: initial;
 				}
+
+				&:empty {
+					width: initial;
+				}
 			}
 
 			& > .block-editor-block-toolbar.is-showing-movers {
@@ -249,7 +265,7 @@
 
 			.show-icon-labels & {
 
-				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ;
+				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
 
 				.is-fullscreen-mode & {
 					margin-left: $grid-unit * 18; // site hub, inserter and margin
@@ -322,7 +338,12 @@
 	// except for the inserter on the left
 	@include break-medium() {
 		&.is-fixed {
-			width: 100%;
+			width: calc(100% - #{$toolbar-margin});
+
+			.show-icon-labels & {
+				width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
+			}
+
 		}
 	}
 
@@ -332,6 +353,9 @@
 	@include break-large() {
 		&.is-fixed {
 			width: auto;
+			.show-icon-labels & {
+				width: auto; //there are no undo, redo and list view buttons
+			}
 		}
 		.is-fullscreen-mode &.is-fixed {
 			// in full screen mode we need to account for

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

@@ -561,6 +561,16 @@ describe( 'typography utils', () => {
 				},
 				expected: { fluid: { maxViewPortWidth: '10px' } },
 			},
+			{
+				message: 'should not merge `layout.wideSize` if it is fluid',
+				settings: {
+					typography: { fluid: { minFontSize: '16px' } },
+					layout: { wideSize: 'clamp(1000px, 85vw, 2000px)' },
+				},
+				expected: {
+					fluid: { minFontSize: '16px' },
+				},
+			},
 		].forEach( ( { message, settings, expected } ) => {
 			it( `${ message }`, () => {
 				expect(