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

package/src/comments-query-loop/toolbar.js

@@ -11,7 +11,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 
-export default function CommentsQueryLoopToolbar( { perPage, setQuery } ) {
+export default function CommentsQueryLoopToolbar( { queryPerPage, setQuery } ) {
 	return (
 		<ToolbarGroup>
 			<Dropdown
@@ -41,11 +41,11 @@ export default function CommentsQueryLoopToolbar( { perPage, setQuery } ) {
 										return;
 									}
 									setQuery( {
-										perPage: num,
+										queryPerPage: num,
 									} );
 								} }
 								step="1"
-								value={ perPage }
+								value={ queryPerPage }
 								isDragEnabled={ false }
 							/>
 						</BaseControl>

package/src/common.scss

@@ -22,11 +22,11 @@
 }
 
 .has-normal-font-size {
-	font-size: var(--wp--preset--font-size--normal) !important;
+	font-size: var(--wp--preset--font-size--normal);
 }
 
 .has-huge-font-size {
-	font-size: var(--wp--preset--font-size--huge) !important;
+	font-size: var(--wp--preset--font-size--huge);
 }
 
 // Text alignments.
@@ -101,22 +101,3 @@
 	width: auto;
 	z-index: 100000;
 }
-
-/**
- * The following provide a simple means of applying a default border style when
- * a user first makes a selection in the border block support panel.
- * This prevents issues such as where the user could set a border width
- * and see no border due there being no border style set.
- *
- * This is intended to be removed once intelligent defaults can be set while
- * making border selections via the block support.
- *
- * See: https://github.com/WordPress/gutenberg/pull/33743
- */
-html :where(.has-border-color) {
-	border-style: solid;
-}
-
-html :where([style*="border-width"]) {
-	border-style: solid;
-}

package/src/cover/block.json

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

package/src/cover/edit.js

@@ -706,7 +706,6 @@ function CoverEdit( {
 				<BoxControlVisualizer
 					values={ styleAttribute?.spacing?.padding }
 					showValues={ styleAttribute?.visualizers?.padding }
-					className="block-library-cover__padding-visualizer"
 				/>
 				<ResizableCover
 					className="block-library-cover__resize-container"

package/src/cover/style.scss

@@ -76,10 +76,6 @@
 		}
 	}
 
-	.block-library-cover__padding-visualizer {
-		z-index: z-index(".block-library-cover__padding-visualizer");
-	}
-
 	// Apply max-width to floated items that have no intrinsic width
 	&.alignleft,
 	&.alignright {

package/src/editor.scss

@@ -5,8 +5,6 @@
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./columns/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";
@@ -50,8 +48,11 @@
 	@include background-colors-deprecated();
 	@include foreground-colors-deprecated();
 	@include gradient-colors-deprecated();
-	// This CSS Custom Properties aren't used anymore as defaults,
-	// but we still need to keep them for backward compatibility.
+}
+
+// This CSS Custom Properties aren't used anymore as defaults,
+// but we still need to keep them for backward compatibility.
+.editor-styles-wrapper {
 	--wp--preset--font-size--normal: 16px;
 	--wp--preset--font-size--huge: 42px;
 }
@@ -69,11 +70,11 @@
 }
 
 .editor-styles-wrapper .has-normal-font-size {
-	font-size: var(--wp--preset--font-size--normal) !important;
+	font-size: var(--wp--preset--font-size--normal);
 }
 
 .editor-styles-wrapper .has-huge-font-size {
-	font-size: var(--wp--preset--font-size--huge) !important;
+	font-size: var(--wp--preset--font-size--huge);
 }
 
 /**

package/src/embed/block.json

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

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

@@ -0,0 +1,78 @@
+/**
+ * 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, useState } from '@wordpress/element';
+
+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 ) ) {
+				onSubmit( url );
+			} else {
+				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 );
+			}
+		} else {
+			// Resets the URL when new value is empty
+			onSubmit( '' );
+		}
+	}, [ url, onSubmit, value ] );
+
+	function setAttributes( attributes ) {
+		setURL( attributes.url );
+	}
+
+	return (
+		<LinkSettingsNavigation
+			isVisible={ isVisible }
+			url={ url }
+			onClose={ onClose }
+			onDismiss={ onDismiss }
+			setAttributes={ setAttributes }
+			options={ linkSettingsOptions }
+			testID="embed-edit-url-modal"
+			withBottomSheet
+			showIcon
+		/>
+	);
+};
+
+export default EmbedBottomSheet;

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

@@ -27,7 +27,6 @@ const EmbedPlaceholder = ( {
 	cannotEmbed,
 	fallback,
 	tryAgain,
-	openEmbedLinkSettings,
 } ) => {
 	const containerStyle = usePreferredColorSchemeStyle(
 		styles.embed__container,
@@ -60,18 +59,11 @@ 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,8 +102,6 @@ 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} /-->"`;
@@ -124,14 +122,6 @@ 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>