@wordpress/block-editor 14.5.0 → 14.7.0

package/src/components/block-tools/insertion-point.js

@@ -18,6 +18,7 @@ import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import BlockDropZonePopover from '../block-popover/drop-zone';
+import { unlock } from '../../lock-unlock';
 
 export const InsertionPointOpenRef = createContext();
 
@@ -47,8 +48,8 @@ function InbetweenInsertionPointPopover( {
 			getPreviousBlockClientId,
 			getNextBlockClientId,
 			getSettings,
-			__unstableGetEditorMode,
-		} = select( blockEditorStore );
+			isZoomOut,
+		} = unlock( select( blockEditorStore ) );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
 
@@ -78,7 +79,7 @@ function InbetweenInsertionPointPopover( {
 			rootClientId: insertionPoint.rootClientId,
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			isZoomOutMode: isZoomOut(),
 		};
 	}, [] );
 	const { getBlockEditingMode } = useSelect( blockEditorStore );

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

@@ -57,6 +57,18 @@
 	}
 }
 
+// The black plus that shows up on the right side of an empty paragraph block.
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
+	position: absolute;
+	top: 0;
+	right: 0;
+	line-height: 0;
+
+	&:disabled {
+		display: none;
+	}
+}
+
 // Sibling inserter / "inbetweenserter".
 .block-editor-block-list__empty-block-inserter,
 .block-editor-block-list__insertion-point-inserter {
@@ -187,23 +199,3 @@
 	top: 50%;
 	left: 50%;
 }
