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

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

@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Gallery';
-const initialHtml = `
-<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
-<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
-<!-- /wp:image -->
-
-<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
-<!-- /wp:image -->
-
-<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
-<!-- /wp:image --></figure>
-<!-- /wp:gallery -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'Image', ...transformsWithInnerBlocks ];
-
-setupCoreBlocks();
-
-describe( `${ block } block transformations`, () => {
-	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
-		const screen = await initializeEditor( { initialHtml } );
-		const newBlock = await transformBlock( screen, block, blockTransform, {
-			isMediaBlock: true,
-			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/gallery/test/use-get-media.native.js

@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-
-/**
- * Internal dependencies
- */
-import useGetMedia from '../use-get-media';
-
-describe( 'useGetMedia', () => {
-	// TODO: Explore why a Gallery block would ever be without inner blocks.
-	// This test and the associated default function parameter might be unnecessary.
-	it( 'should not error when receiving zero images', () => {
-		// Arrange
-		const TestSubject = () => {
-			useGetMedia( undefined );
-			return null;
-		};
-
-		// Assert
-		expect( () => render( <TestSubject /> ) ).not.toThrow();
-	} );
-} );

package/src/gallery/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.media,
-};
-
-export default transforms;

package/src/gallery/use-get-media.native.js

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-const EMPTY_IMAGE_MEDIA = [];
-
-/**
- * Retrieves the extended media info for each gallery image from the store. This is used to
- * determine which image size options are available for the current gallery.
- *
- * @param {Array} innerBlockImages An array of the innerBlock images currently in the gallery.
- *
- * @return {Array} An array of media info options for each gallery image.
- */
-export default function useGetMedia( innerBlockImages = [] ) {
-	return useSelect(
-		( select ) => {
-			const imagesUploading = innerBlockImages.some(
-				( { attributes } ) => attributes?.url?.indexOf( 'file:' ) === 0
-			);
-			const imageIds = innerBlockImages
-				.filter( ( { attributes } ) => {
-					const { id, url } = attributes;
-					return id !== undefined && url?.indexOf( 'file:' ) !== 0;
-				} )
-				.map( ( imageBlock ) => imageBlock.attributes.id );
-
-			if ( imageIds.length === 0 || imagesUploading ) {
-				return EMPTY_IMAGE_MEDIA;
-			}
-
-			return (
-				select( coreStore ).getEntityRecords(
-					'postType',
-					'attachment',
-					{
-						include: imageIds.join( ',' ),
-						per_page:
-							imageIds.length /* 'hard' limit necessary as unbounded queries aren't supported on native */,
-						orderby: 'include',
-					}
-				) ?? EMPTY_IMAGE_MEDIA
-			);
-		},
-		[ innerBlockImages ]
-	);
-}

package/src/group/edit.native.js

@@ -1,137 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withSelect } from '@wordpress/data';
-import {
-	compose,
-	withPreferredColorScheme,
-	useResizeObserver,
-} from '@wordpress/compose';
-import {
-	InnerBlocks,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useCallback } from '@wordpress/element';
-import { alignmentHelpers } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import styles from './editor.scss';
-
-const { isFullWidth } = alignmentHelpers;
-
-function GroupEdit( {
-	attributes,
-	hasInnerBlocks,
-	isSelected,
-	isLastInnerBlockSelected,
-	getStylesFromColorScheme,
-	style,
-	blockWidth,
-} ) {
-	const { align } = attributes;
-	const [ resizeObserver, sizes ] = useResizeObserver();
-	const { width } = sizes || { width: 0 };
-
-	const renderAppender = useCallback(
-		() => (
-			<View
-				style={ [
-					! hasInnerBlocks && styles.groupAppender,
-					isFullWidth( align ) &&
-						! hasInnerBlocks &&
-						styles.fullwidthGroupAppender,
-					isFullWidth( align ) &&
-						hasInnerBlocks &&
-						styles.fullwidthHasInnerGroupAppender,
-				] }
-			>
-				<InnerBlocks.ButtonBlockAppender />
-			</View>
-		),
-		[ align, hasInnerBlocks ]
-	);
-
-	if ( ! isSelected && ! hasInnerBlocks ) {
-		return (
-			<View
-				style={ [
-					getStylesFromColorScheme(
-						styles.groupPlaceholder,
-						styles.groupPlaceholderDark
-					),
-					! hasInnerBlocks && {
-						...styles.marginVerticalDense,
-						...styles.marginHorizontalNone,
-					},
-				] }
-			/>
-		);
-	}
-
-	return (
-		<View
-			style={ [
-				isSelected && hasInnerBlocks && styles.innerBlocks,
-				style,
-				isSelected &&
-					hasInnerBlocks &&
-					style?.backgroundColor &&
-					styles.hasBackgroundAppender,
-				isLastInnerBlockSelected &&
-					style?.backgroundColor &&
-					styles.isLastInnerBlockSelected,
-			] }
-		>
-			{ resizeObserver }
-			<InnerBlocks
-				renderAppender={ isSelected && renderAppender }
-				parentWidth={ width }
-				blockWidth={ blockWidth }
-			/>
-		</View>
-	);
-}
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlock,
-			getBlockIndex,
-			hasSelectedInnerBlock,
-			getBlockRootClientId,
-			getSelectedBlockClientId,
-			getBlockAttributes,
-		} = select( blockEditorStore );
-
-		const block = getBlock( clientId );
-		const hasInnerBlocks = !! ( block && block.innerBlocks.length );
-		const isInnerBlockSelected =
-			hasInnerBlocks && hasSelectedInnerBlock( clientId, true );
-		let isLastInnerBlockSelected = false;
-
-		if ( isInnerBlockSelected ) {
-			const { innerBlocks } = block;
-			const selectedBlockClientId = getSelectedBlockClientId();
-			const totalInnerBlocks = innerBlocks.length - 1;
-			const blockIndex = getBlockIndex( selectedBlockClientId );
-			isLastInnerBlockSelected = totalInnerBlocks === blockIndex;
-		}
-
-		const parentId = getBlockRootClientId( clientId );
-		const parentBlockAlignment = getBlockAttributes( parentId )?.align;
-
-		return {
-			hasInnerBlocks,
-			isLastInnerBlockSelected,
-			parentBlockAlignment,
-		};
-	} ),
-	withPreferredColorScheme,
-] )( GroupEdit );

package/src/group/editor.native.scss

@@ -1,56 +0,0 @@
-.groupPlaceholder {
-	padding: $block-selected-to-content;
-	margin: $block-edge-to-content;
-	margin-left: $block-selected-child-margin;
-	margin-right: $block-selected-child-margin;
-	background-color: $white;
-	border: $border-width dashed $gray;
-	border-radius: 4px;
-}
-
-.groupPlaceholderDark {
-	background-color: $black;
-	border: $border-width dashed $gray-70;
-}
-
-.marginVerticalDense {
-	margin-top: $block-selected-child-margin;
-	margin-bottom: $block-selected-child-margin;
-}
-
-.marginHorizontalNone {
-	margin-left: 0;
-	margin-right: 0;
-}
-
-.innerBlocks {
-	margin-bottom: $block-edge-to-content;
-}
-
-.fullWidth {
-	margin-left: $block-edge-to-content;
-	margin-right: $block-edge-to-content;
-}
-
-.groupAppender {
-	margin-left: $grid-unit-10;
-	margin-right: $grid-unit-10;
-}
-
-.fullwidthGroupAppender {
-	margin-left: $grid-unit * 2.5;
-	margin-right: $grid-unit * 2.5;
-}
-
-.fullwidthHasInnerGroupAppender {
-	margin-left: $grid-unit-15;
-	margin-right: $grid-unit-15;
-}
-
-.hasBackgroundAppender {
-	padding-bottom: $grid-unit-30;
-}
-
-.isLastInnerBlockSelected {
-	padding-bottom: 0;
-}

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

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Group block inserts block and adds a Heading block as an inner block 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:heading -->
-<h2 class="wp-block-heading"></h2>
-<!-- /wp:heading --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Group block ungroups inner blocks 1`] = `
-"<!-- wp:image -->
-<figure class="wp-block-image"><img alt=""/></figure>
-<!-- /wp:image -->
-
-<!-- wp:spacer -->
-<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;

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

@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Group 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:group {"anchor":"this-is-another-anchor"} -->
-<div id="this-is-another-anchor" class="wp-block-group"><!-- wp:paragraph -->
-<p>One.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Two</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Three.</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Group block transforms ungroups block 1`] = `
-"<!-- wp:paragraph -->
-<p>One.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Two</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Three.</p>
-<!-- /wp:paragraph -->"
-`;

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

