@wordpress/block-library 6.0.20 → 6.1.0

package/src/editor.scss

@@ -5,6 +5,9 @@
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./columns/editor.scss";
+@import "./comments-query-loop/editor.scss";
+@import "./comments-pagination/editor.scss";
+@import "./comments-pagination-numbers/editor.scss";
 @import "./cover/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";

package/src/embed/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/embed",
 	"title": "Embed",

package/src/embed/edit.native.js

@@ -13,7 +13,7 @@ import { embedContentIcon } from './icons';
 import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedPreview from './embed-preview';
-import EmbedBottomSheet from './embed-bottom-sheet';
+import EmbedLinkSettings from './embed-link-settings';
 
 /**
  * External dependencies
@@ -24,7 +24,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useCallback, useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useBlockProps,
@@ -196,6 +196,14 @@ const EmbedEdit = ( props ) => {
 		isEditingURL,
 	] );
 
+	const onEditURL = useCallback( ( value ) => {
+		// 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 );
+	}, [] );
+
 	const blockProps = useBlockProps();
 
 	if ( fetching ) {
@@ -230,16 +238,12 @@ const EmbedEdit = ( props ) => {
 		( WP_EMBED_TYPE === type &&
 			! NOT_PREVIEWABLE_WP_EMBED_PROVIDERS.includes( providerNameSlug ) );
 
-	const bottomSheetLabel = WP_EMBED_TYPE === type ? 'WordPress' : title;
+	const linkLabel = WP_EMBED_TYPE === type ? 'WordPress' : title;
 
 	return (
 		<>
 			{ showEmbedPlaceholder ? (
 				<>
-					<EmbedControls
-						showEditButton={ cannotEmbed }
-						switchBackToURLInput={ () => setIsEditingURL( true ) }
-					/>
 					<View { ...blockProps }>
 						<EmbedPlaceholder
 							icon={ icon }
@@ -256,18 +260,22 @@ const EmbedEdit = ( props ) => {
 									url,
 								] );
 							} }
+							openEmbedLinkSettings={ () =>
+								setShowEmbedBottomSheet( true )
+							}
 						/>
 					</View>
 				</>
 			) : (
 				<>
 					<EmbedControls
-						showEditButton={ preview && ! cannotEmbed }
 						themeSupportsResponsive={ themeSupportsResponsive }
 						blockSupportsResponsive={ responsive }
 						allowResponsive={ allowResponsive }
 						toggleResponsive={ toggleResponsive }
-						switchBackToURLInput={ () => setIsEditingURL( true ) }
+						url={ url }
+						linkLabel={ linkLabel }
+						onEditURL={ onEditURL }
 					/>
 					<View { ...blockProps }>
 						<EmbedPreview
@@ -289,18 +297,15 @@ const EmbedEdit = ( props ) => {
 					</View>
 				</>
 			) }
-			<EmbedBottomSheet
+			<EmbedLinkSettings
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus
 				value={ url }
-				label={ bottomSheetLabel }
+				label={ linkLabel }
 				isVisible={ showEmbedBottomSheet }
 				onClose={ () => setShowEmbedBottomSheet( false ) }
-				onSubmit={ ( value ) => {
-					// 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 );
-				} }
+				onSubmit={ onEditURL }
+				withBottomSheet
 			/>
 		</>
 	);

package/src/embed/editor.scss

@@ -9,22 +9,7 @@
 
 	&.is-loading {
 		display: flex;
-		flex-direction: column;
-		align-items: center;
 		justify-content: center;
-		padding: 1em;
-		min-height: 200px;
-		text-align: center;
-
-		// Block UI appearance.
-		border-radius: $radius-block-ui;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-
-		p {
-			font-family: $default-font;
-			font-size: $default-font-size;
-		}
 	}
 
 	// Stops long URLs from breaking out of the no preview available screen

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-loading.js

@@ -1,13 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Spinner } from '@wordpress/components';
 
 const EmbedLoading = () => (
 	<div className="wp-block-embed is-loading">
 		<Spinner />
-		<p>{ __( 'Embedding…' ) }</p>
 	</div>
 );
 

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>