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

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

@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Paragraph';
-const initialHtml = `
-<!-- wp:paragraph -->
-<p>Example text</p>
-<!-- /wp:paragraph -->`;
-
-// NOTE: Paragraph block can be transformed to Buttons block in web,
-// however this transform is not supported in the native version.
-const transformsWithInnerBlocks = [ 'List', 'Quote', 'Columns', 'Group' ];
-const blockTransforms = [
-	'Heading',
-	'Preformatted',
-	'Pullquote',
-	'Poetry',
-	'Code',
-	...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/paragraph/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/preformatted/edit.native.js

@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import WebPreformattedEdit from './edit.js';
-import styles from './styles.scss';
-
-export default function PreformattedEdit( props ) {
-	const { style } = props;
-
-	const textBaseStyle = usePreferredColorSchemeStyle(
-		styles.wpRichTextLight,
-		styles.wpRichTextDark
-	);
-	const wpBlockPreformatted = usePreferredColorSchemeStyle(
-		styles.wpBlockPreformattedLight,
-		styles.wpBlockPreformattedDark
-	);
-	const richTextStyle = {
-		...( ! style?.baseColors && textBaseStyle ),
-		...( style?.fontSize && { fontSize: style.fontSize } ),
-		...( style?.color && { color: style.color } ),
-	};
-	const containerStyles = [
-		wpBlockPreformatted,
-		style?.backgroundColor && { backgroundColor: style.backgroundColor },
-		style?.baseColors?.color &&
-			! style?.backgroundColor &&
-			styles[ 'wp-block-preformatted__no-background' ],
-	];
-
-	const propsWithStyle = {
-		...props,
-		style: richTextStyle,
-	};
-	return (
-		<View style={ containerStyles }>
-			<WebPreformattedEdit { ...propsWithStyle } />
-		</View>
-	);
-}

package/src/preformatted/styles.native.scss

@@ -1,30 +0,0 @@
-%wpBlockPreformattedLightColor {
-	background-color: $gray-light;
-}
-
-%wpBlockPreformattedDarkColor {
-	background-color: $gray-100;
-}
-
-.wpBlockPreformattedLight {
-	@extend %wpBlockPreformattedLightColor;
-	padding: 12px 16px;
-	border-radius: 4px;
-}
-
-.wpRichTextLight {
-	@extend %wpBlockPreformattedLightColor;
-}
-
-.wpBlockPreformattedDark {
-	@extend %wpBlockPreformattedDarkColor;
-}
-
-.wpRichTextDark {
-	@extend %wpBlockPreformattedDarkColor;
-}
-
-.wp-block-preformatted__no-background {
-	background: transparent;
-	padding: 0;
-}

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

@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Preformatted should match snapshot when content is empty 1`] = `
-<View
-  style={
-    [
-      undefined,
-      undefined,
-      undefined,
-    ]
-  }
->
-  <View
-    style={
-      [
-        undefined,
-        undefined,
-      ]
-    }
-  >
-    <TextInput
-      accessibilityLabel="Text input. Empty"
-      activeFormats={[]}
-      blockType={
-        {
-          "tag": "pre",
-        }
-      }
-      disableEditingMenu={false}
-      fontFamily="serif"
-      isMultiline={false}
-      maxImagesWidth={200}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onContentSizeChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onPaste={[Function]}
-      onSelectionChange={[Function]}
-      placeholder="Write preformatted text…"
-      placeholderTextColor="gray"
-      selectionColor="black"
-      triggerKeyCodes={[]}
-      value=""
-    />
-  </View>
-</View>
-`;
-
-exports[`Preformatted should match snapshot when content is not empty 1`] = `
-<View
-  style={
-    [
-      undefined,
-      undefined,
-      undefined,
-    ]
-  }
->
-  <View
-    style={
-      [
-        undefined,
-        undefined,
-      ]
-    }
-  >
-    <TextInput
-      accessibilityLabel="Text input. <pre>Hello World!</pre>"
-      activeFormats={[]}
-      blockType={
-        {
-          "tag": "pre",
-        }
-      }
-      disableEditingMenu={false}
-      fontFamily="serif"
-      isMultiline={false}
-      maxImagesWidth={200}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onContentSizeChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onPaste={[Function]}
-      onSelectionChange={[Function]}
-      placeholder="Write preformatted text…"
-      placeholderTextColor="gray"
-      selectionColor="black"
-      triggerKeyCodes={[]}
-      value="<pre>Hello World!</pre>"
-    />
-  </View>
-</View>
-`;

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

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

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

@@ -1,111 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	typeInRichText,
-	fireEvent,
-	getEditorHtml,
-	initializeEditor,
-	render,
-	setupCoreBlocks,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { ENTER } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import PreformattedEdit from '../edit';
-
-setupCoreBlocks();
-
-describe( 'Preformatted', () => {
-	it( 'should match snapshot when content is empty', () => {
-		const screen = render(
-			<PreformattedEdit
-				attributes={ {} }
-				setAttributes={ jest.fn() }
-				getStylesFromColorScheme={ jest.fn() }
-			/>
-		);
-		expect( screen.toJSON() ).toMatchSnapshot();
-	} );
-
-	it( 'should match snapshot when content is not empty', () => {
-		const screen = render(
-			<PreformattedEdit
-				attributes={ { content: 'Hello World!' } }
-				setAttributes={ jest.fn() }
-				getStylesFromColorScheme={ ( styles1 ) => styles1 }
-			/>
-		);
-		expect( screen.toJSON() ).toMatchSnapshot();
-	} );
-
-	it( 'should produce expected markup for multiline text', async () => {
-		// Arrange
-		const screen = await initializeEditor();
-
-		// Act
-		await addBlock( screen, 'Preformatted' );
-		const preformattedTextInput = await screen.findByPlaceholderText(
-			'Write preformatted text…'
-		);
-		typeInRichText( preformattedTextInput, 'A great statement.' );
-		fireEvent( preformattedTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-		typeInRichText( preformattedTextInput, 'Again' );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-		"<!-- wp:preformatted -->
-		<pre class="wp-block-preformatted">A great statement.<br>Again</pre>
-		<!-- /wp:preformatted -->"
-	` );
-	} );
-
-	it( 'should split on triple Enter', async () => {
-		// Arrange
-		const screen = await initializeEditor();
-
-		// Act
-		await addBlock( screen, 'Preformatted' );
-		const preformattedTextInput = await screen.findByPlaceholderText(
-			'Write preformatted text…'
-		);
-		typeInRichText( preformattedTextInput, 'Hello' );
-		fireEvent( preformattedTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-		fireEvent( preformattedTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-		fireEvent( preformattedTextInput, 'onKeyDown', {
-			nativeEvent: {},
-			preventDefault() {},
-			keyCode: ENTER,
-		} );
-
-		// Assert
-		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-		"<!-- wp:preformatted -->
-		<pre class="wp-block-preformatted">Hello</pre>
-		<!-- /wp:preformatted -->
-
-		<!-- wp:paragraph -->
-		<p></p>
-		<!-- /wp:paragraph -->"
-	` );
-	} );
-} );

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

@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Preformatted';
-const initialHtml = `
-<!-- wp:preformatted -->
-<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br>And more!</pre>
-<!-- /wp:preformatted -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [
-	'Paragraph',
-	'Code',
-	'Poetry',
-	...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/preformatted/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/pullquote/blockquote.native.js

@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { Children, cloneElement } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import styles from './blockquote.scss';
-
-export const BlockQuote = ( props ) => {
-	const citationStyle = { ...styles.citation };
-	const quoteStyle = { ...styles.quote };
-
-	if ( props.textColor ) {
-		quoteStyle.color = props.textColor;
-		quoteStyle.placeholderColor = props.textColor;
-		citationStyle.color = props.textColor;
-		citationStyle.placeholderColor = props.textColor;
-	}
-
-	const newChildren = Children.map( props.children, ( child ) => {
-		if ( child && child.props.identifier === 'value' ) {
-			return cloneElement( child, {
-				style: quoteStyle,
-			} );
-		}
-		if ( child && child.props.identifier === 'citation' ) {
-			return cloneElement( child, {
-				style: citationStyle,
-			} );
-		}
-		return child;
-	} );
-	return <View>{ newChildren }</View>;
-};

package/src/pullquote/blockquote.native.scss

@@ -1,8 +0,0 @@
-.quote {
-	font-size: 18px;
-}
-
-.citation {
-	font-size: 14px;
-	margin-top: 14px;
-}

package/src/pullquote/edit.native.js

@@ -1,128 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	AlignmentControl,
-	BlockControls,
-	RichText,
-	useBlockProps,
-	getColorObjectByAttributeValues,
-	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
-} from '@wordpress/block-editor';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { Figure } from './figure';
-import { BlockQuote } from './blockquote';
-
-const getBackgroundColor = ( { attributes, colors, style } ) => {
-	const { backgroundColor } = attributes;
-
-	const colorProps = getColorClassesAndStyles( attributes );
-	const colorObject = getColorObjectByAttributeValues(
-		colors,
-		backgroundColor
-	);
-
-	return (
-		colorObject?.color ||
-		colorProps.style?.backgroundColor ||
-		colorProps.style?.background ||
-		style?.backgroundColor
-	);
-};
-
-const getTextColor = ( { attributes, colors, style } ) => {
-	const colorProps = getColorClassesAndStyles( attributes );
-	const colorObject = getColorObjectByAttributeValues(
-		colors,
-		attributes.textColor
-	);
-	return (
-		colorObject?.color ||
-		colorProps.style?.color ||
-		style?.color ||
-		style?.baseColors?.color?.text
-	);
-};
-const getBorderColor = ( props ) => {
-	const { wrapperProps } = props;
-	const defaultColor = getTextColor( props );
-
-	return wrapperProps?.style?.borderColor || defaultColor;
-};
-/**
- * Internal dependencies
- */
-
-function PullQuoteEdit( props ) {
-	const { attributes, setAttributes, isSelected, insertBlocksAfter } = props;
-	const { textAlign, citation, value } = attributes;
-
-	const blockProps = useBlockProps( {
-		backgroundColor: getBackgroundColor( props ),
-		borderColor: getBorderColor( props ),
-	} );
-
-	const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected;
-
-	return (
-		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
-			<Figure { ...blockProps }>
-				<BlockQuote textColor={ getTextColor( props ) }>
-					<RichText
-						identifier="value"
-						value={ value }
-						onChange={ ( nextValue ) =>
-							setAttributes( {
-								value: nextValue,
-							} )
-						}
-						aria-label={ __( 'Pullquote text' ) }
-						placeholder={
-							// translators: placeholder text used for the quote
-							__( 'Add quote' )
-						}
-						textAlign={ textAlign ?? 'center' }
-					/>
-					{ shouldShowCitation && (
-						<RichText
-							identifier="citation"
-							value={ citation }
-							aria-label={ __( 'Pullquote citation text' ) }
-							placeholder={
-								// translators: placeholder text used for the citation
-								__( 'Add citation' )
-							}
-							onChange={ ( nextCitation ) =>
-								setAttributes( {
-									citation: nextCitation,
-								} )
-							}
-							__unstableMobileNoFocusOnMount
-							textAlign={ textAlign ?? 'center' }
-							__unstableOnSplitAtEnd={ () =>
-								insertBlocksAfter(
-									createBlock( getDefaultBlockName() )
-								)
-							}
-						/>
-					) }
-				</BlockQuote>
-			</Figure>
-		</>
-	);
-}
-
-export default PullQuoteEdit;

package/src/pullquote/figure.native.js

@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import styles from './figure.scss';
-
-export const Figure = ( { children, backgroundColor, borderColor } ) => {
-	const wpPullquoteFigure = usePreferredColorSchemeStyle(
-		styles.light,
-		styles.dark
-	);
-
-	const customStyles = {};
-	if ( borderColor ) {
-		customStyles.borderTopColor = borderColor;
-		customStyles.borderBottomColor = borderColor;
-	}
-
-	if ( backgroundColor ) {
-		customStyles.backgroundColor = backgroundColor;
-	}
-
-	return (
-		<View style={ [ wpPullquoteFigure, customStyles ] }>{ children }</View>
-	);
-};

package/src/pullquote/figure.native.scss

@@ -1,16 +0,0 @@
-%shared {
-	border-width: 3px 0;
-	padding: 21px 16px;
-}
-
-.light {
-	@extend %shared;
-	border-top-color: $gray-lighten-20;
-	border-bottom-color: $gray-lighten-20;
-}
-
-.dark {
-	@extend %shared;
-	border-top-color: $gray-50;
-	border-bottom-color: $gray-50;
-}