@wordpress/block-editor 12.13.0 → 12.14.0

package/build-style/style-rtl.css

@@ -290,14 +290,6 @@
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-left-color: #e0e0e0;
 }
-.block-editor-block-contextual-toolbar.is-collapsed::after {
-  content: "";
-  position: absolute;
-  right: 100%;
-  width: 48px;
-  height: 100%;
-  background: linear-gradient(to left, #fff, transparent);
-}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
@@ -1890,6 +1882,9 @@
 .block-editor-link-control__field {
   margin: 16px;
 }
+.block-editor-link-control__field .components-base-control__label {
+  color: #1e1e1e;
+}
 .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -1954,12 +1949,7 @@
 }
 
 .block-editor-link-control__search-actions {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-start;
-  gap: 8px;
   padding: 8px 16px 16px;
-  order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
@@ -2224,6 +2214,9 @@
 .block-editor-link-control__setting .components-base-control__field {
   display: flex;
 }
+.block-editor-link-control__setting .components-base-control__field .components-checkbox-control__label {
+  color: #1e1e1e;
+}
 .block-editor-link-control__setting input {
   margin-right: 0;
 }
@@ -2704,6 +2697,7 @@
 .block-editor-media-flow__url-input.has-siblings {
   border-top: 1px solid #1e1e1e;
   margin-top: 8px;
+  padding-bottom: 8px;
 }
 .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
   display: block;
@@ -2735,8 +2729,7 @@
   width: 100%;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
-  top: 0;
-  left: 4px;
+  padding: 8px 0 0;
 }
 
 .block-editor-media-flow__error {
@@ -3425,6 +3418,14 @@
   border-left: none;
 }
 
+.block-editor-block-contextual-toolbar.is-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 31;
+  display: block;
+  width: 100%;
+}
+
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {

package/build-style/style.css

@@ -290,14 +290,6 @@
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-right-color: #e0e0e0;
 }
-.block-editor-block-contextual-toolbar.is-collapsed::after {
-  content: "";
-  position: absolute;
-  left: 100%;
-  width: 48px;
-  height: 100%;
-  background: linear-gradient(to right, #fff, transparent);
-}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
@@ -1891,6 +1883,9 @@
 .block-editor-link-control__field {
   margin: 16px;
 }
+.block-editor-link-control__field .components-base-control__label {
+  color: #1e1e1e;
+}
 .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -1955,12 +1950,7 @@
 }
 
 .block-editor-link-control__search-actions {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-start;
-  gap: 8px;
   padding: 8px 16px 16px;
-  order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
@@ -2225,6 +2215,9 @@
 .block-editor-link-control__setting .components-base-control__field {
   display: flex;
 }
+.block-editor-link-control__setting .components-base-control__field .components-checkbox-control__label {
+  color: #1e1e1e;
+}
 .block-editor-link-control__setting input {
   margin-left: 0;
 }
@@ -2705,6 +2698,7 @@
 .block-editor-media-flow__url-input.has-siblings {
   border-top: 1px solid #1e1e1e;
   margin-top: 8px;
+  padding-bottom: 8px;
 }
 .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
   display: block;
@@ -2736,8 +2730,7 @@
   width: 100%;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
-  top: 0;
-  right: 4px;
+  padding: 8px 0 0;
 }
 
 .block-editor-media-flow__error {
@@ -3426,6 +3419,14 @@
   border-right: none;
 }
 
