@wordpress/block-library 9.48.0 → 10.0.1-next.v.202606191442.0

package/src/social-links/test/edit.native.js

@@ -1,266 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	dismissModal,
-	fireEvent,
-	getEditorHtml,
-	initializeEditor,
-	within,
-	getBlock,
-	screen,
-	triggerBlockListLayout,
-	waitFor,
-	waitForModalVisible,
-} 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( 'Social links block', () => {
-	it( 'inserts block with the default icons and the WordPress link set as active', async () => {
-		await initializeEditor();
-
-		// Add block
-		await addBlock( screen, 'Social Icons' );
-
-		// Get block
-		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
-
-		// Trigger inner blocks layout
-		const innerBlockListWrapper = await waitFor( () =>
-			within( socialLinksBlock ).getByTestId( 'block-list-wrapper' )
-		);
-		fireEvent( innerBlockListWrapper, 'layout', {
-			nativeEvent: {
-				layout: {
-					width: 300,
-				},
-			},
-		} );
-
-		// Check the WordPress icon has a URL set (active)
-		const firstLinkBlock = await getBlock( screen, 'Social Icon' );
-		fireEvent.press( firstLinkBlock );
-		const firstLink = within( socialLinksBlock ).getByAccessibilityHint(
-			/WordPress has URL set/
-		);
-		expect( firstLink ).toBeVisible();
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'shows active links correctly when not selected', async () => {
-		await initializeEditor();
-
-		// Add Social Icons block
-		await addBlock( screen, 'Social Icons' );
-
-		// Get block
-		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
-
-		// Trigger inner blocks layout
-		const innerBlockListWrapper = await waitFor( () =>
-			within( socialLinksBlock ).getByTestId( 'block-list-wrapper' )
-		);
-		fireEvent( innerBlockListWrapper, 'layout', {
-			nativeEvent: {
-				layout: {
-					width: 300,
-				},
-			},
-		} );
-
-		// Add Paragraph block
-		await addBlock( screen, 'Paragraph' );
-
-		// Check there's only one active social link
-		const socialLinks =
-			within( socialLinksBlock ).getAllByLabelText( / social icon/ );
-		expect( socialLinks.length ).toBe( 1 );
-
-		// Check the WordPress link is shown when unselected
-		const firstLinkBlock = await getBlock( screen, 'Social Icon' );
-		fireEvent.press( firstLinkBlock );
-		const firstLink = within( socialLinksBlock ).getByAccessibilityHint(
-			/WordPress has URL set/
-		);
-		expect( firstLink ).toBeVisible();
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'shows the social links bottom sheet when tapping on the inline appender', async () => {
-		await initializeEditor();
-
-		// Add block
-		await addBlock( screen, 'Social Icons' );
-
-		// Get block
-		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
-		fireEvent.press( socialLinksBlock );
-
-		// Trigger inner blocks layout
-		const innerBlockListWrapper = await waitFor( () =>
-			within( socialLinksBlock ).getByTestId( 'block-list-wrapper' )
-		);
-		fireEvent( innerBlockListWrapper, 'layout', {
-			nativeEvent: {
-				layout: {
-					width: 300,
-				},
-			},
-		} );
-
-		// Open the links bottom sheet
-		const appenderButton =
-			within( socialLinksBlock ).getByTestId( 'appender-button' );
-		fireEvent.press( appenderButton );
-
-		// Find a social link in the inserter
-		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 },
-			},
-		} );
-
-		// Add the Amazon link
-		const amazonBlock = await screen.findByText( 'Amazon' );
-		expect( amazonBlock ).toBeVisible();
-
-		fireEvent.press( amazonBlock );
-
-		await screen.findByTestId( 'navigation-screen-LinkSettingsScreen' );
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'shows only the social link blocks when tapping on the inline appender', async () => {
-		await initializeEditor();
-
-		// Add block
-		await addBlock( screen, 'Social Icons' );
-
-		// Get block
-		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
-		fireEvent.press( socialLinksBlock );
-		await triggerBlockListLayout( socialLinksBlock );
-
-		// Open the links bottom sheet
-		const appenderButton =
-			within( socialLinksBlock ).getByTestId( 'appender-button' );
-		fireEvent.press( appenderButton );
-
-		// Find a social link in the inserter
-		const inserterList = screen.getByTestId( 'InserterUI-Blocks' );
-
-		// onScroll event used to force the FlatList to render all items
-		fireEvent.scroll( inserterList, {
-			nativeEvent: {
-				contentOffset: { y: 0, x: 0 },
-				contentSize: { width: 100, height: 100 },
-				layoutMeasurement: { width: 100, height: 100 },
-			},
-		} );
-
-		// Check the Paragraph core block is not in the list
-		expect(
-			within( inserterList ).queryByLabelText( 'Paragraph block' )
-		).toBeNull();
-	} );
-
-	it( 'shows the ghost placeholder when no icon is active', async () => {
-		await initializeEditor();
-		const { getByLabelText } = screen;
-
-		// Add block
-		await addBlock( screen, 'Social Icons' );
-
-		// Get block
-		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
-
-		// Trigger inner blocks layout
-		const innerBlockListWrapper = await waitFor( () =>
-			within( socialLinksBlock ).getByTestId( 'block-list-wrapper' )
-		);
-		fireEvent( innerBlockListWrapper, 'layout', {
-			nativeEvent: {
-				layout: {
-					width: 300,
-				},
-			},
-		} );
-
-		// Get the first social link
-		const firstLinkBlock = await getBlock( screen, 'Social Icon' );
-		fireEvent.press( firstLinkBlock );
-
-		// Open block actions menu
-		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
-		fireEvent.press( blockActionsButton );
-
-		// Delete the social link
-		const deleteButton = getByLabelText( /Remove block/ );
-		fireEvent.press( deleteButton );
-
-		// Add Paragraph block
-		await addBlock( screen, 'Paragraph' );
-
-		// Check the ghost placeholders are visible
-		const socialLinks = within( socialLinksBlock ).getAllByTestId(
-			'social-links-placeholder'
-		);
-		expect( socialLinks.length ).toBe( 3 );
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( "should set a icon's URL", async () => {
-		await initializeEditor();
-		await addBlock( screen, 'Social Icons' );
-		fireEvent.press( screen.getByLabelText( 'Facebook social icon' ) );
-		fireEvent.press( screen.getByLabelText( 'Add link to Facebook' ) );
-
-		await waitForModalVisible(
-			screen.getByTestId( 'link-settings-navigation' )
-		);
-		fireEvent.changeText(
-			screen.getByPlaceholderText( 'Add URL' ),
-			'https://facebook.com'
-		);
-		dismissModal( screen.getByTestId( 'link-settings-navigation' ) );
-
-		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-		"<!-- wp:social-links -->
-		<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
-
-		<!-- wp:social-link {"url":"https://facebook.com","service":"facebook","label":"","rel":""} /-->
-
-		<!-- wp:social-link {"service":"twitter"} /-->
-
-		<!-- wp:social-link {"service":"instagram"} /--></ul>
-		<!-- /wp:social-links -->"
-	` );
-	} );
-} );

package/src/social-links/test/transforms.native.js

@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-import { Animated } from 'react-native';
-
-const block = 'Social Icons';
-const initialHtml = `
-<!-- wp:social-links -->
-<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
-<!-- wp:social-link {"service":"facebook"} /-->
-<!-- wp:social-link {"service":"twitter"} /-->
-<!-- wp:social-link {"service":"instagram"} /--></ul>
-<!-- /wp:social-links -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ ...transformsWithInnerBlocks ];
-
-setupCoreBlocks();
-
-describe( `${ block } block transforms`, () => {
-	beforeAll( () => {
-		// Mock call to Animated.sequence for animating colors.
-		jest.spyOn( Animated, 'sequence' ).mockImplementation( () => ( {
-			start: ( cb ) => cb(),
-		} ) );
-	} );
-
-	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/spacer/controls.native.js

@@ -1,86 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PanelBody,
-	UnitControl,
-	getValueAndUnit,
-	__experimentalUseCustomUnits as useCustomUnits,
-} from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { useSettings } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { MIN_SPACER_SIZE } from './constants';
-import styles from './style.scss';
-
-export const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };
-
-function Controls( {
-	attributes,
-	context,
-	setAttributes,
-	presetWidth,
-	presetHeight,
-} ) {
-	const { orientation } = context;
-	const label = orientation !== 'horizontal' ? __( 'Height' ) : __( 'Width' );
-
-	const width = presetWidth || attributes.width;
-	const height = presetHeight || attributes.height;
-	const { valueToConvert, valueUnit: unit } =
-		getValueAndUnit( orientation !== 'horizontal' ? height : width ) || {};
-	const value = Number( valueToConvert );
-	const currentUnit = unit || 'px';
-
-	const setNewDimensions = ( nextValue, nextUnit ) => {
-		const valueWithUnit = `${ nextValue }${ nextUnit }`;
-		if ( orientation === 'horizontal' ) {
-			setAttributes( { width: valueWithUnit } );
-		} else {
-			setAttributes( { height: valueWithUnit } );
-		}
-	};
-
-	const handleChange = useCallback(
-		( nextValue ) => {
-			setNewDimensions( nextValue, currentUnit );
-		},
-		[ height, width ]
-	);
-
-	const handleUnitChange = useCallback(
-		( nextUnit ) => {
-			setNewDimensions( value, nextUnit );
-		},
-		[ height, width ]
-	);
-
-	const [ availableUnits ] = useSettings( 'spacing.units' );
-	const units = useCustomUnits( {
-		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
-		defaultValues: DEFAULT_VALUES,
-	} );
-
-	return (
-		<>
-			<PanelBody title={ __( 'Dimensions' ) }>
-				<UnitControl
-					label={ label }
-					min={ MIN_SPACER_SIZE }
-					value={ value }
-					onChange={ handleChange }
-					onUnitChange={ handleUnitChange }
-					units={ units }
-					unit={ currentUnit }
-					style={ styles.rangeCellContainer }
-				/>
-			</PanelBody>
-		</>
-	);
-}
-
-export default Controls;

package/src/spacer/edit.native.js

@@ -1,110 +0,0 @@
-/**
- * External dependencies
- */
-import { View, useWindowDimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	useConvertUnitToMobile,
-	getPxFromCssUnit,
-} from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import {
-	InspectorControls,
-	isValueSpacingPreset,
-	useSettings,
-	getCustomValueFromPreset,
-} from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Controls, { DEFAULT_VALUES } from './controls';
-import styles from './editor.native.scss';
-
-const DEFAULT_FONT_SIZE = 16;
-
-const Spacer = ( {
-	attributes,
-	context,
-	setAttributes,
-	isSelected,
-	getStylesFromColorScheme,
-} ) => {
-	const { height: screenHeight, width: screenWidth } = useWindowDimensions();
-	const cssUnitOptions = {
-		height: screenHeight,
-		width: screenWidth,
-		fontSize: DEFAULT_FONT_SIZE,
-	};
-	const { height, width } = attributes;
-	const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];
-	const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
-	if ( settingsSizes ) {
-		spacingSizes.push( ...settingsSizes );
-	}
-	const { orientation } = context;
-	const defaultStyle = getStylesFromColorScheme(
-		styles.staticSpacer,
-		styles.staticDarkSpacer
-	);
-
-	useEffect( () => {
-		if ( orientation === 'horizontal' && ! width ) {
-			setAttributes( {
-				height: '0px',
-				width: '72px',
-			} );
-		}
-	}, [] );
-
-	let convertedHeight = useConvertUnitToMobile( height );
-	let convertedWidth = useConvertUnitToMobile( width );
-	const presetValues = {};
-
-	if ( isValueSpacingPreset( height ) ) {
-		const heightValue = getCustomValueFromPreset( height, spacingSizes );
-		const parsedPresetHeightValue = parseFloat(
-			getPxFromCssUnit( heightValue, cssUnitOptions )
-		);
-
-		convertedHeight = parsedPresetHeightValue || DEFAULT_VALUES.px;
-		presetValues.presetHeight = convertedHeight;
-	}
-
-	if ( isValueSpacingPreset( width ) ) {
-		const widthValue = getCustomValueFromPreset( width, spacingSizes );
-		const parsedPresetWidthValue = parseFloat(
-			getPxFromCssUnit( widthValue, cssUnitOptions )
-		);
-
-		convertedWidth = parsedPresetWidthValue || DEFAULT_VALUES.px;
-		presetValues.presetWidth = convertedWidth;
-	}
-
-	return (
-		<View
-			style={ [
-				defaultStyle,
-				isSelected && styles.selectedSpacer,
-				{ height: convertedHeight, width: convertedWidth },
-			] }
-		>
-			{ isSelected && (
-				<InspectorControls>
-					<Controls
-						attributes={ attributes }
-						context={ context }
-						setAttributes={ setAttributes }
-						{ ...presetValues }
-					/>
-				</InspectorControls>
-			) }
-		</View>
-	);
-};
-
-export default withPreferredColorScheme( Spacer );

package/src/spacer/editor.native.scss

@@ -1,18 +0,0 @@
-.staticSpacer {
-	height: 20px;
-	background-color: transparent;
-	border: $border-width dashed $light-gray-500;
-	border-radius: 1px;
-}
-
-.staticDarkSpacer {
-	border: $border-width dashed rgba($color: $light-gray-500, $alpha: 0.3);
-}
-
-.selectedSpacer {
-	border: $border-width * 2 solid $blue-30;
-}
-
-.rangeCellContainer {
-	padding-bottom: 16px;
-}

package/src/spacer/save.native.js

@@ -1,18 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useBlockProps, getSpacingPresetCssVar } from '@wordpress/block-editor';
-
-export default function save( { attributes: { height, width } } ) {
-	return (
-		<div
-			{ ...useBlockProps.save( {
-				style: {
-					height: getSpacingPresetCssVar( height ),
-					width: getSpacingPresetCssVar( width ),
-				},
-				'aria-hidden': true,
-			} ) }
-		/>
-	);
-}

package/src/spacer/test/__snapshots__/index.native.js.snap

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Spacer block decrements height 1`] = `
-"<!-- wp:spacer {"height":"99px"} -->
-<div style="height:99px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;
-
-exports[`Spacer block increments height 1`] = `
-"<!-- wp:spacer {"height":"101px"} -->
-<div style="height:101px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;
-
-exports[`Spacer block inserts block 1`] = `
-"<!-- wp:spacer -->
-<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;
-
-exports[`Spacer block inserts block with spacingSizes preset 1`] = `
-"<!-- wp:spacer {"height":"70px"} -->
-<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;
-
-exports[`Spacer block inserts block with spacingSizes preset without matching global styles values 1`] = `
-"<!-- wp:spacer {"height":"120px"} -->
-<div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;
-
-exports[`Spacer block updates height to 25vh 1`] = `
-"<!-- wp:spacer {"height":"25vh"} -->
-<div style="height:25vh" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;
-
-exports[`Spacer block updates height to 50px 1`] = `
-"<!-- wp:spacer {"height":"50px"} -->
-<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;

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

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