@wordpress/block-library 9.48.0 → 9.48.1

package/src/search/test/__snapshots__/transforms.native.js.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Search block transforms to Columns block 1`] = `
-"<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:search {"label":"Search","buttonText":"Search"} /--></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Search block transforms to Group block 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:search {"label":"Search","buttonText":"Search"} /--></div>
-<!-- /wp:group -->"
-`;

package/src/search/test/edit.native.js

@@ -1,170 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { Icon as WCIcon } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import SearchEdit from '../edit.native.js';
-// react-native-aztec shouldn't be mocked because these tests are based on
-// snapshot testing where we want to keep the original component.
-jest.unmock( '@wordpress/react-native-aztec' );
-
-const defaultAttributes = {
-	label: 'Search',
-	buttonText: 'Search Button',
-	buttonPosition: 'button-outside',
-	showLabel: true,
-};
-
-const getTestComponent = ( attributes = {} ) => {
-	const finalAttrs = { ...defaultAttributes, ...attributes };
-	return render(
-		<SearchEdit attributes={ finalAttrs } setAttributes={ jest.fn() } />
-	);
-};
-
-const getLabel = ( instance ) => {
-	return instance.UNSAFE_getByProps( {
-		className: 'wp-block-search__label',
-	} );
-};
-
-const getButton = ( instance ) => {
-	return instance.UNSAFE_getByProps( {
-		className: 'wp-block-search__button',
-	} );
-};
-
-const getSearchInput = ( instance ) => {
-	return instance.UNSAFE_getByProps( {
-		className: 'wp-block-search__input',
-	} );
-};
-
-const hasComponent = ( instance, className ) => {
-	const components = instance.UNSAFE_queryAllByProps( {
-		className,
-	} );
-	return components.length !== 0;
-};
-
-describe( 'Search Block', () => {
-	it( 'renders without crashing', () => {
-		const component = getTestComponent();
-		const rendered = component.toJSON();
-		expect( rendered ).toBeTruthy();
-	} );
-
-	describe( 'renders with default configuration', () => {
-		let instance;
-		beforeEach( () => {
-			instance = getTestComponent();
-		} );
-
-		it( 'label is visible and text is properly set', () => {
-			// Verify the label element of the search block exists and
-			// label text is set.
-			const label = getLabel( instance );
-			expect( label ).toBeTruthy();
-			expect( label.props.value ).toBe( 'Search' );
-		} );
-
-		it( 'button is visible and text is properly set', () => {
-			// Verify the button element of the search block exists and
-			// button text is set.
-			const button = getButton( instance );
-			expect( button ).toBeTruthy();
-			expect( button.props.value ).toBe( 'Search Button' );
-		} );
-
-		it( 'search input is visible and placeholder text is properly set', () => {
-			// Verify the search input element of the search block exists
-			// and the placeholder text is set.
-			const searchInput = getSearchInput( instance );
-			expect( searchInput ).toBeTruthy();
-			expect( searchInput.props.placeholder ).toBe(
-				'Optional placeholder…'
-			);
-		} );
-
-		it( 'matches snapshot', () => {
-			const rendered = instance.toJSON();
-			expect( rendered ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'renders with no-button option', () => {
-		let instance;
-		beforeEach( () => {
-			instance = getTestComponent( {
-				buttonPosition: 'no-button',
-			} );
-		} );
-
-		it( 'verify button element has not been rendered', () => {
-			expect(
-				hasComponent( instance, 'wp-block-search__button' )
-			).toEqual( false );
-		} );
-
-		it( 'matches snapshot', () => {
-			const rendered = instance.toJSON();
-			expect( rendered ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'renders block with icon button option', () => {
-		let instance;
-		beforeEach( () => {
-			instance = getTestComponent( {
-				buttonUseIcon: true,
-			} );
-		} );
-
-		it( 'search button uses icon', () => {
-			const button = instance.UNSAFE_getByType( WCIcon );
-			expect( button ).toBeTruthy();
-		} );
-
-		it( 'matches snapshot', () => {
-			const rendered = instance.toJSON();
-			expect( rendered ).toMatchSnapshot();
-		} );
-	} );
-
-	it( 'renders block with button inside option', () => {
-		const instance = getTestComponent( {
-			buttonPosition: 'button-inside',
-		} );
-
-		const rendered = instance.toJSON();
-		expect( rendered ).toMatchSnapshot();
-	} );
-
-	describe( 'renders block with label hidden', () => {
-		let instance;
-		beforeEach( () => {
-			instance = getTestComponent( {
-				showLabel: false,
-			} );
-		} );
-
-		it( 'verify label has not been rendered', () => {
-			expect(
-				hasComponent( instance, 'wp-block-search__label' )
-			).toEqual( false );
-		} );
-
-		it( 'matches snapshot', () => {
-			const rendered = instance.toJSON();
-			expect( rendered ).toMatchSnapshot();
-		} );
-	} );
-} );

package/src/search/test/transforms.native.js

@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Search';
-const initialHtml = `
-<!-- wp:search {"label":"Search","buttonText":"Search"} /-->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ ...transformsWithInnerBlocks ];
-
-setupCoreBlocks();
-
-describe( `${ block } block transforms`, () => {
-	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
-		const screen = await initializeEditor( { initialHtml } );
-		const newBlock = await transformBlock( screen, block, blockTransform, {
-			hasInnerBlocks:
-				transformsWithInnerBlocks.includes( blockTransform ),
-		} );
-		expect( newBlock ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'matches expected transformation options', async () => {
-		const screen = await initializeEditor( { initialHtml } );
-		const transformOptions = await getBlockTransformOptions(
-			screen,
-			block
-		);
-		expect( transformOptions ).toHaveLength( blockTransforms.length );
-	} );
-} );

