@wordpress/block-editor 12.5.0 → 12.6.0

package/src/components/{block-mobile-toolbar/test/block-actions-menu.native.js → block-toolbar/test/block-toolbar-menu.native.js}

@@ -9,6 +9,7 @@ import {
 	within,
 	getEditorHtml,
 	typeInRichText,
+	openBlockActionsMenu,
 } from 'test/helpers';
 
 /**
@@ -36,15 +37,14 @@ describe( 'Block Actions Menu', () => {
             <p></p>
             <!-- /wp:paragraph -->`,
 		} );
-		const { getByLabelText, getByRole } = screen;
+		const { getByRole } = screen;
 
 		// Get block
 		const paragraphBlock = await getBlock( screen, 'Paragraph' );
 		fireEvent.press( paragraphBlock );
 
 		// Open block actions menu
-		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
-		fireEvent.press( blockActionsButton );
+		await openBlockActionsMenu( screen );
 
 		// Get Picker title
 		const pickerHeader = getByRole( 'header' );
@@ -56,10 +56,8 @@ describe( 'Block Actions Menu', () => {
 
 	describe( 'moving blocks', () => {
 		it( 'moves blocks up and down', async () => {
-			const screen = await initializeEditor( {
-				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
-			} );
-			const { getByLabelText, getByTestId } = screen;
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
 
 			// Add Paragraph block
 			await addBlock( screen, 'Paragraph' );
@@ -85,16 +83,8 @@ describe( 'Block Actions Menu', () => {
 			} );
 			fireEvent.press( spacerBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			let blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Tap on the Move Down button
-			fireEvent.press(
-				within( blockActionsMenu ).getByLabelText( 'Move block down' )
-			);
+			fireEvent.press( getByLabelText( /Move block down/ ) );
 
 			// Get Heading block
 			const headingBlock = await getBlock( screen, 'Heading', {
@@ -102,25 +92,15 @@ describe( 'Block Actions Menu', () => {
 			} );
 			fireEvent.press( headingBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Tap on the Move Up button
-			fireEvent.press(
-				within( blockActionsMenu ).getByLabelText( 'Move block up' )
-			);
+			fireEvent.press( getByLabelText( /Move block up/ ) );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
 		it( 'disables the Move Up button for the first block', async () => {
-			const screen = await initializeEditor( {
-				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
-			} );
-			const { getByLabelText, getByTestId } = screen;
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
 
 			// Add Paragraph block
 			await addBlock( screen, 'Paragraph' );
@@ -144,15 +124,8 @@ describe( 'Block Actions Menu', () => {
 			paragraphBlock = await getBlock( screen, 'Paragraph' );
 			fireEvent.press( paragraphBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Get the Move Up button
-			const upButton =
-				within( blockActionsMenu ).getByLabelText( 'Move block up' );
+			const upButton = getByLabelText( /Move block up/ );
 			const isUpButtonDisabled =
 				upButton.props.accessibilityState?.disabled;
 			expect( isUpButtonDisabled ).toBe( true );
@@ -167,7 +140,7 @@ describe( 'Block Actions Menu', () => {
 			const screen = await initializeEditor( {
 				screenWidth: 100,
 			} );
-			const { getByLabelText, getByTestId } = screen;
+			const { getByLabelText } = screen;
 
 			// Add Paragraph block
 			await addBlock( screen, 'Paragraph' );
@@ -193,15 +166,8 @@ describe( 'Block Actions Menu', () => {
 			} );
 			fireEvent.press( headingBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Get the Move Down button
-			const downButton =
-				within( blockActionsMenu ).getByLabelText( 'Move block down' );
+			const downButton = getByLabelText( /Move block down/ );
 			const isDownButtonDisabled =
 				downButton.props.accessibilityState?.disabled;
 			expect( isDownButtonDisabled ).toBe( true );
@@ -243,7 +209,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( headingBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Copy button
 			fireEvent.press( getByLabelText( /Copy/ ) );
@@ -253,7 +219,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Paste block after button
 			fireEvent.press( getByLabelText( /Paste block after/ ) );
@@ -290,7 +256,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( headingBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Copy button
 			fireEvent.press( getByLabelText( /Copy/ ) );
@@ -300,7 +266,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Past block after button
 			fireEvent.press( getByLabelText( /Paste block after/ ) );
@@ -335,7 +301,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Cut button
 			fireEvent.press( getByLabelText( /Cut block/ ) );
@@ -346,7 +312,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( headingBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Cut button
 			fireEvent.press( getByLabelText( /Paste block after/ ) );
@@ -383,7 +349,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( spacerBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Duplicate button
 			fireEvent.press( getByLabelText( /Duplicate block/ ) );
@@ -418,7 +384,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Transform block button
 			fireEvent.press( getByLabelText( /Transform block…/ ) );

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	getBlock,
+	initializeEditor,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'Block Toolbar', () => {
+	it( "doesn't render the block settings button if there aren't any settings for the current selected block", async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Image' );
+
+		// Act
+		fireEvent(
+			screen.getByTestId( 'media-options-picker' ),
+			'backdropPress'
+		);
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeNull();
+	} );
+
+	it( 'renders the block settings button for the current selected block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = await getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeVisible();
+	} );
+} );

package/src/components/button-block-appender/styles.native.scss

@@ -3,8 +3,8 @@
 	align-items: center;
 	justify-content: center;
 	padding: 9px;
-	margin-left: 0;
-	margin-right: 0;
+	margin-left: $grid-unit;
+	margin-right: $grid-unit;
 	border-radius: 4px;
 }
 

package/src/components/caption/README.md

@@ -0,0 +1,49 @@
+## Caption
+
+The `Caption` component renders the [caption part](https://wordpress.org/documentation/article/gallery-block/#caption) of some blocks (image, gallery...).
+
+This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component.
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Renders a Caption area:
+
+```jsx
+import { Caption } from '@wordpress/block-editor';
+const BlockCaption = ( {
+	onBlur,
+	onChange,
+	onFocus,
+	isSelected,
+	shouldDisplay,
+	text,
+	insertBlocksAfter,
+} ) => (
+	<View >
+		<Caption
+			isSelected={ isSelected }
+			onBlur={ onBlur }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			shouldDisplay={ shouldDisplay }
+			value={ text }
+			insertBlocksAfter={ insertBlocksAfter }
+		/>
+	</View>
+);
+```
+
+### Props
+
+The properties `isSelected`, `onBlur`, `onChange`, `onFocus`, `shouldDisplay`, `value`, `insertBlocksAfter` of this component are passed directly to their related props of its inner `<RichText>` component ([see detailed info about the RichText component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)).
+
+## Related components
+
+Caption components is mostly used by the [`BlockCaption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-caption) component.

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
@@ -28,12 +29,12 @@ const colorsAndGradientKeys = [
 
 const TAB_COLOR = {
 	name: 'color',
-	title: 'Solid',
+	title: __( 'Solid' ),
 	value: 'color',
 };
 const TAB_GRADIENT = {
 	name: 'gradient',
-	title: 'Gradient',
+	title: __( 'Gradient' ),
 	value: 'gradient',
 };
 

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

@@ -328,22 +328,6 @@ export default function ColorPanel( {
 			: gradientValue;
 	};
 
-	// Text Color
-	const showTextPanel = useHasTextPanel( settings );
-	const textColor = decodeValue( inheritedValue?.color?.text );
-	const userTextColor = decodeValue( value?.color?.text );
-	const hasTextColor = () => !! userTextColor;
-	const setTextColor = ( newColor ) => {
-		onChange(
-			setImmutably(
-				value,
-				[ 'color', 'text' ],
-				encodeColorValue( newColor )
-			)
-		);
-	};
-	const resetTextColor = () => setTextColor( undefined );
-
 	// BackgroundColor
 	const showBackgroundPanel = useHasBackgroundPanel( settings );
 	const backgroundColor = decodeValue( inheritedValue?.color?.background );
@@ -424,6 +408,29 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 
+	// Text Color
+	const showTextPanel = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const userTextColor = decodeValue( value?.color?.text );
+	const hasTextColor = () => !! userTextColor;
+	const setTextColor = ( newColor ) => {
+		let changedObject = setImmutably(
+			value,
+			[ 'color', 'text' ],
+			encodeColorValue( newColor )
+		);
+		if ( textColor === linkColor ) {
+			changedObject = setImmutably(
+				changedObject,
+				[ 'elements', 'link', 'color', 'text' ],
+				encodeColorValue( newColor )
+			);
+		}
+
+		onChange( changedObject );
+	};
+	const resetTextColor = () => setTextColor( undefined );
+
 	// Elements
 	const elements = [
 		{

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

@@ -207,18 +207,24 @@ export default function DimensionsPanel( {
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
 } ) {
+	const { dimensions, spacing } = settings;
+
 	const decodeValue = ( rawValue ) => {
 		if ( rawValue && typeof rawValue === 'object' ) {
 			return Object.keys( rawValue ).reduce( ( acc, key ) => {
 				acc[ key ] = getValueFromVariable(
-					{ settings },
+					{ settings: { dimensions, spacing } },
 					'',
 					rawValue[ key ]
 				);
 				return acc;
 			}, {} );
 		}
-		return getValueFromVariable( { settings }, '', rawValue );
+		return getValueFromVariable(
+			{ settings: { dimensions, spacing } },
+			'',
+			rawValue
+		);
 	};
 
 	const showSpacingPresetsControl = useHasSpacingPresets( settings );

package/src/components/global-styles/get-block-css-selector.js

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * Internal dependencies
  */
 import { scopeSelector } from './utils';
