@wordpress/block-editor 12.17.0 → 12.18.0

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

@@ -14,7 +14,7 @@ import { copy } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
+import { BlockSwitcher } from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../block-title/use-block-display-title', () =>
@@ -22,23 +22,6 @@ jest.mock( '../../block-title/use-block-display-title', () =>
 );
 
 describe( 'BlockSwitcher', () => {
-	test( 'should not render block switcher without blocks', () => {
-		useSelect.mockImplementation( () => ( {} ) );
-		const { container } = render( <BlockSwitcher /> );
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	test( 'should not render block switcher with null blocks', () => {
-		useSelect.mockImplementation( () => ( { blocks: [ null ] } ) );
-		const { container } = render(
-			<BlockSwitcher
-				clientIds={ [ 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9' ] }
-			/>
-		);
-		expect( container ).toBeEmptyDOMElement();
-	} );
-} );
-describe( 'BlockSwitcherDropdownMenu', () => {
 	const headingBlock1 = {
 		attributes: {
 			content: [ 'How are you?' ],
@@ -49,66 +32,46 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 		originalContent: '<h2>How are you?</h2>',
 		clientId: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9',
 	};
-
-	const textBlock = {
-		attributes: {
-			content: [ 'I am great!' ],
+	const headingBlockType = {
+		category: 'text',
+		title: 'Heading',
+		edit: () => {},
+		save: () => {},
+		transforms: {
+			to: [
+				{
+					type: 'block',
+					blocks: [ 'core/paragraph' ],
+					transform: () => {},
+				},
+				{
+					type: 'block',
+					blocks: [ 'core/paragraph' ],
+					transform: () => {},
+					isMultiBlock: true,
+				},
+			],
 		},
-		isValid: true,
-		name: 'core/paragraph',
-		originalContent: '<p>I am great!</p>',
-		clientId: 'b1303fdb-3e60-43faf-a770-2e1ea656c5b8',
 	};
-
-	const headingBlock2 = {
-		attributes: {
-			content: [ 'I am the greatest!' ],
-			level: 3,
+	const paragraphBlockType = {
+		category: 'text',
+		title: 'Paragraph',
+		edit: () => {},
+		save: () => {},
+		transforms: {
+			to: [
+				{
+					type: 'block',
+					blocks: [ 'core/heading' ],
+					transform: () => {},
+				},
+			],
 		},
-		isValid: true,
-		name: 'core/heading',
-		originalContent: '<h3>I am the greatest!</h3>',
-		clientId: 'c2403fd2-4e63-5ffa-b71c-1e0ea656c5b0',
 	};
 
 	beforeAll( () => {
-		registerBlockType( 'core/heading', {
-			category: 'text',
-			title: 'Heading',
-			edit: () => {},
-			save: () => {},
-			transforms: {
-				to: [
-					{
-						type: 'block',
-						blocks: [ 'core/paragraph' ],
-						transform: () => {},
-					},
-					{
-						type: 'block',
-						blocks: [ 'core/paragraph' ],
-						transform: () => {},
-						isMultiBlock: true,
-					},
-				],
-			},
-		} );
-
-		registerBlockType( 'core/paragraph', {
-			category: 'text',
-			title: 'Paragraph',
-			edit: () => {},
-			save: () => {},
-			transforms: {
-				to: [
-					{
-						type: 'block',
-						blocks: [ 'core/heading' ],
-						transform: () => {},
-					},
-				],
-			},
-		} );
+		registerBlockType( 'core/heading', headingBlockType );
+		registerBlockType( 'core/paragraph', paragraphBlockType );
 	} );
 
 	afterAll( () => {
@@ -116,184 +79,104 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 		unregisterBlockType( 'core/paragraph' );
 	} );
 
-	test( 'should render switcher with blocks', () => {
+	test( 'should render switcher with block transforms', async () => {
 		useSelect.mockImplementation( () => ( {
 			possibleBlockTransformations: [
-				{ name: 'core/heading', frecency: 1 },
-				{ name: 'core/paragraph', frecency: 1 },
+				{
+					name: 'core/heading',
+					title: headingBlockType.title,
+					frecency: 1,
+				},
+				{
+					name: 'core/paragraph',
+					title: paragraphBlockType.title,
+					frecency: 1,
+				},
 			],
+			blocks: [ headingBlock1 ],
 			canRemove: true,
 		} ) );
-		const { container } = render(
-			<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+		const user = userEvent.setup();
+		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Block Name',
+				expanded: false,
+			} )
+		).toBeVisible();
+		expect(
+			screen.queryByRole( 'menu', {
+				name: 'Block Name',
+			} )
+		).not.toBeInTheDocument();
+		await user.type(
+			screen.getByRole( 'button', {
+				name: 'Block Name',
+				expanded: false,
+			} ),
+			'[ArrowDown]'
 		);
-		expect( container ).toMatchSnapshot();
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: true,
+				} )
+			).toBeVisible()
+		);
+		const dropdown = screen.getByRole( 'menu', {
+			name: 'Block Name',
+		} );
+		await waitFor( () => expect( dropdown ).toBeVisible() );
+		const items = within( dropdown ).getAllByRole( 'menuitem' );
+		expect( items ).toHaveLength( 2 );
+		expect( items[ 0 ] ).toHaveTextContent( paragraphBlockType.title );
+		expect( items[ 1 ] ).toHaveTextContent( headingBlockType.title );
 	} );
 
-	test( 'should render disabled block switcher with multi block of different types when no transforms', () => {
+	test( 'should render disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
 		useSelect.mockImplementation( () => ( {
-			possibleBlockTransformations: [],
+			blocks: [ headingBlock1 ],
 			icon: copy,
+			hasBlockStyles: false,
+			canRemove: false,
 		} ) );
-		const { container } = render(
-			<BlockSwitcherDropdownMenu
-				blocks={ [ headingBlock1, textBlock ] }
-			/>
-		);
-		expect( container ).toMatchSnapshot();
+		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Block Name',
+			} )
+		).toBeDisabled();
 	} );
 
-	test( 'should render enabled block switcher with multi block when transforms exist', () => {
+	test( 'should render message for no available transforms', async () => {
 		useSelect.mockImplementation( () => ( {
-			possibleBlockTransformations: [
-				{ name: 'core/heading', frecency: 1 },
-				{ name: 'core/paragraph', frecency: 1 },
-			],
+			possibleBlockTransformations: [],
+			blocks: [ headingBlock1 ],
+			icon: copy,
 			canRemove: true,
 		} ) );
-		const { container } = render(
-			<BlockSwitcherDropdownMenu
-				blocks={ [ headingBlock1, headingBlock2 ] }
-			/>
+		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
+		const user = userEvent.setup();
+		await user.type(
+			screen.getByRole( 'button', {
+				name: 'Block Name',
+				expanded: false,
+			} ),
+			'[ArrowDown]'
 		);
-		expect( container ).toMatchSnapshot();
-	} );
-
-	describe( 'Dropdown', () => {
-		beforeAll( () => {
-			useSelect.mockImplementation( () => ( {
-				possibleBlockTransformations: [
-					{ name: 'core/paragraph', frecency: 3 },
-				],
-				canRemove: true,
-			} ) );
-		} );
-
-		test( 'should dropdown exist', () => {
-			render(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			);
-
+		await waitFor( () =>
 			expect(
 				screen.getByRole( 'button', {
 					name: 'Block Name',
-					expanded: false,
+					expanded: true,
 				} )
-			).toBeVisible();
-		} );
-
-		test( 'should simulate a keydown event, which should open transform toggle.', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			);
-
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} )
-			).toBeVisible();
-			expect(
-				screen.queryByRole( 'menu', {
-					name: 'Block Name',
-				} )
-			).not.toBeInTheDocument();
-
-			await user.type(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} ),
-				'[ArrowDown]'
-			);
-
-			await waitFor( () =>
-				expect(
-					screen.getByRole( 'button', {
-						name: 'Block Name',
-						expanded: true,
-					} )
-				).toBeVisible()
-			);
-
-			await waitFor( () =>
-				expect(
-					screen.getByRole( 'menu', {
-						name: 'Block Name',
-					} )
-				).toBeVisible()
-			);
-		} );
-
-		test( 'should simulate a click event, which should call onToggle.', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			);
-
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} )
-			).toBeVisible();
-			expect(
-				screen.queryByRole( 'menu', {
-					name: 'Block Name',
-				} )
-			).not.toBeInTheDocument();
-
-			await user.click(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} )
-			);
-
-			await waitFor( () =>
-				expect(
-					screen.getByRole( 'button', {
-						name: 'Block Name',
-						expanded: true,
-					} )
-				).toBeVisible()
-			);
-
-			await waitFor( () =>
-				expect(
-					screen.getByRole( 'menu', {
-						name: 'Block Name',
-					} )
-				).toBeVisible()
-			);
-		} );
-
-		test( 'should create the transform items for the chosen block.', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			);
-
-			await user.click(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} )
-			);
-
-			await waitFor( () =>
-				expect(
-					within(
-						screen.getByRole( 'menu', {
-							name: 'Block Name',
-						} )
-					).getByRole( 'menuitem' )
-				).toBeInTheDocument()
-			);
-		} );
+			).toBeVisible()
+		);
+		expect(
+			screen.getByRole( 'menu', {
+				name: 'Block Name',
+			} )
+		).toHaveTextContent( 'No transforms.' );
 	} );
 } );

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

