@wordpress/block-library 5.0.1 → 6.0.1

package/src/embed/edit.native.js

@@ -3,6 +3,8 @@
  */
 import {
 	createUpgradedEmbedBlock,
+	getClassNames,
+	fallback,
 	getAttributesFromPreview,
 	getEmbedInfoByProvider,
 } from './util';
@@ -23,7 +25,7 @@ import classnames from 'classnames';
  */
 import { _x } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useBlockProps,
 	store as blockEditorStore,
@@ -31,9 +33,18 @@ import {
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
 
+// The inline preview feature will be released progressible, for this reason
+// the embed will only be considered previewable for the following providers list.
+const PREVIEWABLE_PROVIDERS = [ 'youtube', 'twitter', 'instagram', 'vimeo' ];
+// Some providers are rendering the inline preview as a WordPress embed and
+// are not supported yet, so we need to disallow them with a fixed providers list.
+const NOT_PREVIEWABLE_WP_EMBED_PROVIDERS = [ 'pinterest' ];
+
+const WP_EMBED_TYPE = 'wp-embed';
+
 const EmbedEdit = ( props ) => {
 	const {
-		attributes: { providerNameSlug, previewable, responsive, url },
+		attributes: { align, providerNameSlug, previewable, responsive, url },
 		attributes,
 		isSelected,
 		onReplace,
@@ -47,8 +58,8 @@ const EmbedEdit = ( props ) => {
 		title: _x( 'Embed', 'block title' ),
 		icon: embedContentIcon,
 	};
-	const { icon, title } =
-		getEmbedInfoByProvider( providerNameSlug ) || defaultEmbedInfo;
+	const embedInfoByProvider = getEmbedInfoByProvider( providerNameSlug );
+	const { icon, title } = embedInfoByProvider || defaultEmbedInfo;
 
 	const { wasBlockJustInserted } = useSelect(
 		( select ) => ( {
@@ -61,13 +72,23 @@ const EmbedEdit = ( props ) => {
 	const [ isEditingURL, setIsEditingURL ] = useState(
 		isSelected && wasBlockJustInserted && ! url
 	);
+	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] = useState(
+		isEditingURL
+	);
+	const { invalidateResolution } = useDispatch( coreStore );
 
-	const { preview, fetching, cannotEmbed } = useSelect(
+	const {
+		preview,
+		fetching,
+		themeSupportsResponsive,
+		cannotEmbed,
+	} = useSelect(
 		( select ) => {
 			const {
 				getEmbedPreview,
 				isPreviewEmbedFallback,
 				isRequestingEmbedPreview,
+				getThemeSupports,
 			} = select( coreStore );
 			if ( ! url ) {
 				return { fetching: false, cannotEmbed: false };
@@ -97,6 +118,9 @@ const EmbedEdit = ( props ) => {
 			return {
 				preview: validPreview ? embedPreview : undefined,
 				fetching: isFetching,
+				themeSupportsResponsive: getThemeSupports()[
+					'responsive-embeds'
+				],
 				cannotEmbed: ! validPreview || previewIsFallback,
 			};
 		},
@@ -104,22 +128,40 @@ const EmbedEdit = ( props ) => {
 	);
 
 	/**
-	 * @return {Object} Attributes derived from the preview, merged with the current attributes.
+	 * Returns the attributes derived from the preview, merged with the current attributes.
+	 *
+	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
+	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = () => {
+	const getMergedAttributes = ( ignorePreviousClassName = false ) => {
 		const { allowResponsive, className } = attributes;
 		return {
 			...attributes,
 			...getAttributesFromPreview(
 				preview,
 				title,
-				className,
+				ignorePreviousClassName ? undefined : className,
 				responsive,
 				allowResponsive
 			),
 		};
 	};
 
+	const toggleResponsive = () => {
+		const { allowResponsive, className } = attributes;
+		const { html } = preview;
+		const newAllowResponsive = ! allowResponsive;
+
+		setAttributes( {
+			allowResponsive: newAllowResponsive,
+			className: getClassNames(
+				html,
+				className,
+				responsive && newAllowResponsive
+			),
+		} );
+	};
+
 	useEffect( () => {
 		if ( ! preview?.html || ! cannotEmbed || fetching ) {
 			return;
@@ -134,15 +176,12 @@ const EmbedEdit = ( props ) => {
 	// Handle incoming preview
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// Even though we set attributes that get derived from the preview,
-			// we don't access them directly because for the initial render,
-			// the `setAttributes` call will not have taken effect. If we're
-			// rendering responsive content, setting the responsive classes
-			// after the preview has been rendered can result in unwanted
-			// clipping or scrollbars. The `getAttributesFromPreview` function
-			// that `getMergedAttributes` uses is memoized so that we're not
-			// calculating them on every render.
-			setAttributes( getMergedAttributes() );
+			// When obtaining an incoming preview, we set the attributes derived from
+			// the preview data. In this case when getting the merged attributes,
+			// we ignore the previous classname because it might not match the expected
+			// classes by the new preview.
+			setAttributes( getMergedAttributes( true ) );
+
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,
@@ -156,6 +195,10 @@ const EmbedEdit = ( props ) => {
 		}
 	}, [ preview, isEditingURL ] );
 
+	useEffect( () => setShowEmbedBottomSheet( isEditingURL ), [
+		isEditingURL,
+	] );
+
 	const blockProps = useBlockProps();
 
 	if ( fetching ) {
@@ -167,32 +210,71 @@ const EmbedEdit = ( props ) => {
 	}
 
 	const showEmbedPlaceholder = ! preview || cannotEmbed;
-	const { type, className: classFromPreview } = getMergedAttributes();
+
+	// Even though we set attributes that get derived from the preview,
+	// we don't access them directly because for the initial render,
+	// the `setAttributes` call will not have taken effect. If we're
+	// rendering responsive content, setting the responsive classes
+	// after the preview has been rendered can result in unwanted
+	// clipping or scrollbars. The `getAttributesFromPreview` function
+	// that `getMergedAttributes` uses is memoized so that we're not
+	// calculating them on every render.
+	const {
+		type,
+		allowResponsive,
+		className: classFromPreview,
+	} = getMergedAttributes();
 	const className = classnames( classFromPreview, props.className );
 
+	const isProviderPreviewable =
+		PREVIEWABLE_PROVIDERS.includes( providerNameSlug ) ||
+		// For WordPress embeds, we enable the inline preview for all its providers
+		// except the ones that are not supported yet.
+		( WP_EMBED_TYPE === type &&
+			! NOT_PREVIEWABLE_WP_EMBED_PROVIDERS.includes( providerNameSlug ) );
+
+	const bottomSheetLabel = WP_EMBED_TYPE === type ? 'WordPress' : title;
+
 	return (
 		<>
 			{ showEmbedPlaceholder ? (
-				<View { ...blockProps }>
-					<EmbedPlaceholder
-						icon={ icon }
-						isSelected={ isSelected }
-						label={ title }
-						onPress={ ( event ) => {
-							onFocus( event );
-							setIsEditingURL( true );
-						} }
-						cannotEmbed={ cannotEmbed }
+				<>
+					<EmbedControls
+						showEditButton={ cannotEmbed }
+						switchBackToURLInput={ () => setIsEditingURL( true ) }
 					/>
-				</View>
+					<View { ...blockProps }>
+						<EmbedPlaceholder
+							icon={ icon }
+							isSelected={ isSelected }
+							label={ title }
+							onPress={ ( event ) => {
+								onFocus( event );
+								setIsEditingURL( true );
+							} }
+							cannotEmbed={ cannotEmbed }
+							fallback={ () => fallback( url, onReplace ) }
+							tryAgain={ () => {
+								invalidateResolution( 'getEmbedPreview', [
+									url,
+								] );
+							} }
+						/>
+					</View>
+				</>
 			) : (
 				<>
 					<EmbedControls
 						showEditButton={ preview && ! cannotEmbed }
+						themeSupportsResponsive={ themeSupportsResponsive }
+						blockSupportsResponsive={ responsive }
+						allowResponsive={ allowResponsive }
+						toggleResponsive={ toggleResponsive }
 						switchBackToURLInput={ () => setIsEditingURL( true ) }
 					/>
 					<View { ...blockProps }>
 						<EmbedPreview
+							align={ align }
 							className={ className }
 							clientId={ clientId }
 							icon={ icon }
@@ -201,20 +283,26 @@ const EmbedEdit = ( props ) => {
 							label={ title }
 							onFocus={ onFocus }
 							preview={ preview }
+							isProviderPreviewable={ isProviderPreviewable }
 							previewable={ previewable }
 							type={ type }
 							url={ url }
+							isDefaultEmbedInfo={ ! embedInfoByProvider }
 						/>
 					</View>
 				</>
 			) }
 			<EmbedBottomSheet
 				value={ url }
-				isVisible={ isEditingURL }
-				onClose={ () => setIsEditingURL( false ) }
+				label={ bottomSheetLabel }
+				isVisible={ showEmbedBottomSheet }
+				onClose={ () => setShowEmbedBottomSheet( false ) }
 				onSubmit={ ( value ) => {
-					setIsEditingURL( false );
+					// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
+					// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
+					// for creating the new block.
 					setAttributes( { url: value } );
+					setIsEditingURL( false );
 				} }
 			/>
 		</>

package/src/embed/embed-bottom-sheet.native.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	LinkSettingsNavigation,
 	FooterMessageLink,
@@ -11,28 +11,34 @@ import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { useCallback, useState } from '@wordpress/element';
 
-const linkSettingsOptions = {
-	url: {
-		label: __( 'Embed link' ),
-		placeholder: __( 'Add link' ),
-		autoFocus: true,
-		autoFill: true,
-	},
-	footer: {
-		label: (
-			<FooterMessageLink
-				href={ __( 'https://wordpress.org/support/article/embeds/' ) }
-				value={ __( 'Learn more about embeds' ) }
-			/>
-		),
-		separatorType: 'topFullWidth',
-	},
-};
-
-const EmbedBottomSheet = ( { value, isVisible, onClose, onSubmit } ) => {
+const EmbedBottomSheet = ( { value, label, isVisible, onClose, onSubmit } ) => {
 	const [ url, setURL ] = useState( value );
 	const { createErrorNotice } = useDispatch( noticesStore );
 
+	const linkSettingsOptions = {
+		url: {
+			label: sprintf(
+				// translators: %s: embed block variant's label e.g: "Twitter".
+				__( '%s link' ),
+				label
+			),
+			placeholder: __( 'Add link' ),
+			autoFocus: true,
+			autoFill: true,
+		},
+		footer: {
+			label: (
+				<FooterMessageLink
+					href={ __(
+						'https://wordpress.org/support/article/embeds/'
+					) }
+					value={ __( 'Learn more about embeds' ) }
+				/>
+			),
+			separatorType: 'topFullWidth',
+		},
+	};
+
 	const onDismiss = useCallback( () => {
 		if ( url !== '' ) {
 			if ( isURL( url ) ) {

package/src/embed/embed-controls.js

@@ -11,12 +11,21 @@ import {
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { edit } from '@wordpress/icons';
 
+function getResponsiveHelp( checked ) {
+	return checked
+		? __(
+				'This embed will preserve its aspect ratio when the browser is resized.'
+		  )
+		: __(
+				'This embed may not preserve its aspect ratio when the browser is resized.'
+		  );
+}
+
 const EmbedControls = ( {
 	blockSupportsResponsive,
 	showEditButton,
 	themeSupportsResponsive,
 	allowResponsive,
-	getResponsiveHelp,
 	toggleResponsive,
 	switchBackToURLInput,
 } ) => (

package/src/embed/embed-no-preview.native.js

@@ -8,7 +8,7 @@ import { TouchableOpacity, TouchableWithoutFeedback, Text } from 'react-native';
  */
 import { View } from '@wordpress/primitives';
 
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useState } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { requestPreview } from '@wordpress/react-native-bridge';
@@ -16,13 +16,21 @@ import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { BottomSheet, Icon, TextControl } from '@wordpress/components';
 import { help } from '@wordpress/icons';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
-const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
+const EmbedNoPreview = ( {
+	label,
+	icon,
+	isSelected,
+	onPress,
+	previewable,
+	isDefaultEmbedInfo,
+} ) => {
 	const shouldRequestReview = useRef( false );
 	const [ isSheetVisible, setIsSheetVisible ] = useState( false );
 
@@ -38,10 +46,6 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 		styles.embed__label,
 		styles[ 'embed__label--dark' ]
 	);
-	const embedIconStyle = usePreferredColorSchemeStyle(
-		styles.embed__icon,
-		styles[ 'embed__icon--dark' ]
-	);
 	const descriptionStyle = usePreferredColorSchemeStyle(
 		styles.embed__description,
 		styles[ 'embed__description--dark' ]
@@ -76,11 +80,19 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 		postType === 'page' ? __( 'Preview page' ) : __( 'Preview post' );
 	const comingSoonDescription =
 		postType === 'page'
-			? __(
-					'We’re working hard on adding support for embed previews. In the meantime, you can preview the embedded content on the page.'
+			? sprintf(
+					// translators: %s: embed block variant's label e.g: "Twitter".
+					__(
+						'We’re working hard on adding support for %s previews. In the meantime, you can preview the embedded content on the page.'
+					),
+					label
 			  )
-			: __(
-					'We’re working hard on adding support for embed previews. In the meantime, you can preview the embedded content on the post.'
+			: sprintf(
+					// translators: %s: embed block variant's label e.g: "Twitter".
+					__(
+						'We’re working hard on adding support for %s previews. In the meantime, you can preview the embedded content on the post.'
+					),
+					label
 			  );
 
 	function onOpenSheet() {
@@ -109,7 +121,7 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 		onPressContainer();
 	}
 
-	return (
+	const embedNoProviderPreview = (
 		<>
 			<TouchableWithoutFeedback
 				accessibilityRole={ 'button' }
@@ -118,10 +130,14 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 				onPress={ onPressContainer }
 			>
 				<View style={ containerStyle }>
-					<Icon icon={ icon } fill={ embedIconStyle.fill } />
+					<BlockIcon icon={ icon } />
 					<Text style={ labelStyle }>{ label }</Text>
 					<Text style={ descriptionStyle }>
-						{ __( 'Embed previews not yet available' ) }
+						{ sprintf(
+							// translators: %s: embed block variant's label e.g: "Twitter".
+							__( '%s previews not yet available' ),
+							label
+						) }
 					</Text>
 					<Text style={ styles.embed__action }>
 						{ previewButtonText.toUpperCase() }
@@ -157,7 +173,15 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 						/>
 					</View>
 					<Text style={ sheetTitleStyle }>
-						{ __( 'Embed block previews are coming soon' ) }
+						{ isDefaultEmbedInfo
+							? __( 'Embed block previews are coming soon' )
+							: sprintf(
+									// translators: %s: embed block variant's label e.g: "Twitter".
+									__(
+										'%s embed block previews are coming soon'
+									),
+									label
+							  ) }
 					</Text>
 					<Text style={ sheetDescriptionStyle }>
 						{ comingSoonDescription }
@@ -181,6 +205,21 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 			</BottomSheet>
 		</>
 	);
+
+	return (
+		<>
+			{ previewable ? (
+				embedNoProviderPreview
+			) : (
+				<View style={ containerStyle }>
+					<BlockIcon icon={ icon } />
+					<Text style={ labelStyle }>
+						{ __( 'No preview available' ) }
+					</Text>
+				</View>
+			) }
+		</>
+	);
 };
 
 export default EmbedNoPreview;

package/src/embed/embed-placeholder.native.js

@@ -2,13 +2,16 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { compact } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { Icon } from '@wordpress/components';
+import { Icon, Picker } from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +25,8 @@ const EmbedPlaceholder = ( {
 	label,
 	onPress,
 	cannotEmbed,
+	fallback,
+	tryAgain,
 } ) => {
 	const containerStyle = usePreferredColorSchemeStyle(
 		styles.embed__container,
@@ -37,18 +42,54 @@ const EmbedPlaceholder = ( {
 		styles.embed__action,
 		styles[ 'embed__action--dark' ]
 	);
-	const embedIconStyle = usePreferredColorSchemeStyle(
-		styles.embed__icon,
-		styles[ 'embed__icon--dark' ]
-	);
 	const embedIconErrorStyle = styles[ 'embed__icon--error' ];
 
+	const cannotEmbedMenuPickerRef = useRef();
+
+	const errorPickerOptions = {
+		retry: {
+			id: 'retryOption',
+			label: __( 'Retry' ),
+			value: 'retryOption',
+			onSelect: tryAgain,
+		},
+		convertToLink: {
+			id: 'convertToLinkOption',
+			label: __( 'Convert to link' ),
+			value: 'convertToLinkOption',
+			onSelect: fallback,
+		},
+	};
+
+	const options = compact( [
+		cannotEmbed && errorPickerOptions.retry,
+		cannotEmbed && errorPickerOptions.convertToLink,
+	] );
+
+	function onPickerSelect( value ) {
+		const selectedItem = options.find( ( item ) => item.value === value );
+		selectedItem.onSelect();
+	}
+
+	// When the content cannot be embedded the onPress should trigger the Picker instead of the onPress prop.
+	function resolveOnPressEvent() {
+		if ( cannotEmbed ) {
+			cannotEmbedMenuPickerRef.current?.presentPicker();
+		} else {
+			onPress();
+		}
+	}
+
 	return (
 		<>
 			<TouchableWithoutFeedback
 				accessibilityRole={ 'button' }
-				accessibilityHint={ __( 'Double tap to add a link.' ) }
-				onPress={ onPress }
+				accessibilityHint={
+					cannotEmbed
+						? __( 'Double tap to view embed options.' )
+						: __( 'Double tap to add a link.' )
+				}
+				onPress={ resolveOnPressEvent }
 				disabled={ ! isSelected }
 			>
 				<View style={ containerStyle }>
@@ -68,12 +109,20 @@ const EmbedPlaceholder = ( {
 								{ __( 'Unable to embed media' ) }
 							</Text>
 							<Text style={ actionStyle }>
-								{ __( 'EDIT LINK' ) }
+								{ __( 'More options' ) }
 							</Text>
+							<Picker
+								title={ __( 'Embed options' ) }
+								ref={ cannotEmbedMenuPickerRef }
+								options={ options }
+								onChange={ onPickerSelect }
+								hideCancelButton
+								leftAlign
+							/>
 						</>
 					) : (
 						<>
-							<Icon icon={ icon } fill={ embedIconStyle.fill } />
+							<BlockIcon icon={ icon } />
 							<Text style={ labelStyle }>{ label }</Text>
 							<Text style={ actionStyle }>
 								{ __( 'ADD LINK' ) }