-
-.zoom-out-toolbar {
-
-	.block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-	.zoom-out-toolbar-button:focus::before,
-	.block-editor-block-toolbar-shuffle:focus::before,
-	.block-selection-button_drag-handle:focus::before {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	.block-editor-block-mover {
-		background: none;
-		border: none;
-	}
-
-	// Make the spacing consistent between controls.
-	.zoom-out-toolbar-button {
-		height: $button-size-next-default-40px;
-	}
-}

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -17,7 +17,7 @@ import {
 import { store as blockEditorStore } from '../../store';
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { hasStickyOrFixedPositionValue } from '../../hooks/position';
-import { getVisibleElementBounds } from '../../utils/dom';
+import { getElementBounds } from '../../utils/dom';
 
 const COMMON_PROPS = {
 	placement: 'top-start',
@@ -68,7 +68,7 @@ function getProps(
 	// Get how far the content area has been scrolled.
 	const scrollTop = scrollContainer?.scrollTop || 0;
 
-	const blockRect = getVisibleElementBounds( selectedBlockElement );
+	const blockRect = getElementBounds( selectedBlockElement );
 	const contentRect = contentElement.getBoundingClientRect();
 
 	// Get the vertical position of top of the visible content area.

package/src/components/block-tools/use-show-block-tools.js

@@ -25,8 +25,6 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
-			getBlockOrder,
-			getSectionRootClientId,
 		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
@@ -42,19 +40,11 @@ export function useShowBlockTools() {
 		const _showEmptyBlockSideInserter =
 			clientId &&
 			! isTyping() &&
-			editorMode === 'edit' &&
+			// Hide the block inserter on the navigation mode.
+			// See https://github.com/WordPress/gutenberg/pull/66636#discussion_r1824728483.
+			editorMode !== 'navigation' &&
 			isEmptyDefaultBlock;
-		const isZoomOut = editorMode === 'zoom-out';
-		const isSectionSelected = getBlockOrder(
-			getSectionRootClientId()
-		).includes( clientId );
-		const _showZoomOutToolbar =
-			clientId &&
-			isZoomOut &&
-			! _showEmptyBlockSideInserter &&
-			isSectionSelected;
 		const _showBlockToolbarPopover =
-			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
@@ -63,7 +53,6 @@ export function useShowBlockTools() {
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
-			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -16,30 +16,24 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
-		insertionPoint,
 		blockOrder,
-		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
-			getInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getSectionRootClientId,
-			isBlockInsertionPointVisible,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
 
 		return {
 			hasSelection: !! getSelectionStart().clientId,
-			insertionPoint: getInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
-			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
@@ -64,41 +58,32 @@ function ZoomOutModeInserters() {
 		return null;
 	}
 
-	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInsertionPoint =
-			blockInsertionPointVisible && insertionPoint?.index === index;
+	const previousClientId = selectedBlockClientId;
+	const index = blockOrder.findIndex(
+		( clientId ) => selectedBlockClientId === clientId
+	);
+	const nextClientId = blockOrder[ index + 1 ];
 
-		const previousClientId = clientId;
-		const nextClientId = blockOrder[ index ];
-
-		const isSelected =
-			selectedBlockClientId === previousClientId ||
-			selectedBlockClientId === nextClientId;
-
-		return (
-			<BlockPopoverInbetween
-				key={ index }
-				previousClientId={ previousClientId }
-				nextClientId={ nextClientId }
-			>
-				{ ! shouldRenderInsertionPoint && isSelected && (
-					<ZoomOutModeInserterButton
-						onClick={ () => {
-							setInserterIsOpened( {
-								rootClientId: sectionRootClientId,
-								insertionIndex: index,
-								tab: 'patterns',
-								category: 'all',
-							} );
-							showInsertionPoint( sectionRootClientId, index, {
-								operation: 'insert',
-							} );
-						} }
-					/>
-				) }
-			</BlockPopoverInbetween>
-		);
-	} );
+	return (
+		<BlockPopoverInbetween
+			previousClientId={ previousClientId }
+			nextClientId={ nextClientId }
+		>
+			<ZoomOutModeInserterButton
+				onClick={ () => {
+					setInserterIsOpened( {
+						rootClientId: sectionRootClientId,
+						insertionIndex: index + 1,
+						tab: 'patterns',
+						category: 'all',
+					} );
+					showInsertionPoint( sectionRootClientId, index + 1, {
+						operation: 'insert',
+					} );
+				} }
+			/>
+		</BlockPopoverInbetween>
+	);
 }
 
 export default ZoomOutModeInserters;

package/src/components/block-variation-transforms/index.js

@@ -45,7 +45,7 @@ function VariationsButtons( {
 						selectedValue === variation.name
 							? variation.title
 							: sprintf(
-									/* translators: %s: Name of the block variation */
+									/* translators: %s: Block or block variation name. */
 									__( 'Transform to %s' ),
 									variation.title
 							  )
@@ -127,7 +127,7 @@ function VariationsToggleGroupControl( {
 							selectedValue === variation.name
 								? variation.title
 								: sprintf(
-										/* translators: %s: Name of the block variation */
+										/* translators: %s: Block or block variation name. */
 										__( 'Transform to %s' ),
 										variation.title
 								  )

package/src/components/block-vertical-alignment-control/ui.js

@@ -3,37 +3,33 @@
  */
 import { _x } from '@wordpress/i18n';
 import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import {
-	alignTop,
-	alignCenter,
-	alignBottom,
-	alignStretch,
-	spaceBetween,
-} from './icons';
+	justifyTop,
+	justifyCenterVertical,
+	justifyBottom,
+	justifyStretchVertical,
+	justifySpaceBetweenVertical,
+} from '@wordpress/icons';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	top: {
-		icon: alignTop,
+		icon: justifyTop,
 		title: _x( 'Align top', 'Block vertical alignment setting' ),
 	},
 	center: {
-		icon: alignCenter,
+		icon: justifyCenterVertical,
 		title: _x( 'Align middle', 'Block vertical alignment setting' ),
 	},
 	bottom: {
-		icon: alignBottom,
+		icon: justifyBottom,
 		title: _x( 'Align bottom', 'Block vertical alignment setting' ),
 	},
 	stretch: {
-		icon: alignStretch,
+		icon: justifyStretchVertical,
 		title: _x( 'Stretch to fill', 'Block vertical alignment setting' ),
 	},
 	'space-between': {
-		icon: spaceBetween,
+		icon: justifySpaceBetweenVertical,
 		title: _x( 'Space between', 'Block vertical alignment setting' ),
 	},
 };

package/src/components/border-radius-control/linked-button.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button, Tooltip } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { link, linkOff } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -9,15 +9,13 @@ export default function LinkedButton( { isLinked, ...props } ) {
 	const label = isLinked ? __( 'Unlink radii' ) : __( 'Link radii' );
 
 	return (
-		<Tooltip text={ label }>
-			<Button
-				{ ...props }
-				className="component-border-radius-control__linked-button"
-				size="small"
-				icon={ isLinked ? link : linkOff }
-				iconSize={ 24 }
-				aria-label={ label }
-			/>
-		</Tooltip>
+		<Button
+			{ ...props }
+			className="component-border-radius-control__linked-button"
+			size="small"
+			icon={ isLinked ? link : linkOff }
+			iconSize={ 24 }
+			label={ label }
+		/>
 	);
 }

package/src/components/collab/block-comment-icon-slot.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableCommentIconFill, Slot } = createSlotFill(
+	'__unstableCommentIconFill'
+);
+
+__unstableCommentIconFill.Slot = Slot;
+
+export default __unstableCommentIconFill;

package/src/components/collab/block-comment-icon-toolbar-slot.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableCommentIconToolbarFill, Slot } = createSlotFill(
+	'__unstableCommentIconToolbarFill'
+);
+
+__unstableCommentIconToolbarFill.Slot = Slot;
+
+export default __unstableCommentIconToolbarFill;

package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js

@@ -55,6 +55,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Theme',
 					'Indicates this palette comes from the theme.'
 				),
+				slug: 'theme',
 				colors: themeColors,
 			} );
 		}