+.block-editor-block-contextual-toolbar.is-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 31;
+  display: block;
+  width: 100%;
+}
+
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.13.0",
+	"version": "12.14.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.45.0",
-		"@wordpress/api-fetch": "^6.42.0",
-		"@wordpress/blob": "^3.45.0",
-		"@wordpress/blocks": "^12.22.0",
-		"@wordpress/commands": "^0.16.0",
-		"@wordpress/components": "^25.11.0",
-		"@wordpress/compose": "^6.22.0",
-		"@wordpress/data": "^9.15.0",
-		"@wordpress/date": "^4.45.0",
-		"@wordpress/deprecated": "^3.45.0",
-		"@wordpress/dom": "^3.45.0",
-		"@wordpress/element": "^5.22.0",
-		"@wordpress/escape-html": "^2.45.0",
-		"@wordpress/hooks": "^3.45.0",
-		"@wordpress/html-entities": "^3.45.0",
-		"@wordpress/i18n": "^4.45.0",
-		"@wordpress/icons": "^9.36.0",
-		"@wordpress/is-shallow-equal": "^4.45.0",
-		"@wordpress/keyboard-shortcuts": "^4.22.0",
-		"@wordpress/keycodes": "^3.45.0",
-		"@wordpress/notices": "^4.13.0",
-		"@wordpress/preferences": "^3.22.0",
-		"@wordpress/private-apis": "^0.27.0",
-		"@wordpress/rich-text": "^6.22.0",
-		"@wordpress/style-engine": "^1.28.0",
-		"@wordpress/token-list": "^2.45.0",
-		"@wordpress/url": "^3.46.0",
-		"@wordpress/warning": "^2.45.0",
-		"@wordpress/wordcount": "^3.45.0",
+		"@wordpress/a11y": "^3.46.0",
+		"@wordpress/api-fetch": "^6.43.0",
+		"@wordpress/blob": "^3.46.0",
+		"@wordpress/blocks": "^12.23.0",
+		"@wordpress/commands": "^0.17.0",
+		"@wordpress/components": "^25.12.0",
+		"@wordpress/compose": "^6.23.0",
+		"@wordpress/data": "^9.16.0",
+		"@wordpress/date": "^4.46.0",
+		"@wordpress/deprecated": "^3.46.0",
+		"@wordpress/dom": "^3.46.0",
+		"@wordpress/element": "^5.23.0",
+		"@wordpress/escape-html": "^2.46.0",
+		"@wordpress/hooks": "^3.46.0",
+		"@wordpress/html-entities": "^3.46.0",
+		"@wordpress/i18n": "^4.46.0",
+		"@wordpress/icons": "^9.37.0",
+		"@wordpress/is-shallow-equal": "^4.46.0",
+		"@wordpress/keyboard-shortcuts": "^4.23.0",
+		"@wordpress/keycodes": "^3.46.0",
+		"@wordpress/notices": "^4.14.0",
+		"@wordpress/preferences": "^3.23.0",
+		"@wordpress/private-apis": "^0.28.0",
+		"@wordpress/rich-text": "^6.23.0",
+		"@wordpress/style-engine": "^1.29.0",
+		"@wordpress/token-list": "^2.46.0",
+		"@wordpress/url": "^3.47.0",
+		"@wordpress/warning": "^2.46.0",
+		"@wordpress/wordcount": "^3.46.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2a00e87b57b9c27ed2b9b0fd8d423ef3cada72c1"
+	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
 }

package/src/components/block-heading-level-dropdown/index.js

