@wordpress/block-editor 15.21.0 → 15.22.0

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

@@ -1,250 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-.use-editor-wrapper-styles {
-	width: 100%;
-	max-width: 580;
-	align-self: center;
-}
-
-.use-editor-wrapper-styles--reversed {
-	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
-	flex-direction: column-reverse;
-	width: 100%;
-	max-width: 580;
-}

package/src/index.native.js

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

package/src/private-apis.native.js

@@ -1,21 +0,0 @@
-/**
- * Internal dependencies
- */
-import * as globalStyles from './components/global-styles';
-import { ExperimentalBlockEditorProvider } from './components/provider';
-import { getRichTextValues } from './components/rich-text/get-rich-text-values';
-import { lock } from './lock-unlock';
-import { PrivateRichText } from './components/rich-text/';
-import HTMLElementControl from './components/html-element-control';
-
-/**
- * Private @wordpress/block-editor APIs.
- */
-export const privateApis = {};
-lock( privateApis, {
-	...globalStyles,
-	ExperimentalBlockEditorProvider,
-	getRichTextValues,
-	PrivateRichText,
-	HTMLElementControl,
-} );

package/src/store/defaults.native.js

@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	PREFERENCES_DEFAULTS,
-	SETTINGS_DEFAULTS as SETTINGS,
-} from './defaults.js';
-
-const SETTINGS_DEFAULTS = {
-	...SETTINGS,
-	// Don't add the default font sizes for standard themes
-	fontSizes: undefined,
-	alignWide: true,
-	supportsLayout: false,
-	__experimentalFeatures: {
-		color: {
-			text: true,
-			background: true,
-		},
-	},
-};
-
-export { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS };

package/src/utils/block-bindings.js

@@ -1,46 +0,0 @@
-const DEFAULT_ATTRIBUTE = '__default';
-const PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';
-
-/**
- * Checks if the block has the `__default` binding for pattern overrides.
- *
- * @param {?Record<string, object>} bindings A block's bindings from the metadata attribute.
- *
- * @return {boolean} Whether the block has the `__default` binding for pattern overrides.
- */
-export function hasPatternOverridesDefaultBinding( bindings ) {
-	return bindings?.[ DEFAULT_ATTRIBUTE ]?.source === PATTERN_OVERRIDES_SOURCE;
-}
-
-/**
- * Returns the bindings with the `__default` binding for pattern overrides
- * replaced with the full-set of supported attributes. e.g.:
- *
- * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`
- * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`
- *
- * @param {?Record<string, object>} bindings            A block's bindings from the metadata attribute.
- * @param {string[]}                supportedAttributes The block's attributes which are supported by block bindings.
- *
- * @return {Object} The bindings with default replaced for pattern overrides.
- */
-export function replacePatternOverridesDefaultBinding(
-	bindings,
-	supportedAttributes
-) {
-	// The `__default` binding currently only works for pattern overrides.
-	if ( hasPatternOverridesDefaultBinding( bindings ) ) {
-		const bindingsWithDefaults = {};
-		for ( const attributeName of supportedAttributes ) {
-			// If the block has mixed binding sources, retain any non pattern override bindings.
-			const bindingSource = bindings[ attributeName ]
-				? bindings[ attributeName ]
-				: { source: PATTERN_OVERRIDES_SOURCE };
-			bindingsWithDefaults[ attributeName ] = bindingSource;
-		}
-
-		return bindingsWithDefaults;
-	}
-
-	return bindings;
-}

package/src/utils/color-values.js

@@ -1,28 +0,0 @@
-/**
- * Extracts the palette slug from a style value for any preset type, supporting
- * both the user preset format and the theme CSS-variable format:
- *
- * - User format:  `var:preset|<type>|slug`
- * - Theme format: `var(--wp--preset--<type>--slug)`
- *
- * Returns `undefined` for plain values, non-strings, or any other
- * unrecognised format.
- *
- * @param {*}                  rawValue Raw style value stored in the style object.
- * @param {'color'|'gradient'} type     Preset type, e.g. `'color'` or `'gradient'`.
- * @return {string|undefined} The palette slug, or undefined.
- */
-export function extractPresetSlug( rawValue, type ) {
-	if ( typeof rawValue !== 'string' ) {
-		return undefined;
-	}
-	const userPrefix = `var:preset|${ type }|`;
-	if ( rawValue.startsWith( userPrefix ) ) {
-		return rawValue.slice( userPrefix.length );
-	}
-	const cssVarPrefix = `--wp--preset--${ type }--`;
-	const themeFormatMatch = rawValue.match(
-		new RegExp( `^var\\(${ cssVarPrefix }([^)]+)\\)$` )
-	);
-	return themeFormatMatch?.[ 1 ];
-}

