@wordpress/block-editor 11.3.6 → 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,68 +2,33 @@
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
-import { getFontAppearanceLabel } from '../components/font-appearance-control';
-
-import {
-	LINE_HEIGHT_SUPPORT_KEY,
-	LineHeightEdit,
-	hasLineHeightValue,
-	resetLineHeight,
-	useIsLineHeightDisabled,
-} from './line-height';
-import {
-	FONT_STYLE_SUPPORT_KEY,
-	FONT_WEIGHT_SUPPORT_KEY,
-	FontAppearanceEdit,
-	hasFontAppearanceValue,
-	resetFontAppearance,
-	useIsFontAppearanceDisabled,
-	useIsFontStyleDisabled,
-	useIsFontWeightDisabled,
-} from './font-appearance';
-import {
-	FONT_FAMILY_SUPPORT_KEY,
-	FontFamilyEdit,
-	hasFontFamilyValue,
-	resetFontFamily,
-	useIsFontFamilyDisabled,
-} from './font-family';
-import {
-	FONT_SIZE_SUPPORT_KEY,
-	FontSizeEdit,
-	hasFontSizeValue,
-	resetFontSize,
-	useIsFontSizeDisabled,
-} from './font-size';
 import {
-	TEXT_DECORATION_SUPPORT_KEY,
-	TextDecorationEdit,
-	hasTextDecorationValue,
-	resetTextDecoration,
-	useIsTextDecorationDisabled,
-} from './text-decoration';
-import {
-	TEXT_TRANSFORM_SUPPORT_KEY,
-	TextTransformEdit,
-	hasTextTransformValue,
-	resetTextTransform,
-	useIsTextTransformDisabled,
-} from './text-transform';
-import {
-	LETTER_SPACING_SUPPORT_KEY,
-	LetterSpacingEdit,
-	hasLetterSpacingValue,
-	resetLetterSpacing,
-	useIsLetterSpacingDisabled,
-} from './letter-spacing';
+	default as StylesTypographyPanel,
+	useHasTypographyPanel,
+} from '../components/global-styles/typography-panel';
+
+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 { cleanEmptyObject, useBlockSettings } from './utils';
+
+function omit( object, keys ) {
+	return Object.fromEntries(
+		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
+	);
+}
 
+const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,
@@ -76,159 +41,107 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LETTER_SPACING_SUPPORT_KEY,
 ];
 
-export function TypographyPanel( props ) {
-	const { clientId } = props;
-	const isFontFamilyDisabled = useIsFontFamilyDisabled( props );
-	const isFontSizeDisabled = useIsFontSizeDisabled( props );
-	const isFontAppearanceDisabled = useIsFontAppearanceDisabled( props );
-	const isLineHeightDisabled = useIsLineHeightDisabled( props );
-	const isTextDecorationDisabled = useIsTextDecorationDisabled( props );
-	const isTextTransformDisabled = useIsTextTransformDisabled( props );
-	const isLetterSpacingDisabled = useIsLetterSpacingDisabled( props );
+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 TypographyInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributesToStyle( attributes );
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				...styleToAttributes( updatedStyle ),
+			};
+		},
+		[ resetAllFilter ]
+	);
+
+	return (
+		<InspectorControls
+			group="typography"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
+}
 
