@wordpress/block-editor 14.3.4 → 14.3.6

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

@@ -710,7 +710,6 @@ function BlockListBlockProvider( props ) {
 					) && hasSelectedInnerBlock( clientId ),
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
-				editorMode,
 				isSubtreeDisabled:
 					blockEditingMode === 'disabled' &&
 					isBlockSubtreeDisabled( clientId ),
@@ -766,7 +765,6 @@ function BlockListBlockProvider( props ) {
 		themeSupportsLayout,
 		isTemporarilyEditingAsBlocks,
 		blockEditingMode,
-		editorMode,
 		mayDisplayControls,
 		mayDisplayParentControls,
 		index,
@@ -821,7 +819,6 @@ function BlockListBlockProvider( props ) {
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
-		editorMode,
 		isHighlighted,
 		isMultiSelected,
 		isPartiallySelected,

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

@@ -86,7 +86,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		name,
 		blockApiVersion,
 		blockTitle,
-		editorMode,
 		isSelected,
 		isSubtreeDisabled,
 		hasOverlay,
@@ -117,7 +116,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
-		useZoomOutModeExit( { editorMode } ),
+		useZoomOutModeExit(),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),

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

@@ -12,25 +12,27 @@ import { unlock } from '../../../lock-unlock';
 
 /**
  * Allows Zoom Out mode to be exited by double clicking in the selected block.
- *
- * @param {string} clientId Block client ID.
  */
-export function useZoomOutModeExit( { editorMode } ) {
-	const { getSettings, isZoomOut } = unlock( useSelect( blockEditorStore ) );
+export function useZoomOutModeExit() {
+	const { getSettings, isZoomOut, __unstableGetEditorMode } = unlock(
+		useSelect( blockEditorStore )
+	);
+
 	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
 
 	return useRefEffect(
 		( node ) => {
-			// In "compose" mode.
-			const composeMode = editorMode === 'zoom-out' && isZoomOut();
+			function onDoubleClick( event ) {
+				// In "compose" mode.
+				const composeMode =
+					__unstableGetEditorMode() === 'zoom-out' && isZoomOut();
 
-			if ( ! composeMode ) {
-				return;
-			}
+				if ( ! composeMode ) {
+					return;
+				}
 
-			function onDoubleClick( event ) {
 				if ( ! event.defaultPrevented ) {
 					event.preventDefault();
 
@@ -52,6 +54,12 @@ export function useZoomOutModeExit( { editorMode } ) {
 				node.removeEventListener( 'dblclick', onDoubleClick );
 			};
 		},
-		[ editorMode, getSettings, __unstableSetEditorMode ]
+		[
+			getSettings,
+			__unstableSetEditorMode,
+			__unstableGetEditorMode,
+			isZoomOut,
+			resetZoomLevel,
+		]
 	);
 }

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

@@ -283,6 +283,11 @@
 		background: none;
 		border: none;
 	}
+
+	// Make the spacing consistent between controls.
+	.zoom-out-toolbar-button {
+		height: $button-size-next-default-40px;
+	}
 }
 
 .block-editor-block-tools__zoom-out-mode-inserter-button {

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

@@ -64,8 +64,7 @@ function BlockVariationPicker( {
 			{ allowSkip && (
 				<div className="block-editor-block-variation-picker__skip">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="link"
 						onClick={ () => onSelect() }
 					>

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

@@ -36,8 +36,8 @@ function VariationsButtons( {
 			</VisuallyHidden>
 			{ variations.map( ( variation ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
+					size="compact"
 					key={ variation.name }
 					icon={ <BlockIcon icon={ variation.icon } showColors /> }
 					isPressed={ selectedValue === variation.name }

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

@@ -8,11 +8,6 @@
 	color: $gray-900;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 
-	// Needs specificity to override button styles.
-	&.components-button.components-button {
-		padding: $grid-unit-15;
-	}
-
 	.is-dark-theme & {
 		color: $light-gray-placeholder;
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;

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

@@ -60,8 +60,7 @@ function ButtonBlockAppender(
 
 				return (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						ref={ mergedInserterButtonRef }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }

package/src/components/colors-gradients/dropdown.js

@@ -88,11 +88,7 @@ const renderToggle =
 		};
 
 		return (
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				{ ...toggleProps }
-			>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<LabeledColorIndicator
 					colorValue={ colorValue }
 					label={ label }

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

@@ -239,11 +239,7 @@ function ColorPanelDropdown( {
 					};
 
 					return (
-						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							{ ...toggleProps }
-						>
+						<Button __next40pxDefaultSize { ...toggleProps }>
 							<LabeledColorIndicators
 								indicators={ indicators }
 								label={ label }

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

@@ -190,8 +190,7 @@ export default function FiltersPanel( {
 							return (
 								<ItemGroup isBordered isSeparated>
 									<Button
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize
 										{ ...toggleProps }
 									>
 										<LabeledColorIndicator

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

@@ -11,6 +11,7 @@ import {
 	FlexItem,
 	Dropdown,
 	Composite,
+	Tooltip,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
@@ -42,8 +43,7 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 				/>
 				<div className="block-editor-global-styles__clear-shadow">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => onShadowChange( undefined ) }
 					>
@@ -80,32 +80,31 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 
 export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	return (
-		<Composite.Item
-			role="option"
-			aria-label={ label }
-			aria-selected={ isActive }
-			className={ clsx( 'block-editor-global-styles__shadow__item', {
-				'is-active': isActive,
-			} ) }
-			render={
-				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
-					className={ clsx(
-						'block-editor-global-styles__shadow-indicator',
-						{
-							unset: type === 'unset',
-						}
-					) }
-					onClick={ onSelect }
-					label={ label }
-					style={ { boxShadow: shadow } }
-					showTooltip
-				>
-					{ isActive && <Icon icon={ check } /> }
-				</Button>
-			}
-		/>
+		<Tooltip text={ label }>
+			<Composite.Item
+				role="option"
+				aria-label={ label }
+				aria-selected={ isActive }
+				className={ clsx( 'block-editor-global-styles__shadow__item', {
+					'is-active': isActive,
+				} ) }
+				render={
+					<button
+						className={ clsx(
+							'block-editor-global-styles__shadow-indicator',
+							{
+								unset: type === 'unset',
+							}
+						) }
+						onClick={ onSelect }
+						style={ { boxShadow: shadow } }
+						aria-label={ label }
+					>
+						{ isActive && <Icon icon={ check } /> }
+					</button>
+				}
+			/>
+		</Tooltip>
 	);
 }
 
@@ -143,11 +142,7 @@ function renderShadowToggle() {
 		};
 
 		return (
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				{ ...toggleProps }
-			>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<HStack justify="flex-start">
 					<Icon
 						className="block-editor-global-styles__toggle-icon"

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

@@ -37,10 +37,15 @@
 
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
+	appearance: none;
+	background: none;
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-small;
 	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+
 	padding: 0;
 
 	height: $button-size-small + 2 * $border-width;

package/src/components/iframe/content.scss

@@ -1,5 +1,6 @@
 .block-editor-iframe__body {
 	position: relative;
+	border: 0.01px solid transparent;
 }
 
 .block-editor-iframe__container {
@@ -22,7 +23,6 @@
 }
 
 .block-editor-iframe__html {
-	border: 0 solid $gray-300;
 	transform-origin: top center;
 	@include editor-canvas-resize-animation;
 }
@@ -38,21 +38,20 @@
 
 	background-color: $gray-300;
 
-	// Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome
-	// layout, so we use border matching the background instead of margins.
-	border: calc(#{$frame-size} / #{$scale}) solid $gray-300;
-
 	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
 	// so we need to adjust the height of the content to match the scale by using negative margins.
 	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
-	$total-frame-height: calc(2 * #{$frame-size});
+	$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
 	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
 	margin-bottom: calc(-1 * #{$total-height});
+	// Add the top/bottom frame size. We use scaling to account for the left/right, as
+	// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
+	// of the content.
+	padding-top: calc(#{$frame-size} / #{$scale});
+	padding-bottom: calc(#{$frame-size} / #{$scale});
 
 	body {
 		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
-		display: flex;
-		flex-direction: column;
 
 		> .is-root-container:not(.wp-block-post-content) {
 			flex: 1;

package/src/components/iframe/index.js

@@ -306,13 +306,19 @@ function Iframe( {
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
 		const maxWidth = 750;
+		// This scaling calculation has to happen within the JS because CSS calc() can
+		// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
+		// but calc( 100px / 2px ) is not.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
-				? Math.min( containerWidth, maxWidth ) /
+				? ( Math.min( containerWidth, maxWidth ) -
+						parseInt( frameSize ) * 2 ) /
 						prevContainerWidthRef.current
 				: scale
 		);
+
+		// frameSize has to be a px value for the scaling and frame size to be computed correctly.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-frame-size',
 			typeof frameSize === 'number' ? `${ frameSize }px` : frameSize

package/src/components/iframe/style.scss

@@ -0,0 +1,17 @@
+.block-editor-iframe__container {
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+	height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
+	width: $prev-container-width;
+	// This is to offset the movement of the iframe when we open sidebars
+	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
+}

package/src/components/inserter/menu.js

@@ -32,6 +32,7 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
+import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -77,6 +78,10 @@ function InserterMenu(
 	}
 	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 
+	const shouldUseZoomOut =
+		selectedTab === 'patterns' || selectedTab === 'media';
+	useZoomOut( shouldUseZoomOut );
+
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
 			rootClientId,

package/src/components/inspector-controls-tabs/index.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import {
-	Button,
+	Icon,
+	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -43,27 +44,27 @@ export default function InspectorControlsTabs( {
 		<div className="block-editor-block-inspector__tabs">
 			<Tabs defaultTabId={ initialTabName } key={ clientId }>
 				<Tabs.TabList>
-					{ tabs.map( ( tab ) => (
-						<Tabs.Tab
-							key={ tab.name }
-							tabId={ tab.name }
-							render={
-								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
-									icon={
-										! showIconLabels ? tab.icon : undefined
-									}
-									label={
-										! showIconLabels ? tab.title : undefined
-									}
+					{ tabs.map( ( tab ) =>
+						showIconLabels ? (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className={ tab.className }
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) : (
+							<Tooltip text={ tab.title } key={ tab.name }>
+								<Tabs.Tab
+									tabId={ tab.name }
 									className={ tab.className }
+									aria-label={ tab.title }
 								>
-									{ showIconLabels && tab.title }
-								</Button>
-							}
-						/>
-					) ) }
+									<Icon icon={ tab.icon } />
+								</Tabs.Tab>
+							</Tooltip>
+						)
+					) }
 				</Tabs.TabList>
 				<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
 					<SettingsTab showAdvancedControls={ !! blockName } />

package/src/components/inspector-popover-header/index.js

@@ -31,8 +31,7 @@ export default function InspectorPopoverHeader( {
 				<Spacer />
 				{ actions.map( ( { label, icon, onClick } ) => (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						key={ label }
 						className="block-editor-inspector-popover-header__action"
 						label={ label }
@@ -45,8 +44,7 @@ export default function InspectorPopoverHeader( {
 				) ) }
 				{ onClose && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						className="block-editor-inspector-popover-header__action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }

package/src/components/inspector-popover-header/style.scss

@@ -1,16 +1,3 @@
 .block-editor-inspector-popover-header {
 	margin-bottom: $grid-unit-20;
 }
-
-[class].block-editor-inspector-popover-header__action {
-	height: $icon-size;
-
-	&.has-icon {
-		min-width: $icon-size;
-		padding: 0;
-	}
-
-	&:not(.has-icon) {
-		text-decoration: underline;
-	}
-}

package/src/components/link-control/index.js

@@ -475,16 +475,14 @@ function LinkControl( {
 					className="block-editor-link-control__search-actions"
 				>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ handleCancel }
 					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ isDisabled ? noop : handleSubmit }
 						className="block-editor-link-control__search-submit"

package/src/components/link-control/settings-drawer.js

@@ -25,8 +25,7 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 	return (
 		<>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }

package/src/components/list-view/block-select-button.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
@@ -82,9 +81,7 @@ function ListViewBlockSelectButton(
 	}
 
 	return (
-		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+		<a
 			className={ clsx(
 				'block-editor-list-view-block-select-button',
 				className
@@ -156,7 +153,7 @@ function ListViewBlockSelectButton(
 					</span>
 				) }
 			</HStack>
-		</Button>
+		</a>
 	);
 }
 

package/src/components/list-view/style.scss

@@ -41,6 +41,15 @@
 		&:hover {
 			color: var(--wp-admin-theme-color);
 		}
+
+		svg {
+			fill: currentColor;
+			// Optimizate for high contrast modes.
+			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
+			@media (forced-colors: active) {
+				fill: CanvasText;
+			}
+		}
 	}
 
 	&:not(.is-selected) .block-editor-list-view-block-select-button {
@@ -216,6 +225,15 @@
 		text-align: left;
 		position: relative;
 		white-space: nowrap;
+		border-radius: 2px;
+		box-sizing: border-box;
+		color: inherit;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 400;
+		margin: 0;
+		text-decoration: none;
+		transition: box-shadow 0.1s linear;
 
 		&.is-dropping-before::before {
 			content: "";

package/src/components/media-placeholder/index.js

@@ -91,8 +91,7 @@ const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
 	return (
 		<div className="block-editor-media-placeholder__url-input-container">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
@@ -389,8 +388,7 @@ export function MediaPlaceholder( {
 		return (
 			onCancel && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					className="block-editor-media-placeholder__cancel-button"
 					title={ __( 'Cancel' ) }
 					variant="link"
@@ -419,8 +417,7 @@ export function MediaPlaceholder( {
 			onToggleFeaturedImage && (
 				<div className="block-editor-media-placeholder__url-input-container">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
 						variant="secondary"
@@ -436,8 +433,7 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						open();
@@ -477,8 +473,7 @@ export function MediaPlaceholder( {
 							const content = (
 								<>
 									<Button
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize
 										variant="primary"
 										className={ clsx(
 											'block-editor-media-placeholder__button',
@@ -508,8 +503,7 @@ export function MediaPlaceholder( {
 					<FormFileUpload
 						render={ ( { openFileDialog } ) => (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								onClick={ openFileDialog }
 								variant="primary"
 								className={ clsx(

package/src/components/skip-to-selected-block/index.js

@@ -28,8 +28,7 @@ export default function SkipToSelectedBlock() {
 
 	return selectedBlockClientId ? (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			variant="secondary"
 			className="block-editor-skip-to-selected-block"
 			onClick={ onClick }