@@ -1,100 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	fireEvent,
-	getEditorHtml,
-	initializeEditor,
-	within,
-	getBlock,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
-
-const NESTED_GROUP_BLOCK = `<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:image -->
-<figure class="wp-block-image"><img alt=""/></figure>
-<!-- /wp:image -->
-<!-- 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 --></div>
-<!-- /wp:group -->`;
-
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
-
-describe( 'Group block', () => {
-	it( 'inserts block and adds a Heading block as an inner block', async () => {
-		const screen = await initializeEditor();
-
-		// Add block
-		await addBlock( screen, 'Group' );
-
-		// Get block
-		const groupBlock = await getBlock( screen, 'Group' );
-		fireEvent.press( groupBlock );
-
-		// Append a block in the Group block
-		const appenderButton =
-			within( groupBlock ).getByTestId( 'appender-button' );
-		fireEvent.press( appenderButton );
-
-		// Look for a block 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 a block
-		fireEvent.press( await screen.findByText( 'Heading' ) );
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'ungroups inner blocks', async () => {
-		const screen = await initializeEditor( {
-			initialHtml: NESTED_GROUP_BLOCK,
-		} );
-		const { getByLabelText } = screen;
-
-		// Get block
-		let groupBlock = await getBlock( screen, 'Group' );
-		fireEvent.press( groupBlock );
-
-		// Get Ungroup button
-		let ungroupButton = getByLabelText( /Ungroup/ );
-		fireEvent.press( ungroupButton );
-
-		// Press Group block again
-		groupBlock = await getBlock( screen, 'Group', { rowIndex: 2 } );
-		fireEvent.press( groupBlock );
-
-		// Ungroup last block
-		ungroupButton = getByLabelText( /Ungroup/ );
-		fireEvent.press( ungroupButton );
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-} );

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

@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlock,
-	openBlockActionsMenu,
-	fireEvent,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Group';
-const initialHtml = `
-<!-- wp:group -->
-<div id="this-is-another-anchor" class="wp-block-group"><!-- wp:paragraph -->
-<p>One.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Two</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Three.</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->`;
-
-const transformsWithInnerBlocks = [ 'Columns' ];
-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( 'ungroups block', async () => {
-		const screen = await initializeEditor( { initialHtml } );
-		const { getByText } = screen;
-		fireEvent.press( getBlock( screen, block ) );
-
-		await openBlockActionsMenu( screen );
-		fireEvent.press( getByText( 'Ungroup' ) );
-
-		// The first block created is the content of the Paragraph block.
-		const paragraph = getBlock( screen, 'Paragraph', 0 );
-		expect( paragraph ).toBeVisible();
-		// The second block created is the content of the citation element.
-		const citation = getBlock( screen, 'Paragraph', 1 );
-		expect( citation ).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 );
-	} );
-} );