@wordpress/block-editor 15.21.0 → 15.22.0

package/src/hooks/test/align.native.js

@@ -1,134 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	getEditorHtml,
-	initializeEditor,
-	getBlock,
-	fireEvent,
-	within,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
-
-const imageHTML = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
-<!-- /wp:image -->`;
-
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
-
-describe( 'Align options', () => {
-	describe( 'for media block', () => {
-		[
-			'None',
-			'Align left',
-			'Align center',
-			'Align right',
-			'Wide width',
-			'Full width',
-		].forEach( ( alignmentOption ) =>
-			it( `sets ${ alignmentOption } option`, async () => {
-				const screen = await initializeEditor( {
-					initialHtml: imageHTML,
-				} );
-				const { getByLabelText } = screen;
-
-				// Get Image block
-				const imageBlock = await getBlock( screen, 'Image' );
-				expect( imageBlock ).toBeVisible();
-				fireEvent.press( imageBlock );
-
-				// Open alignments menu
-				const alignmentButtons = getByLabelText( 'Align' );
-				fireEvent.press( alignmentButtons );
-
-				// Select alignment option.
-				fireEvent.press( await getByLabelText( alignmentOption ) );
-
-				expect( getEditorHtml() ).toMatchSnapshot();
-			} )
-		);
-	} );
-
-	describe( 'for text block', () => {
-		[ 'Align text left', 'Align text center', 'Align text right' ].forEach(
-			( alignmentOption ) =>
-				it( `sets ${ alignmentOption } option`, async () => {
-					const screen = await initializeEditor();
-					const { getByLabelText } = screen;
-
-					// Add Paragraph block
-					await addBlock( screen, 'Paragraph' );
-
-					// Get Paragraph block
-					const paragraphBlock = await getBlock(
-						screen,
-						'Paragraph'
-					);
-					expect( paragraphBlock ).toBeVisible();
-
-					// Open alignments menu
-					const alignmentButtons = getByLabelText( 'Align text' );
-					fireEvent.press( alignmentButtons );
-
-					// Select alignment option.
-					fireEvent.press( await getByLabelText( alignmentOption ) );
-
-					expect( getEditorHtml() ).toMatchSnapshot();
-				} )
-		);
-	} );
-
-	describe( 'for group block', () => {
-		[ 'None', 'Wide width', 'Full width' ].forEach( ( alignmentOption ) =>
-			it( `sets ${ alignmentOption } option`, async () => {
-				const screen = await initializeEditor();
-				const { getByLabelText } = screen;
-
-				// Add Group block
-				await addBlock( screen, 'Group' );
-
-				// Get Paragraph block
-				const groupBlock = await getBlock( screen, 'Group' );
-				expect( groupBlock ).toBeVisible();
-
-				// Trigger inner blocks layout
-				const innerBlockListWrapper =
-					await within( groupBlock ).findByTestId(
-						'block-list-wrapper'
-					);
-				fireEvent( innerBlockListWrapper, 'layout', {
-					nativeEvent: {
-						layout: {
-							width: 300,
-						},
-					},
-				} );
-
-				// Open alignments menu
-				const alignmentButtons = getByLabelText( 'Align' );
-				fireEvent.press( alignmentButtons );
-
-				// Select alignment option.
-				fireEvent.press( await getByLabelText( alignmentOption ) );
-
-				expect( getEditorHtml() ).toMatchSnapshot();
-			} )
-		);
-	} );
-} );

package/src/hooks/test/anchor.native.js

@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	changeTextOfTextInput,
-	getEditorHtml,
-	initializeEditor,
-	openBlockSettings,
-	screen,
-	setupCoreBlocks,
-} from 'test/helpers';
-
-setupCoreBlocks( [ 'core/paragraph' ] );
-
-describe( 'anchor', () => {
-	it( 'should set the ID attribute on the block', async () => {
-		// Arrange
-		await initializeEditor();
-		const block = await addBlock( screen, 'Paragraph' );
-		await openBlockSettings( screen, block );
-
-		// Act
-		await changeTextOfTextInput(
-			await screen.getByPlaceholderText( 'Add an anchor' ),
-			'my-anchor'
-		);
-
-		// Assert
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-} );

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

@@ -1,282 +0,0 @@
-/**
- * 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/typography.native.js

@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { memo } from '@wordpress/element';
-import { PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import InspectorControls from '../components/inspector-controls';
-import { useHasTypographyPanel } from '../components/global-styles/typography-panel';
-
-import { store as blockEditorStore } from '../store';
-
-import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height';
-import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
-
-export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
-export const TYPOGRAPHY_SUPPORT_KEYS = [
-	LINE_HEIGHT_SUPPORT_KEY,
-	FONT_SIZE_SUPPORT_KEY,
-];
-
-function TypographyPanelPure( { clientId, setAttributes, settings } ) {
-	function selector( select ) {
-		const { style, fontFamily, fontSize } =
-			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, fontFamily, fontSize };
-	}
-	const { style, fontSize } = useSelect( selector, [ clientId ] );
-	const isEnabled = useHasTypographyPanel( settings );
-
-	if ( ! isEnabled ) {
-		return null;
-	}
-
-	const props = {
-		attributes: {
-			fontSize,
-			style,
-		},
-		setAttributes,
-	};
-
-	return (
-		<InspectorControls>
-			<PanelBody title={ __( 'Typography' ) }>
-				<FontSizeEdit { ...props } />
-				<LineHeightEdit { ...props } />
-			</PanelBody>
-		</InspectorControls>
-	);
-}
-
-// We don't want block controls to re-render when typing inside a block. `pure`
-// will prevent re-renders unless props change, so only pass the needed props
-// and not the whole attributes object.
-export const TypographyPanel = memo( TypographyPanelPure );