@@ -98,6 +98,10 @@
 
 	.block-editor-block-parent-selector {
 		position: relative;
+		// Must use the same negative margins of the .components-toolbar-group
+		// https://github.com/WordPress/gutenberg/blob/73a4716f429b5dce0190638049f5bd30f0b242f6/packages/block-editor/src/components/block-toolbar/style.scss#L32-L33
+		margin-top: -$border-width;
+		margin-bottom: -$border-width;
 
 		// Parent selector dot divider
 		&::after {
@@ -108,11 +112,6 @@
 			bottom: $grid-unit-20;
 		}
 	}
-
-	.block-editor-block-parent-selector__button {
-		position: relative;
-		top: -1px;
-	}
 }
 
 
@@ -203,6 +202,24 @@
 
 	.block-editor-block-mover .block-editor-block-mover__move-button-container {
 		width: auto;
+
+		@include break-small() {
+			position: relative;
+
+			&::before {
+				content: "";
+				height: $border-width;
+				width: 100%;
+				background: $gray-900;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				// With Top toolbar enabled, this separator has a smaller width. Translating the
+				// X axis allows to make the separator always centered regardless of its width.
+				transform: translate(-50%, 0);
+				margin-top: -$border-width * 0.5;
+			}
+		}
 	}
 
 	.block-editor-block-mover.is-horizontal {
@@ -231,19 +248,6 @@
 		padding-right: $grid-unit-15;
 	}
 
