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

package/src/tabs/use-tab-list-sync.js

@@ -1,237 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Keep tabs and tab panels in sync when the lists change due to direct
- * user actions (deletion, paste, duplicate, drag-and-drop).
- *
- * Deletion: when one side shrinks, remove the counterpart at the same index.
- * Insertion: when one side grows without the other, insert the missing
- * counterpart at the matching index.
- *
- * When both lists change simultaneously (e.g. the "Add Tab" toolbar button,
- * which inserts both at once), no action is needed and the effect exits early.
- *
- * @param {Object}      props
- * @param {Array}       props.tabs              Raw core/tab block objects.
- * @param {Array}       props.tabPanels         Raw core/tab-panel block objects.
- * @param {string|null} props.tabPanelsClientId Client ID of the core/tab-panels block.
- * @param {string|null} props.tabsListClientId  Client ID of the core/tab-list block.
- */
-export default function useTabListSync( {
-	tabPanels,
-	tabs,
-	tabPanelsClientId,
-	tabsListClientId,
-} ) {
-	const {
-		removeBlock,
-		insertBlocks,
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
-
-	const prevSyncStateRef = useRef( null );
-	useEffect( () => {
-		if ( prevSyncStateRef.current === null ) {
-			prevSyncStateRef.current = {
-				tabPanels: [ ...tabPanels ],
-				tabs: [ ...tabs ],
-			};
-			return;
-		}
-
-		const { tabPanels: prevTabPanels, tabs: prevTabs } =
-			prevSyncStateRef.current;
-
-		const tabPanelCountChange = tabPanels.length - prevTabPanels.length;
-		const tabCountChange = tabs.length - prevTabs.length;
-
-		const tabPanelsInserted = tabPanelCountChange > 0;
-		const tabsInserted = tabCountChange > 0;
-
-		// Both sides changed by the same amount.
-		// Covers: no-op re-renders, "Add Tab" toolbar, and toolbar-remove.
-		// Also handles drag-and-drop reordering of tabs.
-		if ( tabPanelCountChange === tabCountChange ) {
-			// When lengths are equal but order changed, the user reordered tabs
-			// via drag-and-drop. Reorder the tab panel blocks to match.
-			if (
-				tabPanelCountChange === 0 &&
-				tabPanelsClientId &&
-				tabs.some( ( m, i ) => m.clientId !== prevTabs[ i ]?.clientId )
-			) {
-				const reorderedTabPanels = tabs
-					.map( ( tab ) => {
-						const oldIndex = prevTabs.findIndex(
-							( pm ) => pm.clientId === tab.clientId
-						);
-						return oldIndex !== -1 ? tabPanels[ oldIndex ] : null;
-					} )
-					.filter( Boolean );
-				if ( reorderedTabPanels.length === tabPanels.length ) {
-					__unstableMarkNextChangeAsNotPersistent();
-					replaceInnerBlocks(
-						tabPanelsClientId,
-						reorderedTabPanels,
-						false
-					);
-				}
-			}
-			prevSyncStateRef.current = {
-				tabPanels: [ ...tabPanels ],
-				tabs: [ ...tabs ],
-			};
-			return;
-		}
-
-		// Both sides changed in the same direction but by different amounts.
-		// Bail without making a partial fix.
-		if (
-			( tabPanelCountChange > 0 && tabCountChange > 0 ) ||
-			( tabPanelCountChange < 0 && tabCountChange < 0 )
-		) {
-			prevSyncStateRef.current = {
-				tabPanels: [ ...tabPanels ],
-				tabs: [ ...tabs ],
-			};
-			return;
-		}
-
-		// If the required container block isn't available yet, bail without
-		// updating the snapshot so the next render re-evaluates the same count change.
-		if ( tabPanelsInserted && ! tabsListClientId ) {
-			return;
-		}
-		if ( tabsInserted && ! tabPanelsClientId ) {
-			return;
-		}
-
-		// Update snapshot to the current state.
-		prevSyncStateRef.current = {
-			tabPanels: [ ...tabPanels ],
-			tabs: [ ...tabs ],
-		};
-
-		const currentTabPanelIds = new Set(
-			tabPanels.map( ( t ) => t.clientId )
-		);
-		const currentTabIds = new Set( tabs.map( ( m ) => m.clientId ) );
-
-		if ( tabPanelCountChange < 0 ) {
-			// Remove the tab at the same position as each deleted tab panel.
-			const removedIndices = prevTabPanels
-				.map( ( t, i ) =>
-					! currentTabPanelIds.has( t.clientId ) ? i : -1
-				)
-				.filter( ( i ) => i !== -1 );
-			const removedSet = new Set( removedIndices );
-			removedIndices.forEach( ( removedIndex ) => {
-				if ( tabs[ removedIndex ] ) {
-					__unstableMarkNextChangeAsNotPersistent();
-					removeBlock( tabs[ removedIndex ].clientId, false );
-				}
-			} );
-			prevSyncStateRef.current.tabs =
-				prevSyncStateRef.current.tabs.filter(
-					( _, i ) => ! removedSet.has( i )
-				);
-		} else if ( tabCountChange < 0 ) {
-			// Remove the tab panel at the same position as each deleted tab.
-			const removedIndices = prevTabs
-				.map( ( m, i ) =>
-					! currentTabIds.has( m.clientId ) ? i : -1
-				)
-				.filter( ( i ) => i !== -1 );
-			const removedSet = new Set( removedIndices );
-			removedIndices.forEach( ( removedIndex ) => {
-				if ( tabPanels[ removedIndex ] ) {
-					__unstableMarkNextChangeAsNotPersistent();
-					removeBlock( tabPanels[ removedIndex ].clientId, false );
-				}
-			} );
-			prevSyncStateRef.current.tabPanels =
-				prevSyncStateRef.current.tabPanels.filter(
-					( _, i ) => ! removedSet.has( i )
-				);
-		} else if ( tabPanelsInserted ) {
-			// A tab panel was pasted or duplicated — insert a matching tab.
-			const prevTabPanelIds = new Set(
-				prevTabPanels.map( ( t ) => t.clientId )
-			);
-			const newTabs = tabPanels
-				.map( ( tabPanel, tabPanelIndex ) =>
-					! prevTabPanelIds.has( tabPanel.clientId )
-						? {
-								tabPanelIndex,
-								block: createBlock( 'core/tab', {} ),
-						  }
-						: null
-				)
-				.filter( Boolean );
-
-			if ( newTabs.length > 0 ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				insertBlocks(
-					newTabs.map( ( { block } ) => block ),
-					newTabs[ 0 ].tabPanelIndex,
-					tabsListClientId,
-					false
-				);
-				newTabs.forEach( ( { tabPanelIndex, block } ) => {
-					prevSyncStateRef.current.tabs.splice( tabPanelIndex, 0, {
-						clientId: block.clientId,
-					} );
-				} );
-			}
-		} else if ( tabsInserted ) {
-			// A tab was pasted or duplicated — insert a matching tab panels,
-			// copying the label from the adjacent tab panel.
-			const prevTabIds = new Set( prevTabs.map( ( m ) => m.clientId ) );
-			const newTabPanels = tabs
-				.map( ( tab, tabIndex ) => {
-					if ( prevTabIds.has( tab.clientId ) ) {
-						return null;
-					}
-					const label =
-						tabPanels[ tabIndex - 1 ]?.attributes?.label ??
-						tabPanels[ tabIndex ]?.attributes?.label ??
-						'';
-					return {
-						tabIndex,
-						block: createBlock( 'core/tab-panel', { label } ),
-					};
-				} )
-				.filter( Boolean );
-
-			if ( newTabPanels.length > 0 ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				insertBlocks(
-					newTabPanels.map( ( { block } ) => block ),
-					newTabPanels[ 0 ].tabIndex,
-					tabPanelsClientId,
-					false
-				);
-				newTabPanels.forEach( ( { tabIndex, block } ) => {
-					prevSyncStateRef.current.tabPanels.splice( tabIndex, 0, {
-						clientId: block.clientId,
-					} );
-				} );
-			}
-		}
-	}, [
-		tabPanels,
-		tabs,
-		removeBlock,
-		insertBlocks,
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-		tabsListClientId,
-		tabPanelsClientId,
-	] );
-}

package/src/text-columns/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.grouped,
-};
-
-export default transforms;

