@wordpress/block-editor 12.25.0 → 13.0.0

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

@@ -0,0 +1,221 @@
+/**
+ * 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 } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { audio, warning } 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 }>
+					<Icon icon={ audio } style={ finalIconStyle } size={ 24 } />
+				</View>
+				<View style={ titleContainerStyle }>
+					<Text style={ titleStyle }>{ title }</Text>
+					<View style={ styles.subtitleContainer }>
+						{ isUploadFailed && (
+							<Icon
+								icon={ warning }
+								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

@@ -0,0 +1,114 @@
+.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

@@ -0,0 +1,53 @@
+/**
+ * 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-actions/index.js

@@ -31,10 +31,12 @@ export default function BlockActions( {
 				getDirectInsertBlock,
 				canMoveBlocks,
 				canRemoveBlocks,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 
 			const blocks = getBlocksByClientId( clientIds );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const rootBlockEditingMode = getBlockEditingMode( rootClientId );
 			const canInsertDefaultBlock = canInsertBlockType(
 				getDefaultBlockName(),
 				rootClientId
@@ -46,7 +48,9 @@ export default function BlockActions( {
 			return {
 				canMove: canMoveBlocks( clientIds, rootClientId ),
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
-				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canInsertBlock:
+					( canInsertDefaultBlock || !! directInsertBlock ) &&
+					rootBlockEditingMode === 'default',
 				canCopyStyles: blocks.every( ( block ) => {
 					return (
 						!! block &&

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -85,7 +85,7 @@ function BlockAlignmentUI( {
 												key={ controlName }
 												icon={ icon }
 												iconPosition="left"
-												className={ classNames(
+												className={ clsx(
 													'components-dropdown-menu__menu-item',
 													{
 														'is-active': isSelected,

package/src/components/block-bindings-toolbar-indicator/index.js

@@ -1,19 +1,134 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
-import { connection } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
+import { useId } from '@wordpress/element';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import {
+	DropdownMenu,
+	ToolbarGroup,
+	ToolbarItem,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { copy } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+
+export default function BlockBindingsToolbarIndicator( { clientIds } ) {
+	const isSingleBlockSelected = clientIds.length === 1;
+	const { icon, firstBlockName, isConnectedToPatternOverrides } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockNamesByClientId,
+				getBlocksByClientId,
+			} = select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
+			const blockTypeNames = getBlockNamesByClientId( clientIds );
+			const _firstBlockTypeName = blockTypeNames[ 0 ];
+			const firstBlockType = getBlockType( _firstBlockTypeName );
+			let _icon;
+			if ( isSingleBlockSelected ) {
+				const match = getActiveBlockVariation(
+					_firstBlockTypeName,
+					getBlockAttributes( clientIds[ 0 ] )
+				);
+				// Take into account active block variations.
+				_icon = match?.icon || firstBlockType.icon;
+			} else {
+				const isSelectionOfSameType =
+					new Set( blockTypeNames ).size === 1;
+				// When selection consists of blocks of multiple types, display an
+				// appropriate icon to communicate the non-uniformity.
+				_icon = isSelectionOfSameType ? firstBlockType.icon : copy;
+			}
+
+			return {
+				icon: _icon,
+				firstBlockName: getBlockAttributes( clientIds[ 0 ] ).metadata
+					.name,
+				isConnectedToPatternOverrides: getBlocksByClientId(
+					clientIds
+				).some( ( block ) =>
+					Object.values( block?.attributes.metadata?.bindings ).some(
+						( binding ) =>
+							binding.source === 'core/pattern-overrides'
+					)
+				),
+			};
+		},
+		[ clientIds, isSingleBlockSelected ]
+	);
+	const firstBlockTitle = useBlockDisplayTitle( {
+		clientId: clientIds[ 0 ],
+		maximumLength: 35,
+	} );
+
+	let blockDescription = isSingleBlockSelected
+		? _x(
+				'This block is connected.',
+				'block toolbar button label and description'
+		  )
+		: _x(
+				'These blocks are connected.',
+				'block toolbar button label and description'
+		  );
+	if ( isConnectedToPatternOverrides && firstBlockName ) {
+		blockDescription = isSingleBlockSelected
+			? sprintf(
+					/* translators: %1s: The block type's name; %2s: The block's user-provided name (the same as the override name). */
+					__( 'This %1$s is editable using the "%2$s" override.' ),
+					firstBlockTitle.toLowerCase(),
+					firstBlockName
+			  )
+			: __( 'These blocks are editable using overrides.' );
+	}
+	const descriptionId = useId();
 
