@wordpress/block-editor 12.3.12 → 12.3.14

package/build-style/style-rtl.css

@@ -320,17 +320,19 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   z-index: 31;
   display: block;
   width: 100%;
+  overflow: hidden;
   border: none;
   border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
 }
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar {
+  overflow: auto;
+  overflow-y: hidden;
+}
 .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 {
   border-left-color: #e0e0e0;
 }
-.block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
-  display: none;
-}
 .block-editor-block-contextual-toolbar.is-collapsed::after {
   content: "";
   position: absolute;
@@ -343,21 +345,29 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-right: 180px;
     position: fixed;
-    top: 39px;
+    top: 32px;
     min-height: initial;
     border-bottom: none;
     display: flex;
+    height: 60px;
+    align-items: center;
   }
   .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
+  .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-right: 240px;
-    top: 7px;
+    top: 0;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
     flex-grow: initial;
     width: initial;
@@ -475,13 +485,19 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: 100%;
+    width: calc(100% - 180px);
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% + 40px - 180px);
   }
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     width: auto;
   }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     width: calc(100% - 280px - 256px);
   }
@@ -3445,6 +3461,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .show-icon-labels .components-toolbar-group {
   flex-shrink: 1;
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar,
+.show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar-group {
+    flex-shrink: 0;
+  }
+}
 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
   margin-right: 6px;
 }

package/build-style/style.css

@@ -320,17 +320,19 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   z-index: 31;
   display: block;
   width: 100%;
+  overflow: hidden;
   border: none;
   border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
 }
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar {
+  overflow: auto;
+  overflow-y: hidden;
+}
 .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 {
   border-right-color: #e0e0e0;
 }
-.block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
-  display: none;
-}
 .block-editor-block-contextual-toolbar.is-collapsed::after {
   content: "";
   position: absolute;
@@ -343,21 +345,29 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-left: 180px;
     position: fixed;
-    top: 39px;
+    top: 32px;
     min-height: initial;
     border-bottom: none;
     display: flex;
+    height: 60px;
+    align-items: center;
   }
   .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
+  .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-left: 240px;
-    top: 7px;
+    top: 0;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
     flex-grow: initial;
     width: initial;
@@ -475,13 +485,19 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: 100%;
+    width: calc(100% - 180px);
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% + 40px - 180px);
   }
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     width: auto;
   }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     width: calc(100% - 280px - 256px);
   }
@@ -3446,6 +3462,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .show-icon-labels .components-toolbar-group {
   flex-shrink: 1;
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar,
+.show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar-group {
+    flex-shrink: 0;
+  }
+}
 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
   margin-left: 6px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.3.12",
+	"version": "12.3.14",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,7 +38,7 @@
 		"@wordpress/api-fetch": "^6.32.1",
 		"@wordpress/blob": "^3.35.1",
 		"@wordpress/blocks": "^12.12.7",
-		"@wordpress/components": "^25.1.10",
+		"@wordpress/components": "^25.1.11",
 		"@wordpress/compose": "^6.12.2",
 		"@wordpress/data": "^9.5.5",
 		"@wordpress/date": "^4.35.1",
@@ -54,9 +54,9 @@
 		"@wordpress/keyboard-shortcuts": "^4.12.5",
 		"@wordpress/keycodes": "^3.35.1",
 		"@wordpress/notices": "^4.3.5",
-		"@wordpress/preferences": "^3.12.10",
+		"@wordpress/preferences": "^3.12.11",
 		"@wordpress/private-apis": "^0.17.2",
-		"@wordpress/rich-text": "^6.12.7",
+		"@wordpress/rich-text": "^6.12.8",
 		"@wordpress/shortcode": "^3.35.1",
 		"@wordpress/style-engine": "^1.18.1",
 		"@wordpress/token-list": "^2.35.1",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "53cd9574a54a643c73e76fe1abaa8d1be489f8f7"
+	"gitHead": "a5a32c1da19589a60d48ae793a3d0a5a48223db6"
 }

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

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

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 {
@@ -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;
 	}

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.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

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/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(

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

@@ -7,7 +7,10 @@
 /**
  * Internal dependencies
  */
-import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
+import {
+	getComputedFluidTypographyValue,
+	getTypographyValueAndUnit,
+} from '../font-sizes/fluid-utils';
 
 /**
  * @typedef {Object} FluidPreset
@@ -98,11 +101,16 @@ function isFluidTypographyEnabled( typographySettings ) {
 export function getFluidTypographyOptionsFromSettings( settings ) {
 	const typographySettings = settings?.typography;
 	const layoutSettings = settings?.layout;
-	return isFluidTypographyEnabled( typographySettings ) &&
+	const defaultMaxViewportWidth = getTypographyValueAndUnit(
 		layoutSettings?.wideSize
+	)
+		? layoutSettings?.wideSize
+		: null;
+	return isFluidTypographyEnabled( typographySettings ) &&
+		defaultMaxViewportWidth
 		? {
 				fluid: {
-					maxViewPortWidth: layoutSettings.wideSize,
+					maxViewPortWidth: defaultMaxViewportWidth,
 					...typographySettings.fluid,
 				},
 		  }

package/src/components/link-control/README.md

@@ -15,6 +15,16 @@ The distinction between the two components is perhaps best summarized by the fol
 -   `<URLInput>` - an input for presenting and managing selection behaviors associated with choosing a URL, optionally from a pool of available candidates.
 -   `<LinkControl>` - includes the features of `<URLInput>`, plus additional UI and behaviors to control how this URL applies to the concept of a "link". This includes link "settings" (eg: "opens in new tab", etc) and dynamic, "on the fly" link creation capabilities.
 
+## Persistent "Advanced" (settings) toggle state
+
+By default the link "settings" are hidden and can be toggled open/closed by way of a button labelled `Advanced` in the UI.
+
+In some circumstances if may be desirable to persist the toggle state of this portion of the UI so that it remains in the last state triggered by user interaction.
+
+For example, once the user has toggled the UI to "open", then it may remain open across all links on the site until such time as the user toggles the UI back again.
+
+Consumers who which to take advantage of this functionality should ensure that their block editor environment utilizes the [`@wordpress/preferences`](packages/preferences/README.md) package. By default the `<LinkControl>` component will attempt to persist the state of UI to a setting named `linkControlSettingsDrawer` with a scope of `core/block-editor`. If the preferences package is not available then local state is used and the setting will not be persisted.
+
 ## Search Suggestions
 
 When creating links the `LinkControl` component will handle two kinds of input from users:
@@ -69,9 +79,7 @@ An array of settings objects associated with a link (for example: a setting to d
 To disable settings, pass in an empty array. for example:
 
 ```jsx
-<LinkControl
-	settings={ [] }
-/>
+<LinkControl settings={ [] } />
 ```
 
 ### onChange
@@ -192,6 +200,7 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
+
 ### renderControlBottom
 
 -   Type: `Function`