@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/audio-player/index.native.js

@@ -1,225 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Text,
-	TouchableWithoutFeedback,
-	Linking,
-	Alert,
-	Platform,
-} from 'react-native';
-import { default as VideoPlayer } from 'react-native-video';
-
-/**
- * WordPress dependencies
- */
-import { View } from '@wordpress/primitives';
-import { Icon as WCIcon } from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { audio, cautionFilled } from '@wordpress/icons';
-import {
-	requestImageFailedRetryDialog,
-	requestImageUploadCancelDialog,
-} from '@wordpress/react-native-bridge';
-import { getProtocol } from '@wordpress/url';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import { parseAudioUrl } from './audio-url-parser.native';
-import { useEditorColorScheme } from '../global-styles/use-global-styles-context';
-
-const isIOS = Platform.OS === 'ios';
-
-function Player( {
-	isUploadInProgress,
-	isUploadFailed,
-	attributes,
-	isSelected,
-} ) {
-	const { id, src } = attributes;
-	const [ paused, setPaused ] = useState( true );
-
-	const onPressListen = () => {
-		if ( src ) {
-			if ( isIOS && this.player ) {
-				this.player.presentFullscreenPlayer();
-				return;
-			}
-
-			Linking.canOpenURL( src )
-				.then( ( supported ) => {
-					if ( ! supported ) {
-						Alert.alert(
-							__( 'Problem opening the audio' ),
-							__( 'No application can handle this request.' )
-						);
-					} else {
-						return Linking.openURL( src );
-					}
-				} )
-				.catch( () => {
-					Alert.alert(
-						__( 'Problem opening the audio' ),
-						__( 'An unknown error occurred. Please try again.' )
-					);
-				} );
-		}
-	};
-
-	const containerStyle = useEditorColorScheme(
-		styles.container,
-		styles.containerDark
-	);
-
-	const iconStyle = useEditorColorScheme( styles.icon, styles.iconDark );
-
-	const iconDisabledStyle = useEditorColorScheme(
-		styles.iconDisabled,
-		styles.iconDisabledDark
-	);
-
-	const isDisabled = isUploadFailed || isUploadInProgress;
-
-	const finalIconStyle = {
-		...iconStyle,
-		...( isDisabled && iconDisabledStyle ),
-	};
-
-	const iconContainerStyle = useEditorColorScheme(
-		styles.iconContainer,
-		styles.iconContainerDark
-	);
-
-	const titleContainerStyle = {
-		...styles.titleContainer,
-		...( isIOS ? styles.titleContainerIOS : styles.titleContainerAndroid ),
-	};
-
-	const titleStyle = useEditorColorScheme( styles.title, styles.titleDark );
-
-	const uploadFailedStyle = useEditorColorScheme(
-		styles.uploadFailed,
-		styles.uploadFailedDark
-	);
-
-	const subtitleStyle = useEditorColorScheme(
-		styles.subtitle,
-		styles.subtitleDark
-	);
-
-	const finalSubtitleStyle = {
-		...subtitleStyle,
-		...( isUploadFailed && uploadFailedStyle ),
-	};
-
-	const buttonBackgroundStyle = useEditorColorScheme(
-		styles.buttonBackground,
-		styles.buttonBackgroundDark
-	);
-
-	let title = '';
-	let extension = '';
-
-	if ( src ) {
-		const result = parseAudioUrl( src );
-		extension = result.extension;
-		title = result.title;
-	}
-
-	const getSubtitleValue = () => {
-		if ( isUploadInProgress ) {
-			return __( 'Uploading…' );
-		}
-		if ( isUploadFailed ) {
-			return __( 'Failed to insert audio file. Please tap for options.' );
-		}
-		return (
-			extension +
-			// translators: displays audio file extension. e.g. MP3 audio file
-			__( 'audio file' )
-		);
-	};
-
-	function onAudioUploadCancelDialog() {
-		if ( isUploadInProgress ) {
-			requestImageUploadCancelDialog( id );
-		} else if ( id && getProtocol( src ) === 'file:' ) {
-			requestImageFailedRetryDialog( id );
-		}
-	}
-
-	return (
-		<TouchableWithoutFeedback
-			accessible={ ! isSelected }
-			disabled={ ! isSelected }
-			onPress={ onAudioUploadCancelDialog }
-		>
-			<View style={ containerStyle }>
-				<View style={ iconContainerStyle }>
-					<WCIcon
-						icon={ audio }
-						style={ finalIconStyle }
-						size={ 24 }
-					/>
-				</View>
-				<View style={ titleContainerStyle }>
-					<Text style={ titleStyle }>{ title }</Text>
-					<View style={ styles.subtitleContainer }>
-						{ isUploadFailed && (
-							<WCIcon
-								icon={ cautionFilled }
-								style={ {
-									...styles.errorIcon,
-									...uploadFailedStyle,
-								} }
-								size={ 16 }
-							/>
-						) }
-						<Text style={ finalSubtitleStyle }>
-							{ getSubtitleValue() }
-						</Text>
-					</View>
-				</View>
-				{ ! isDisabled && (
-					<TouchableWithoutFeedback
-						accessibilityLabel={ __( 'Audio Player' ) }
-						accessibilityRole="button"
-						accessibilityHint={ __(
-							'Double tap to listen the audio file'
-						) }
-						onPress={ onPressListen }
-					>
-						<View style={ buttonBackgroundStyle }>
-							<Text style={ styles.buttonText }>
-								{ __( 'OPEN' ) }
-							</Text>
-						</View>
-					</TouchableWithoutFeedback>
-				) }
-				{ isIOS && (
-					<VideoPlayer
-						source={ { uri: src } }
-						paused={ paused }
-						ref={ ( ref ) => {
-							this.player = ref;
-						} }
-						controls={ false }
-						ignoreSilentSwitch="ignore"
-						onFullscreenPlayerWillPresent={ () => {
-							setPaused( false );
-						} }
-						onFullscreenPlayerDidDismiss={ () => {
-							setPaused( true );
-						} }
-					/>
-				) }
-			</View>
-		</TouchableWithoutFeedback>
-	);
-}
-
-export default withPreferredColorScheme( Player );