-export default function BlockBindingsToolbarIndicator() {
 	return (
 		<ToolbarGroup>
-			<ToolbarItem
-				as={ 'div' }
-				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
-				className="block-editor-block-bindings-toolbar-indicator"
-			>
-				<Icon icon={ connection } size={ 24 } />
+			<ToolbarItem>
+				{ ( toggleProps ) => (
+					<DropdownMenu
+						className="block-editor-block-bindings-toolbar-indicator"
+						label={ firstBlockTitle }
+						popoverProps={ {
+							placement: 'bottom-start',
+							className:
+								'block-editor-block-bindings-toolbar-indicator__popover',
+						} }
+						icon={
+							<>
+								<BlockIcon
+									icon={ icon }
+									className="block-editor-block-bindings-toolbar-indicator-icon"
+									showColors
+								/>
+							</>
+						}
+						toggleProps={ {
+							describedBy: blockDescription,
+							...toggleProps,
+						} }
+						menuProps={ {
+							orientation: 'both',
+							'aria-describedby': descriptionId,
+						} }
+					>
+						{ () => (
+							<Text id={ descriptionId }>
+								{ blockDescription }
+							</Text>
+						) }
+					</DropdownMenu>
+				) }
 			</ToolbarItem>
 		</ToolbarGroup>
 	);

package/src/components/block-bindings-toolbar-indicator/style.scss

@@ -1,11 +1,10 @@
-.block-editor-block-bindings-toolbar-indicator {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 6px;
-	svg {
-		fill: var(--wp-block-synced-color);
-	}
+.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content {
+	min-width: 260px;
+	padding: $grid-unit-20;
+}
+
+.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
+	fill: var(--wp-block-synced-color);
 }
 
 .editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {

package/src/components/block-canvas/style.scss

@@ -3,9 +3,5 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: $gray-300;
-}
-
-
-iframe[name="editor-canvas"].has-editor-padding {
-	padding: $grid-unit-30 $grid-unit-30 0;
+	box-sizing: border-box;
 }

package/src/components/block-card/index.js

@@ -1,13 +1,17 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -45,7 +49,7 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	return (
-		<div className={ classnames( 'block-editor-block-card', className ) }>
+		<div className={ clsx( 'block-editor-block-card', className ) }>
 			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
 				<Button
 					onClick={ () => selectBlock( parentNavBlockClientId ) }
@@ -60,14 +64,14 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 				/>
 			) }
 			<BlockIcon icon={ icon } showColors />
-			<div className="block-editor-block-card__content">
+			<VStack spacing={ 1 }>
 				<h2 className="block-editor-block-card__title">{ title }</h2>
 				{ description && (
-					<span className="block-editor-block-card__description">
+					<Text className="block-editor-block-card__description">
 						{ description }
-					</span>
+					</Text>
 				) }
-			</div>
+			</VStack>
 		</div>
 	);
 }

package/src/components/block-card/style.scss

@@ -5,10 +5,6 @@
 	padding: $grid-unit-20;
 }
 
-.block-editor-block-card__content {
-	flex-grow: 1;
-}
-
 .block-editor-block-card__title {
 	font-weight: 500;
 
@@ -20,13 +16,6 @@
 	}
 }
 
-.block-editor-block-card__description {
-	display: block;
-	font-size: $default-font-size;
-	line-height: $default-line-height;
-	margin-top: $grid-unit-05;
-}
-
 .block-editor-block-card .block-editor-block-icon {
 	flex: 0 0 $button-size-small;
 	margin-left: 0;

package/src/components/block-compare/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 // diff doesn't tree-shake correctly, so we import from the individual
 // module here, to avoid including too much of the library
 import { diffChars } from 'diff/lib/diff/character';
@@ -28,7 +28,7 @@ function BlockCompare( {
 		const difference = diffChars( originalContent, newContent );
 
 		return difference.map( ( item, pos ) => {
-			const classes = classnames( {
+			const classes = clsx( {
 				'block-editor-block-compare__added': item.added,
 				'block-editor-block-compare__removed': item.removed,
 			} );