@wordpress/block-editor 14.7.1-next.082ed6819.0 → 14.8.1-next.cd6172eb0.0

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

@@ -18,6 +18,7 @@ import {
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { copy } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -185,21 +186,6 @@ function BlockSwitcherDropdownMenuContents( {
 	);
 }
 
-const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
-	<>
-		<BlockIcon
-			className="block-editor-block-switcher__toggle"
-			icon={ icon }
-			showColors
-		/>
-		{ showTitle && blockTitle && (
-			<span className="block-editor-block-switcher__toggle-text">
-				{ blockTitle }
-			</span>
-		) }
-	</>
-);
-
 export const BlockSwitcher = ( { clientIds } ) => {
 	const {
 		hasContentOnlyLocking,
@@ -272,6 +258,11 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		clientId: clientIds?.[ 0 ],
 		maximumLength: 35,
 	} );
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
 
 	if ( invalidBlocks ) {
 		return null;
@@ -282,6 +273,11 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		? blockTitle
 		: __( 'Multiple blocks selected' );
 
+	const blockIndicatorText =
+		( isReusable || isTemplate ) && ! showIconLabels && blockTitle
+			? blockTitle
+			: undefined;
+
 	const hideDropdown =
 		isDisabled ||
 		( ! hasBlockStyles && ! canRemove ) ||
@@ -295,12 +291,13 @@ export const BlockSwitcher = ( { clientIds } ) => {
 					className="block-editor-block-switcher__no-switcher-icon"
 					title={ blockSwitcherLabel }
 					icon={
-						<BlockIndicator
+						<BlockIcon
+							className="block-editor-block-switcher__toggle"
 							icon={ icon }
-							showTitle={ isReusable || isTemplate }
-							blockTitle={ blockTitle }
+							showColors
 						/>
 					}
+					text={ blockIndicatorText }
 				/>
 			</ToolbarGroup>
 		);
@@ -329,12 +326,13 @@ export const BlockSwitcher = ( { clientIds } ) => {
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={
-							<BlockIndicator
+							<BlockIcon
+								className="block-editor-block-switcher__toggle"
 								icon={ icon }
-								showTitle={ isReusable || isTemplate }
-								blockTitle={ blockTitle }
+								showColors
 							/>
 						}
+						text={ blockIndicatorText }
 						toggleProps={ {
 							description: blockSwitcherDescription,
 							...toggleProps,

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

@@ -26,15 +26,6 @@
 	}
 }
 
-.block-editor-block-switcher__toggle-text {
-	margin-left: $grid-unit-10;
-
-	// Account for double label when show-text-buttons is set.
-	.show-icon-labels & {
-		display: none;
-	}
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	display: flex;
 

package/src/components/block-title/test/index.js

@@ -31,7 +31,9 @@ const blockLabelMap = {
 };
 
 jest.mock( '@wordpress/blocks', () => {
+	const actualImplementation = jest.requireActual( '@wordpress/blocks' );
 	return {
+		...actualImplementation,
 		isReusableBlock( { title } ) {
 			return title === 'Reusable Block';
 		},

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

@@ -74,6 +74,8 @@ export function PrivateBlockToolbar( {
 		showGroupButtons,
 		showLockButtons,
 		showSwitchSectionStyleButton,
+		hasFixedToolbar,
+		isNavigationMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -85,8 +87,10 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
+			getSettings,
 			getParentSectionBlock,
 			isZoomOut,
+			isNavigationMode: _isNavigationMode,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -119,6 +123,9 @@ export function PrivateBlockToolbar( {
 		const _hasTemplateLock = selectedBlockClientIds.some(
 			( id ) => getTemplateLock( id ) === 'contentOnly'
 		);
+
+		const _isZoomOut = isZoomOut();
+
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
@@ -127,7 +134,7 @@ export function PrivateBlockToolbar( {
 			shouldShowVisualToolbar: isValid && isVisual,
 			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
 			showParentSelector:
-				! isZoomOut() &&
+				! _isZoomOut &&
 				parentBlockType &&
 				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
@@ -139,11 +146,13 @@ export function PrivateBlockToolbar( {
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
-			showShuffleButton: isZoomOut(),
-			showSlots: ! isZoomOut(),
-			showGroupButtons: ! isZoomOut(),
-			showLockButtons: ! isZoomOut(),
-			showSwitchSectionStyleButton: isZoomOut(),
+			showShuffleButton: _isZoomOut,
+			showSlots: ! _isZoomOut,
+			showGroupButtons: ! _isZoomOut,
+			showLockButtons: ! _isZoomOut,
+			showSwitchSectionStyleButton: _isZoomOut,
+			hasFixedToolbar: getSettings().hasFixedToolbar,
+			isNavigationMode: _isNavigationMode(),
 		};
 	}, [] );
 
@@ -170,6 +179,7 @@ export function PrivateBlockToolbar( {
 	// Shifts the toolbar to make room for the parent block selector.
 	const classes = clsx( 'block-editor-block-contextual-toolbar', {
 		'has-parent': showParentSelector,
+		'is-inverted-toolbar': isNavigationMode && ! hasFixedToolbar,
 	} );
 
 	const innerClasses = clsx( 'block-editor-block-toolbar', {

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

@@ -139,6 +139,50 @@
 		border-right-color: $gray-900;
 	}
 
+	.is-inverted-toolbar {
+		background-color: $gray-900;
+		color: $gray-100;
+
+		&.block-editor-block-contextual-toolbar {
+			border-color: $gray-800;
+		}
+
+		button {
+			color: $gray-300;
+
+			&:hover {
+				color: $white;
+			}
+
+			&:focus::before {
+				box-shadow: inset 0 0 0 1px $gray-900, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+
+			&:disabled,
+			&[aria-disabled="true"] {
+				color: $gray-700;
+			}
+		}
+
+		.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+			border-color: $gray-800;
+			background-color: $gray-900;
+		}
+
+		.block-editor-block-switcher__toggle {
+			color: $gray-100;
+		}
+
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right-color: $gray-800 !important;
+		}
+
+		.is-pressed {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
 	// Hide the block toolbar if the insertion point is shown.
 	&.is-insertion-point-visible {
 		visibility: hidden;

package/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap

@@ -42,7 +42,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       <button
         aria-label="Align top"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -64,7 +64,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       <button
         aria-label="Align middle"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -86,7 +86,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       <button
         aria-label="Align bottom"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -219,7 +219,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         <button
                           aria-label="Color: red"
                           aria-selected="true"
-                          class="components-button components-circular-option-picker__option"
+                          class="components-button components-circular-option-picker__option is-next-40px-default-size"
                           data-active-item="true"
                           id="components-circular-option-picker-0-0"
                           role="option"
@@ -247,7 +247,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                   class="components-circular-option-picker__custom-clear-wrapper"
                 >
                   <button
-                    class="components-button components-circular-option-picker__clear is-tertiary"
+                    class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
                     type="button"
                   >
                     Clear

package/src/components/font-appearance-control/index.js

@@ -153,6 +153,7 @@ export default function FontAppearanceControl( props ) {
 				{ ...otherProps }
 				className="components-font-appearance-control"
 				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
 				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }

package/src/components/font-family/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -18,6 +23,7 @@ export default function FontFamilyControl( {
 	value = '',
 	onChange,
 	fontFamilies,
+	className,
 	...props
 } ) {
 	const [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );
@@ -55,10 +61,14 @@ export default function FontFamilyControl( {
 	return (
 		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font' ) }
 			value={ value }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
 			options={ options }
+			className={ clsx( 'block-editor-font-family-control', className, {
+				'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
+			} ) }
 			{ ...props }
 		/>
 	);

package/src/components/font-family/style.scss

@@ -0,0 +1,5 @@
+.block-editor-font-family-control {
+	&:not(.is-next-has-no-margin-bottom) {
+		margin-bottom: $grid-unit-10;
+	}
+}

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

@@ -444,17 +444,6 @@ export default function DimensionsPanel( {
 
 	const onMouseLeaveControls = () => onVisualize( false );
 
-	const inputProps = {
-		min: minMarginValue,
-		onDragStart: () => {
-			//Reset to 0 in case the value was negative.
-			setMinMarginValue( 0 );
-		},
-		onDragEnd: () => {
-			setMinMarginValue( minimumMargin );
-		},
-	};
-
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
@@ -545,8 +534,10 @@ export default function DimensionsPanel( {
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialPadding }
-							onMouseOver={ onMouseOverPadding }
-							onMouseOut={ onMouseLeaveControls }
+							inputProps={ {
+								onMouseOver: onMouseOverPadding,
+								onMouseOut: onMouseLeaveControls,
+							} }
 						/>
 					) }
 					{ showSpacingPresetsControl && (
@@ -581,14 +572,23 @@ export default function DimensionsPanel( {
 							__next40pxDefaultSize
 							values={ marginValues }
 							onChange={ setMarginValues }
-							inputProps={ inputProps }
+							inputProps={ {
+								min: minMarginValue,
+								onDragStart: () => {
+									// Reset to 0 in case the value was negative.
+									setMinMarginValue( 0 );
+								},
+								onDragEnd: () => {
+									setMinMarginValue( minimumMargin );
+								},
+								onMouseOver: onMouseOverMargin,
+								onMouseOut: onMouseLeaveControls,
+							} }
 							label={ __( 'Margin' ) }
 							sides={ marginSides }
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialMargin }
-							onMouseOver={ onMouseOverMargin }
-							onMouseOut={ onMouseLeaveControls }
 						/>
 					) }
 					{ showSpacingPresetsControl && (

package/src/components/iframe/content.scss

@@ -4,68 +4,66 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// 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.
-	@include editor-canvas-resize-animation( transform 0s, scale 0s, padding 0s, translate 0s);
+	// Prevents a flash of background color change when entering/exiting zoom out
+	transition: background-color 400ms;
 
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
 		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
+		$overflow-behavior: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
 
 		position: fixed;
 		left: 0;
 		right: 0;
 		top: calc(-1 * #{$scroll-top});
 		bottom: 0;
-		translate: 0 calc(#{$scroll-top} - #{$scroll-top-next});
 		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
 		// and removing the scrollbar causes the content to shift.
-		overflow-y: scroll;
-
-		// 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.
-		@include editor-canvas-resize-animation( transform 0s, top 0s, bottom 0s, right 0s, left 0s );
+		overflow-y: $overflow-behavior;
 	}
-}
 
-.block-editor-iframe__html.is-zoomed-out {
-	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
-	$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);
-	$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((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
-	scale: #{$scale};
-	background-color: $gray-300;
+	&.is-zoomed-out {
+		$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
+		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
+		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
+		$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
+		$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((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
+		scale: $scale;
+		background-color: $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} / #{$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});
+		// 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} / #{$scale});
+		$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
+		margin-bottom: calc(-1 * #{$total-height});
 
-	body {
-		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+		// 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});
 
-		> .is-root-container:not(.wp-block-post-content) {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
+		body {
+			min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
 
-			> main {
+			> .is-root-container:not(.wp-block-post-content) {
 				flex: 1;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+
+				> main {
+					flex: 1;
+				}
 			}
 		}
+
+		.wp-block[draggable] {
+			cursor: grab;
+		}
 	}
 }