@wordpress/block-editor 11.8.0 → 12.1.0

package/src/hooks/use-editor-wrapper-styles.native.js

@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+import { useWindowDimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	ALIGNMENT_BREAKPOINTS,
+	WIDE_ALIGNMENTS,
+	alignmentHelpers,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './use-editor-wrapper-styles.scss';
+
+const ALIGNMENT_MAX_WIDTH = {
+	full: '100%',
+	wide: 1054,
+	wideMedium: 770,
+	wideLandscape: 662,
+};
+
+const BLOCK_DEFAULT_MARGIN = 16;
+
+/**
+ * Get the styles for the wide width alignment.
+ *
+ * @param {Object}  [options]           The options for the helper.
+ * @param {string}  options.align       The alignment value.
+ * @param {boolean} options.isLandscape Whether the screen is in landscape mode.
+ * @param {number}  options.width       The width of the screen.
+ * @return {Object} An object containing the styles for the wide width alignment.
+ */
+function getWideWidthStyles( { align, isLandscape, width } = {} ) {
+	if ( align !== WIDE_ALIGNMENTS.alignments.wide ) {
+		return {};
+	}
+
+	if ( isLandscape && width < ALIGNMENT_BREAKPOINTS.large ) {
+		return { maxWidth: ALIGNMENT_MAX_WIDTH.wideLandscape };
+	}
+
+	if ( width <= ALIGNMENT_BREAKPOINTS.small ) {
+		return { maxWidth: width };
+	}
+
+	if (
+		width >= ALIGNMENT_BREAKPOINTS.medium &&
+		width < ALIGNMENT_BREAKPOINTS.wide
+	) {
+		return { maxWidth: ALIGNMENT_MAX_WIDTH.wideMedium };
+	}
+
+	return { maxWidth: ALIGNMENT_MAX_WIDTH.wide };
+}
+
+/**
+ * Get the styles for the full width alignment.
+ *
+ * @param {Object}  [options]               The options for the helper.
+ * @param {string}  options.align           The alignment value.
+ * @param {string}  options.blockName       The name of the block.
+ * @param {boolean} options.hasParents      Whether the block has parents.
+ * @param {string}  options.parentBlockName The name of the parent block.
+ * @return {Object} An object containing the styles for the full width alignment.
+ */
+function getFullWidthStyles( {
+	align,
+	blockName,
+	hasParents,
+	parentBlockName,
+} = {} ) {
+	const { isContainerRelated, isFullWidth } = alignmentHelpers;
+	const fullWidthStyles = isFullWidth( align )
+		? { maxWidth: ALIGNMENT_MAX_WIDTH.full }
+		: {};
+
+	if (
+		! align &&
+		hasParents &&
+		! isContainerRelated( parentBlockName ) &&
+		isContainerRelated( blockName )
+	) {
+		fullWidthStyles.paddingHorizontal = BLOCK_DEFAULT_MARGIN;
+	}
+
+	return fullWidthStyles;
+}
+
+/**
+ * Get the block margin based on various conditions.
+ *
+ * @param {Object}  [options]                    The options for the helper.
+ * @param {string}  options.align                The alignment value.
+ * @param {string}  options.blockName            The name of the block.
+ * @param {number}  options.blockWidth           The width of the block.
+ * @param {boolean} options.hasParents           Whether the block has parents.
+ * @param {number}  options.marginHorizontal     Default horizontal margin.
+ * @param {string}  options.parentBlockAlignment The alignment of the parent block.
+ * @param {string}  options.parentBlockName      The name of the parent block.
+ * @param {number}  options.parentWidth          The width of the parent block.
+ * @param {number}  options.width                The width of the screen.
+ * @return {number} The calculated block margin.
+ */
+function getBlockMargin( {
+	align,
+	blockName,
+	blockWidth,
+	hasParents,
+	marginHorizontal,
+	parentBlockAlignment,
+	parentBlockName,
+	parentWidth,
+	width,
+} = {} ) {
+	const { isContainerRelated, isWider, isWideWidth, isFullWidth } =
+		alignmentHelpers;
+
+	if ( isFullWidth( align ) ) {
+		if ( ! hasParents ) {
+			return 0;
+		}
+		return marginHorizontal;
+	}
+
+	if ( isWideWidth( align ) ) {
+		return marginHorizontal;
+	}
+
+	if (
+		isFullWidth( parentBlockAlignment ) &&
+		! isWider( blockWidth, 'medium' )
+	) {
+		if ( isContainerRelated( blockName ) || isWider( width, 'mobile' ) ) {
+			return marginHorizontal;
+		}
+		return marginHorizontal * 2;
+	}
+
+	if (
+		isContainerRelated( parentBlockName ) &&
+		! isContainerRelated( blockName )
+	) {
+		const isScreenWidthEqual = parentWidth === width;
+		if ( isScreenWidthEqual || isWider( width, 'mobile' ) ) {
+			return marginHorizontal;
+		}
+	}
+
+	return marginHorizontal;
+}
+
+/**
+ * Custom hook to get the styles and margin for the editor wrapper.
+ *
+ * @param {Object}  [props]                    The props for the hook.
+ * @param {string}  props.align                The alignment value.
+ * @param {string}  props.blockName            The name of the block.
+ * @param {number}  props.blockWidth           The width of the block.
+ * @param {string}  props.contentResizeMode    The content resize mode.
+ * @param {boolean} props.hasParents           Whether the block has parents.
+ * @param {number}  props.marginHorizontal     Default horizontal margin.
+ * @param {string}  props.parentBlockAlignment The alignment of the parent block.
+ * @param {string}  props.parentBlockName      The name of the parent block.
+ * @param {number}  props.parentWidth          The width of the parent block.
+ * @param {boolean} [props.reversed=false]     Whether the flex direction should be reversed.
+ * @return {[Array, number]} An array containing the wrapper styles and block margin.
+ */
+export function useEditorWrapperStyles( {
+	align,
+	blockName,
+	blockWidth,
+	contentResizeMode,
+	hasParents,
+	marginHorizontal,
+	parentBlockAlignment,
+	parentBlockName,
+	parentWidth,
+	reversed = false,
+} = {} ) {
+	const { width, height } = useWindowDimensions();
+	const isLandscape = width >= height;
+
+	const blockMargin = useMemo(
+		() =>
+			getBlockMargin( {
+				align,
+				blockName,
+				blockWidth,
+				hasParents,
+				marginHorizontal,
+				parentBlockAlignment,
+				parentBlockName,
+				parentWidth,
+				width,
+			} ),
+		[
+			align,
+			blockName,
+			blockWidth,
+			hasParents,
+			marginHorizontal,
+			parentBlockAlignment,
+			parentBlockName,
+			parentWidth,
+			width,
+		]
+	);
+
+	const wrapperStyles = useMemo( () => {
+		let canvasStyles;
+
+		if ( contentResizeMode === 'stretch' ) {
+			// For these cases, no width constraints should be added.
+			canvasStyles = { flex: 1 };
+		} else if ( reversed ) {
+			canvasStyles = styles[ 'use-editor-wrapper-styles--reversed' ];
+		} else {
+			canvasStyles = styles[ 'use-editor-wrapper-styles' ];
+		}
+
+		const alignmentStyles = {
+			...getWideWidthStyles( { align, isLandscape, width } ),
+			...getFullWidthStyles( {
+				align,
+				blockName,
+				hasParents,
+				parentBlockName,
+			} ),
+		};
+
+		return [ canvasStyles, alignmentStyles ];
+	}, [
+		align,
+		blockName,
+		hasParents,
+		parentBlockName,
+		isLandscape,
+		width,
+		contentResizeMode,
+		reversed,
+	] );
+
+	return [ wrapperStyles, blockMargin ];
+}

package/src/hooks/use-editor-wrapper-styles.native.scss

@@ -0,0 +1,11 @@
+.use-editor-wrapper-styles {
+	width: 100%;
+	max-width: 580;
+	align-self: center;
+}
+
+.use-editor-wrapper-styles--reversed {
+	flex-direction: column-reverse;
+	width: 100%;
+	max-width: 580;
+}

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

@@ -11,25 +11,23 @@ import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
 import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';
 
-// This utility is intended to assist where the serialization of the typography
-// block support is being skipped for a block but the typography related CSS
-// styles still need to be generated so they can be applied to inner elements.
-
+/*
+ * This utility is intended to assist where the serialization of the typography
+ * block support is being skipped for a block but the typography related CSS
+ * styles still need to be generated so they can be applied to inner elements.
+ */
 /**
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object}         attributes              Block attributes.
- * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,
- *                                                 otherwise an object containing theme fluid typography settings.
+ * @param {Object}         attributes Block attributes.
+ * @param {Object|boolean} settings   Merged theme.json settings
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
-export function getTypographyClassesAndStyles(
-	attributes,
-	fluidTypographySettings
-) {
+export function getTypographyClassesAndStyles( attributes, settings ) {
 	let typographyStyles = attributes?.style?.typography || {};
+	const fluidTypographySettings = settings?.typography?.fluid;
 
 	if (
 		!! fluidTypographySettings &&
@@ -40,6 +38,7 @@ export function getTypographyClassesAndStyles(
 			getComputedFluidTypographyValue( {
 				fontSize: attributes?.style?.typography?.fontSize,
 				minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+				maximumViewPortWidth: settings?.layout?.wideSize,
 			} ) || attributes?.style?.typography?.fontSize;
 		typographyStyles = {
 			...typographyStyles,

package/src/hooks/utils.js

@@ -14,7 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import { useSetting } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
-import { immutableSet } from '../utils/object';
+import { setImmutably } from '../utils/object';
 
 /**
  * Removed falsy values from nested object.
@@ -33,7 +33,7 @@ export const cleanEmptyObject = ( object ) => {
 	const cleanedNestedObjects = Object.fromEntries(
 		Object.entries( object )
 			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
-			.filter( ( [ , value ] ) => Boolean( value ) )
+			.filter( ( [ , value ] ) => value !== undefined )
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };
@@ -82,7 +82,7 @@ export function transformStyles(
 				if ( styleValue ) {
 					returnBlock = {
 						...returnBlock,
-						attributes: immutableSet(
+						attributes: setImmutably(
 							returnBlock.attributes,
 							path,
 							styleValue
@@ -150,9 +150,14 @@ export function useBlockSettings( name, parentLayout ) {
 	const borderWidth = useSetting( 'border.width' );
 	const customColorsEnabled = useSetting( 'color.custom' );
 	const customColors = useSetting( 'color.palette.custom' );
+	const customDuotone = useSetting( 'color.customDuotone' );
 	const themeColors = useSetting( 'color.palette.theme' );
 	const defaultColors = useSetting( 'color.palette.default' );
 	const defaultPalette = useSetting( 'color.defaultPalette' );
+	const defaultDuotone = useSetting( 'color.defaultDuotone' );
+	const userDuotonePalette = useSetting( 'color.duotone.custom' );
+	const themeDuotonePalette = useSetting( 'color.duotone.theme' );
+	const defaultDuotonePalette = useSetting( 'color.duotone.default' );
 	const userGradientPalette = useSetting( 'color.gradients.custom' );
 	const themeGradientPalette = useSetting( 'color.gradients.theme' );
 	const defaultGradientPalette = useSetting( 'color.gradients.default' );
@@ -175,10 +180,17 @@ export function useBlockSettings( name, parentLayout ) {
 					theme: themeGradientPalette,
 					default: defaultGradientPalette,
 				},
+				duotone: {
+					custom: userDuotonePalette,
+					theme: themeDuotonePalette,
+					default: defaultDuotonePalette,
+				},
 				defaultGradients,
 				defaultPalette,
+				defaultDuotone,
 				custom: customColorsEnabled,
 				customGradient: areCustomGradientsEnabled,
+				customDuotone,
 				background: isBackgroundEnabled,
 				link: isLinkEnabled,
 				text: isTextEnabled,
@@ -245,9 +257,14 @@ export function useBlockSettings( name, parentLayout ) {
 		borderWidth,
 		customColorsEnabled,
 		customColors,
+		customDuotone,
 		themeColors,
 		defaultColors,
 		defaultPalette,
+		defaultDuotone,
+		userDuotonePalette,
+		themeDuotonePalette,
+		defaultDuotonePalette,
 		userGradientPalette,
 		themeGradientPalette,
 		defaultGradientPalette,

package/src/index.native.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+export * from './index.js';
+
+export { useEditorWrapperStyles } from './hooks';

package/src/private-apis.js

@@ -9,6 +9,9 @@ import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
+import BlockInfo from './components/block-info-slot-fill';
+import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
+import { cleanEmptyObject } from './hooks/utils';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -22,4 +25,7 @@ lock( privateApis, {
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,
+	BlockInfo,
+	useShouldContextualToolbarShow,
+	cleanEmptyObject,
 } );

package/src/store/actions.js

@@ -543,6 +543,9 @@ export function moveBlockToPosition(
 /**
  * Action that inserts a single block, optionally at a specific index respective a root block list.
  *
+ * Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if
+ * a templateLock is active on the block list.
+ *
  * @param {Object}   block           Block object to insert.
  * @param {?number}  index           Index at which block should be inserted.
  * @param {?string}  rootClientId    Optional root client ID of block list on which to insert.
@@ -572,12 +575,16 @@ export function insertBlock(
 /**
  * Action that inserts an array of blocks, optionally at a specific index respective a root block list.
  *
+ * Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if
+ * a templateLock is active on the block list.
+ *
  * @param {Object[]}  blocks          Block objects to insert.
  * @param {?number}   index           Index at which block should be inserted.
  * @param {?string}   rootClientId    Optional root client ID of block list on which to insert.
  * @param {?boolean}  updateSelection If true block selection will be updated.  If false, block selection will not change. Defaults to true.
  * @param {0|-1|null} initialPosition Initial focus position. Setting it to null prevent focusing the inserted block.
  * @param {?Object}   meta            Optional Meta values to be passed to the action object.
+ *
  * @return {Object} Action object.
  */
 export const insertBlocks =

package/src/utils/object.js

@@ -42,16 +42,16 @@ function cloneObject( object ) {
 }
 
 /**
- * Perform an immutable set.
- * Handles nullish initial values.
- * Clones all nested objects in the specified object.
+ * Immutably sets a value inside an object. Like `lodash#set`, but returning a
+ * new object. Treats nullish initial values as empty objects. Clones any
+ * nested objects.
  *
  * @param {Object}              object Object to set a value in.
  * @param {number|string|Array} path   Path in the object to modify.
  * @param {*}                   value  New value to set.
  * @return {Object} Cloned object with the new value set.
  */
-export function immutableSet( object, path, value ) {
+export function setImmutably( object, path, value ) {
 	const normalizedPath = normalizePath( path );
 	const newObject = object ? cloneObject( object ) : {};
 

package/src/utils/test/object.js

@@ -1,42 +1,42 @@
 /**
  * Internal dependencies
  */
-import { immutableSet } from '../object';
+import { setImmutably } from '../object';
 
-describe( 'immutableSet', () => {
+describe( 'setImmutably', () => {
 	describe( 'handling falsy values properly', () => {
 		it( 'should create a new object if `undefined` is passed', () => {
-			const result = immutableSet( undefined, 'test', 1 );
+			const result = setImmutably( undefined, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'should create a new object if `null` is passed', () => {
-			const result = immutableSet( null, 'test', 1 );
+			const result = setImmutably( null, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'should create a new object if `false` is passed', () => {
-			const result = immutableSet( false, 'test', 1 );
+			const result = setImmutably( false, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'should create a new object if `0` is passed', () => {
-			const result = immutableSet( 0, 'test', 1 );
+			const result = setImmutably( 0, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'should create a new object if an empty string is passed', () => {
-			const result = immutableSet( '', 'test', 1 );
+			const result = setImmutably( '', 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'should create a new object if a NaN is passed', () => {
-			const result = immutableSet( NaN, 'test', 1 );
+			const result = setImmutably( NaN, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
@@ -44,26 +44,26 @@ describe( 'immutableSet', () => {
 
 	describe( 'manages data assignment properly', () => {
 		it( 'assigns value properly when it does not exist', () => {
-			const result = immutableSet( {}, 'test', 1 );
+			const result = setImmutably( {}, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'overrides existing values', () => {
-			const result = immutableSet( { test: 1 }, 'test', 2 );
+			const result = setImmutably( { test: 1 }, 'test', 2 );
 
 			expect( result ).toEqual( { test: 2 } );
 		} );
 
 		describe( 'with array notation access', () => {
 			it( 'assigns values at deeper levels', () => {
-				const result = immutableSet( {}, [ 'foo', 'bar', 'baz' ], 5 );
+				const result = setImmutably( {}, [ 'foo', 'bar', 'baz' ], 5 );
 
 				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
 			} );
 
 			it( 'overrides existing values at deeper levels', () => {
-				const result = immutableSet(
+				const result = setImmutably(
 					{ foo: { bar: { baz: 1 } } },
 					[ 'foo', 'bar', 'baz' ],
 					5
@@ -73,7 +73,7 @@ describe( 'immutableSet', () => {
 			} );
 
 			it( 'keeps other properties intact', () => {
-				const result = immutableSet(
+				const result = setImmutably(
 					{ foo: { bar: { baz: 1 } } },
 					[ 'foo', 'bar', 'test' ],
 					5
@@ -87,37 +87,37 @@ describe( 'immutableSet', () => {
 
 		describe( 'for nested falsey values', () => {
 			it( 'overwrites undefined values', () => {
-				const result = immutableSet( { test: undefined }, 'test', 1 );
+				const result = setImmutably( { test: undefined }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites null values', () => {
-				const result = immutableSet( { test: null }, 'test', 1 );
+				const result = setImmutably( { test: null }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites false values', () => {
-				const result = immutableSet( { test: false }, 'test', 1 );
+				const result = setImmutably( { test: false }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites `0` values', () => {
-				const result = immutableSet( { test: 0 }, 'test', 1 );
+				const result = setImmutably( { test: 0 }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites empty string values', () => {
-				const result = immutableSet( { test: '' }, 'test', 1 );
+				const result = setImmutably( { test: '' }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites NaN values', () => {
-				const result = immutableSet( { test: NaN }, 'test', 1 );
+				const result = setImmutably( { test: NaN }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
@@ -127,14 +127,14 @@ describe( 'immutableSet', () => {
 	describe( 'does not mutate the original object', () => {
 		it( 'clones the object at the first level', () => {
 			const input = {};
-			const result = immutableSet( input, 'test', 1 );
+			const result = setImmutably( input, 'test', 1 );
 
 			expect( result ).not.toBe( input );
 		} );
 
 		it( 'clones the object at deeper levels', () => {
 			const input = { foo: { bar: { baz: 1 } } };
-			const result = immutableSet( input, [ 'foo', 'bar', 'baz' ], 2 );
+			const result = setImmutably( input, [ 'foo', 'bar', 'baz' ], 2 );
 
 			expect( result ).not.toBe( input );
 			expect( result.foo ).not.toBe( input.foo );

package/src/utils/transform-styles/index.js

@@ -13,8 +13,8 @@ import wrap from './transforms/wrap';
 /**
  * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
  *
- * @param {Array}  styles           CSS rules.
- * @param {string} wrapperClassName Wrapper Class Name.
+ * @param {Object|Array} styles           CSS rules.
+ * @param {string}       wrapperClassName Wrapper Class Name.
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperClassName = '' ) => {