@wordpress/block-editor 15.20.0 → 15.21.1

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 };