@@ -56,7 +56,7 @@ export default function HeadingLevelDropdown( {
 								isPressed={ isActive }
 							/>
 						),
-						label:
+						title:
 							targetLevel === 0
 								? __( 'Paragraph' )
 								: sprintf(

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

@@ -17,12 +17,7 @@ import {
 	useMergeRefs,
 	useDebounce,
 } from '@wordpress/compose';
-import {
-	createContext,
-	useState,
-	useMemo,
-	useCallback,
-} from '@wordpress/element';
+import { createContext, useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -40,13 +35,10 @@ import {
 } from '../block-edit/context';
 import { useTypingObserver } from '../observe-typing';
 
-const elementContext = createContext();
-
 export const IntersectionObserver = createContext();
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
-	const [ element, setElement ] = useState();
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { isOutlineMode, isFocusMode, editorMode } = useSelect(
 		( select ) => {
@@ -115,13 +107,9 @@ function Root( { className, ...settings } ) {
 		settings
 	);
 	return (
-		<elementContext.Provider value={ element }>
-			<IntersectionObserver.Provider value={ intersectionObserver }>
-				<div { ...innerBlocksProps } />
-				{ /* Ensure element and layout styles are always at the end of the document */ }
-				<div ref={ setElement } />
-			</IntersectionObserver.Provider>
-		</elementContext.Provider>
+		<IntersectionObserver.Provider value={ intersectionObserver }>
+			<div { ...innerBlocksProps } />
+		</IntersectionObserver.Provider>
 	);
 }
 
@@ -133,8 +121,6 @@ export default function BlockList( settings ) {
 	);
 }
 
-BlockList.__unstableElementContext = elementContext;
-
 function Items( {
 	placeholder,
 	rootClientId,

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

@@ -49,10 +49,6 @@ function useAppender( rootClientId, CustomAppender ) {
 				getBlockEditingMode,
 			} = select( blockEditorStore );
 
-			if ( CustomAppender === false ) {
-				return false;
-			}
-
 			if ( ! CustomAppender ) {
 				const selectedBlockClientId = getSelectedBlockClientId();
 				const isParentSelected =
@@ -92,6 +88,26 @@ function BlockListAppender( {
 	renderAppender,
 	className,
 	tagName: TagName = 'div',
+} ) {
+	if ( renderAppender === false ) {
+		return null;
+	}
+
+	return (
+		<BlockListAppenderInner
+			rootClientId={ rootClientId }
+			renderAppender={ renderAppender }
+			className={ className }
+			tagName={ TagName }
+		/>
+	);
+}
+
+function BlockListAppenderInner( {
+	rootClientId,
+	renderAppender,
+	className,
+	tagName: TagName,
 } ) {
 	const appender = useAppender( rootClientId, renderAppender );
 	const isDragOver = useSelect(

package/src/components/block-quick-navigation/index.js

@@ -5,7 +5,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+	Flex,
+	FlexBlock,
 	FlexItem,
 } from '@wordpress/components';
 import {
@@ -72,10 +74,14 @@ function BlockQuickNavigationItem( { clientId } ) {
 			isPressed={ isSelected }
 			onClick={ () => selectBlock( clientId ) }
 		>
-			<HStack justify="flex-start">
-				<BlockIcon icon={ icon } />
-				<FlexItem>{ name }</FlexItem>
-			</HStack>
+			<Flex>
+				<FlexItem>
+					<BlockIcon icon={ icon } />
+				</FlexItem>
+				<FlexBlock style={ { textAlign: 'left' } }>
+					<Truncate>{ name }</Truncate>
+				</FlexBlock>
+			</Flex>
 		</Button>
 	);
 }

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

@@ -13,7 +13,6 @@ import {
 	__experimentalTruncate as Truncate,
 	Popover,
 } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -120,12 +119,3 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 }
 
 export default BlockStyles;
-
-BlockStyles.Slot = () => {
-	deprecated( 'BlockStyles.Slot', {
-		version: '6.4',
-		since: '6.2',
-	} );
-
-	return null;
-};

package/src/components/block-switcher/pattern-transformations-menu.js

@@ -11,9 +11,7 @@ import {
 	MenuItem,
 	Popover,
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 /**
@@ -21,6 +19,13 @@ import {
  */
 import BlockPreview from '../block-preview';
 import useTransformedPatterns from './use-transformed-patterns';
+import { unlock } from '../../lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
 
 function PatternTransformationsMenu( {
 	blocks,
@@ -73,10 +78,10 @@ function PreviewPatternsPopover( { patterns, onSelect } ) {
 }
 
 function BlockPatternsList( { patterns, onSelect } ) {
-	const composite = useCompositeState();
+	const composite = useCompositeStore();
 	return (
 		<Composite
-			{ ...composite }
+			store={ composite }
 			role="listbox"
 			className="block-editor-block-switcher__preview-patterns-container"
 			aria-label={ __( 'Patterns list' ) }
@@ -86,14 +91,13 @@ function BlockPatternsList( { patterns, onSelect } ) {
 					key={ pattern.name }
 					pattern={ pattern }
 					onSelect={ onSelect }
-					composite={ composite }
 				/>
 			) ) }
 		</Composite>
 	);
 }
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect } ) {
 	// TODO check pattern/preview width...
 	const baseClassName =
 		'block-editor-block-switcher__preview-patterns-container';
@@ -104,14 +108,16 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 	return (
 		<div className={ `${ baseClassName }-list__list-item` }>
 			<CompositeItem
-				role="option"
-				as="div"
-				{ ...composite }
-				aria-label={ pattern.title }
-				aria-describedby={
-					pattern.description ? descriptionId : undefined
+				render={
+					<div
+						role="option"
+						aria-label={ pattern.title }
+						aria-describedby={
+							pattern.description ? descriptionId : undefined
+						}
+						className={ `${ baseClassName }-list__item` }
+					/>
 				}
-				className={ `${ baseClassName }-list__item` }
 				onClick={ () => onSelect( pattern.transformedBlocks ) }
 			>
 				<BlockPreview

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

@@ -56,6 +56,14 @@
 	}
 }
 
+.block-editor-block-contextual-toolbar.is-fixed {
+	position: sticky;
+	top: 0;
+	z-index: z-index(".block-editor-block-popover");
+	display: block;
+	width: 100%;
+}
+
 // on desktop browsers the fixed toolbar has tweaked borders
 @include break-medium() {
 	.block-editor-block-contextual-toolbar.is-fixed {

package/src/components/block-tools/back-compat.js

@@ -9,7 +9,7 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import InsertionPoint, { InsertionPointOpenRef } from './insertion-point';
-import BlockPopover from './selected-block-popover';
+import BlockPopover from './selected-block-tools';
 
 export default function BlockToolsBackCompat( { children } ) {
 	const openRef = useContext( InsertionPointOpenRef );

package/src/components/block-tools/block-contextual-toolbar.js

@@ -7,21 +7,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	useLayoutEffect,
-	useEffect,
-	useRef,
-	useState,
-} from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import {
-	ToolbarItem,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { next, previous } from '@wordpress/icons';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -31,12 +18,11 @@ import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
-function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
-	// When the toolbar is fixed it can be collapsed
-	const [ isCollapsed, setIsCollapsed ] = useState( false );
-	const toolbarButtonRef = useRef();
-
-	const isLargeViewport = useViewportMatch( 'medium' );
+export default function BlockContextualToolbar( {
+	focusOnMount,
+	isFixed,
+	...props
+} ) {
 	const {
 		blockType,
 		blockEditingMode,
@@ -78,94 +64,8 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 		};
 	}, [] );
 
-	useEffect( () => {
-		setIsCollapsed( false );
-	}, [ selectedBlockClientId ] );
-
-	const isLargerThanTabletViewport = useViewportMatch( 'large', '>=' );
-	const isFullscreen =
-		document.body.classList.contains( 'is-fullscreen-mode' );
-
-	/**
-	 * The following code is a workaround to fix the width of the toolbar
-	 * it should be removed when the toolbar will be rendered inline
-	 * FIXME: remove this layout effect when the toolbar is no longer
-	 * 				absolutely positioned
-	 */
-	useLayoutEffect( () => {
-		// don't do anything if not fixed toolbar
-		if ( ! isFixed ) {
-			return;
-		}
-
-		const blockToolbar = document.querySelector(
-			'.block-editor-block-contextual-toolbar'
-		);
-
-		if ( ! blockToolbar ) {
-			return;
-		}
-
-		if ( ! blockType ) {
-			blockToolbar.style.width = 'initial';
-			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 or widget editor
-		const pinnedItems = document.querySelector(
-			'.edit-post-header__settings, .edit-widgets-header__actions'
-		);
-		// 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 )
-			: 0;
-		const leftHeaderWidth = computedLeftHeaderStyle
-			? parseFloat( computedLeftHeaderStyle.width )
-			: 0;
-
-		// set the new witdth of the toolbar
-		blockToolbar.style.width = `calc(100% - ${
-			leftHeaderWidth +
-			pinnedItemsWidth +
-			marginLeft +
-			( pinnedItems || leftHeader ? 2 : 0 ) + // Prevents button focus border from being cut off
-			( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
-		}px)`;
-	}, [
-		isFixed,
-		isLargerThanTabletViewport,
-		isCollapsed,
-		isFullscreen,
-		blockType,
-	] );
-
 	const isToolbarEnabled =
-		! blockType ||
+		blockType &&
 		hasBlockSupport( blockType, '__experimentalToolbar', true );
 	const hasAnyBlockControls = useHasAnyBlockControls();
 	if (
@@ -179,45 +79,22 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const classes = classnames( 'block-editor-block-contextual-toolbar', {
 		'has-parent': hasParents && showParentSelector,
 		'is-fixed': isFixed,
-		'is-collapsed': isCollapsed,
 	} );
 
 	return (
 		<NavigableToolbar
 			focusOnMount={ focusOnMount }
+			focusEditorOnEscape
 			className={ classes }
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
 			variant={ isFixed ? 'unstyled' : undefined }
+			// Resets the index whenever the active block changes so
+			// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+			key={ selectedBlockClientId }
 			{ ...props }
 		>
-			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
-			{ isFixed && isLargeViewport && blockType && (
-				<ToolbarGroup
-					className={
-						isCollapsed
-							? 'block-editor-block-toolbar__group-expand-fixed-toolbar'
-							: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
-					}
-				>
-					<ToolbarItem
-						as={ ToolbarButton }
-						ref={ toolbarButtonRef }
-						icon={ isCollapsed ? next : previous }
-						onClick={ () => {
-							setIsCollapsed( ( collapsed ) => ! collapsed );
-							toolbarButtonRef.current.focus();
-						} }
-						label={
-							isCollapsed
-								? __( 'Show block tools' )
-								: __( 'Hide block tools' )
-						}
-					/>
-				</ToolbarGroup>
-			) }
+			<BlockToolbar hideDragHandle={ isFixed } />
 		</NavigableToolbar>
 	);
 }
-
-export default BlockContextualToolbar;