-	const hasFontStyles = ! useIsFontStyleDisabled( props );
-	const hasFontWeights = ! useIsFontWeightDisabled( props );
+export function TypographyPanel( {
+	clientId,
+	name,
+	attributes,
+	setAttributes,
+	__unstableParentLayout,
+} ) {
+	const settings = useBlockSettings( name, __unstableParentLayout );
+	const isEnabled = useHasTypographyPanel( settings );
+	const value = useMemo( () => {
+		return attributesToStyle( {
+			style: attributes.style,
+			fontFamily: attributes.fontFamily,
+			fontSize: attributes.fontSize,
+		} );
+	}, [ attributes.style, attributes.fontSize, attributes.fontFamily ] );
 
-	const isDisabled = useIsTypographyDisabled( props );
-	const isSupported = hasTypographySupport( props.name );
+	const onChange = ( newStyle ) => {
+		setAttributes( styleToAttributes( newStyle ) );
+	};
 
-	if ( isDisabled || ! isSupported ) return null;
+	if ( ! isEnabled ) {
+		return null;
+	}
 
-	const defaultControls = getBlockSupport( props.name, [
+	const defaultControls = getBlockSupport( name, [
 		TYPOGRAPHY_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
 
-	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
-		...newAttributes,
-		style: {
-			...newAttributes.style,
-			typography: {
-				...newAttributes.style?.typography,
-				[ attribute ]: undefined,
-			},
-		},
-	} );
-
 	return (
-		<InspectorControls group="typography">
-			{ ! isFontFamilyDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasFontFamilyValue( props ) }
-					label={ __( 'Font family' ) }
-					onDeselect={ () => resetFontFamily( props ) }
-					isShownByDefault={ defaultControls?.fontFamily }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						fontFamily: undefined,
-					} ) }
-					panelId={ clientId }
-				>
-					<FontFamilyEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isFontSizeDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasFontSizeValue( props ) }
-					/* translators: Ensure translation is distinct from "Letter case" */
-					label={ __( 'Font size' ) }
-					onDeselect={ () => resetFontSize( props ) }
-					isShownByDefault={ defaultControls?.fontSize }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						fontSize: undefined,
-						style: {
-							...newAttributes.style,
-							typography: {
-								...newAttributes.style?.typography,
-								fontSize: undefined,
-							},
-						},
-					} ) }
-					panelId={ clientId }
-				>
-					<FontSizeEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isFontAppearanceDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasFontAppearanceValue( props ) }
-					label={ getFontAppearanceLabel(
-						hasFontStyles,
-						hasFontWeights
-					) }
-					onDeselect={ () => resetFontAppearance( props ) }
-					isShownByDefault={ defaultControls?.fontAppearance }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						style: {
-							...newAttributes.style,
-							typography: {
-								...newAttributes.style?.typography,
-								fontStyle: undefined,
-								fontWeight: undefined,
-							},
-						},
-					} ) }
-					panelId={ clientId }
-				>
-					<FontAppearanceEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isLineHeightDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasLineHeightValue( props ) }
-					label={ __( 'Line height' ) }
-					onDeselect={ () => resetLineHeight( props ) }
-					isShownByDefault={ defaultControls?.lineHeight }
-					resetAllFilter={ createResetAllFilter( 'lineHeight' ) }
-					panelId={ clientId }
-				>
-					<LineHeightEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isLetterSpacingDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasLetterSpacingValue( props ) }
-					label={ __( 'Letter spacing' ) }
-					onDeselect={ () => resetLetterSpacing( props ) }
-					isShownByDefault={ defaultControls?.letterSpacing }
-					resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }
-					panelId={ clientId }
-				>
-					<LetterSpacingEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isTextDecorationDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasTextDecorationValue( props ) }
-					label={ __( 'Decoration' ) }
-					onDeselect={ () => resetTextDecoration( props ) }
-					isShownByDefault={ defaultControls?.textDecoration }
-					resetAllFilter={ createResetAllFilter( 'textDecoration' ) }
-					panelId={ clientId }
-				>
-					<TextDecorationEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isTextTransformDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasTextTransformValue( props ) }
-					/* translators: Ensure translation is distinct from "Font size" */
-					label={ __( 'Letter case' ) }
-					onDeselect={ () => resetTextTransform( props ) }
-					isShownByDefault={ defaultControls?.textTransform }
-					resetAllFilter={ createResetAllFilter( 'textTransform' ) }
-					panelId={ clientId }
-				>
-					<TextTransformEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-		</InspectorControls>
+		<StylesTypographyPanel
+			as={ TypographyInspectorControl }
+			panelId={ clientId }
+			name={ name }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+			defaultControls={ defaultControls }
+		/>
 	);
 }
 
@@ -237,17 +150,3 @@ export const hasTypographySupport = ( blockName ) => {
 		hasBlockSupport( blockName, key )
 	);
 };
-
-function useIsTypographyDisabled( props = {} ) {
-	const configs = [
-		useIsFontAppearanceDisabled( props ),
-		useIsFontSizeDisabled( props ),
-		useIsLineHeightDisabled( props ),
-		useIsFontFamilyDisabled( props ),
-		useIsTextDecorationDisabled( props ),
-		useIsTextTransformDisabled( props ),
-		useIsLetterSpacingDisabled( props ),
-	];
-
-	return configs.filter( Boolean ).length === configs.length;
-}

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( {