package/src/separator/separator-settings.native.js

@@ -1,3 +0,0 @@
-// Mobile has no separator settings at this time, so render nothing.
-const SeparatorSettings = () => null;
-export default SeparatorSettings;

package/src/separator/test/__snapshots__/edit.native.js.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Separator block inserts block 1`] = `
-"<!-- wp:separator -->
-<hr class="wp-block-separator has-alpha-channel-opacity"/>
-<!-- /wp:separator -->"
-`;

package/src/separator/test/__snapshots__/transforms.native.js.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Separator block transforms to Columns block 1`] = `
-"<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:separator -->
-<hr class="wp-block-separator has-alpha-channel-opacity"/>
-<!-- /wp:separator --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Separator block transforms to Group block 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:separator -->
-<hr class="wp-block-separator has-alpha-channel-opacity"/>
-<!-- /wp:separator --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Separator block transforms to Spacer block 1`] = `
-"<!-- wp:spacer -->
-<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;

package/src/separator/test/edit.native.js

@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	getEditorHtml,
-	initializeEditor,
-	getBlock,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
-
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
-
-describe( 'Separator block', () => {
-	it( 'inserts block', async () => {
-		const screen = await initializeEditor();
-
-		// Add block
-		await addBlock( screen, 'Separator' );
-
-		// Get block
-		const separatorBlock = await getBlock( screen, 'Separator' );
-		expect( separatorBlock ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-} );

package/src/separator/test/transforms.native.js

@@ -1,42 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Separator';
-const initialHtml = `
-<!-- wp:separator -->
-<hr class="wp-block-separator has-alpha-channel-opacity"/>
-<!-- /wp:separator -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'Spacer', ...transformsWithInnerBlocks ];
-
-setupCoreBlocks();
-
-describe( `${ block } block transforms`, () => {
-	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
-		const screen = await initializeEditor( { initialHtml } );
-		const newBlock = await transformBlock( screen, block, blockTransform, {
-			hasInnerBlocks:
-				transformsWithInnerBlocks.includes( blockTransform ),
-		} );
-		expect( newBlock ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'matches expected transformation options', async () => {
-		const screen = await initializeEditor( { initialHtml } );
-		const transformOptions = await getBlockTransformOptions(
-			screen,
-			block
-		);
-		expect( transformOptions ).toHaveLength( blockTransforms.length );
-	} );
-} );

package/src/separator/transforms.native.js

@@ -1,12 +0,0 @@
-/**
- * Internal dependencies
- */
-import webTransforms from './transforms.js';
-import transformationCategories from '../utils/transformation-categories';
-
-const transforms = {
-	...webTransforms,
-	supportedMobileTransforms: transformationCategories.other,
-};
-
-export default transforms;

package/src/shortcode/edit.native.js

@@ -1,77 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PlainText } from '@wordpress/block-editor';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-
-import styles from './style.scss';
-
-export function ShortcodeEdit( props ) {
-	const {
-		attributes,
-		setAttributes,
-		onFocus,
-		onBlur,
-		getStylesFromColorScheme,
-		blockWidth,
-	} = props;
-	const titleStyle = getStylesFromColorScheme(
-		styles.blockTitle,
-		styles.blockTitleDark
-	);
-	const shortcodeContainerStyle = getStylesFromColorScheme(
-		styles.blockShortcodeContainer,
-		styles.blockShortcodeContainerDark
-	);
-	const shortcodeStyle = getStylesFromColorScheme(
-		styles.blockShortcode,
-		styles.blockShortcodeDark
-	);
-	const placeholderStyle = getStylesFromColorScheme(
-		styles.placeholder,
-		styles.placeholderDark
-	);
-
-	const maxWidth =
-		blockWidth -
-		shortcodeContainerStyle.paddingLeft +
-		shortcodeContainerStyle.paddingRight;
-
-	const onChange = useCallback(
-		( text ) => setAttributes( { text } ),
-		[ setAttributes ]
-	);
-
-	return (
-		<View>
-			<Text style={ titleStyle }>{ __( 'Shortcode' ) }</Text>
-			<View style={ shortcodeContainerStyle }>
-				<PlainText
-					__experimentalVersion={ 2 }
-					value={ attributes.text }
-					style={ shortcodeStyle }
-					onChange={ onChange }
-					placeholder={ __( 'Add a shortcode…' ) }
-					onFocus={ onFocus }
-					onBlur={ onBlur }
-					placeholderTextColor={ placeholderStyle.color }
-					maxWidth={ maxWidth }
-					disableAutocorrection
-				/>
-			</View>
-		</View>
-	);
-}
-
-export default withPreferredColorScheme( ShortcodeEdit );

