@wordpress/block-editor 12.0.0 → 12.2.0

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

@@ -0,0 +1,282 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import { useEditorWrapperStyles } from '../use-editor-wrapper-styles';
+
+jest.mock( '../use-editor-wrapper-styles.scss', () => ( {
+	'use-editor-wrapper-styles': {
+		width: '100%',
+		maxWidth: 580,
+		alignSelf: 'center',
+	},
+	'use-editor-wrapper-styles--reversed': {
+		flexDirection: 'column-reverse',
+		width: '100%',
+		maxWidth: 580,
+	},
+} ) );
+
+const defaultCanvasStyles = {
+	width: '100%',
+	maxWidth: 580,
+	alignSelf: 'center',
+};
+
+describe( 'useEditorWrapperStyles', () => {
+	beforeAll( () => {
+		// Register all core blocks
+		registerCoreBlocks();
+	} );
+
+	afterAll( () => {
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'should return the default wrapper styles when no props are set', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 900, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () => useEditorWrapperStyles() );
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for wide (medium) alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 900, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'wide',
+				blockName: 'core/group',
+				blockWidth: 800,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: 770,
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for wide (landscape) alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'wide',
+				blockName: 'core/group',
+				blockWidth: 700,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: 662,
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for wide alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 1194, height: 834 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'wide',
+				blockName: 'core/group',
+				blockWidth: 800,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: 1054,
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for full alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'full',
+				blockName: 'core/cover',
+				blockWidth: 700,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: '100%',
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 0 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for left alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { align: 'left', marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for center alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 640, height: 960 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { align: 'center', marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for right alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 960, height: 640 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { align: 'right', marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin when reversed is true', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { reversed: true, marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( {
+				flexDirection: 'column-reverse',
+				width: '100%',
+				maxWidth: 580,
+			} ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin when contentResizeMode is set', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				contentResizeMode: 'stretch',
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( {
+				flex: 1,
+			} ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+} );

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

@@ -39,7 +39,15 @@ describe( 'getTypographyClassesAndStyles', () => {
 				},
 			},
 		};
-		expect( getTypographyClassesAndStyles( attributes, true ) ).toEqual( {
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+			} )
+		).toEqual( {
 			className: 'has-tofu-font-family',
 			style: {
 				letterSpacing: '22px',
@@ -63,7 +71,11 @@ describe( 'getTypographyClassesAndStyles', () => {
 		};
 		expect(
 			getTypographyClassesAndStyles( attributes, {
-				minFontSize: '1rem',
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
 			} )
 		).toEqual( {
 			className: 'has-tofu-font-family',
@@ -75,4 +87,37 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should use layout.wideSize for the maximum viewport value', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+				layout: {
+					wideSize: '1000px',
+				},
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.765), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );

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/index.native.js

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

package/src/private-apis.js

@@ -4,14 +4,13 @@
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
-import OffCanvasEditor from './components/off-canvas-editor';
-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';
+import { useBlockEditingMode } from './components/block-editing-mode';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -20,12 +19,11 @@ export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
-	LeafMoreMenu,
-	OffCanvasEditor,
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
+	useBlockEditingMode,
 } );