Merge branch 'trunk' into fix/native-rich-text-on-delete

# Conflicts:
#	packages/react-native-editor/CHANGELOG.md

backport-changelog/6.6/6756.md

@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/6756
 
 * https://github.com/WordPress/gutenberg/pull/62461
+* https://github.com/WordPress/gutenberg/pull/62495

docs/explanations/README.md

@@ -8,5 +8,5 @@
 -   [Block Editor Performance](/docs/explanations/architecture/performance.md).
 -   What are the decision decisions behind the Data Module?
 -   [Why is Puppeteer the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md)
--   [What’s the difference between the different editor packages? What’s the purpose of each package?](/docs/explanations/architecture/modularity.md/#whats-the-difference-between-the-different-editor-packages-whats-the-purpose-of-each-package)
+-   [What’s the difference between the different editor packages? What’s the purpose of each package?](/docs/explanations/architecture/modularity.md#whats-the-difference-between-the-different-editor-packages-whats-the-purpose-of-each-package)
 -   [Template and template parts flows](/docs/explanations/architecture/full-site-editing-templates.md)

docs/reference-guides/core-blocks.md

@@ -706,7 +706,7 @@ Give special visual emphasis to a quote from your text. ([Source](https://github
 
 -	**Name:** core/pullquote
 -	**Category:** text
--	**Supports:** align (full, left, right, wide), anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
+-	**Supports:** align (full, left, right, wide), anchor, background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** citation, textAlign, value
 
 ## Query Loop
@@ -783,7 +783,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 
 -	**Name:** core/quote
 -	**Category:** text
--	**Supports:** anchor, color (background, gradients, heading, link, text), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** citation, textAlign, value
 
 ## Read More
@@ -948,7 +948,7 @@ Insert poetry. Use special spacing formats. Or quote song lyrics. ([Source](http
 
 -	**Name:** core/verse
 -	**Category:** text
--	**Supports:** anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
+-	**Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** content, textAlign
 
 ## Video

lib/class-wp-rest-global-styles-controller-gutenberg.php

@@ -330,6 +330,25 @@ protected function prepare_item_for_database( $request ) {
 			} elseif ( isset( $existing_config['styles'] ) ) {
 				$config['styles'] = $existing_config['styles'];
 			}
+
+			/*
+			 * If the incoming request is going to create a new variation
+			 * that is not yet registered, we register it here.
+			 * This is because the variations are registered on init,
+			 * but we want this endpoint to return the new variation immediately:
+			 * if we don't register it, it'll be stripped out of the response
+			 * just in this request (subsequent ones will be ok).
+			 * Take the variations defined in styles.blocks.variations from the incoming request
+			 * that are not part of the $existing_config.
+			 */
+			if ( isset( $request['styles']['blocks']['variations'] ) ) {
+				$existing_variations = isset( $existing_config['styles']['blocks']['variations'] ) ? $existing_config['styles']['blocks']['variations'] : array();
+				$new_variations      = array_diff_key( $request['styles']['blocks']['variations'], $existing_variations );
+				if ( ! empty( $new_variations ) ) {
+					gutenberg_register_block_style_variations_from_theme_json_data( $new_variations );
+				}
+			}
+
 			if ( isset( $request['settings'] ) ) {
 				$config['settings'] = $request['settings'];
 			} elseif ( isset( $existing_config['settings'] ) ) {

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

@@ -72,7 +72,7 @@ public function get_data() {
 	/**
 	 * Return theme JSON object.
 	 *
-	 * @since 18.3.0
+	 * @since 18.5.0
 	 *
 	 * @return WP_Theme_JSON
 	 */

lib/compat/wordpress-6.6/admin-bar.php

@@ -25,14 +25,14 @@ function gutenberg_admin_bar_edit_site_menu( $wp_admin_bar ) {
 	}
 
 	// Don't show for users who can't edit theme options or when in the admin.
-	if ( ! current_user_can( 'edit_theme_options' ) || is_admin() ) {
+	if ( ! current_user_can( 'edit_theme_options' ) || is_admin() || ( is_blog_admin() && is_multisite() && current_user_can( 'manage_sites' ) ) ) {
 		return;
 	}
 
 	$wp_admin_bar->add_node(
 		array(
 			'id'    => 'site-editor',
-			'title' => __( 'Site Editor' ),
+			'title' => __( 'Edit site' ),
 			'href'  => add_query_arg(
 				array(
 					'postType' => 'wp_template',

packages/block-editor/src/components/block-list/use-in-between-inserter.js

@@ -40,7 +40,9 @@ export function useInBetweenInserter() {
 			}
 
 			function onMouseMove( event ) {
-				if ( openRef.current ) {
+				// openRef is the reference to the insertion point between blocks.
+				// If the reference is not set or the insertion point is already open, return.
+				if ( openRef === undefined || openRef.current ) {
 					return;
 				}
 

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

@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import {
 	DropdownMenu,
 	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
+	__experimentalText as Text,
+	MenuGroup,
 } from '@wordpress/components';
 import {
 	switchToBlockType,
@@ -33,6 +35,7 @@ function BlockSwitcherDropdownMenuContents( {
 	clientIds,
 	hasBlockStyles,
 	canRemove,
+	isUsingBindings,
 } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
@@ -118,6 +121,17 @@ function BlockSwitcherDropdownMenuContents( {
 			</p>
 		);
 	}
+
+	const connectedBlockDescription = isSingleBlock
+		? _x(
+				'This block is connected.',
+				'block toolbar button label and description'
+		  )
+		: _x(
+				'These blocks are connected.',
+				'block toolbar button label and description'
+		  );
+
 	return (
 		<div className="block-editor-block-switcher__container">
 			{ hasPatternTransformation && (
@@ -156,11 +170,18 @@ function BlockSwitcherDropdownMenuContents( {
 					onSwitch={ onClose }
 				/>
 			) }
+			{ isUsingBindings && (
+				<MenuGroup>
+					<Text className="block-editor-block-switcher__binding-indicator">
+						{ connectedBlockDescription }
+					</Text>
+				</MenuGroup>
+			) }
 		</div>
 	);
 }
 
-export const BlockSwitcher = ( { clientIds, disabled } ) => {
+export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 	const {
 		canRemove,
 		hasBlockStyles,
@@ -303,6 +324,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 								clientIds={ clientIds }
 								hasBlockStyles={ hasBlockStyles }
 								canRemove={ canRemove }
+								isUsingBindings={ isUsingBindings }
 							/>
 						) }
 					</DropdownMenu>

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

@@ -203,3 +203,8 @@
 	padding: 6px $grid-unit;
 	margin: 0;
 }
+
+.block-editor-block-switcher__binding-indicator {
+	display: block;
+	padding: $grid-unit;
+}

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

@@ -35,7 +35,7 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import Shuffle from './shuffle';
-import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
+import PatternOverridesToolbarIndicator from '../pattern-overrides-toolbar-indicator';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
 /**
@@ -67,11 +67,13 @@ export function PrivateBlockToolbar( {
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
+		hasParentPattern,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockMode,
 			getBlockParents,
+			getBlockParentsByBlockName,
 			getSelectedBlockClientIds,
 			isBlockValid,
 			getBlockRootClientId,
@@ -94,8 +96,13 @@ export function PrivateBlockToolbar( {
 		const isVisual = selectedBlockClientIds.every(
 			( id ) => getBlockMode( id ) === 'visual'
 		);
-		const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId )
-			?.metadata?.bindings;
+		const bindings = getBlockAttributes( selectedBlockClientId )?.metadata
+			?.bindings;
+		const parentPatternClientId = getBlockParentsByBlockName(
+			selectedBlockClientId,
+			'core/block',
+			true
+		)[ 0 ];
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
@@ -115,7 +122,8 @@ export function PrivateBlockToolbar( {
 				) &&
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
-			isUsingBindings: _isUsingBindings,
+			isUsingBindings: !! bindings,
+			hasParentPattern: !! parentPatternClientId,
 		};
 	}, [] );
 
@@ -146,6 +154,7 @@ export function PrivateBlockToolbar( {
 
 	const innerClasses = clsx( 'block-editor-block-toolbar', {
 		'is-synced': isSynced,
+		'is-connected': isUsingBindings,
 	} );
 
 	return (
@@ -167,9 +176,13 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
-				{ isUsingBindings && canBindBlock( blockName ) && (
-					<BlockBindingsIndicator clientIds={ blockClientIds } />
-				) }
+				{ isUsingBindings &&
+					hasParentPattern &&
+					canBindBlock( blockName ) && (
+						<PatternOverridesToolbarIndicator
+							clientIds={ blockClientIds }
+						/>
+					) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (
 						<div
@@ -180,6 +193,7 @@ export function PrivateBlockToolbar( {
 								<BlockSwitcher
 									clientIds={ blockClientIds }
 									disabled={ ! isDefaultEditingMode }
+									isUsingBindings={ isUsingBindings }
 								/>
 								{ isDefaultEditingMode && (
 									<>

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

@@ -39,14 +39,17 @@
 		border-right: $border-width solid $gray-300;
 	}
 
-	&.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
-		color: var(--wp-block-synced-color);
-	}
-
-	&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
-		&:disabled .block-editor-block-icon.has-colors {
+	&.is-synced,
+	&.is-connected {
+		.block-editor-block-switcher .components-button .block-editor-block-icon {
 			color: var(--wp-block-synced-color);
 		}
+
+		.components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
+			&:disabled .block-editor-block-icon.has-colors {
+				color: var(--wp-block-synced-color);
+			}
+		}
 	}
 
 	> :last-child,

packages/block-editor/src/components/date-format-picker/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { _x, __ } from '@wordpress/i18n';
-import { dateI18n } from '@wordpress/date';
+import { dateI18n, humanTimeDiff } from '@wordpress/date';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import {
 	TextControl,
@@ -13,11 +13,15 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
-// So that we can illustrate the different formats in the dropdown properly,
-// show a date that has a day greater than 12 and a month with more than three
-// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was
-// released.
-const EXAMPLE_DATE = new Date( 2022, 0, 25 );
+// So that we illustrate the different formats in the dropdown properly, show a date that is
+// somwhat recent, has a day greater than 12, and a month with more than three letters.
+const exampleDate = new Date();
+exampleDate.setDate( 20 );
+exampleDate.setMonth( exampleDate.getMonth() - 3 );
+if ( exampleDate.getMonth() === 4 ) {
+	// May has three letters, so use March.
+	exampleDate.setMonth( 3 );
+}
 
 /**
  * The `DateFormatPicker` component renders controls that let the user choose a
@@ -54,7 +58,7 @@ export default function DateFormatPicker( {
 				label={ __( 'Default format' ) }
 				help={ `${ __( 'Example:' ) }  ${ dateI18n(
 					defaultFormat,
-					EXAMPLE_DATE
+					exampleDate
 				) }` }
 				checked={ ! format }
 				onChange={ ( checked ) =>
@@ -95,13 +99,19 @@ function NonDefaultControls( { format, onChange } ) {
 		] ),
 	];
 
-	const suggestedOptions = suggestedFormats.map(
-		( suggestedFormat, index ) => ( {
+	const suggestedOptions = [
+		...suggestedFormats.map( ( suggestedFormat, index ) => ( {
 			key: `suggested-${ index }`,
-			name: dateI18n( suggestedFormat, EXAMPLE_DATE ),
+			name: dateI18n( suggestedFormat, exampleDate ),
 			format: suggestedFormat,
-		} )
-	);
+		} ) ),
+		{
+			key: 'human-diff',
+			name: humanTimeDiff( exampleDate ),
+			format: 'human-diff',
+		},
+	];
+
 	const customOption = {
 		key: 'custom',
 		name: __( 'Custom' ),
@@ -111,7 +121,9 @@ function NonDefaultControls( { format, onChange } ) {
 	};
 
 	const [ isCustom, setIsCustom ] = useState(
-		() => !! format && ! suggestedFormats.includes( format )
+		() =>
+			!! format &&
+			! suggestedOptions.some( ( option ) => option.format === format )
 	);
 
 	return (

packages/block-editor/src/components/inserter/block-types-tab.native.js

@@ -18,7 +18,8 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const [ rawBlockTypes, , collections ] = useBlockTypesState(
 		rootClientId,
-		onSelect
+		onSelect,
+		true
 	);
 	const clipboardBlock = useClipboardBlock( rootClientId );
 	const filteredBlockTypes = filterInserterItems( rawBlockTypes );