@wordpress/block-editor 15.20.0 → 15.21.1

package/build-module/components/rich-text/native/use-format-types.mjs

@@ -1,114 +0,0 @@
-// packages/block-editor/src/components/rich-text/native/use-format-types.js
-import { useMemo } from "@wordpress/element";
-import { useSelect, useDispatch } from "@wordpress/data";
-import { store as richTextStore } from "@wordpress/rich-text";
-function formatTypesSelector(select) {
-  return select(richTextStore).getFormatTypes();
-}
-var interactiveContentTags = /* @__PURE__ */ new Set([
-  "a",
-  "audio",
-  "button",
-  "details",
-  "embed",
-  "iframe",
-  "input",
-  "label",
-  "select",
-  "textarea",
-  "video"
-]);
-function useFormatTypes({
-  clientId,
-  identifier,
-  withoutInteractiveFormatting,
-  allowedFormats
-}) {
-  const allFormatTypes = useSelect(formatTypesSelector, []);
-  const formatTypes = useMemo(() => {
-    return allFormatTypes.filter(({ name, tagName }) => {
-      if (allowedFormats && !allowedFormats.includes(name)) {
-        return false;
-      }
-      if (withoutInteractiveFormatting && interactiveContentTags.has(tagName)) {
-        return false;
-      }
-      return true;
-    });
-  }, [allFormatTypes, allowedFormats, interactiveContentTags]);
-  const keyedSelected = useSelect(
-    (select) => formatTypes.reduce((accumulator, type) => {
-      if (type.__experimentalGetPropsForEditableTreePreparation) {
-        accumulator[type.name] = type.__experimentalGetPropsForEditableTreePreparation(
-          select,
-          {
-            richTextIdentifier: identifier,
-            blockClientId: clientId
-          }
-        );
-      }
-      return accumulator;
-    }, {}),
-    [formatTypes, clientId, identifier]
-  );
-  const dispatch = useDispatch();
-  const prepareHandlers = [];
-  const valueHandlers = [];
-  const changeHandlers = [];
-  const dependencies = [];
-  formatTypes.forEach((type) => {
-    if (type.__experimentalCreatePrepareEditableTree) {
-      const selected = keyedSelected[type.name];
-      const handler = type.__experimentalCreatePrepareEditableTree(
-        selected,
-        {
-          richTextIdentifier: identifier,
-          blockClientId: clientId
-        }
-      );
-      if (type.__experimentalCreateOnChangeEditableValue) {
-        valueHandlers.push(handler);
-      } else {
-        prepareHandlers.push(handler);
-      }
-      for (const key in selected) {
-        dependencies.push(selected[key]);
-      }
-    }
-    if (type.__experimentalCreateOnChangeEditableValue) {
-      let dispatchers = {};
-      if (type.__experimentalGetPropsForEditableTreeChangeHandler) {
-        dispatchers = type.__experimentalGetPropsForEditableTreeChangeHandler(
-          dispatch,
-          {
-            richTextIdentifier: identifier,
-            blockClientId: clientId
-          }
-        );
-      }
-      changeHandlers.push(
-        type.__experimentalCreateOnChangeEditableValue(
-          {
-            ...keyedSelected[type.name] || {},
-            ...dispatchers
-          },
-          {
-            richTextIdentifier: identifier,
-            blockClientId: clientId
-          }
-        )
-      );
-    }
-  });
-  return {
-    formatTypes,
-    prepareHandlers,
-    valueHandlers,
-    changeHandlers,
-    dependencies
-  };
-}
-export {
-  useFormatTypes
-};
-//# sourceMappingURL=use-format-types.mjs.map

