@wordpress/block-library 6.0.12 → 6.0.17-next.33ec3857e2.0

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

@@ -0,0 +1,65 @@
+/**
+ * Internal dependencies
+ */
+import EmbedLinkSettings from './embed-link-settings';
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { store as editPostStore } from '@wordpress/edit-post';
+
+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,
+	themeSupportsResponsive,
+	allowResponsive,
+	toggleResponsive,
+	url,
+	linkLabel,
+	onEditURL,
+} ) => {
+	const { closeGeneralSidebar: closeSettingsBottomSheet } = useDispatch(
+		editPostStore
+	);
+
+	return (
+		<>
+			<InspectorControls>
+				{ themeSupportsResponsive && blockSupportsResponsive && (
+					<PanelBody title={ __( 'Media settings' ) }>
+						<ToggleControl
+							label={ __( 'Resize for smaller devices' ) }
+							checked={ allowResponsive }
+							help={ getResponsiveHelp }
+							onChange={ toggleResponsive }
+						/>
+					</PanelBody>
+				) }
+				<PanelBody title={ __( 'Link settings' ) }>
+					<EmbedLinkSettings
+						value={ url }
+						label={ linkLabel }
+						onSubmit={ ( value ) => {
+							closeSettingsBottomSheet();
+							onEditURL( value );
+						} }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		</>
+	);
+};
+
+export default EmbedControls;

package/src/embed/embed-link-settings.native.js

@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	LinkSettingsNavigation,
+	FooterMessageLink,
+} from '@wordpress/components';
+import { isURL } from '@wordpress/url';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+
+const EmbedLinkSettings = ( {
+	autoFocus,
+	value,
+	label,
+	isVisible,
+	onClose,
+	onSubmit,
+	withBottomSheet,
+} ) => {
+	const url = useRef( value );
+	const [ inputURL, setInputURL ] = 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,
+			autoFill: true,
+		},
+		footer: {
+			label: (
+				<FooterMessageLink
+					href={ __(
+						'https://wordpress.org/support/article/embeds/'
+					) }
+					value={ __( 'Learn more about embeds' ) }
+				/>
+			),
+			separatorType: 'topFullWidth',
+		},
+	};
+
+	const onDismiss = useCallback( () => {
+		if ( ! isURL( url.current ) && url.current !== '' ) {
+			createErrorNotice( __( 'Invalid URL. Please enter a valid URL.' ) );
+			// If the URL was already defined, we submit it to stop showing the embed placeholder.
+			onSubmit( value );
+			return;
+		}
+		onSubmit( url.current );
+	}, [ onSubmit, value ] );
+
+	useEffect( () => {
+		url.current = value;
+		setInputURL( value );
+	}, [ value ] );
+
+	/**
+	 * If the Embed Bottom Sheet component does not utilize a bottom sheet then the onDismiss action is not
+	 * called. Here we are wiring the onDismiss to the onClose callback that gets triggered when input is submitted.
+	 */
+	const performOnCloseOperations = useCallback( () => {
+		if ( onClose ) {
+			onClose();
+		}
+
+		if ( ! withBottomSheet ) {
+			onDismiss();
+		}
+	}, [ onClose ] );
+
+	const onSetAttributes = useCallback( ( attributes ) => {
+		url.current = attributes.url;
+		setInputURL( attributes.url );
+	}, [] );
+
+	return (
+		<LinkSettingsNavigation
+			isVisible={ isVisible }
+			url={ inputURL }
+			onClose={ performOnCloseOperations }
+			onDismiss={ onDismiss }
+			setAttributes={ onSetAttributes }
+			options={ linkSettingsOptions }
+			testID="embed-edit-url-modal"
+			withBottomSheet={ withBottomSheet }
+			showIcon
+		/>
+	);
+};
+
+export default EmbedLinkSettings;

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

@@ -27,6 +27,7 @@ const EmbedPlaceholder = ( {
 	cannotEmbed,
 	fallback,
 	tryAgain,
+	openEmbedLinkSettings,
 } ) => {
 	const containerStyle = usePreferredColorSchemeStyle(
 		styles.embed__container,
@@ -59,11 +60,18 @@ const EmbedPlaceholder = ( {
 			value: 'convertToLinkOption',
 			onSelect: fallback,
 		},
+		editLink: {
+			id: 'editLinkOption',
+			label: __( 'Edit link' ),
+			value: 'editLinkOption',
+			onSelect: openEmbedLinkSettings,
+		},
 	};
 
 	const options = compact( [
 		cannotEmbed && errorPickerOptions.retry,
 		cannotEmbed && errorPickerOptions.convertToLink,
+		cannotEmbed && errorPickerOptions.editLink,
 	] );
 
 	function onPickerSelect( value ) {

package/src/embed/test/__snapshots__/index.native.js.snap

@@ -102,6 +102,8 @@ https://www.youtube.com/watch?v=lXMskKTw3Bc
 <!-- /wp:embed -->"
 `;
 
+exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `"<!-- wp:embed {\\"url\\":\\"\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+
 exports[`Embed block insert via slash inserter insert generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
 exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
@@ -122,6 +124,14 @@ exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed
 
 exports[`Embed block insertion inserts generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
+exports[`Embed block retry allows editing link if request failed 1`] = `
+"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\"} -->
+<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed -->"
+`;
+
 exports[`Embed block retry converts to link if preview request failed 1`] = `
 "<!-- wp:paragraph -->
 <p><a href=\\"https://twitter.com/notnownikki\\">https://twitter.com/notnownikki</a></p>