package/src/components/audio-player/styles.native.scss

@@ -1,114 +0,0 @@
-.container {
-	background-color: $light-ultra-dim;
-	border-radius: 4px;
-	flex-direction: row;
-	align-items: center;
-}
-
-.containerDark {
-	background-color: $dark-ultra-dim;
-}
-
-@mixin circle($width) {
-	width: $width;
-	height: $width;
-	border-radius: $width*0.5;
-}
-
-.iconContainer {
-	background-color: $light-ultra-dim;
-	margin: 12px 16px;
-	align-items: center;
-	justify-content: center;
-	@include circle(37px);
-}
-
-.iconContainerDark {
-	background-color: $dark-ultra-dim;
-}
-
-.icon {
-	color: $light-secondary;
-}
-
-.iconDark {
-	color: $dark-secondary;
-}
-
-.iconDisabled {
-	color: $light-quaternary;
-}
-
-.iconDisabledDark {
-	color: $dark-quaternary;
-}
-
-.disabledIcon {
-	color: $black;
-}
-
-.titleContainer {
-	padding: 12px 16px 12px 0;
-	flex: 1;
-}
-
-.titleContainerIOS {
-	margin-top: -1px;
-}
-
-.titleContainerAndroid {
-	margin-top: -2px;
-}
-
-.title {
-	font-size: 17;
-	margin-bottom: 1px;
-	color: $light-primary;
-}
-
-.titleDark {
-	color: $dark-primary;
-}
-
-.subtitleContainer {
-	flex-direction: row;
-	align-items: center;
-}
-
-.subtitle {
-	font-size: 12;
-	color: $light-secondary;
-}
-
-.subtitleDark {
-	color: $dark-secondary;
-}
-
-.buttonBackground {
-	margin: 12px 16px;
-	padding: 8px 16px;
-	border-radius: 500px;
-	background-color: $light-ultra-dim;
-}
-
-.buttonBackgroundDark {
-	background-color: $dark-ultra-dim;
-}
-
-.buttonText {
-	font-size: 14;
-	font-weight: 500;
-	color: $blue-wordpress;
-}
-
-.errorIcon {
-	margin-right: 4px;
-}
-
-.uploadFailed {
-	color: $red-50;
-}
-
-.uploadFailedDark {
-	color: $red-30;
-}

