@wordpress/block-editor 11.8.0 → 12.1.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,12 +39,20 @@ describe( 'getTypographyClassesAndStyles', () => {
 				},
 			},
 		};
-		expect( getTypographyClassesAndStyles( attributes, true ) ).toEqual( {
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+			} )
+		).toEqual( {
 			className: 'has-tofu-font-family',
 			style: {
 				letterSpacing: '22px',
 				fontSize:
-					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
 				textTransform: 'uppercase',
 			},
 		} );
@@ -63,14 +71,51 @@ describe( 'getTypographyClassesAndStyles', () => {
 		};
 		expect(
 			getTypographyClassesAndStyles( attributes, {
-				minFontSize: '1rem',
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
+
+	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.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.765), 2rem)',
 				textTransform: 'uppercase',
 			},
 		} );

package/src/hooks/test/utils.js

@@ -1,113 +1,32 @@
-/**
- * WordPress dependencies
- */
-import { applyFilters } from '@wordpress/hooks';
-
 /**
  * Internal dependencies
  */
-import '../anchor';
+import { cleanEmptyObject } from '../utils';
 
-const noop = () => {};
-
-describe( 'anchor', () => {
-	const blockSettings = {
-		save: noop,
-		category: 'text',
-		title: 'block title',
-	};
-
-	describe( 'addAttribute()', () => {
-		const registerBlockType = applyFilters.bind(
-			null,
-			'blocks.registerBlockType'
+describe( 'cleanEmptyObject', () => {
+	it( 'should remove nested keys', () => {
+		expect( cleanEmptyObject( { color: { text: undefined } } ) ).toEqual(
+			undefined
 		);
+	} );
 
-		it( 'should do nothing if the block settings do not define anchor support', () => {
-			const settings = registerBlockType( blockSettings );
-
-			expect( settings.attributes ).toBe( undefined );
-		} );
-
-		it( 'should assign a new anchor attribute', () => {
-			const settings = registerBlockType( {
-				...blockSettings,
-				supports: {
-					anchor: true,
-				},
-			} );
-
-			expect( settings.attributes ).toHaveProperty( 'anchor' );
-		} );
-
-		it( 'should not override attributes defined in settings', () => {
-			const settings = registerBlockType( {
-				...blockSettings,
-				supports: {
-					anchor: true,
-				},
-				attributes: {
-					anchor: {
-						type: 'string',
-						default: 'testAnchor',
-					},
-				},
-			} );
-
-			expect( settings.attributes.anchor ).toEqual( {
-				type: 'string',
-				default: 'testAnchor',
-			} );
+	it( 'should remove partial nested keys', () => {
+		expect(
+			cleanEmptyObject( {
+				color: { text: undefined },
+				typography: { fontSize: '10px' },
+			} )
+		).toEqual( {
+			typography: { fontSize: '10px' },
 		} );
 	} );
 
-	describe( 'addSaveProps', () => {
-		const getSaveContentExtraProps = applyFilters.bind(
-			null,
-			'blocks.getSaveContent.extraProps'
+	it( 'should not remove falsy nested keys', () => {
+		expect( cleanEmptyObject( { color: { text: false } } ) ).not.toEqual(
+			undefined
+		);
+		expect( cleanEmptyObject( { color: { text: '' } } ) ).not.toEqual(
+			undefined
 		);
-
-		it( 'should do nothing if the block settings do not define anchor support', () => {
-			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
-				{},
-				blockSettings,
-				attributes
-			);
-
-			expect( extraProps ).not.toHaveProperty( 'id' );
-		} );
-
-		it( 'should inject anchor attribute ID', () => {
-			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
-				{},
-				{
-					...blockSettings,
-					supports: {
-						anchor: true,
-					},
-				},
-				attributes
-			);
-
-			expect( extraProps.id ).toBe( 'foo' );
-		} );
-
-		it( 'should remove an anchor attribute ID when field is cleared', () => {
-			const attributes = { anchor: '' };
-			const extraProps = getSaveContentExtraProps(
-				{},
-				{
-					...blockSettings,
-					supports: {
-						anchor: true,
-					},
-				},
-				attributes
-			);
-
-			expect( extraProps.id ).toBe( null );
-		} );
 	} );
 } );