package/src/utils/object.js

@@ -1,67 +0,0 @@
-/**
- * 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. Supports arrays, too.
- *
- * @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 setImmutably( object, path, value ) {
-	// Normalize path
-	path = Array.isArray( path ) ? [ ...path ] : [ path ];
-
-	// Shallowly clone the base of the object
-	object = Array.isArray( object ) ? [ ...object ] : { ...object };
-
-	const leaf = path.pop();
-
-	// Traverse object from root to leaf, shallowly cloning at each level
-	let prev = object;
-	for ( const key of path ) {
-		const lvl = prev[ key ];
-		prev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };
-	}
-
-	prev[ leaf ] = value;
-
-	return object;
-}
-
-/**
- * Helper util to return a value from a certain path of the object.
- * Path is specified as either:
- * - a string of properties, separated by dots, for example: "x.y".
- * - an array of properties, for example `[ 'x', 'y' ]`.
- * You can also specify a default value in case the result is nullish.
- *
- * @param {Object}       object       Input object.
- * @param {string|Array} path         Path to the object property.
- * @param {*}            defaultValue Default value if the value at the specified path is nullish.
- * @return {*} Value of the object property at the specified path.
- */
-export const getValueFromObjectPath = ( object, path, defaultValue ) => {
-	const arrayPath = Array.isArray( path ) ? path : path.split( '.' );
-	let value = object;
-	arrayPath.forEach( ( fieldName ) => {
-		value = value?.[ fieldName ];
-	} );
-	return value ?? defaultValue;
-};
-
-/**
- * Helper util to filter out objects with duplicate values for a given property.
- *
- * @param {Object[]} array    Array of objects to filter.
- * @param {string}   property Property to filter unique values by.
- *
- * @return {Object[]} Array of objects with unique values for the specified property.
- */
-export function uniqByProperty( array, property ) {
-	const seen = new Set();
-	return array.filter( ( item ) => {
-		const value = item[ property ];
-		return seen.has( value ) ? false : seen.add( value );
-	} );
-}

package/src/utils/sorting.js

@@ -1,54 +0,0 @@
-/**
- * Recursive stable sorting comparator function.
- *
- * @param {string|Function} field Field to sort by.
- * @param {Array}           items Items to sort.
- * @param {string}          order Order, 'asc' or 'desc'.
- * @return {Function} Comparison function to be used in a `.sort()`.
- */
-const comparator = ( field, items, order ) => {
-	return ( a, b ) => {
-		let cmpA, cmpB;
-
-		if ( typeof field === 'function' ) {
-			cmpA = field( a );
-			cmpB = field( b );
-		} else {
-			cmpA = a[ field ];
-			cmpB = b[ field ];
-		}
-
-		if ( cmpA > cmpB ) {
-			return order === 'asc' ? 1 : -1;
-		} else if ( cmpB > cmpA ) {
-			return order === 'asc' ? -1 : 1;
-		}
-
-		const orderA = items.findIndex( ( item ) => item === a );
-		const orderB = items.findIndex( ( item ) => item === b );
-
-		// Stable sort: maintaining original array order
-		if ( orderA > orderB ) {
-			return 1;
-		} else if ( orderB > orderA ) {
-			return -1;
-		}
-
-		return 0;
-	};
-};
-
-/**
- * Order items by a certain key.
- * Supports decorator functions that allow complex picking of a comparison field.
- * Sorts in ascending order by default, but supports descending as well.
- * Stable sort - maintains original order of equal items.
- *
- * @param {Array}           items Items to order.
- * @param {string|Function} field Field to order by.
- * @param {string}          order Sorting order, `asc` or `desc`.
- * @return {Array} Sorted items.
- */
-export function orderBy( items, field, order = 'asc' ) {
-	return items.concat().sort( comparator( field, items, order ) );
-}