@wordpress/block-editor 12.0.0 → 12.1.0

package/src/components/preview-options/index.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { useViewportMatch } from '@wordpress/compose';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
+import { check, desktop, mobile, tablet } from '@wordpress/icons';
 
 export default function PreviewOptions( {
 	children,
@@ -38,13 +38,20 @@ export default function PreviewOptions( {
 	const menuProps = {
 		'aria-label': __( 'View options' ),
 	};
+
+	const deviceIcons = {
+		mobile,
+		tablet,
+		desktop,
+	};
+
 	return (
 		<DropdownMenu
 			className="block-editor-post-preview__dropdown"
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={ null }
+			icon={ deviceIcons[ deviceType.toLowerCase() ] }
 		>
 			{ () => (
 				<>

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -74,6 +74,7 @@ export default function SpacingInputControl( {
 
 	const previousValue = usePrevious( value );
 	if (
+		!! value &&
 		previousValue !== value &&
 		! isValueSpacingPreset( value ) &&
 		showCustomValueControl !== true

package/src/components/url-input/index.js

@@ -309,11 +309,10 @@ class URLInput extends Component {
 
 				// Submitting while loading should trigger onSubmit.
 				case ENTER: {
-					event.preventDefault();
 					if ( this.props.onSubmit ) {
+						event.preventDefault();
 						this.props.onSubmit( null, event );
 					}
-
 					break;
 				}
 			}

package/src/hooks/align.js

@@ -205,7 +205,8 @@ export const withDataAlign = createHigherOrderComponent(
 		}
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
+	},
+	'withDataAlign'
 );
 
 /**

package/src/hooks/border.js

@@ -388,7 +388,8 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent(
 		};
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
+	},
+	'withBorderColorPaletteStyles'
 );
 
 addFilter(

package/src/hooks/color.js

@@ -416,7 +416,8 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 		};
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
+	},
+	'withColorPaletteStyles'
 );
 
 const MIGRATION_PATHS = {

package/src/hooks/content-lock-ui.js

@@ -13,10 +13,6 @@ import { useEffect, useRef, useCallback } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../store';
 import { BlockControls, BlockSettingsMenuControls } from '../components';
-/**
- * External dependencies
- */
-import classnames from 'classnames';
 
 function StopEditingAsBlocksOnOutsideSelect( {
 	clientId,
@@ -37,7 +33,7 @@ function StopEditingAsBlocksOnOutsideSelect( {
 		if ( ! isBlockOrDescendantSelected ) {
 			stopEditingAsBlock();
 		}
-	}, [ isBlockOrDescendantSelected ] );
+	}, [ isBlockOrDescendantSelected, stopEditingAsBlock ] );
 	return null;
 }
 
@@ -91,7 +87,6 @@ export const withBlockControls = createHigherOrderComponent(
 			__unstableSetTemporarilyEditingAsBlocks();
 		}, [
 			props.clientId,
-			focusModeToRevert,
 			updateSettings,
 			updateBlockListSettings,
 			getBlockListSettings,
@@ -101,7 +96,7 @@ export const withBlockControls = createHigherOrderComponent(
 		] );
 
 		if ( ! isContentLocked && ! isEditingAsBlocks ) {
-			return <BlockEdit { ...props } />;
+			return <BlockEdit key="edit" { ...props } />;
 		}
 
 		const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
@@ -156,14 +151,7 @@ export const withBlockControls = createHigherOrderComponent(
 						) }
 					</BlockSettingsMenuControls>
 				) }
-				<BlockEdit
-					{ ...props }
-					className={ classnames(
-						props.className,
-						isEditingAsBlocks &&
-							'is-content-locked-editing-as-blocks'
-					) }
-				/>
+				<BlockEdit key="edit" { ...props } />
 			</>
 		);
 	},

package/src/hooks/duotone.js

@@ -142,6 +142,7 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 					value={ { filter: { duotone: duotonePresetOrColors } } }
 					onChange={ ( newDuotone ) => {
 						const newStyle = {
+							...style,
 							color: {
 								...newDuotone?.filter,
 							},

package/src/hooks/index.native.js

@@ -15,3 +15,4 @@ export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
+export { useEditorWrapperStyles } from './use-editor-wrapper-styles';

package/src/hooks/layout.js

@@ -429,7 +429,8 @@ export const withLayoutStyles = createHigherOrderComponent(
 				/>
 			</>
 		);
-	}
+	},
+	'withLayoutStyles'
 );
 
 /**
@@ -484,7 +485,8 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);
-	}
+	},
+	'withChildLayoutStyles'
 );
 
 addFilter(

package/src/hooks/position.js

@@ -386,7 +386,8 @@ export const withPositionStyles = createHigherOrderComponent(
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);
-	}
+	},
+	'withPositionStyles'
 );
 
 addFilter(

package/src/hooks/style.js

@@ -447,7 +447,8 @@ const withElementsStyles = createHigherOrderComponent(
 				/>
 			</>
 		);
-	}
+	},
+	'withElementsStyles'
 );
 
 addFilter(

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',
+			},
+		} );
+	} );
 } );