-	@include break-small() {
-		// Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69
-		.is-up-button.is-up-button.is-up-button {
-			margin-right: 0;
-			border-radius: 0;
-			order: 1;
-		}
-
-		.is-down-button.is-down-button.is-down-button {
-			order: 2;
-		}
-	}
-
 	.block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
 		width: auto;
 	}

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

@@ -24,6 +24,8 @@ export const InsertionPointOpenRef = createContext();
 function InbetweenInsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
+	operation = 'insert',
+	nearestSide = 'right',
 } ) {
 	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
@@ -138,9 +140,14 @@ function InbetweenInsertionPointPopover( {
 		return null;
 	}
 
+	const orientationClassname =
+		orientation === 'horizontal' || operation === 'group'
+			? 'is-horizontal'
+			: 'is-vertical';
+
 	const className = classnames(
 		'block-editor-block-list__insertion-point',
-		'is-' + orientation
+		orientationClassname
 	);
 
 	return (
@@ -149,6 +156,8 @@ function InbetweenInsertionPointPopover( {
 			nextClientId={ nextClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
+			operation={ operation }
+			nearestSide={ nearestSide }
 		>
 			<motion.div
 				layout={ ! disableMotion }
@@ -236,6 +245,10 @@ export default function InsertionPoint( props ) {
 			{ ...props }
 		/>
 	) : (
-		<InbetweenInsertionPointPopover { ...props } />
+		<InbetweenInsertionPointPopover
+			operation={ insertionPoint.operation }
+			nearestSide={ insertionPoint.nearestSide }
+			{ ...props }
+		/>
 	);
 }

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

@@ -235,6 +235,11 @@
 			padding-right: 6px;
 			padding-left: 6px;
 			background-color: $white;
+
+			.show-icon-labels & {
+				padding-right: $grid-unit-15;
+				padding-left: $grid-unit-15;
+			}
 		}
 	}
 
@@ -242,15 +247,11 @@
 	.show-icon-labels & {
 
 		.block-editor-block-parent-selector {
-			position: static;
-			margin-top: -$border-width;
+			position: relative;
+			left: auto;
 			margin-left: -$border-width;
-			margin-bottom: -$border-width;
-
-			.block-editor-block-parent-selector__button {
-				position: static;
-			}
 		}
+
 		.block-editor-block-mover__move-button-container,
 		.block-editor-block-toolbar__block-controls .block-editor-block-mover {
 			border-left: 1px solid $gray-900;

package/src/components/font-sizes/fluid-utils.js

@@ -181,6 +181,13 @@ export function getComputedFluidTypographyValue( {
 		return null;
 	}
 
+	// Calculates the linear factor denominator. If it's 0, we cannot calculate a fluid value.
+	const linearDenominator =
+		maximumViewportWidthParsed.value - minimumViewportWidthParsed.value;
+	if ( ! linearDenominator ) {
+		return null;
+	}
+
 	// Build CSS rule.
 	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
 	const minViewportWidthOffsetValue = roundToPrecision(
@@ -193,8 +200,7 @@ export function getComputedFluidTypographyValue( {
 	const linearFactor =
 		100 *
 		( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /
-			( maximumViewportWidthParsed.value -
-				minimumViewportWidthParsed.value ) );
+			linearDenominator );
 	const linearFactorScaled = roundToPrecision(
 		( linearFactor || 1 ) * scaleFactor,
 		3

package/src/components/font-sizes/test/fluid-utils.js

@@ -64,6 +64,15 @@ describe( 'getComputedFluidTypographyValue()', () => {
 		);
 	} );
 
+	it( 'should return `null` when maximum and minimum viewport width are equal', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+			minimumViewportWidth: '500px',
+			maximumViewportWidth: '500px',
+		} );
+		expect( fluidTypographyValues ).toBeNull();
+	} );
+
 	it( 'should return a fluid font size when given a scale factor', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '30px',

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

@@ -85,8 +85,10 @@ export default function BorderPanel( {
 	defaultControls = DEFAULT_CONTROLS,
 } ) {
 	const colors = useColorsPerOrigin( settings );
-	const decodeValue = ( rawValue ) =>
-		getValueFromVariable( { settings }, '', rawValue );
+	const decodeValue = useCallback(
+		( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),
+		[ settings ]
+	);
 	const encodeColorValue = ( colorValue ) => {
 		const allColors = colors.flatMap(
 			( { colors: originColors } ) => originColors
@@ -98,25 +100,13 @@ export default function BorderPanel( {
 			? 'var:preset|color|' + colorObject.slug
 			: colorValue;
 	};
-	const decodeColorValue = useCallback(
-		( colorValue ) => {
-			const allColors = colors.flatMap(
-				( { colors: originColors } ) => originColors
-			);
-			const colorObject = allColors.find(
-				( { slug } ) => colorValue === 'var:preset|color|' + slug
-			);
-			return colorObject ? colorObject.color : colorValue;
-		},
-		[ colors ]
-	);
 	const border = useMemo( () => {
 		if ( hasSplitBorders( inheritedValue?.border ) ) {
 			const borderValue = { ...inheritedValue?.border };
 			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
 				borderValue[ side ] = {
 					...borderValue[ side ],
-					color: decodeColorValue( borderValue[ side ]?.color ),
+					color: decodeValue( borderValue[ side ]?.color ),
 				};
 			} );
 			return borderValue;
@@ -124,10 +114,10 @@ export default function BorderPanel( {
 		return {
 			...inheritedValue?.border,
 			color: inheritedValue?.border?.color
-				? decodeColorValue( inheritedValue?.border?.color )
+				? decodeValue( inheritedValue?.border?.color )
 				: undefined,
 		};
-	}, [ inheritedValue?.border, decodeColorValue ] );
+	}, [ inheritedValue?.border, decodeValue ] );
 	const setBorder = ( newBorder ) =>
 		onChange( { ...value, border: newBorder } );
 	const showBorderColor = useHasBorderColorControl( settings );

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

@@ -26,6 +26,7 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { mergeOrigins } from '../use-settings';
 import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 
@@ -81,8 +82,22 @@ export default function EffectsPanel( {
 	// Shadow
 	const hasShadowEnabled = useHasShadowControl( settings );
 	const shadow = decodeValue( inheritedValue?.shadow );
+	const shadowPresets = settings?.shadow?.presets;
+	const mergedShadowPresets = shadowPresets
+		? mergeOrigins( shadowPresets )
+		: [];
 	const setShadow = ( newValue ) => {
-		onChange( setImmutably( value, [ 'shadow' ], newValue ) );
+		const slug = mergedShadowPresets?.find(
+			( { shadow: shadowName } ) => shadowName === newValue
+		)?.slug;
+
+		onChange(
+			setImmutably(
+				value,
+				[ 'shadow' ],
+				slug ? `var:preset|shadow|${ slug }` : newValue || undefined
+			)
+		);
 	};
 	const hasShadow = () => !! value?.shadow;
 	const resetShadow = () => setShadow( undefined );

package/src/components/global-styles/hooks.js

@@ -66,6 +66,7 @@ const VALID_SETTINGS = [
 	'spacing.units',
 	'typography.fluid',
 	'typography.customFontSize',
+	'typography.defaultFontSizes',
 	'typography.dropCap',
 	'typography.fontFamilies',
 	'typography.fontSizes',
@@ -238,6 +239,7 @@ export function useSettingsForBlockElement(
 				...updatedSettings.typography,
 				fontSizes: {},
 				customFontSize: false,
+				defaultFontSizes: false,
 			};
 		}