@wordpress/block-library 9.48.0 → 9.48.1

package/src/heading/edit.native.js

@@ -1,159 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useEffect, Platform } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-import {
-	AlignmentControl,
-	BlockControls,
-	RichText,
-	useBlockProps,
-	store as blockEditorStore,
-	HeadingLevelDropdown,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { generateAnchor, setAnchor } from './autogenerate-anchors';
-
-function HeadingEdit( {
-	attributes,
-	setAttributes,
-	mergeBlocks,
-	onReplace,
-	style,
-	clientId,
-} ) {
-	const {
-		content,
-		level,
-		placeholder,
-		anchor,
-		style: attributesStyle,
-	} = attributes;
-	const textAlign = attributesStyle?.typography?.textAlign;
-	const tagName = 'h' + level;
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-		style,
-	} );
-
-	const { canGenerateAnchors } = useSelect( ( select ) => {
-		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-
-		return {
-			canGenerateAnchors:
-				!! settings.generateAnchors ||
-				getGlobalBlockCount( 'core/table-of-contents' ) > 0,
-		};
-	}, [] );
-
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
-
-	// Initially set anchor for headings that have content but no anchor set.
-	// This is used when transforming a block to heading, or for legacy anchors.
-	useEffect( () => {
-		if ( ! canGenerateAnchors ) {
-			return;
-		}
-
-		if ( ! anchor && content ) {
-			// This side-effect should not create an undo level.
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( {
-				anchor: generateAnchor( clientId, content ),
-			} );
-		}
-		setAnchor( clientId, anchor );
-
-		// Remove anchor map when block unmounts.
-		return () => setAnchor( clientId, null );
-	}, [ anchor, content, clientId, canGenerateAnchors ] );
-
-	const onContentChange = ( value ) => {
-		const newAttrs = { content: value };
-		if (
-			canGenerateAnchors &&
-			( ! anchor ||
-				! value ||
-				generateAnchor( clientId, content ) === anchor )
-		) {
-			newAttrs.anchor = generateAnchor( clientId, value );
-		}
-		setAttributes( newAttrs );
-	};
-
-	return (
-		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					value={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( {
-							style: {
-								...attributesStyle,
-								typography: {
-									...attributesStyle?.typography,
-									textAlign: nextAlign,
-								},
-							},
-						} );
-					} }
-				/>
-			</BlockControls>
-			<RichText
-				identifier="content"
-				tagName={ tagName }
-				value={ content }
-				onChange={ onContentChange }
-				onMerge={ mergeBlocks }
-				onSplit={ ( value, isOriginal ) => {
-					let block;
-
-					if ( isOriginal || value ) {
-						block = createBlock( 'core/heading', {
-							...attributes,
-							content: value,
-						} );
-					} else {
-						block = createBlock(
-							getDefaultBlockName() ?? 'core/heading'
-						);
-					}
-
-					if ( isOriginal ) {
-						block.clientId = clientId;
-					}
-
-					return block;
-				} }
-				onReplace={ onReplace }
-				onRemove={ () => onReplace( [] ) }
-				placeholder={ placeholder || __( 'Heading' ) }
-				textAlign={ textAlign }
-				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
-				{ ...blockProps }
-			/>
-		</>
-	);
-}
-
-export default HeadingEdit;

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

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Heading block changes heading level 1`] = `
-"<!-- wp:heading {"level":6} -->
-<h6 class="wp-block-heading"></h6>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading block inserts block 1`] = `
-"<!-- wp:heading -->
-<h2 class="wp-block-heading"></h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading block should keep the heading when there is an empty paragraph block before and backspace is pressed at the start 1`] = `
-"<!-- wp:heading -->
-<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading block should merge with an empty Paragraph block and keep being the Heading block 1`] = `
-"<!-- wp:heading -->
-<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading block should set a background color 1`] = `
-"<!-- wp:heading {"backgroundColor":"luminous-vivid-orange"} -->
-<h2 class="wp-block-heading has-luminous-vivid-orange-background-color has-background">A quick brown fox jumps over the lazy dog.</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading block should set a text color 1`] = `
-"<!-- wp:heading {"textColor":"pale-pink"} -->
-<h2 class="wp-block-heading has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading block should transform to a paragraph block when pressing backspace at the beginning of the first heading block 1`] = `
-"<!-- wp:paragraph -->
-<p>A quick brown fox jumps over the lazy dog.</p>
-<!-- /wp:paragraph -->"
-`;

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

@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Heading 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:heading -->
-<h2 class="wp-block-heading">Example text</h2>
-<!-- /wp:heading --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Heading block transforms to Group block 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:heading -->
-<h2 class="wp-block-heading">Example text</h2>
-<!-- /wp:heading --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Heading block transforms to List block 1`] = `
-"<!-- wp:list -->
-<ul class="wp-block-list"><!-- wp:list-item -->
-<li>Example text</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->"
-`;
-
-exports[`Heading block transforms to Paragraph block 1`] = `
-"<!-- wp:paragraph -->
-<p>Example text</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Heading block transforms to Pullquote block 1`] = `
-"<!-- wp:pullquote -->
-<figure class="wp-block-pullquote"><blockquote><p>Example text</p></blockquote></figure>
-<!-- /wp:pullquote -->"
-`;
-
-exports[`Heading block transforms to Quote block 1`] = `
-"<!-- wp:quote -->
-<blockquote class="wp-block-quote"><!-- wp:heading -->
-<h2 class="wp-block-heading">Example text</h2>
-<!-- /wp:heading --></blockquote>
-<!-- /wp:quote -->"
-`;

