Package update: bugfixes for 6.3 RC3 (#53089)

* Patterns: Enable focus mode editing (#52427)

* PreventDefault when isComposing is true. apply patch from t-hamano. (#52844)

see: #52821 (comment)

* List View: Ensure onDrop does not fire if there is no target (#52959)

* I18N: Add missing Gettext wrapper on strings in Edit Post overview sidebar (#52971)

* I18N: Add missing gettext wrapper

* Add context to disambiguate 'Outline' that is commonly used on borders.

* Footnotes: disable based on post type (#52934)

* Footnotes: disable based on post type

* Address feedback

* Fix typo

* Format: disable if block is not registered

* Lock usesContext api

* Use Symbol instead of Math.random

* Patterns Browse Screen: Fix back button when switching between categories (#52964)

* Patterns: Allow orphaned template parts to appear in general category (#52961)

* Spacing presets: fix bug with select control adding undefined preset values (#53005)

* Site Editor: Fix canvas mode sync with URL (#52996)

* Check if spacing tool is defined before displaying controls. (#53008)

* Check if spacing tool is defined before displaying controls.

* Don't show sides if spacing type false

* Improve consistency of the Post editor and Site editor Document actions (#52246)

* Remove redundant shortcut button.

* Fix focus and hover style and improve consistency.

* Rename post document-title and improve CSS consistency.

* Site Editor: Fix the typo in the title label map (#53071)

* Fix patterns search crash: check for existence of defaultView before attempting to get styles (#52956)

* backport paging bug fixes (#53091)

---------

Co-authored-by: George Mamadashvili <[email protected]>
Co-authored-by: Hiroshi Urabe <[email protected]>
Co-authored-by: Andrew Serong <[email protected]>
Co-authored-by: Pedro Mendonça <[email protected]>
Co-authored-by: Ella <[email protected]>
Co-authored-by: Aaron Robertshaw <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: Andrea Fercia <[email protected]>

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

@@ -43,13 +43,13 @@ function useDarkThemeBodyClassName( styles ) {
 				body.appendChild( tempCanvas );
 
 				backgroundColor = defaultView
-					.getComputedStyle( tempCanvas, null )
+					?.getComputedStyle( tempCanvas, null )
 					.getPropertyValue( 'background-color' );
 
 				body.removeChild( tempCanvas );
 			} else {
 				backgroundColor = defaultView
-					.getComputedStyle( canvas, null )
+					?.getComputedStyle( canvas, null )
 					.getPropertyValue( 'background-color' );
 			}
 			const colordBackgroundColor = colord( backgroundColor );

packages/block-editor/src/components/global-styles/hooks.js

@@ -331,7 +331,8 @@ export function useSettingsForBlockElement(
 			const sides = Array.isArray( supports?.spacing?.[ key ] )
 				? supports?.spacing?.[ key ]
 				: supports?.spacing?.[ key ]?.sides;
-			if ( sides?.length ) {
+			// Check if spacing type is supported before adding sides.
+			if ( sides?.length && updatedSettings.spacing?.[ key ] ) {
 				updatedSettings.spacing = {
 					...updatedSettings.spacing,
 					[ key ]: {

packages/block-editor/src/components/list-view/use-list-view-drop-zone.js

@@ -489,7 +489,11 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 
 	const ref = useDropZone( {
 		dropZoneElement,
-		onDrop: onBlockDrop,
+		onDrop( event ) {
+			if ( target ) {
+				onBlockDrop( event );
+			}
+		},
 		onDragLeave() {
 			throttled.cancel();
 			setTarget( null );

packages/block-editor/src/components/rich-text/format-edit.js

@@ -2,43 +2,67 @@
  * WordPress dependencies
  */
 import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+import { useContext, useMemo } from '@wordpress/element';
 
-export default function FormatEdit( {
-	formatTypes,
-	onChange,
-	onFocus,
-	value,
-	forwardedRef,
-} ) {
-	return formatTypes.map( ( settings ) => {
-		const { name, edit: Edit } = settings;
-
-		if ( ! Edit ) {
-			return null;
-		}
-
-		const activeFormat = getActiveFormat( value, name );
-		const isActive = activeFormat !== undefined;
-		const activeObject = getActiveObject( value );
-		const isObjectActive =
-			activeObject !== undefined && activeObject.type === name;
-
-		return (
-			<Edit
-				key={ name }
-				isActive={ isActive }
-				activeAttributes={
-					isActive ? activeFormat.attributes || {} : {}
-				}
-				isObjectActive={ isObjectActive }
-				activeObjectAttributes={
-					isObjectActive ? activeObject.attributes || {} : {}
-				}
-				value={ value }
-				onChange={ onChange }
-				onFocus={ onFocus }
-				contentRef={ forwardedRef }
-			/>
-		);
-	} );
+/**
+ * Internal dependencies
+ */
+import BlockContext from '../block-context';
+
+const DEFAULT_BLOCK_CONTEXT = {};
+
+export const usesContextKey = Symbol( 'usesContext' );
+
+function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
+	const {
+		name,
+		edit: EditFunction,
+		[ usesContextKey ]: usesContext,
+	} = settings;
+
+	const blockContext = useContext( BlockContext );
+
+	// Assign context values using the block type's declared context needs.
+	const context = useMemo( () => {
+		return usesContext
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						usesContext.includes( key )
+					)
+			  )
+			: DEFAULT_BLOCK_CONTEXT;
+	}, [ usesContext, blockContext ] );
+
+	if ( ! EditFunction ) {
+		return null;
+	}
+
+	const activeFormat = getActiveFormat( value, name );
+	const isActive = activeFormat !== undefined;
+	const activeObject = getActiveObject( value );
+	const isObjectActive =
+		activeObject !== undefined && activeObject.type === name;
+
+	return (
+		<EditFunction
+			key={ name }
+			isActive={ isActive }
+			activeAttributes={ isActive ? activeFormat.attributes || {} : {} }
+			isObjectActive={ isObjectActive }
+			activeObjectAttributes={
+				isObjectActive ? activeObject.attributes || {} : {}
+			}
+			value={ value }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			contentRef={ forwardedRef }
+			context={ context }
+		/>
+	);
+}
+
+export default function FormatEdit( { formatTypes, ...props } ) {
+	return formatTypes.map( ( settings ) => (
+		<Edit settings={ settings } { ...props } key={ settings.name } />
+	) );
 }

packages/block-editor/src/components/spacing-sizes-control/test/utils.js

@@ -49,7 +49,15 @@ describe( 'getCustomValueFromPreset', () => {
 } );
 
 describe( 'getPresetValueFromCustomValue', () => {
-	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	const spacingSizes = [
+		{ name: 'Default', slug: 'default', size: undefined },
+		{ name: 'Small', slug: 20, size: '8px' },
+	];
+	it( 'should return undefined even if an undefined value exist in spacing sizes as occurs if spacingSizes has > 7 entries', () => {
+		expect( getPresetValueFromCustomValue( undefined, spacingSizes ) ).toBe(
+			undefined
+		);
+	} );
 	it( 'should return original value if a string in spacing presets var format', () => {
 		expect(
 			getPresetValueFromCustomValue(

packages/block-editor/src/components/spacing-sizes-control/utils.js

@@ -101,8 +101,8 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
  * @return {string} The preset value if it can be found.
  */
 export function getPresetValueFromCustomValue( value, spacingSizes ) {
-	// Return value as-is if it is already a preset;
-	if ( isValueSpacingPreset( value ) || value === '0' ) {
+	// Return value as-is if it is undefined or is already a preset, or '0';
+	if ( ! value || isValueSpacingPreset( value ) || value === '0' ) {
 		return value;
 	}
 

packages/block-editor/src/private-apis.js

@@ -22,6 +22,7 @@ import {
 	default as ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 } from './components/inserter/reusable-block-rename-hint';
+import { usesContextKey } from './components/rich-text/format-edit';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -47,4 +48,5 @@ lock( privateApis, {
 	ResolutionTool,
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
+	usesContextKey,
 } );

packages/block-library/src/footnotes/edit.js

@@ -17,6 +17,18 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 	const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
 	const blockProps = useBlockProps();
 
+	if ( postType !== 'post' && postType !== 'page' ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } /> }
+					label={ __( 'Footnotes' ) }
+					// To do: add instructions. We can't add new string in RC.
+				/>
+			</div>
+		);
+	}
+
 	if ( ! footnotes.length ) {
 		return (
 			<div { ...blockProps }>

packages/block-library/src/footnotes/format.js

@@ -12,14 +12,18 @@ import { insertObject } from '@wordpress/rich-text';
 import {
 	RichTextToolbarButton,
 	store as blockEditorStore,
+	privateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { name } from './block.json';
+import { unlock } from '../lock-unlock';
+
+const { usesContextKey } = unlock( privateApis );
 
 export const formatName = 'core/footnote';
 export const format = {
@@ -30,17 +34,34 @@ export const format = {
 		'data-fn': 'data-fn',
 	},
 	contentEditable: false,
-	edit: function Edit( { value, onChange, isObjectActive } ) {
+	[ usesContextKey ]: [ 'postType' ],
+	edit: function Edit( {
+		value,
+		onChange,
+		isObjectActive,
+		context: { postType },
+	} ) {
 		const registry = useRegistry();
 		const {
 			getSelectedBlockClientId,
 			getBlockRootClientId,
 			getBlockName,
 			getBlocks,
 		} = useSelect( blockEditorStore );
+		const footnotesBlockType = useSelect( ( select ) =>
+			select( blocksStore ).getBlockType( name )
+		);
 		const { selectionChange, insertBlock } =
 			useDispatch( blockEditorStore );
 
+		if ( ! footnotesBlockType ) {
+			return null;
+		}
+
+		if ( postType !== 'post' && postType !== 'page' ) {
+			return null;
+		}
+
 		function onClick() {
 			registry.batch( () => {
 				let id;

packages/block-library/src/footnotes/index.js

@@ -21,7 +21,6 @@ export const settings = {
 	edit,
 };
 
-// Would be good to remove the format and HoR if the block is unregistered.
 registerFormatType( formatName, format );
 
 export const init = () => {

packages/block-library/src/template-part/index.php

@@ -250,7 +250,7 @@ function build_template_part_block_instance_variations() {
 				'area'  => $template_part->area,
 			),
 			'scope'       => array( 'inserter' ),
-			'icon'        => $icon_by_area[ $template_part->area ],
+			'icon'        => isset( $icon_by_area[ $template_part->area ] ) ? $icon_by_area[ $template_part->area ] : null,
 			'example'     => array(
 				'attributes' => array(
 					'slug'  => $template_part->slug,

packages/commands/src/components/command-menu.js

@@ -201,6 +201,20 @@ export function CommandMenu() {
 	if ( ! isOpen ) {
 		return false;
 	}
+
+	const onKeyDown = ( event ) => {
+		if (
+			// Ignore keydowns from IMEs
+			event.nativeEvent.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
+			event.preventDefault();
+		}
+	};
+
 	const isLoading = Object.values( loaders ).some( Boolean );
 
 	return (
@@ -211,7 +225,10 @@ export function CommandMenu() {
 			__experimentalHideHeader
 		>
 			<div className="commands-command-menu__container">
-				<Command label={ __( 'Command palette' ) }>
+				<Command
+					label={ __( 'Command palette' ) }
+					onKeyDown={ onKeyDown }
+				>
 					<div className="commands-command-menu__header">
 						<Command.Input
 							ref={ commandMenuInput }

packages/edit-post/src/components/header/document-title/index.js → packages/edit-post/src/components/header/document-actions/index.js

@@ -19,7 +19,7 @@ import { displayShortcut } from '@wordpress/keycodes';
  */
 import { store as editPostStore } from '../../../store';
 
-function DocumentTitle() {
+function DocumentActions() {
 	const { template, isEditing } = useSelect( ( select ) => {
 		const { isEditingTemplate, getEditedPostTemplate } =
 			select( editPostStore );
@@ -46,24 +46,26 @@ function DocumentTitle() {
 	}
 
 	return (
-		<div className="edit-post-document-title">
-			<span className="edit-post-document-title__left">
-				<Button
-					onClick={ () => {
-						clearSelectedBlock();
-						setIsEditingTemplate( false );
-					} }
-					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-				>
-					{ __( 'Back' ) }
-				</Button>
-			</span>
-
+		<div className="edit-post-document-actions">
+			<Button
+				className="edit-post-document-actions__back"
+				onClick={ () => {
+					clearSelectedBlock();
+					setIsEditingTemplate( false );
+				} }
+				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+			>
+				{ __( 'Back' ) }
+			</Button>
 			<Button
-				className="edit-post-document-title__title"
+				className="edit-post-document-actions__command"
 				onClick={ () => openCommandCenter() }
 			>
-				<HStack spacing={ 1 } justify="center">
+				<HStack
+					className="edit-post-document-actions__title"
+					spacing={ 1 }
+					justify="center"
+				>
 					<BlockIcon icon={ layout } />
 					<Text size="body" as="h1">
 						<VisuallyHidden as="span">
@@ -72,15 +74,12 @@ function DocumentTitle() {
 						{ templateTitle }
 					</Text>
 				</HStack>
-			</Button>
-			<Button
-				className="edit-post-document-title__shortcut"
-				onClick={ () => openCommandCenter() }
-			>
-				{ displayShortcut.primary( 'k' ) }
+				<span className="edit-post-document-actions__shortcut">
+					{ displayShortcut.primary( 'k' ) }
+				</span>
 			</Button>
 		</div>
 	);
 }
 
-export default DocumentTitle;
+export default DocumentActions;