package/src/components/audio-player/test/audio-url-parser.native.js

@@ -1,53 +0,0 @@
-/**
- * Internal dependencies
- */
-import { parseAudioUrl } from '../audio-url-parser.native';
-
-const supportedAudioUrlsWithExtensions = [
-	'https://www.mp3.com/file.mp3?key1=value1&key2=value2#anchorforsomereason',
-	'https://www.mp3.com/file.mp3?key1=value1&key2=value2',
-	'https://www.mp3.com/file.mp3',
-	`https://www.mp3.com/folder/file.mp3`,
-];
-
-const supportedAudioUrlsWithoutExtensions = [
-	'https://www.mp3.com/file?key1=value1&key2=value2#anchorforsomereason',
-	'https://www.mp3.com/file?key1=value1&key2=value2',
-	'https://www.mp3.com/file',
-	'https://www.mp3.com/folder/file',
-];
-
-const supportedLocalAudioUrls = [
-	'file.mp3',
-	'file:///storage/emulated/0/Download/file.mp3',
-];
-
-describe( 'supportedAudioUrlsWithExtensions', () => {
-	supportedAudioUrlsWithExtensions.forEach( ( url ) => {
-		it( `supports ${ url }`, () => {
-			const { title, extension } = parseAudioUrl( url );
-			expect( title ).toBe( 'file' );
-			expect( extension ).toBe( 'MP3 ' );
-		} );
-	} );
-} );
-
-describe( 'supportedAudioUrlsWithoutExtensions', () => {
-	supportedAudioUrlsWithoutExtensions.forEach( ( url ) => {
-		it( `supports ${ url }`, () => {
-			const { title, extension } = parseAudioUrl( url );
-			expect( title ).toBe( 'file' );
-			expect( extension ).toBe( '' );
-		} );
-	} );
-} );
-
-describe( 'supportedLocalAudioUrls', () => {
-	supportedLocalAudioUrls.forEach( ( url ) => {
-		it( `supports ${ url }`, () => {
-			const { title, extension } = parseAudioUrl( url );
-			expect( title ).toBe( 'file' );
-			expect( extension ).toBe( 'MP3 ' );
-		} );
-	} );
-} );

package/src/components/block-alignment-control/test/index.native.js

@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from 'test/helpers';
-
-/**
- * Internal dependencies
- */
-import BlockAlignmentUI from '../ui';
-
-it( 'should call onChange with undefined when the control is already active', () => {
-	const onChangeMock = jest.fn();
-	const screen = render(
-		<BlockAlignmentUI value="right" onChange={ onChangeMock } />
-	);
-	const alignButton = screen.getByLabelText( 'Align' );
-	fireEvent.press( alignButton );
-	const rightAlignmentButton = screen.getByLabelText( 'Align right' );
-	fireEvent.press( rightAlignmentButton );
-
-	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
-	expect( onChangeMock ).toHaveBeenCalledWith( undefined );
-} );
-
-it( 'should call onChange with alignment value when the control is inactive', () => {
-	const onChangeMock = jest.fn();
-	const screen = render(
-		<BlockAlignmentUI value="left" onChange={ onChangeMock } />
-	);
-	const alignButton = screen.getByLabelText( 'Align' );
-	fireEvent.press( alignButton );
-	const centerAlignmentButton = screen.getByLabelText( 'Align center' );
-	fireEvent.press( centerAlignmentButton );
-
-	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
-	expect( onChangeMock ).toHaveBeenCalledWith( 'center' );
-} );

package/src/components/block-alignment-control/ui.native.js