package/src/shortcode/style.native.scss

@@ -1,44 +0,0 @@
-.blockTitle {
-	font-weight: 500;
-	font-size: 10px;
-	color: $gray;
-	text-transform: uppercase;
-	letter-spacing: 0.4px;
-	padding-bottom: 4px;
-}
-
-.blockTitleDark {
-	color: $gray-50;
-}
-
-.blockShortcodeContainer {
-	padding: 12px;
-	border-radius: 4px;
-	background-color: $gray-light;
-}
-
-.blockShortcodeContainerDark {
-	background-color: $gray-100;
-}
-
-.blockShortcode {
-	font-family: $default-monospace-font;
-	font-weight: 400;
-	font-size: 14px;
-	color: $gray-900;
-}
-
-.blockShortcodeDark {
-	color: $white;
-}
-
-.placeholder {
-	font-family: $default-monospace-font;
-	font-weight: 400;
-	font-size: 14px;
-	color: $gray;
-}
-
-.placeholderDark {
-	color: $gray-50;
-}

package/src/shortcode/test/__snapshots__/edit.native.js.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Shortcode block edits content 1`] = `
-"<!-- wp:shortcode -->
-[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
-<!-- /wp:shortcode -->"
-`;
-
-exports[`Shortcode block inserts block 1`] = `"<!-- wp:shortcode /-->"`;

package/src/shortcode/test/__snapshots__/transforms.native.js.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Shortcode block transforms to Columns block 1`] = `
-"<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:shortcode -->
-[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
-<!-- /wp:shortcode --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Shortcode block transforms to Group block 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:shortcode -->
-[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
-<!-- /wp:shortcode --></div>
-<!-- /wp:group -->"
-`;

package/src/shortcode/test/edit.native.js

@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import { getEditorHtml, initializeEditor, fireEvent } from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
-
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
-
-describe( 'Shortcode block', () => {
-	it( 'inserts block', async () => {
-		const screen = await initializeEditor();
-
-		fireEvent.press( screen.getByLabelText( 'Add block' ) );
-
-		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
-		// onScroll event used to force the FlatList to render all items
-		fireEvent.scroll( blockList, {
-			nativeEvent: {
-				contentOffset: { y: 0, x: 0 },
-				contentSize: { width: 100, height: 100 },
-				layoutMeasurement: { width: 100, height: 100 },
-			},
-		} );
-
-		fireEvent.press( await screen.findByText( 'Shortcode' ) );
-
-		const [ shortcodeBlock ] = screen.getAllByLabelText(
-			/Shortcode Block\. Row 1/
-		);
-		expect( shortcodeBlock ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'edits content', async () => {
-		const screen = await initializeEditor( {
-			initialHtml: '<!-- wp:shortcode /-->',
-		} );
-		const [ shortcodeBlock ] = screen.getAllByLabelText(
-			/Shortcode Block\. Row 1/
-		);
-		fireEvent.press( shortcodeBlock );
-
-		const textField = screen.getByPlaceholderText( 'Add a shortcode…' );
-		fireEvent( textField, 'focus' );
-		fireEvent( textField, 'onChange', {
-			nativeEvent: {
-				eventCount: 1,
-				target: undefined,
-				text: '[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]',
-			},
-		} );
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-} );

package/src/shortcode/test/transforms.native.js

@@ -1,42 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Shortcode';
-const initialHtml = `
-<!-- wp:shortcode -->
-[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
-<!-- /wp:shortcode -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ ...transformsWithInnerBlocks ];
-
-setupCoreBlocks();
-
-describe( `${ block } block transforms`, () => {
-	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
-		const screen = await initializeEditor( { initialHtml } );
-		const newBlock = await transformBlock( screen, block, blockTransform, {
-			hasInnerBlocks:
-				transformsWithInnerBlocks.includes( blockTransform ),
-		} );
-		expect( newBlock ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'matches expected transformation options', async () => {
-		const screen = await initializeEditor( { initialHtml } );
-		const transformOptions = await getBlockTransformOptions(
-			screen,
-			block
-		);
-		expect( transformOptions ).toHaveLength( blockTransforms.length );
-	} );
-} );

package/src/shortcode/transforms.native.js

@@ -1,12 +0,0 @@
-/**
- * Internal dependencies
- */
-import webTransforms from './transforms.js';
-import transformationCategories from '../utils/transformation-categories';
-
-const transforms = {
-	...webTransforms,
-	supportedMobileTransforms: transformationCategories.richText,
-};
-
-export default transforms;