package/src/utils/init-block.native.js

@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { registerBlockType } from '@wordpress/blocks';
-
-const ALLOWED_BLOCKS_GRADIENT_SUPPORT = [ 'core/button' ];
-
-/**
- * Function to register an individual block.
- *
- * @param {Object} block The block to be registered.
- *
- * @return {WPBlockType | undefined} The block, if it has been successfully registered;
- *                        otherwise `undefined`.
- */
-export default function initBlock( block ) {
-	if ( ! block ) {
-		return;
-	}
-	const { metadata, settings, name } = block;
-	const { supports } = metadata;
-
-	return registerBlockType(
-		{
-			name,
-			...metadata,
-			// Gradients support only available for blocks listed in ALLOWED_BLOCKS_GRADIENT_SUPPORT.
-			...( ! ALLOWED_BLOCKS_GRADIENT_SUPPORT.includes( name ) &&
-			supports?.color?.gradients
-				? {
-						supports: {
-							...supports,
-							color: { ...supports.color, gradients: false },
-						},
-				  }
-				: {} ),
-		},
-		settings
-	);
-}

package/src/utils/transformation-categories.native.js

@@ -1,47 +0,0 @@
-const transformationCategories = {
-	richText: [
-		'core/paragraph',
-		'core/heading',
-		'core/list',
-		'core/list-item',
-		'core/quote',
-		'core/pullquote',
-		'core/preformatted',
-		'core/verse',
-		'core/shortcode',
-		'core/code',
-	],
-	media: [
-		'core/image',
-		'core/video',
-		'core/gallery',
-		'core/cover',
-		'core/file',
-		'core/audio',
-		'core/media-text',
-		'core/embed',
-	],
-	grouped: [ 'core/columns', 'core/group', 'core/text-columns' ],
-	other: [
-		'core/more',
-		'core/nextpage',
-		'core/separator',
-		'core/spacer',
-		'core/latest-posts',
-		'core/buttons',
-	],
-};
-
-export const transformationCategory = ( blockName ) => {
-	const found = Object.entries( transformationCategories ).find(
-		( [ , value ] ) => value.includes( blockName )
-	);
-	if ( ! found ) {
-		return [];
-	}
-
-	const group = found[ 0 ];
-	return transformationCategories[ group ];
-};
-
-export default transformationCategories;

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

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verse block inserts block 1`] = `
-"<!-- wp:verse -->
-<pre class="wp-block-verse"></pre>
-<!-- /wp:verse -->"
-`;
-
-exports[`Verse block renders block text set as initial content 1`] = `
-"<!-- wp:verse -->
-<pre class="wp-block-verse">Sample text</pre>
-<!-- /wp:verse -->"
-`;

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

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verse 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:verse {"textAlign":"center"} -->
-<pre class="wp-block-verse has-text-align-center">Come<br />Home.</pre>
-<!-- /wp:verse --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Verse block transforms to Group block 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:verse {"textAlign":"center"} -->
-<pre class="wp-block-verse has-text-align-center">Come<br />Home.</pre>
-<!-- /wp:verse --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Verse block transforms to Paragraph block 1`] = `
-"<!-- wp:paragraph -->
-<p>Come<br />Home.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Verse block transforms to Preformatted block 1`] = `
-"<!-- wp:preformatted -->
-<pre class="wp-block-preformatted">Come<br />Home.</pre>
-<!-- /wp:preformatted -->"
-`;

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

