@wordpress/block-editor 12.7.0 → 12.8.1

package/src/components/block-list/block.js

@@ -37,7 +37,6 @@ import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
-import { unlock } from '../../lock-unlock';
 import { BlockListBlockContext } from './block-list-block-context';
 
 /**
@@ -102,7 +101,7 @@ function BlockListBlock( {
 				getSettings,
 				__unstableGetTemporarilyEditingAsBlocks,
 				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
+			} = select( blockEditorStore );
 			return {
 				themeSupportsLayout: getSettings().supportsLayout,
 				isTemporarilyEditingAsBlocks:

package/src/components/block-list/index.native.js

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { View, Platform, TouchableWithoutFeedback } from 'react-native';
+import { View, Platform, Pressable } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { useRef, useState } from '@wordpress/element';
+import { useRef, useState, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 import {
@@ -372,20 +372,20 @@ function Footer( {
 	renderFooterAppender,
 	withFooter,
 } ) {
+	const onAddParagraphBlock = useCallback( () => {
+		const paragraphBlock = createBlock( 'core/paragraph' );
+		addBlockToEndOfPost( paragraphBlock );
+	}, [ addBlockToEndOfPost ] );
+
 	if ( ! isReadOnly && withFooter ) {
 		return (
-			<>
-				<TouchableWithoutFeedback
-					accessibilityLabel={ __( 'Add paragraph block' ) }
-					testID={ __( 'Add paragraph block' ) }
-					onPress={ () => {
-						const paragraphBlock = createBlock( 'core/paragraph' );
-						addBlockToEndOfPost( paragraphBlock );
-					} }
-				>
-					<View style={ styles.blockListFooter } />
-				</TouchableWithoutFeedback>
-			</>
+			<Pressable
+				accessibilityLabel={ __( 'Add paragraph block' ) }
+				testID={ __( 'Add paragraph block' ) }
+				onPress={ onAddParagraphBlock }
+			>
+				<View style={ styles.blockListFooter } />
+			</Pressable>
 		);
 	} else if ( renderFooterAppender ) {
 		return <View>{ renderFooterAppender() }</View>;

package/src/components/block-list/test/block-invalid-warning.native.js

@@ -11,6 +11,13 @@ import {
 
 setupCoreBlocks();
 
+beforeEach( () => {
+	// Intentionally suppress the expected console errors and warnings to reduce
+	// noise in the test output.
+	jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+	jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+} );
+
 describe( 'Block invalid warning', () => {
 	it( 'shows invalid placeholder', async () => {
 		// Arrange

package/src/components/block-list/use-block-props/index.js

@@ -53,6 +53,32 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
  * also pass any other props through this hook, and they will be merged and
  * returned.
  *
+ * Use of this hook on the outermost element of a block is required if using API >= v2.
+ *
+ * @example
+ * ```js
+ * import { useBlockProps } from '@wordpress/block-editor';
+ *
+ * export default function Edit() {
+ *
+ *   const blockProps = useBlockProps(
+ *     className: 'my-custom-class',
+ *     style: {
+ *       color: '#222222',
+ *       backgroundColor: '#eeeeee'
+ *     }
+ *   )
+ *
+ *   return (
+ *	    <div { ...blockProps }>
+ *
+ *     </div>
+ *   )
+ * }
+ *
+ * ```
+ *
+ *
  * @param {Object}  props                    Optional. Props to pass to the element. Must contain
  *                                           the ref if one is defined.
  * @param {Object}  options                  Options for internal use only.

package/src/components/block-list/use-block-props/use-nav-mode-exit.js

@@ -38,7 +38,7 @@ export function useNavModeExit( clientId ) {
 			node.addEventListener( 'mousedown', onMouseDown );
 
 			return () => {
-				node.addEventListener( 'mousedown', onMouseDown );
+				node.removeEventListener( 'mousedown', onMouseDown );
 			};
 		},
 		[ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]

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

@@ -11,7 +11,6 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import { InsertionPointOpenRef } from '../block-tools/insertion-point';
-import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
@@ -29,7 +28,7 @@ export function useInBetweenInserter() {
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
 		getBlockEditingMode,
-	} = unlock( useSelect( blockEditorStore ) );
+	} = useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 

package/src/components/block-list-appender/index.js

@@ -15,7 +15,6 @@ import { getDefaultBlockName } from '@wordpress/blocks';
 import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 function DefaultAppender( { rootClientId } ) {
 	const canInsertDefaultBlock = useSelect( ( select ) =>
@@ -48,7 +47,7 @@ function useAppender( rootClientId, CustomAppender ) {
 				getSelectedBlockClientId,
 				__unstableGetEditorMode,
 				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
+			} = select( blockEditorStore );
 
 			if ( CustomAppender === false ) {
 				return false;

package/src/components/block-lock/menu-item.js

@@ -31,6 +31,8 @@ export default function BlockLockMenuItem( { clientId } ) {
 			<MenuItem
 				icon={ isLocked ? unlock : lockOutline }
 				onClick={ toggleModal }
+				aria-expanded={ isModalOpen }
+				aria-haspopup="dialog"
 			>
 				{ label }
 			</MenuItem>

package/src/components/block-lock/toolbar.js

@@ -59,10 +59,12 @@ export default function BlockLockToolbar( { clientId, wrapperRef } ) {
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
+					ref={ lockButtonRef }
 					icon={ lock }
 					label={ __( 'Unlock' ) }
 					onClick={ toggleModal }
-					ref={ lockButtonRef }
+					aria-expanded={ isModalOpen }
+					aria-haspopup="dialog"
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (

package/src/components/block-parent-selector/index.js

@@ -14,7 +14,6 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -30,7 +29,7 @@ export default function BlockParentSelector() {
 			getBlockParents,
 			getSelectedBlockClientId,
 			getBlockEditingMode,
-		} = unlock( select( blockEditorStore ) );
+		} = select( blockEditorStore );
 		const { hasBlockSupport } = select( blocksStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		const parents = getBlockParents( selectedBlockClientId );

package/src/components/block-preview/index.js

@@ -106,7 +106,6 @@ export default memo( BlockPreview );
  * @param {Object}    options.props  Optional. Props to pass to the element. Must contain
  *                                   the ref if one is defined.
  * @param {Object}    options.layout Layout settings to be used in the preview.
- *
  */
 export function useBlockPreview( { blocks, props = {}, layout } ) {
 	const originalSettings = useSelect(

package/src/components/block-styles/style.scss

@@ -4,9 +4,6 @@
 
 .block-editor-block-styles__preview-panel {
 	display: none;
-	position: absolute;
-	right: $grid-unit-20;
-	left: auto;
 	// Same layer as the sidebar from which it's triggered.
 	z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
 

package/src/components/block-toolbar/index.js

@@ -32,7 +32,6 @@ import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
-import { unlock } from '../../lock-unlock';
 
 const BlockToolbar = ( { hideDragHandle } ) => {
 	const { blockClientIds, blockType, isValid, isVisual, blockEditingMode } =
@@ -44,7 +43,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				isBlockValid,
 				getBlockRootClientId,
 				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
+			} = select( blockEditorStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
 			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 			const blockRootClientId = getBlockRootClientId(

package/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;

package/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 {
@@ -24,7 +29,7 @@ import { useViewportMatch } from '@wordpress/compose';
 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,17 +39,17 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		blockType,
+		blockEditingMode,
 		hasParents,
 		showParentSelector,
 		selectedBlockClientId,
-		isContentOnly,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockParents,
 			getSelectedBlockClientIds,
 			getBlockEditingMode,
-		} = unlock( select( blockEditorStore ) );
+		} = select( blockEditorStore );
 		const { getBlockType } = select( blocksStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -58,9 +63,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 +82,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;
 	}

package/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,14 +139,14 @@
 
 	// 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
@@ -152,18 +154,32 @@
 			// 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 {
@@ -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

package/src/components/copy-handler/index.js

@@ -198,6 +198,7 @@ export function useClipboardHandler() {
 				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
 					removeBlocks( selectedBlockClientIds );
 				} else {
+					event.target.ownerDocument.activeElement.contentEditable = false;
 					__unstableDeleteSelection();
 				}
 			} else if ( event.type === 'paste' ) {

package/src/components/default-block-appender/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TouchableWithoutFeedback, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,9 @@ import BlockInsertionPoint from '../block-list/insertion-point';
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
 
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+const noop = () => {};
+
 export function DefaultBlockAppender( {
 	isLocked,
 	isVisible,
@@ -37,22 +40,21 @@ export function DefaultBlockAppender( {
 			? decodeEntities( placeholder )
 			: __( 'Start writing…' );
 
+	const appenderStyles = [
+		styles.blockHolder,
+		showSeparator && containerStyle,
+	];
+
 	return (
-		<TouchableWithoutFeedback onPress={ onAppend }>
-			<View
-				style={ [
-					styles.blockHolder,
-					showSeparator && containerStyle,
-				] }
-				pointerEvents="box-only"
-			>
+		<Pressable onPress={ onAppend } hitSlop={ hitSlop }>
+			<View style={ appenderStyles } pointerEvents="box-only">
 				{ showSeparator ? (
 					<BlockInsertionPoint />
 				) : (
-					<RichText placeholder={ value } onChange={ () => {} } />
+					<RichText placeholder={ value } onChange={ noop } />
 				) }
 			</View>
-		</TouchableWithoutFeedback>
+		</Pressable>
 	);
 }
 

package/src/components/dimensions-tool/index.js

@@ -124,7 +124,7 @@ function DimensionsTool( {
 					}
 
 					// Auto-update width and height.
-					if ( nextAspectRatio && width && height ) {
+					if ( 'custom' !== nextAspectRatio && width && height ) {
 						delete nextValue.height;
 					}
 

package/src/components/global-styles/test/typography-utils.js

@@ -95,6 +95,36 @@ describe( 'typography utils', () => {
 					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
 			},
 
+			{
+				message:
+					'should override default max viewport width fluid typography settings',
+				preset: {
+					size: '1.75rem',
+				},
+				typographySettings: {
+					fluid: {
+						maxViewportWidth: '1200px',
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 1.147), 1.75rem)',
+			},
+
+			{
+				message:
+					'should override default min viewport width fluid typography settings',
+				preset: {
+					size: '1.75rem',
+				},
+				typographySettings: {
+					fluid: {
+						minViewportWidth: '800px',
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.5rem) * 1.262), 1.75rem)',
+			},
+
 			{
 				message: 'should return clamp value with em min and max units',
 				preset: {
@@ -478,6 +508,21 @@ describe( 'typography utils', () => {
 				expected:
 					'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
 			},
+
+			{
+				message: 'should apply all custom fluid typography settings',
+				preset: {
+					size: '17px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16px',
+						maxViewportWidth: '1200px',
+						minViewportWidth: '640px',
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 6.4px) * 0.179), 17px)',
+			},
 		].forEach( ( { message, preset, typographySettings, expected } ) => {
 			it( `${ message }`, () => {
 				expect(
@@ -561,6 +606,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(