@wordpress/block-editor 11.4.0 → 11.5.0

package/src/hooks/test/__snapshots__/align.native.js.snap

@@ -1,73 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Align options for group block sets Full width option 1`] = `
-"<!-- wp:group {\\"align\\":\\"full\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group alignfull\\"></div>
+"<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull"></div>
 <!-- /wp:group -->"
 `;
 
 exports[`Align options for group block sets None option 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"></div>
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"></div>
 <!-- /wp:group -->"
 `;
 
 exports[`Align options for group block sets Wide width option 1`] = `
-"<!-- wp:group {\\"align\\":\\"wide\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group alignwide\\"></div>
+"<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide"></div>
 <!-- /wp:group -->"
 `;
 
 exports[`Align options for media block sets Align center option 1`] = `
-"<!-- wp:image {\\"align\\":\\"center\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image aligncenter size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+"<!-- wp:image {"align":"center","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image aligncenter size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align left option 1`] = `
-"<!-- wp:image {\\"align\\":\\"left\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image alignleft size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+"<!-- wp:image {"align":"left","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image alignleft size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align right option 1`] = `
-"<!-- wp:image {\\"align\\":\\"right\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image alignright size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+"<!-- wp:image {"align":"right","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image alignright size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Full width option 1`] = `
-"<!-- wp:image {\\"align\\":\\"full\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image alignfull size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+"<!-- wp:image {"align":"full","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image alignfull size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets None option 1`] = `
-"<!-- wp:image {\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Wide width option 1`] = `
-"<!-- wp:image {\\"align\\":\\"wide\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image alignwide size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+"<!-- wp:image {"align":"wide","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image alignwide size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for text block sets Align text center option 1`] = `
-"<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Align options for text block sets Align text left option 1`] = `
-"<!-- wp:paragraph {\\"align\\":\\"left\\"} -->
-<p class=\\"has-text-align-left\\"></p>
+"<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Align options for text block sets Align text right option 1`] = `
-"<!-- wp:paragraph {\\"align\\":\\"right\\"} -->
-<p class=\\"has-text-align-right\\"></p>
+"<!-- wp:paragraph {"align":"right"} -->
+<p class="has-text-align-right"></p>
 <!-- /wp:paragraph -->"
 `;

package/src/hooks/test/duotone.js

@@ -0,0 +1,102 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getColorsFromDuotonePreset,
+	getDuotonePresetFromColors,
+} from '../duotone';
+
+describe( 'Duotone utilities', () => {
+	const duotonePalette = [
+		{
+			name: 'Dark grayscale',
+			colors: [ '#000000', '#7f7f7f' ],
+			slug: 'dark-grayscale',
+		},
+		{
+			name: 'Grayscale',
+			colors: [ '#000000', '#ffffff' ],
+			slug: 'grayscale',
+		},
+		{
+			name: 'Purple and yellow',
+			colors: [ '#8c00b7', '#fcff41' ],
+			slug: 'purple-yellow',
+		},
+	];
+	describe( 'getColorsFromDuotonePreset', () => {
+		it( 'should return undefined if no arguments are provided', () => {
+			expect( getColorsFromDuotonePreset() ).toBeUndefined();
+		} );
+
+		it( 'should return undefined if no duotone preset is provided', () => {
+			expect(
+				getColorsFromDuotonePreset( undefined, duotonePalette )
+			).toBeUndefined();
+		} );
+
+		it( 'should return undefined if a non-existent preset is provided', () => {
+			expect(
+				getColorsFromDuotonePreset(
+					`var:preset|duotone|does-not-exist`,
+					duotonePalette
+				)
+			).toBeUndefined();
+		} );
+
+		it( 'should return the colors from the preset if found', () => {
+			expect(
+				getColorsFromDuotonePreset(
+					`var:preset|duotone|${ duotonePalette[ 2 ].slug }`,
+					duotonePalette
+				)
+			).toEqual( duotonePalette[ 2 ].colors );
+		} );
+	} );
+
+	describe( 'getDuotonePresetFromColors', () => {
+		it( 'should return undefined if no arguments are provided', () => {
+			expect( getDuotonePresetFromColors() ).toBeUndefined();
+		} );
+
+		it( 'should return undefined if no colors are provided', () => {
+			expect(
+				getDuotonePresetFromColors( undefined, duotonePalette )
+			).toBeUndefined();
+		} );
+
+		it( 'should return undefined if provided colors is not of valid type', () => {
+			const notAnArrayOfColorStrings = 'purple-yellow';
+			expect(
+				getDuotonePresetFromColors(
+					notAnArrayOfColorStrings,
+					duotonePalette
+				)
+			).toBeUndefined();
+		} );
+
+		it( 'should return undefined if no duotone palette is provided', () => {
+			expect(
+				getDuotonePresetFromColors( [ '#8c00b7', '#fcff41' ] )
+			).toBeUndefined();
+		} );
+
+		it( 'should return undefined if the provided colors do not match any preset', () => {
+			expect(
+				getDuotonePresetFromColors(
+					[ '#000000', '#000000' ],
+					duotonePalette
+				)
+			).toBeUndefined();
+		} );
+
+		it( 'should return the slug of the preset if found', () => {
+			expect(
+				getDuotonePresetFromColors(
+					duotonePalette[ 2 ].colors,
+					duotonePalette
+				)
+			).toEqual( `var:preset|duotone|${ duotonePalette[ 2 ].slug }` );
+		} );
+	} );
+} );

package/src/hooks/typography.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,12 +16,7 @@ import {
 import { LINE_HEIGHT_SUPPORT_KEY } from './line-height';
 import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
 import { FONT_SIZE_SUPPORT_KEY } from './font-size';
-import { useSetting } from '../components';
-import { cleanEmptyObject } from './utils';
-import {
-	overrideSettingsWithSupports,
-	useSupportedStyles,
-} from '../components/global-styles/hooks';
+import { cleanEmptyObject, useBlockSettings } from './utils';
 
 function omit( object, keys ) {
 	return Object.fromEntries(
@@ -46,55 +41,65 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LETTER_SPACING_SUPPORT_KEY,
 ];
 
-function TypographyInspectorControl( { children } ) {
-	return (
-		<InspectorControls group="typography">{ children }</InspectorControls>
-	);
+function styleToAttributes( style ) {
+	const updatedStyle = { ...omit( style, [ 'fontFamily' ] ) };
+	const fontSizeValue = style?.typography?.fontSize;
+	const fontFamilyValue = style?.typography?.fontFamily;
+	const fontSizeSlug = fontSizeValue?.startsWith( 'var:preset|font-size|' )
+		? fontSizeValue.substring( 'var:preset|font-size|'.length )
+		: undefined;
+	const fontFamilySlug = fontFamilyValue?.startsWith(
+		'var:preset|font-family|'
+	)
+		? fontFamilyValue.substring( 'var:preset|font-family|'.length )
+		: undefined;
+	updatedStyle.typography = {
+		...omit( updatedStyle.typography, [ 'fontFamily' ] ),
+		fontSize: fontSizeSlug ? undefined : fontSizeValue,
+	};
+	return {
+		style: cleanEmptyObject( updatedStyle ),
+		fontFamily: fontFamilySlug,
+		fontSize: fontSizeSlug,
+	};
+}
+
+function attributesToStyle( attributes ) {
+	return {
+		...attributes.style,
+		typography: {
+			...attributes.style?.typography,
+			fontFamily: attributes.fontFamily
+				? 'var:preset|font-family|' + attributes.fontFamily
+				: undefined,
+			fontSize: attributes.fontSize
+				? 'var:preset|font-size|' + attributes.fontSize
+				: attributes.style?.typography?.fontSize,
+		},
+	};
 }
 
-function useBlockSettings( name ) {
-	const fontFamilies = useSetting( 'typography.fontFamilies' );
-	const fontSizes = useSetting( 'typography.fontSizes' );
-	const customFontSize = useSetting( 'typography.customFontSize' );
-	const fontStyle = useSetting( 'typography.fontStyle' );
-	const fontWeight = useSetting( 'typography.fontWeight' );
-	const lineHeight = useSetting( 'typography.lineHeight' );
-	const textDecoration = useSetting( 'typography.textDecoration' );
-	const textTransform = useSetting( 'typography.textTransform' );
-	const letterSpacing = useSetting( 'typography.letterSpacing' );
-	const supports = useSupportedStyles( name, null );
+function TypographyInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributesToStyle( attributes );
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				...styleToAttributes( updatedStyle ),
+			};
+		},
+		[ resetAllFilter ]
+	);
 
-	return useMemo( () => {
-		const rawSettings = {
-			typography: {
-				fontFamilies: {
-					custom: fontFamilies,
-				},
-				fontSizes: {
-					custom: fontSizes,
-				},
-				customFontSize,
-				fontStyle,
-				fontWeight,
-				lineHeight,
-				textDecoration,
-				textTransform,
-				letterSpacing,
-			},
-		};
-		return overrideSettingsWithSupports( rawSettings, supports );
-	}, [
-		fontFamilies,
-		fontSizes,
-		customFontSize,
-		fontStyle,
-		fontWeight,
-		lineHeight,
-		textDecoration,
-		textTransform,
-		letterSpacing,
-		supports,
-	] );
+	return (
+		<InspectorControls
+			group="typography"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
 }
 
 export function TypographyPanel( {
@@ -102,47 +107,20 @@ export function TypographyPanel( {
 	name,
 	attributes,
 	setAttributes,
+	__unstableParentLayout,
 } ) {
-	const settings = useBlockSettings( name );
+	const settings = useBlockSettings( name, __unstableParentLayout );
 	const isEnabled = useHasTypographyPanel( settings );
 	const value = useMemo( () => {
-		return {
-			...attributes.style,
-			typography: {
-				...attributes.style?.typography,
-				fontFamily: attributes.fontFamily
-					? 'var:preset|font-family|' + attributes.fontFamily
-					: undefined,
-				fontSize: attributes.fontSize
-					? 'var:preset|font-size|' + attributes.fontSize
-					: attributes.style?.typography?.fontSize,
-			},
-		};
+		return attributesToStyle( {
+			style: attributes.style,
+			fontFamily: attributes.fontFamily,
+			fontSize: attributes.fontSize,
+		} );
 	}, [ attributes.style, attributes.fontSize, attributes.fontFamily ] );
 
 	const onChange = ( newStyle ) => {
-		const updatedStyle = { ...omit( newStyle, [ 'fontFamily' ] ) };
-		const fontSizeValue = newStyle?.typography?.fontSize;
-		const fontFamilyValue = newStyle?.typography?.fontFamily;
-		const fontSizeSlug = fontSizeValue?.startsWith(
-			'var:preset|font-size|'
-		)
-			? fontSizeValue.substring( 'var:preset|font-size|'.length )
-			: undefined;
-		const fontFamilySlug = fontFamilyValue?.startsWith(
-			'var:preset|font-family|'
-		)
-			? fontFamilyValue.substring( 'var:preset|font-family|'.length )
-			: undefined;
-		updatedStyle.typography = {
-			...omit( updatedStyle.typography, [ 'fontFamily' ] ),
-			fontSize: fontSizeSlug ? undefined : fontSizeValue,
-		};
-		setAttributes( {
-			style: cleanEmptyObject( updatedStyle ),
-			fontFamily: fontFamilySlug,
-			fontSize: fontSizeSlug,
-		} );
+		setAttributes( styleToAttributes( newStyle ) );
 	};
 
 	if ( ! isEnabled ) {

package/src/hooks/utils.js

@@ -7,6 +7,13 @@ import { isEmpty, mapValues, get } from 'lodash';
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSetting } from '../components';
+import { useSettingsForBlockElement } from '../components/global-styles/hooks';
 
 /**
  * Removed falsy values from nested object.
@@ -177,3 +184,86 @@ export function shouldSkipSerialization( blockType, featureSet, feature ) {
 
 	return skipSerialization;
 }
+
+/**
+ * Based on the block and its context, returns an object of all the block settings.
+ * This object can be passed as a prop to all the Styles UI components
+ * (TypographyPanel, DimensionsPanel...).
+ *
+ * @param {string} name         Block name.
+ * @param {*}      parentLayout Parent layout.
+ *
+ * @return {Object} Settings object.
+ */
+export function useBlockSettings( name, parentLayout ) {
+	const fontFamilies = useSetting( 'typography.fontFamilies' );
+	const fontSizes = useSetting( 'typography.fontSizes' );
+	const customFontSize = useSetting( 'typography.customFontSize' );
+	const fontStyle = useSetting( 'typography.fontStyle' );
+	const fontWeight = useSetting( 'typography.fontWeight' );
+	const lineHeight = useSetting( 'typography.lineHeight' );
+	const textDecoration = useSetting( 'typography.textDecoration' );
+	const textTransform = useSetting( 'typography.textTransform' );
+	const letterSpacing = useSetting( 'typography.letterSpacing' );
+	const padding = useSetting( 'spacing.padding' );
+	const margin = useSetting( 'spacing.margin' );
+	const blockGap = useSetting( 'spacing.blockGap' );
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+	const units = useSetting( 'spacing.units' );
+	const minHeight = useSetting( 'dimensions.minHeight' );
+	const layout = useSetting( 'layout' );
+
+	const rawSettings = useMemo( () => {
+		return {
+			typography: {
+				fontFamilies: {
+					custom: fontFamilies,
+				},
+				fontSizes: {
+					custom: fontSizes,
+				},
+				customFontSize,
+				fontStyle,
+				fontWeight,
+				lineHeight,
+				textDecoration,
+				textTransform,
+				letterSpacing,
+			},
+			spacing: {
+				spacingSizes: {
+					custom: spacingSizes,
+				},
+				padding,
+				margin,
+				blockGap,
+				units,
+			},
+			dimensions: {
+				minHeight,
+			},
+			layout,
+			parentLayout,
+		};
+	}, [
+		fontFamilies,
+		fontSizes,
+		customFontSize,
+		fontStyle,
+		fontWeight,
+		lineHeight,
+		textDecoration,
+		textTransform,
+		letterSpacing,
+		padding,
+		margin,
+		blockGap,
+		spacingSizes,
+		units,
+		minHeight,
+		layout,
+		parentLayout,
+	] );
+
+	return useSettingsForBlockElement( rawSettings, name );
+}

package/src/layouts/flex.js

@@ -347,6 +347,7 @@ function FlexWrapControl( { layout, onChange } ) {
 	const { flexWrap = 'wrap' } = layout;
 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label={ __( 'Allow to wrap to multiple lines' ) }
 			onChange={ ( value ) => {
 				onChange( {

package/src/store/actions.js

@@ -232,17 +232,24 @@ export function selectBlock( clientId, initialPosition = 0 ) {
 
 /**
  * Yields action objects used in signalling that the block preceding the given
- * clientId should be selected.
+ * clientId (or optionally, its first parent from bottom to top)
+ * should be selected.
  *
- * @param {string} clientId Block client ID.
+ * @param {string}  clientId      Block client ID.
+ * @param {boolean} orFirstParent If true, select the first parent if there is no previous block.
  */
 export const selectPreviousBlock =
-	( clientId ) =>
+	( clientId, orFirstParent = false ) =>
 	( { select, dispatch } ) => {
 		const previousBlockClientId =
 			select.getPreviousBlockClientId( clientId );
 		if ( previousBlockClientId ) {
 			dispatch.selectBlock( previousBlockClientId, -1 );
+		} else if ( orFirstParent ) {
+			const firstParentClientId = select.getBlockRootClientId( clientId );
+			if ( firstParentClientId ) {
+				dispatch.selectBlock( firstParentClientId, -1 );
+			}
 		}
 	};
 
@@ -1197,7 +1204,8 @@ export const removeBlocks =
 		}
 
 		if ( selectPrevious ) {
-			dispatch.selectPreviousBlock( clientIds[ 0 ] );
+			const shouldSelectParent = true;
+			dispatch.selectPreviousBlock( clientIds[ 0 ], shouldSelectParent );
 		}
 
 		dispatch( { type: 'REMOVE_BLOCKS', clientIds } );

package/src/store/defaults.js

@@ -170,11 +170,24 @@ export const SETTINGS_DEFAULTS = {
 	__unstableGalleryWithImageBlocks: false,
 	__unstableIsPreviewMode: false,
 
-	// This setting is `private` now with `lock` API.
+	// These settings will be completely revamped in the future.
+	// The goal is to evolve this into an API which will instruct
+	// the block inspector to animate transitions between what it
+	// displays based on the relationship between the selected block
+	// and its parent, and only enable it if the parent is controlling
+	// its children blocks.
 	blockInspectorAnimation: {
+		animationParent: 'core/navigation',
 		'core/navigation': { enterDirection: 'leftToRight' },
 		'core/navigation-submenu': { enterDirection: 'rightToLeft' },
 		'core/navigation-link': { enterDirection: 'rightToLeft' },
+		'core/search': { enterDirection: 'rightToLeft' },
+		'core/social-links': { enterDirection: 'rightToLeft' },
+		'core/page-list': { enterDirection: 'rightToLeft' },
+		'core/spacer': { enterDirection: 'rightToLeft' },
+		'core/home-link': { enterDirection: 'rightToLeft' },
+		'core/site-title': { enterDirection: 'rightToLeft' },
+		'core/site-logo': { enterDirection: 'rightToLeft' },
 	},
 
 	generateAnchors: false,