package/src/heading/test/index.native.js

@@ -1,257 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	fireEvent,
-	getBlock,
-	getEditorHtml,
-	initializeEditor,
-	screen,
-	typeInRichText,
-	waitFor,
-	within,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
-import { BACKSPACE, ENTER } from '@wordpress/keycodes';
-
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
-
-describe( 'Heading block', () => {
-	it( 'inserts block', async () => {
-		await initializeEditor();
-
-		// Add block
-		await addBlock( screen, 'Heading' );
-
-		// Get block
-		const headingBlock = getBlock( screen, 'Heading' );
-		fireEvent.press( headingBlock );
-		expect( headingBlock ).toBeVisible();
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'should set a text color', async () => {
-		// Arrange
-		await initializeEditor();
-		await addBlock( screen, 'Heading' );
-
-		// Act
-		const headingBlock = getBlock( screen, 'Heading' );
-		fireEvent.press( headingBlock );
-		const headingTextInput =
-			within( headingBlock ).getByPlaceholderText( 'Heading' );
-		typeInRichText(
-			headingTextInput,
-			'A quick brown fox jumps over the lazy dog.'
-		);
-		// Open Block Settings.
-		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
-
-		// Wait for Block Settings to be visible.
-		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
-
-		// Open Text color settings
-		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
-
-		// Tap one color
-		fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
-		// TODO(jest-console): Fix the warning and remove the expect below.
-		expect( console ).toHaveWarnedWith(
-			`Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
-		);
-
-		// Dismiss the Block Settings modal.
-		fireEvent( blockSettingsModal, 'backdropPress' );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'should set a background color', async () => {
-		// Arrange
-		await initializeEditor();
-		await addBlock( screen, 'Heading' );
-
-		// Act
-		const headingBlock = getBlock( screen, 'Heading' );
-		fireEvent.press( headingBlock );
-		const headingTextInput =
-			within( headingBlock ).getByPlaceholderText( 'Heading' );
-		typeInRichText(
-			headingTextInput,
-			'A quick brown fox jumps over the lazy dog.'
-		);
-		// Open Block Settings.
-		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
-
-		// Wait for Block Settings to be visible.
-		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
-
-		// Open Background color settings
-		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
-
-		// Tap one color
-		fireEvent.press( screen.getByLabelText( 'Luminous vivid orange' ) );
-
-		// Dismiss the Block Settings modal.
-		fireEvent( blockSettingsModal, 'backdropPress' );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'change level dropdown displays active selection', async () => {
-		// Arrange
-		await initializeEditor();
-		await addBlock( screen, 'Heading' );
-		const headingBlock = getBlock( screen, 'Heading' );
-
-		// Act
-		fireEvent.press( headingBlock );
-		fireEvent.press( screen.getByLabelText( 'Change level' ) );
-
-		// Assert
-		expect(
-			within( screen.getByLabelText( 'Heading 2' ) ).getByTestId(
-				'bottom-sheet-cell-selected-icon'
-			)
-		).toBeVisible();
-	} );
-
-	it( 'changes heading level', async () => {
-		// Arrange
-		await initializeEditor();
-		await addBlock( screen, 'Heading' );
-
-		// Act
-		fireEvent.press( getBlock( screen, 'Heading' ) );
-		fireEvent.press( screen.getByLabelText( 'Change level' ) );
-		fireEvent.press( screen.getByLabelText( 'Heading 6' ) );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'should merge with an empty Paragraph block and keep being the Heading block', async () => {
-		// Arrange
-		await initializeEditor();
-		await addBlock( screen, 'Paragraph' );
-
-		// Act
-		const paragraphBlock = getBlock( screen, 'Paragraph' );
-		fireEvent.press( paragraphBlock );
-
-		const paragraphTextInput =
-			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		fireEvent( paragraphTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-
-		await addBlock( screen, 'Heading' );
-		const headingBlock = getBlock( screen, 'Heading', { rowIndex: 2 } );
-		fireEvent.press( headingBlock );
-
-		const headingTextInput =
-			within( headingBlock ).getByPlaceholderText( 'Heading' );
-		typeInRichText(
-			headingTextInput,
-			'A quick brown fox jumps over the lazy dog.',
-			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
-		);
-
-		fireEvent( headingTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: BACKSPACE,
-		} );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'should transform to a paragraph block when pressing backspace at the beginning of the first heading block', async () => {
-		// Arrange
-		await initializeEditor();
-
-		// Act
-		await addBlock( screen, 'Heading' );
-		const headingBlock = getBlock( screen, 'Heading' );
-		fireEvent.press( headingBlock );
-
-		const headingTextInput =
-			within( headingBlock ).getByPlaceholderText( 'Heading' );
-		typeInRichText(
-			headingTextInput,
-			'A quick brown fox jumps over the lazy dog.',
-			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
-		);
-
-		fireEvent( headingTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: BACKSPACE,
-		} );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'should keep the heading when there is an empty paragraph block before and backspace is pressed at the start', async () => {
-		// Arrange
-		await initializeEditor();
-		await addBlock( screen, 'Paragraph' );
-
-		// Act
-		const paragraphBlock = getBlock( screen, 'Paragraph' );
-		fireEvent.press( paragraphBlock );
-		const paragraphTextInput =
-			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		fireEvent( paragraphTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-
-		await addBlock( screen, 'Heading' );
-		const headingBlock = getBlock( screen, 'Heading', { rowIndex: 2 } );
-		fireEvent.press( headingBlock );
-
-		const headingTextInput =
-			within( headingBlock ).getByPlaceholderText( 'Heading' );
-		typeInRichText(
-			headingTextInput,
-			'A quick brown fox jumps over the lazy dog.',
-			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
-		);
-
-		fireEvent( headingTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: BACKSPACE,
-		} );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-} );

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

@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Heading';
-const initialHtml = `
-<!-- wp:heading -->
-<h2 class="wp-block-heading">Example text</h2>
-<!-- /wp:heading -->`;
-
-const transformsWithInnerBlocks = [ 'List', 'Quote', 'Columns', 'Group' ];
-const blockTransforms = [
-	'Paragraph',
-	'Pullquote',
-	...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/heading/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;

package/src/html/transforms.native.js

@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import webTransforms from './transforms.js';
-
-const transforms = {
-	...webTransforms,
-	supportedMobileTransforms: [],
-};
-
-export default transforms;