@@ -1,86 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	ToolbarDropdownMenu,
-	ToolbarGroup,
-	BottomSheetSelectControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import useAvailableAlignments from './use-available-alignments';
-import {
-	BLOCK_ALIGNMENTS_CONTROLS,
-	DEFAULT_CONTROL,
-	POPOVER_PROPS,
-} from './constants';
-
-function BlockAlignmentUI( {
-	value,
-	onChange,
-	controls,
-	isToolbar,
-	isCollapsed = true,
-	isBottomSheetControl = false,
-} ) {
-	const enabledControls = useAvailableAlignments( controls );
-	const hasEnabledControls = !! enabledControls.length;
-
-	if ( ! hasEnabledControls ) {
-		return null;
-	}
-
-	function onChangeAlignment( align ) {
-		onChange( [ value, 'none' ].includes( align ) ? undefined : align );
-	}
-
-	const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
-	const defaultAlignmentControl =
-		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
-
-	const toolbarUIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const UIComponent = isBottomSheetControl
-		? BottomSheetSelectControl
-		: toolbarUIComponent;
-
-	const commonProps = {
-		label: __( 'Align' ),
-	};
-	const extraProps = isBottomSheetControl
-		? {
-				options: enabledControls.map( ( { name: controlName } ) => {
-					const control = BLOCK_ALIGNMENTS_CONTROLS[ controlName ];
-					return {
-						value: controlName,
-						label: control.title,
-						icon: control.icon,
-					};
-				} ),
-				value: activeAlignmentControl ? value : 'none',
-				onChange: ( align ) => onChangeAlignment( align ),
-		  }
-		: {
-				icon: activeAlignmentControl
-					? activeAlignmentControl.icon
-					: defaultAlignmentControl.icon,
-				isCollapsed: isToolbar ? isCollapsed : undefined,
-				controls: enabledControls.map( ( { name: controlName } ) => {
-					return {
-						...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
-						isActive:
-							value === controlName ||
-							( ! value && controlName === 'none' ),
-						onClick: () => onChangeAlignment( controlName ),
-					};
-				} ),
-				popoverProps: POPOVER_PROPS,
-				toggleProps: { description: __( 'Change alignment' ) },
-		  };
-
-	return <UIComponent { ...commonProps } { ...extraProps } />;
-}
-
-export default BlockAlignmentUI;

package/src/components/block-caption/README.md