@@ -68,6 +69,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Default',
 					'Indicates this palette comes from WordPress.'
 				),
+				slug: 'default',
 				colors: defaultColors,
 			} );
 		}
@@ -75,8 +77,9 @@ export default function useMultipleOriginColorsAndGradients() {
 			result.push( {
 				name: _x(
 					'Custom',
-					'Indicates this palette comes from the theme.'
+					'Indicates this palette is created by the user.'
 				),
+				slug: 'custom',
 				colors: customColors,
 			} );
 		}
@@ -96,6 +99,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Theme',
 					'Indicates this palette comes from the theme.'
 				),
+				slug: 'theme',
 				gradients: themeGradients,
 			} );
 		}
@@ -109,6 +113,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Default',
 					'Indicates this palette comes from WordPress.'
 				),
+				slug: 'default',
 				gradients: defaultGradients,
 			} );
 		}
@@ -118,6 +123,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Custom',
 					'Indicates this palette is created by the user.'
 				),
+				slug: 'custom',
 				gradients: customGradients,
 			} );
 		}

package/src/components/convert-to-group-buttons/toolbar.js

@@ -85,27 +85,27 @@ function BlockGroupToolbar() {
 		<ToolbarGroup>
 			<ToolbarButton
 				icon={ group }
-				label={ _x( 'Group', 'verb' ) }
+				label={ _x( 'Group', 'action: convert blocks to group' ) }
 				onClick={ onConvertToGroup }
 			/>
 			{ canInsertRow && (
 				<ToolbarButton
 					icon={ row }
-					label={ _x( 'Row', 'single horizontal line' ) }
+					label={ _x( 'Row', 'action: convert blocks to row' ) }
 					onClick={ onConvertToRow }
 				/>
 			) }
 			{ canInsertStack && (
 				<ToolbarButton
 					icon={ stack }
-					label={ _x( 'Stack', 'verb' ) }
+					label={ _x( 'Stack', 'action: convert blocks to stack' ) }
 					onClick={ onConvertToStack }
 				/>
 			) }
 			{ canInsertGrid && (
 				<ToolbarButton
 					icon={ grid }
-					label={ _x( 'Grid', 'verb' ) }
+					label={ _x( 'Grid', 'action: convert blocks to grid' ) }
 					onClick={ onConvertToGrid }
 				/>
 			) }

package/src/components/default-block-appender/content.scss

@@ -24,20 +24,11 @@
 	.block-editor-default-block-appender__content {
 		// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
 		opacity: 0.62;
-	}
-
-	// In "constrained" layout containers, the first and last paragraphs have their margins zeroed out.
-	// In the case of this appender, it needs to apply those same rules to avoid layout shifts.
-	// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
-	:where(body .is-layout-constrained) &,
-	:where(.wp-site-blocks) & {
-		> :first-child {
-			margin-block-start: 0;
-			margin-block-end: 0;
-		}
 
-		// Since this appender will only ever appear on an entirely empty document, we don't account for last-child.
-		// This is also because it will never be the last child, the block inserter that sits in this appender is the last child.
+		// The following prevents user agent styles from applying margins to the appender's inner paragraph.
+		// This in turn prevents layout shift due to layout styles removing margins from first and last children.
+		margin-block-start: 0;
+		margin-block-end: 0;
 	}
 
 	// Dropzone.
@@ -62,9 +53,7 @@
 	}
 }
 
-// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
-// that exists only on empty documents.
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
+// The initial appender that exists only on empty documents.
 .block-editor-default-block-appender .block-editor-inserter {
 	position: absolute;
 	top: 0;
@@ -76,10 +65,11 @@
 	}
 }
 
-
 /**
- * Fixed position appender.
- * These styles apply to all in-canvas inserters that exist inside nesting containers.
+ * Fixed position appender (right bottom corner).
+ *
+ * These styles apply to all in-canvas inserters. All in-canvas inserters always
+ * exist within a block.
  */
 
 .block-editor-block-list__block .block-list-appender {
@@ -96,6 +86,10 @@
 		line-height: 0;
 	}
 
+	.block-editor-inserter:disabled {
+		display: none;
+	}
+
 	.block-editor-default-block-appender {
 		height: $button-size-small;
 	}

package/src/components/global-styles/color-panel.js

@@ -20,7 +20,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -167,10 +167,7 @@ const LabeledColorIndicators = ( { indicators, label } ) => (
 				</Flex>
 			) ) }
 		</ZStack>
-		<FlexItem
-			className="block-editor-panel-color-gradient-settings__color-name"
-			title={ label }
-		>
+		<FlexItem className="block-editor-panel-color-gradient-settings__color-name">
 			{ label }
 		</FlexItem>
 	</HStack>
