@wordpress/block-editor 12.26.0 → 13.0.0

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-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

@@ -7,7 +7,11 @@ 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';
@@ -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-edit/index.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-
+import { useMemo, useContext } from '@wordpress/element';
 import { hasBlockSupport } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -17,6 +17,8 @@ import {
 	blockBindingsKey,
 	isPreviewModeKey,
 } from './context';
+import { MultipleUsageWarning } from './multiple-usage-warning';
+import { PrivateBlockContext } from '../block-list/private-block-context';
 
 /**
  * The `useBlockEditContext` hook provides information about the block this hook is being used in.
@@ -49,6 +51,8 @@ export default function BlockEdit( {
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
+	const { originalBlockClientId } = useContext( PrivateBlockContext );
+
 	return (
 		<BlockEditContextProvider
 			// It is important to return the same object if props haven't
@@ -85,6 +89,13 @@ export default function BlockEdit( {
 			) }
 		>
 			<Edit { ...props } />
+			{ originalBlockClientId && (
+				<MultipleUsageWarning
+					originalBlockClientId={ originalBlockClientId }
+					name={ name }
+					onReplace={ props.onReplace }
+				/>
+			) }
 		</BlockEditContextProvider>
 	);
 }

package/src/components/block-edit/multiple-usage-warning.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import Warning from '../warning';
+
+export function MultipleUsageWarning( {
+	originalBlockClientId,
+	name,
+	onReplace,
+} ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const blockType = getBlockType( name );
+
+	return (
+		<Warning
+			actions={ [
+				<Button
+					key="find-original"
+					variant="secondary"
+					onClick={ () => selectBlock( originalBlockClientId ) }
+				>
+					{ __( 'Find original' ) }
+				</Button>,
+				<Button
+					key="remove"
+					variant="secondary"
+					onClick={ () => onReplace( [] ) }
+				>
+					{ __( 'Remove' ) }
+				</Button>,
+			] }
+		>
+			<strong>{ blockType?.title }: </strong>
+			{ __( 'This block can only be used once.' ) }
+		</Warning>
+	);
+}

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

@@ -111,10 +111,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	// displays based on the relationship between the selected block
 	// and its parent, and only enable it if the parent is controlling
 	// its children blocks.
-	const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings(
-		blockType,
-		selectedBlockClientId
-	);
+	const blockInspectorAnimationSettings =
+		useBlockInspectorAnimationSettings( blockType );
 
 	const borderPanelLabel = useBorderPanelLabel( {
 		blockName: selectedBlockName,

package/src/components/block-inspector/useBlockInspectorAnimationSettings.js

@@ -8,10 +8,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 
-export default function useBlockInspectorAnimationSettings(
-	blockType,
-	selectedBlockClientId
-) {
+export default function useBlockInspectorAnimationSettings( blockType ) {
 	return useSelect(
 		( select ) => {
 			if ( blockType ) {
@@ -48,6 +45,6 @@ export default function useBlockInspectorAnimationSettings(
 			}
 			return null;
 		},
-		[ selectedBlockClientId, blockType ]
+		[ blockType ]
 	);
 }

package/src/components/block-list/block-invalid-warning.native.js

@@ -54,7 +54,7 @@ export default function BlockInvalidWarning( { clientId } ) {
 		<TouchableWithoutFeedback
 			onPress={ attemptBlockRecovery }
 			accessible
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 		>
 			<Warning
 				title={ blockTitle }