package/build-module/components/rich-text/native/use-format-types.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/rich-text/native/use-format-types.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as richTextStore } from '@wordpress/rich-text';\n\nfunction formatTypesSelector( select ) {\n\treturn select( richTextStore ).getFormatTypes();\n}\n\n/**\n * Set of all interactive content tags.\n *\n * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content\n */\nconst interactiveContentTags = new Set( [\n\t'a',\n\t'audio',\n\t'button',\n\t'details',\n\t'embed',\n\t'iframe',\n\t'input',\n\t'label',\n\t'select',\n\t'textarea',\n\t'video',\n] );\n\n/**\n * This hook provides RichText with the `formatTypes` and its derived props from\n * experimental format type settings.\n *\n * @param {Object}  $0                              Options\n * @param {string}  $0.clientId                     Block client ID.\n * @param {string}  $0.identifier                   Block attribute.\n * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formatting or not.\n * @param {Array}   $0.allowedFormats               Allowed formats\n */\nexport function useFormatTypes( {\n\tclientId,\n\tidentifier,\n\twithoutInteractiveFormatting,\n\tallowedFormats,\n} ) {\n\tconst allFormatTypes = useSelect( formatTypesSelector, [] );\n\tconst formatTypes = useMemo( () => {\n\t\treturn allFormatTypes.filter( ( { name, tagName } ) => {\n\t\t\tif ( allowedFormats && ! allowedFormats.includes( name ) ) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\twithoutInteractiveFormatting &&\n\t\t\t\tinteractiveContentTags.has( tagName )\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\treturn true;\n\t\t} );\n\t}, [ allFormatTypes, allowedFormats, interactiveContentTags ] );\n\tconst keyedSelected = useSelect(\n\t\t( select ) =>\n\t\t\tformatTypes.reduce( ( accumulator, type ) => {\n\t\t\t\tif ( type.__experimentalGetPropsForEditableTreePreparation ) {\n\t\t\t\t\taccumulator[ type.name ] =\n\t\t\t\t\t\ttype.__experimentalGetPropsForEditableTreePreparation(\n\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\trichTextIdentifier: identifier,\n\t\t\t\t\t\t\t\tblockClientId: clientId,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn accumulator;\n\t\t\t}, {} ),\n\t\t[ formatTypes, clientId, identifier ]\n\t);\n\tconst dispatch = useDispatch();\n\tconst prepareHandlers = [];\n\tconst valueHandlers = [];\n\tconst changeHandlers = [];\n\tconst dependencies = [];\n\n\tformatTypes.forEach( ( type ) => {\n\t\tif ( type.__experimentalCreatePrepareEditableTree ) {\n\t\t\tconst selected = keyedSelected[ type.name ];\n\t\t\tconst handler = type.__experimentalCreatePrepareEditableTree(\n\t\t\t\tselected,\n\t\t\t\t{\n\t\t\t\t\trichTextIdentifier: identifier,\n\t\t\t\t\tblockClientId: clientId,\n\t\t\t\t}\n\t\t\t);\n\n\t\t\tif ( type.__experimentalCreateOnChangeEditableValue ) {\n\t\t\t\tvalueHandlers.push( handler );\n\t\t\t} else {\n\t\t\t\tprepareHandlers.push( handler );\n\t\t\t}\n\n\t\t\tfor ( const key in selected ) {\n\t\t\t\tdependencies.push( selected[ key ] );\n\t\t\t}\n\t\t}\n\n\t\tif ( type.__experimentalCreateOnChangeEditableValue ) {\n\t\t\tlet dispatchers = {};\n\n\t\t\tif ( type.__experimentalGetPropsForEditableTreeChangeHandler ) {\n\t\t\t\tdispatchers =\n\t\t\t\t\ttype.__experimentalGetPropsForEditableTreeChangeHandler(\n\t\t\t\t\t\tdispatch,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\trichTextIdentifier: identifier,\n\t\t\t\t\t\t\tblockClientId: clientId,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t}\n\n\t\t\tchangeHandlers.push(\n\t\t\t\ttype.__experimentalCreateOnChangeEditableValue(\n\t\t\t\t\t{\n\t\t\t\t\t\t...( keyedSelected[ type.name ] || {} ),\n\t\t\t\t\t\t...dispatchers,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\trichTextIdentifier: identifier,\n\t\t\t\t\t\tblockClientId: clientId,\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t} );\n\n\treturn {\n\t\tformatTypes,\n\t\tprepareHandlers,\n\t\tvalueHandlers,\n\t\tchangeHandlers,\n\t\tdependencies,\n\t};\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe;AACxB,SAAS,WAAW,mBAAmB;AACvC,SAAS,SAAS,qBAAqB;AAEvC,SAAS,oBAAqB,QAAS;AACtC,SAAO,OAAQ,aAAc,EAAE,eAAe;AAC/C;AAOA,IAAM,yBAAyB,oBAAI,IAAK;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAYK,SAAS,eAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,iBAAiB,UAAW,qBAAqB,CAAC,CAAE;AAC1D,QAAM,cAAc,QAAS,MAAM;AAClC,WAAO,eAAe,OAAQ,CAAE,EAAE,MAAM,QAAQ,MAAO;AACtD,UAAK,kBAAkB,CAAE,eAAe,SAAU,IAAK,GAAI;AAC1D,eAAO;AAAA,MACR;AAEA,UACC,gCACA,uBAAuB,IAAK,OAAQ,GACnC;AACD,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,IACR,CAAE;AAAA,EACH,GAAG,CAAE,gBAAgB,gBAAgB,sBAAuB,CAAE;AAC9D,QAAM,gBAAgB;AAAA,IACrB,CAAE,WACD,YAAY,OAAQ,CAAE,aAAa,SAAU;AAC5C,UAAK,KAAK,kDAAmD;AAC5D,oBAAa,KAAK,IAAK,IACtB,KAAK;AAAA,UACJ;AAAA,UACA;AAAA,YACC,oBAAoB;AAAA,YACpB,eAAe;AAAA,UAChB;AAAA,QACD;AAAA,MACF;AAEA,aAAO;AAAA,IACR,GAAG,CAAC,CAAE;AAAA,IACP,CAAE,aAAa,UAAU,UAAW;AAAA,EACrC;AACA,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,CAAC;AACzB,QAAM,gBAAgB,CAAC;AACvB,QAAM,iBAAiB,CAAC;AACxB,QAAM,eAAe,CAAC;AAEtB,cAAY,QAAS,CAAE,SAAU;AAChC,QAAK,KAAK,yCAA0C;AACnD,YAAM,WAAW,cAAe,KAAK,IAAK;AAC1C,YAAM,UAAU,KAAK;AAAA,QACpB;AAAA,QACA;AAAA,UACC,oBAAoB;AAAA,UACpB,eAAe;AAAA,QAChB;AAAA,MACD;AAEA,UAAK,KAAK,2CAA4C;AACrD,sBAAc,KAAM,OAAQ;AAAA,MAC7B,OAAO;AACN,wBAAgB,KAAM,OAAQ;AAAA,MAC/B;AAEA,iBAAY,OAAO,UAAW;AAC7B,qBAAa,KAAM,SAAU,GAAI,CAAE;AAAA,MACpC;AAAA,IACD;AAEA,QAAK,KAAK,2CAA4C;AACrD,UAAI,cAAc,CAAC;AAEnB,UAAK,KAAK,oDAAqD;AAC9D,sBACC,KAAK;AAAA,UACJ;AAAA,UACA;AAAA,YACC,oBAAoB;AAAA,YACpB,eAAe;AAAA,UAChB;AAAA,QACD;AAAA,MACF;AAEA,qBAAe;AAAA,QACd,KAAK;AAAA,UACJ;AAAA,YACC,GAAK,cAAe,KAAK,IAAK,KAAK,CAAC;AAAA,YACpC,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,YACC,oBAAoB;AAAA,YACpB,eAAe;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD,CAAE;AAEF,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
-  "names": []
-}

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

@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { safeDecodeURI } from '@wordpress/url';
-
-export const parseAudioUrl = ( src ) => {
-	const decodedURI = safeDecodeURI( src );
-	const fileName = decodedURI
-		.split( '#' )
-		.shift()
-		.split( '?' )
-		.shift()
-		.split( '/' )
-		.pop();
-
-	const parts = fileName.split( '.' );
-	const extension = parts.length === 2 ? parts.pop().toUpperCase() + ' ' : '';
-	const title = parts.join( '.' );
-	return { title, extension };
-};

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;