+import { getValueFromObjectPath } from '../../utils/object';
 
 /**
  * Determine the CSS selector for the block type and target provided, returning
@@ -69,15 +65,15 @@ export function getBlockCSSSelector(
 		if ( hasSelectors ) {
 			// Get selector from either `feature.root` or shorthand path.
 			const featureSelector =
-				get( selectors, `${ path }.root`, null ) ||
-				get( selectors, path, null );
+				getValueFromObjectPath( selectors, `${ path }.root`, null ) ||
+				getValueFromObjectPath( selectors, path, null );
 
 			// Return feature selector if found or any available fallback.
 			return featureSelector || fallbackSelector;
 		}
 
 		// Try getting old experimental supports selector value.
-		const featureSelector = get(
+		const featureSelector = getValueFromObjectPath(
 			supports,
 			`${ path }.__experimentalSelector`,
 			null
@@ -98,7 +94,7 @@ export function getBlockCSSSelector(
 
 	// Use selectors API if available.
 	if ( hasSelectors ) {
-		subfeatureSelector = get( selectors, path, null );
+		subfeatureSelector = getValueFromObjectPath( selectors, path, null );
 	}
 
 	// Only return if we have a subfeature selector.

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { get, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,7 @@ import { _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
+import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { GlobalStylesContext } from './context';
 import { unlock } from '../../lock-unlock';
 
@@ -103,20 +103,21 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 
 		if ( propertyPath ) {
 			return (
-				get( configToUse, contextualPath ) ??
-				get( configToUse, globalPath )
+				getValueFromObjectPath( configToUse, contextualPath ) ??
+				getValueFromObjectPath( configToUse, globalPath )
 			);
 		}
 
-		const result = {};
+		let result = {};
 		VALID_SETTINGS.forEach( ( setting ) => {
 			const value =
-				get(
+				getValueFromObjectPath(
 					configToUse,
 					`settings${ appendedBlockPath }.${ setting }`
-				) ?? get( configToUse, `settings.${ setting }` );
+				) ??
+				getValueFromObjectPath( configToUse, `settings.${ setting }` );
 			if ( value ) {
-				set( result, setting, value );
+				result = setImmutably( result, setting.split( '.' ), value );
 			}
 		} );
 		return result;
@@ -130,13 +131,9 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 	] );
 
 	const setSetting = ( newValue ) => {
-		setUserConfig( ( currentConfig ) => {
-			// Deep clone `currentConfig` to avoid mutating it later.
-			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set( newUserConfig, contextualPath, newValue );
-
-			return newUserConfig;
-		} );
+		setUserConfig( ( currentConfig ) =>
+			setImmutably( currentConfig, contextualPath.split( '.' ), newValue )
+		);
 	};
 
 	return [ settingValue, setSetting ];
@@ -160,12 +157,10 @@ export function useGlobalStyle(
 		: `styles.blocks.${ blockName }${ appendedPath }`;
 
 	const setStyle = ( newValue ) => {
-		setUserConfig( ( currentConfig ) => {
-			// Deep clone `currentConfig` to avoid mutating it later.
-			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set(
-				newUserConfig,
-				finalPath,
+		setUserConfig( ( currentConfig ) =>
+			setImmutably(
+				currentConfig,
+				finalPath.split( '.' ),
 				shouldDecodeEncode
 					? getPresetVariableFromValue(
 							mergedConfig.settings,
@@ -174,27 +169,26 @@ export function useGlobalStyle(
 							newValue
 					  )
 					: newValue
-			);
-			return newUserConfig;
-		} );
+			)
+		);
 	};
 
 	let rawResult, result;
 	switch ( source ) {
 		case 'all':
-			rawResult = get( mergedConfig, finalPath );
+			rawResult = getValueFromObjectPath( mergedConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'user':
-			rawResult = get( userConfig, finalPath );
+			rawResult = getValueFromObjectPath( userConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'base':
-			rawResult = get( baseConfig, finalPath );
+			rawResult = getValueFromObjectPath( baseConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( baseConfig, blockName, rawResult )
 				: rawResult;

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

@@ -114,6 +114,21 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
+function getUniqueFontSizesBySlug( settings ) {
+	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
+	const fontSizes = []
+		.concat( fontSizesPerOrigin?.custom ?? [] )
+		.concat( fontSizesPerOrigin?.theme ?? [] )
+		.concat( fontSizesPerOrigin.default ?? [] );
+
+	return fontSizes.reduce( ( acc, currentSize ) => {
+		if ( ! acc.some( ( { slug } ) => slug === currentSize.slug ) ) {
+			acc.push( currentSize );
+		}
+		return acc;
+	}, [] );
+}
+
 function TypographyToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -189,11 +204,8 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes = []
-		.concat( fontSizesPerOrigin?.custom ?? [] )
-		.concat( fontSizesPerOrigin?.theme ?? [] )
-		.concat( fontSizesPerOrigin.default ?? [] );
+	const fontSizes = getUniqueFontSizesBySlug( settings );
+
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {
 		const actualValue = !! metadata?.slug