@wordpress/block-editor 11.4.0 → 11.6.0

package/src/hooks/supports.js

@@ -20,6 +20,11 @@ const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
  * Key within block settings' support array indicating support for font weight.
  */
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * columns e.g. settings found in `block.json`.
+ */
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 /**
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
@@ -42,6 +47,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,

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/test/style.js

@@ -21,7 +21,7 @@ describe( 'getInlineStyles', () => {
 		expect(
 			getInlineStyles( {
 				color: { text: 'red', background: 'black' },
-				typography: { lineHeight: 1.5, fontSize: 10 },
+				typography: { lineHeight: 1.5, fontSize: 10, textColumns: 2 },
 				border: {
 					radius: '10px',
 					width: '1em',
@@ -44,6 +44,7 @@ describe( 'getInlineStyles', () => {
 			borderStyle: 'dotted',
 			borderWidth: '1em',
 			color: 'red',
+			columnCount: 2,
 			lineHeight: 1.5,
 			fontSize: 10,
 			marginBottom: '15px',

package/src/hooks/test/use-typography-props.js

@@ -12,6 +12,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 				typography: {
 					letterSpacing: '22px',
 					fontSize: '2rem',
+					textColumns: 3,
 					textTransform: 'uppercase',
 				},
 			},
@@ -19,6 +20,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 		expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
 			className: 'has-tofu-font-family has-large-font-size',
 			style: {
+				columnCount: 3,
 				letterSpacing: '22px',
 				fontSize: '2rem',
 				textTransform: 'uppercase',

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(
@@ -32,6 +27,7 @@ function omit( object, keys ) {
 const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
 const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
 const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
@@ -41,60 +37,71 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	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 +109,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,122 @@ 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 textColumns = useSetting( 'typography.textColumns' );
+	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 borderColor = useSetting( 'border.color' );
+	const borderRadius = useSetting( 'border.radius' );
+	const borderStyle = useSetting( 'border.style' );
+	const borderWidth = useSetting( 'border.width' );
+	const customColorsEnabled = useSetting( 'color.custom' );
+	const customColors = useSetting( 'color.palette.custom' );
+	const themeColors = useSetting( 'color.palette.theme' );
+	const defaultColors = useSetting( 'color.palette.default' );
+	const defaultPalette = useSetting( 'color.defaultPalette' );
+
+	const rawSettings = useMemo( () => {
+		return {
+			color: {
+				palette: {
+					custom: customColors,
+					theme: themeColors,
+					default: defaultColors,
+				},
+				defaultPalette,
+				custom: customColorsEnabled,
+			},
+			typography: {
+				fontFamilies: {
+					custom: fontFamilies,
+				},
+				fontSizes: {
+					custom: fontSizes,
+				},
+				customFontSize,
+				fontStyle,
+				fontWeight,
+				lineHeight,
+				textColumns,
+				textDecoration,
+				textTransform,
+				letterSpacing,
+			},
+			spacing: {
+				spacingSizes: {
+					custom: spacingSizes,
+				},
+				padding,
+				margin,
+				blockGap,
+				units,
+			},
+			border: {
+				color: borderColor,
+				radius: borderRadius,
+				style: borderStyle,
+				width: borderWidth,
+			},
+			dimensions: {
+				minHeight,
+			},
+			layout,
+			parentLayout,
+		};
+	}, [
+		fontFamilies,
+		fontSizes,
+		customFontSize,
+		fontStyle,
+		fontWeight,
+		lineHeight,
+		textColumns,
+		textDecoration,
+		textTransform,
+		letterSpacing,
+		padding,
+		margin,
+		blockGap,
+		spacingSizes,
+		units,
+		minHeight,
+		layout,
+		parentLayout,
+		borderColor,
+		borderRadius,
+		borderStyle,
+		borderWidth,
+		customColorsEnabled,
+		customColors,
+		themeColors,
+		defaultColors,
+		defaultPalette,
+	] );
+
+	return useSettingsForBlockElement( rawSettings, name );
+}

package/src/layouts/constrained.js

@@ -32,8 +32,10 @@ export default {
 	inspectorControls: function DefaultLayoutInspectorControls( {
 		layout,
 		onChange,
+		layoutBlockSupport = {},
 	} ) {
 		const { wideSize, contentSize, justifyContent = 'center' } = layout;
+		const { allowJustification = true } = layoutBlockSupport;
 		const onJustificationChange = ( value ) => {
 			onChange( {
 				...layout,
@@ -117,23 +119,27 @@ export default {
 						'Customize the width for all elements that are assigned to the center or wide columns.'
 					) }
 				</p>
-				<ToggleGroupControl
-					__nextHasNoMarginBottom
-					label={ __( 'Justification' ) }
-					value={ justifyContent }
-					onChange={ onJustificationChange }
-				>
-					{ justificationOptions.map( ( { value, icon, label } ) => {
-						return (
-							<ToggleGroupControlOptionIcon
-								key={ value }
-								value={ value }
-								icon={ icon }
-								label={ label }
-							/>
-						);
-					} ) }
-				</ToggleGroupControl>
+				{ allowJustification && (
+					<ToggleGroupControl
+						__nextHasNoMarginBottom
+						label={ __( 'Justification' ) }
+						value={ justifyContent }
+						onChange={ onJustificationChange }
+					>
+						{ justificationOptions.map(
+							( { value, icon, label } ) => {
+								return (
+									<ToggleGroupControlOptionIcon
+										key={ value }
+										value={ value }
+										icon={ icon }
+										label={ label }
+									/>
+								);
+							}
+						) }
+					</ToggleGroupControl>
+				) }
 			</>
 		);
 	},

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