@@ -231,11 +228,6 @@ function ColorPanelDropdown( {
 							{ 'is-open': isOpen }
 						),
 						'aria-expanded': isOpen,
-						'aria-label': sprintf(
-							/* translators: %s is the type of color property, e.g., "background" */
-							__( 'Color %s styles' ),
-							label
-						),
 					};
 
 					return (

package/src/components/global-styles/dimensions-panel.js

@@ -147,24 +147,30 @@ function splitStyleValue( value ) {
 	return value;
 }
 
-function splitGapValue( value ) {
-	// Check for shorthand value (a string value).
-	if ( value && typeof value === 'string' ) {
-		// If the value is a string, treat it as a single side (top) for the spacing controls.
-		return {
-			top: value,
-		};
+function splitGapValue( value, isAxialGap ) {
+	if ( ! value ) {
+		return value;
 	}
 
-	if ( value ) {
-		return {
-			...value,
-			right: value?.left,
-			bottom: value?.top,
-		};
+	// Check for shorthand value (a string value).
+	if ( typeof value === 'string' ) {
+		/*
+		 * Map the string value to appropriate sides for the spacing control depending
+		 * on whether the current block has axial gap support or not.
+		 *
+		 * Note: The axial value pairs must match for the spacing control to display
+		 * the appropriate horizontal/vertical sliders.
+		 */
+		return isAxialGap
+			? { top: value, right: value, bottom: value, left: value }
+			: { top: value };
 	}
 
-	return value;
+	return {
+		...value,
+		right: value?.left,
+		bottom: value?.top,
+	};
 }
 
 function DimensionsToolsPanel( {
@@ -325,13 +331,13 @@ export default function DimensionsPanel( {
 
 	// Block Gap
 	const showGapControl = useHasGap( settings );
-	const gapValue = decodeValue( inheritedValue?.spacing?.blockGap );
-	const gapValues = splitGapValue( gapValue );
 	const gapSides = Array.isArray( settings?.spacing?.blockGap )
 		? settings?.spacing?.blockGap
 		: settings?.spacing?.blockGap?.sides;
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+	const gapValue = decodeValue( inheritedValue?.spacing?.blockGap );
+	const gapValues = splitGapValue( gapValue, isAxialGap );
 	const setGapValue = ( newGapValue ) => {
 		onChange(
 			setImmutably( value, [ 'spacing', 'blockGap' ], newGapValue )

package/src/components/global-styles/test/use-global-styles-context.native.js

@@ -414,6 +414,7 @@ describe( 'getGlobalStyles', () => {
 		expect( globalStyles ).toEqual(
 			expect.objectContaining( {
 				__experimentalFeatures: {
+					blocks: {},
 					color: {
 						palette: RAW_FEATURES.color.palette,
 						gradients,

package/src/components/global-styles/use-global-styles-context.native.js

@@ -410,6 +410,9 @@ export function getColorsAndGradients(
 	return {
 		__experimentalGlobalStylesBaseStyles: null,
 		__experimentalFeatures: {
+			// Set an empty object to avoid errors from shared web components relying
+			// upon block settings. E.g., the Gallery block.
+			blocks: {},
 			color: {
 				...( ! features?.color
 					? {
@@ -455,6 +458,9 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 
 	return {
 		__experimentalFeatures: {
+			// Set an empty object to avoid errors from shared web components relying
+			// upon block settings. E.g., the Gallery block.
+			blocks: {},
 			color: {
 				palette: colors?.palette,
 				gradients,

package/src/components/iframe/content.scss

@@ -1,24 +1,19 @@
 .block-editor-iframe__body {
 	position: relative;
-	border: 0.01px solid transparent;
 }
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// 400ms should match the animation speed used in iframe/index.js
-	$zoomOutAnimation: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
-
 	// We don't want to animate the transform of the translateX because it is used
 	// to "center" the canvas. Leaving it on causes the canvas to slide around in
 	// odd ways.
-	transition: $zoomOutAnimation, transform 0s scale 0s;
-	@include reduce-motion("transition");
+	@include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);
 
 	&.zoom-out-animation {
 		// we only want to animate the scaling when entering zoom out. When sidebars
 		// are toggled, the resizing of the iframe handles scaling the canvas as well,
 		// and the doubled animations cause very odd animations.
-		transition: $zoomOutAnimation, transform 0s;
+		@include editor-canvas-resize-animation(transform 0s);
 	}
 }
 
@@ -27,10 +22,10 @@
 	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
 	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
-	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width);
+	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
 	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
 	// Apply an X translation to center the scaled content within the available space.
-	transform: translateX(calc(( #{$outer-container-width} - #{ $container-width }) / 2 / #{$scale}));
+	transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
 	scale: #{$scale};
 	background-color: $gray-300;