@@ -1,118 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	getEditorHtml,
-	initializeEditor,
-	getBlock,
-	typeInRichText,
-	fireEvent,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { ENTER } from '@wordpress/keycodes';
-import { registerCoreBlocks } from '@wordpress/block-library';
-
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
-
-describe( 'Verse block', () => {
-	it( 'inserts block', async () => {
-		const screen = await initializeEditor();
-
-		// Add block
-		await addBlock( screen, 'Poetry' );
-
-		// Get block
-		const verseBlock = await getBlock( screen, 'Poetry' );
-		expect( verseBlock ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'renders block text set as initial content', async () => {
-		const screen = await initializeEditor( {
-			initialHtml: `<!-- wp:verse -->
-			<pre class="wp-block-verse">Sample text</pre>
-			<!-- /wp:verse -->`,
-		} );
-
-		// Get block
-		const verseBlock = await getBlock( screen, 'Poetry' );
-		expect( verseBlock ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'should produce expected markup for multiline text', async () => {
-		// Arrange
-		const screen = await initializeEditor();
-		await addBlock( screen, 'Poetry' );
-
-		// Act
-		const verseTextInput =
-			await screen.findByPlaceholderText( 'Write verse…' );
-		typeInRichText( verseTextInput, 'A great statement.' );
-		fireEvent( verseTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-		typeInRichText( verseTextInput, 'Again' );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-		"<!-- wp:verse -->
-		<pre class="wp-block-verse">A great statement.<br>Again</pre>
-		<!-- /wp:verse -->"
-	` );
-	} );
-
-	it( 'should split on triple Enter', async () => {
-		// Arrange
-		const screen = await initializeEditor();
-		await addBlock( screen, 'Poetry' );
-
-		// Act
-		const verseTextInput =
-			await screen.findByPlaceholderText( 'Write verse…' );
-		typeInRichText( verseTextInput, 'Hello' );
-		fireEvent( verseTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-		fireEvent( verseTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-		fireEvent( verseTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-		"<!-- wp:verse -->
-		<pre class="wp-block-verse">Hello</pre>
-		<!-- /wp:verse -->
-
-		<!-- wp:paragraph -->
-		<p></p>
-		<!-- /wp:paragraph -->"
-	` );
-	} );
-} );

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

@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Poetry';
-const initialHtml = `
-<!-- wp:verse {"textAlign":"center"} -->
-<pre class="wp-block-verse has-text-align-center">Come<br>Home.</pre>
-<!-- /wp:verse -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [
-	'Paragraph',
-	'Preformatted',
-	...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/verse/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;