@@ -1,104 +0,0 @@
-## Block Caption
-
-The `BlockCaption` component renders block-level UI for adding and editing captions. It wraps logic around the more generic `Caption` component to provide an editable caption field that is designed specifically for block-level use.
-
-`BlockCaption` is used in several native blocks, including `Video`, `Image`, `Audio`, etc.
-
-## Development guidelines
-
-### Usage
-
-Renders an editable caption field designed specifically for block-level use.
-
-```jsx
-import { BlockCaption, RichText } from '@wordpress/block-editor';
-
-const MyBlockCaption = (
-	clientId,
-	isCaptionSelected,
-	onFocusCaption,
-	onBlur,
-	insertBlocksAfter
-) => (
-	<BlockCaption
-		clientId={ clientId }
-		accessible={ true }
-		accessibilityLabelCreator={ ( caption ) =>
-			RichText.isEmpty( caption )
-				? /* translators: accessibility text. Empty caption. */
-				  'Caption. Empty'
-				: sprintf(
-						/* translators: accessibility text. %s: caption. */
-						__( 'Caption. %s' ),
-						caption
-				  )
-		}
-		isSelected={ isCaptionSelected }
-		onFocus={ onFocusCaption }
-		onBlur={ onBlur }
-		insertBlocksAfter={ insertBlocksAfter }
-	/>
-);
-```
-
-### Props
-
-The `clientId` prop is the only required prop.
-
-The `onBlur`, `onFocus`, `isSelected`, and `insertBlocksAfter` props are all passed directly to the `Caption` component, which then passes them to the inner `RichText` component. ([See detailed info about the RichText component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)). These props are not strictly required, but necessary for many implementations of the component to function as expected.
-
-The `accessible` prop is `false` by default and must be set to `true` in order to set an accessibility label via the `accessibilityLabelCreator` prop.
-
-### `clientId`
-
--   **Type:** `String`
--   **Required:** `Yes`
-
-The client ID of the block that the caption is associated with. This is prop is required in order for the component to perform key functionality, including retrieving the current caption from the block attributes.
-
-### `accessible`
-
--   **Type:** `Boolean`
--   **Default:** `false`
--   **Required:** `No`
-
-Boolean to indicate whether component is an accessibility element. When set to true, the component and all of its children will be treated as a single accessible element. Refer to [the relevant React Native documentation](https://reactnative.dev/docs/accessibility#accessible) for the most up-to-date information on this prop.
-
-### `accessibilityLabelCreator`
-
--   **Type:** `Function`
--   **Required:** `No`
-
-Function that returns an accessibility label, which screen readers will use for the component. The `accessible` prop must be set to `true` in order for this prop to have any effect.
-
-### `onBlur`
-
--   **Type:** `Function`
--   **Required:** `No`
-
-Handler for `onBlur` events, called when the component loses focus. Although not required, it's highly recommended to pass down the component's `onBlur` function to ensure that loss of focus is always handled correctly.
-
-### `onFocus`
-
--   **Type:** `Function`
--   **Required:** `No`
-
-Handler for `onFocus` events, called when the component is brought into focus. Similar to `onBlur`, it's not required but recommended. Passing down this prop helps to ensure focus is always handled as expected on the native side.
-
-### `isSelected`
-
--   **Type:** `Boolean`
--   **Required:** `No`
-
-Boolean that indicates whether the caption is currently selected. This is used by the child `RichText` component to determine whether to display formatting controls.
-
-### `insertBlocksAfter`
-
--   **Type:** `Function`
--   **Required:** `No`
-
-Function to handle how blocks are inserted after pressing enter at the end of the component.
-
-## Related components
-
-`BlockCaption` passes props directly to the [`Caption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/caption) component. In turn, the `Caption` component uses the [`RichText`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/) component. It is recommended to refer to each of those components' documentation for more information on their props and usage.

package/src/components/block-caption/index.native.js

@@ -1,89 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Caption, RichText } from '@wordpress/block-editor';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import { store as blockEditorStore } from '../../store';
-
-const BlockCaption = ( {
-	accessible,
-	accessibilityLabelCreator,
-	onBlur,
-	onChange,
-	onFocus,
-	isSelected,
-	shouldDisplay,
-	text,
-	insertBlocksAfter,
-} ) => (
-	<View style={ [ styles.container, shouldDisplay && styles.padding ] }>
-		<Caption
-			accessibilityLabelCreator={ accessibilityLabelCreator }
-			accessible={ accessible }
-			isSelected={ isSelected }
-			onBlur={ onBlur }
-			onChange={ onChange }
-			onFocus={ onFocus }
-			shouldDisplay={ shouldDisplay }
-			value={ text }
-			insertBlocksAfter={ insertBlocksAfter }
-		/>
-	</View>
-);
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlockAttributes,
-			getSelectedBlockClientId,
-			getBlockName,
-			getBlockRootClientId,
-		} = select( blockEditorStore );
-		const { caption } = getBlockAttributes( clientId ) || {};
-		const isBlockSelected = getSelectedBlockClientId() === clientId;
-
-		// Detect whether the block is an inner block by checking if it has a parent block.
-		// getBlockRootClientId() will return an empty string for all top-level blocks.
-		// If the block is an inner block, its parent may explicitly hide child block controls.
-		// See: https://github.com/wordpress-mobile/gutenberg-mobile/pull/4256
-		const parentId = getBlockRootClientId( clientId );
-		const parentBlockName = getBlockName( parentId );
-
-		const hideCaption = hasBlockSupport(
-			parentBlockName,
-			'__experimentalHideChildBlockControls',
-			false
-		);
-
-		// We'll render the caption so that the soft keyboard is not forced to close on Android
-		// but still hide it by setting its display style to none. See wordpress-mobile/gutenberg-mobile#1221
-		const shouldDisplay =
-			! hideCaption &&
-			( ! RichText.isEmpty( caption ) > 0 || isBlockSelected );
-
-		return {
-			shouldDisplay,
-			text: caption,
-		};
-	} ),
-	withDispatch( ( dispatch, { clientId } ) => {
-		const { updateBlockAttributes } = dispatch( blockEditorStore );
-		return {
-			onChange: ( caption ) => {
-				updateBlockAttributes( clientId, { caption } );
-			},
-		};
-	} ),
-] )( BlockCaption );