@wordpress/block-library 7.0.2 → 7.1.0

package/src/embed/util.js

@@ -106,8 +106,8 @@ export const createUpgradedEmbedBlock = (
 	// so if we're in a WordPress block, assume the user has chosen it for a WordPress URL.
 	const isCurrentBlockWP =
 		providerNameSlug === 'wordpress' || type === WP_EMBED_TYPE;
-	// if current block is not WordPress and a more suitable block found
-	// that is different from the current one, create the new matched block
+	// If current block is not WordPress and a more suitable block found
+	// that is different from the current one, create the new matched block.
 	const shouldCreateNewBlock =
 		! isCurrentBlockWP &&
 		matchedBlock &&

package/src/embed/variations.js

@@ -151,7 +151,7 @@ const variations = [
 		attributes: { providerNameSlug: 'cloudup', responsive: true },
 	},
 	{
-		// Deprecated since CollegeHumor content is now powered by YouTube
+		// Deprecated since CollegeHumor content is now powered by YouTube.
 		name: 'collegehumor',
 		title: 'CollegeHumor',
 		icon: embedVideoIcon,

package/src/file/edit.js

@@ -23,7 +23,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
@@ -69,6 +69,7 @@ function FileEdit( {
 } ) {
 	const {
 		id,
+		fileId,
 		fileName,
 		href,
 		textLinkHref,
@@ -78,7 +79,6 @@ function FileEdit( {
 		displayPreview,
 		previewHeight,
 	} = attributes;
-	const [ hasError, setHasError ] = useState( false );
 	const { media, mediaUpload } = useSelect(
 		( select ) => ( {
 			media:
@@ -90,20 +90,20 @@ function FileEdit( {
 		[ id ]
 	);
 
-	const { toggleSelection } = useDispatch( blockEditorStore );
+	const {
+		toggleSelection,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 
 	useEffect( () => {
-		// Upload a file drag-and-dropped into the editor
+		// Upload a file drag-and-dropped into the editor.
 		if ( isBlobURL( href ) ) {
 			const file = getBlobByURL( href );
 
 			mediaUpload( {
 				filesList: [ file ],
 				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
-				onError: ( message ) => {
-					setHasError( true );
-					noticeOperations.createErrorNotice( message );
-				},
+				onError: onUploadError,
 			} );
 
 			revokeBlobURL( href );
@@ -115,13 +115,15 @@ function FileEdit( {
 	}, [] );
 
 	useEffect( () => {
-		// Add a unique fileId to each file block
-		setAttributes( { fileId: `wp-block-file--media-${ clientId }` } );
-	}, [ clientId ] );
+		if ( ! fileId && href ) {
+			// Add a unique fileId to each file block.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { fileId: `wp-block-file--media-${ clientId }` } );
+		}
+	}, [ href, fileId, clientId ] );
 
 	function onSelectFile( newMedia ) {
 		if ( newMedia && newMedia.url ) {
-			setHasError( false );
 			const isPdf = newMedia.url.endsWith( '.pdf' );
 			setAttributes( {
 				href: newMedia.url,
@@ -135,13 +137,13 @@ function FileEdit( {
 	}
 
 	function onUploadError( message ) {
-		setHasError( true );
+		setAttributes( { href: undefined } );
 		noticeOperations.removeAllNotices();
 		noticeOperations.createErrorNotice( message );
 	}
 
 	function changeLinkDestinationOption( newHref ) {
-		// Choose Media File or Attachment Page (when file is in Media Library)
+		// Choose Media File or Attachment Page (when file is in Media Library).
 		setAttributes( { textLinkHref: newHref } );
 	}
 
@@ -194,7 +196,7 @@ function FileEdit( {
 
 	const displayPreviewInEditor = browserSupportsPdfs() && displayPreview;
 
-	if ( ! href || hasError ) {
+	if ( ! href ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -295,9 +297,9 @@ function FileEdit( {
 								'wp-block-file__button-richtext-wrapper'
 							}
 						>
-							{ /* Using RichText here instead of PlainText so that it can be styled like a button */ }
+							{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ }
 							<RichText
-								tagName="div" // must be block-level or else cursor disappears
+								tagName="div" // Must be block-level or else cursor disappears.
 								aria-label={ __( 'Download button text' ) }
 								className={ 'wp-block-file__button' }
 								value={ downloadButtonText }

package/src/file/edit.native.js

@@ -370,7 +370,7 @@ export class FileEdit extends Component {
 	// Render `Text` with `placeholderText` styled as a placeholder
 	// to calculate its width which then is set as a `minWidth`
 	// This should be fixed on RNAztec level. In the mean time,
-	// We use the same strategy implemented in Button block
+	// We use the same strategy implemented in Button block.
 	getPlaceholderWidth( placeholderText ) {
 		const { maxWidth, placeholderTextWidth } = this.state;
 		return (

package/src/file/save.js

@@ -25,6 +25,12 @@ export default function save( { attributes } ) {
 				fileName
 		  );
 
+	const hasFilename = ! RichText.isEmpty( fileName );
+
+	// Only output an `aria-describedby` when the element it's referring to is
+	// actually rendered.
+	const describedById = hasFilename ? fileId : undefined;
+
 	return (
 		href && (
 			<div { ...useBlockProps.save() }>
@@ -42,9 +48,9 @@ export default function save( { attributes } ) {
 						/>
 					</>
 				) }
-				{ ! RichText.isEmpty( fileName ) && (
+				{ hasFilename && (
 					<a
-						id={ fileId }
+						id={ describedById }
 						href={ textLinkHref }
 						target={ textLinkTarget }
 						rel={
@@ -59,7 +65,7 @@ export default function save( { attributes } ) {
 						href={ href }
 						className="wp-block-file__button"
 						download={ true }
-						aria-describedby={ fileId }
+						aria-describedby={ describedById }
 					>
 						<RichText.Content value={ downloadButtonText } />
 					</a>

package/src/file/style.native.scss

@@ -26,6 +26,7 @@
 	color: #fff;
 	font-size: 14;
 	margin-top: 5;
+	text-align: center;
 }
 
 .retryContainer {

package/src/freeform/edit.js

@@ -132,7 +132,7 @@ export default function ClassicEdit( {
 
 			editor.on( 'keydown', ( event ) => {
 				if ( isKeyboardEvent.primary( event, 'z' ) ) {
-					// Prevent the gutenberg undo kicking in so TinyMCE undo stack works as expected
+					// Prevent the gutenberg undo kicking in so TinyMCE undo stack works as expected.
 					event.stopPropagation();
 				}
 
@@ -141,7 +141,7 @@ export default function ClassicEdit( {
 						event.keyCode === DELETE ) &&
 					isTmceEmpty( editor )
 				) {
-					// delete the block
+					// Delete the block.
 					onReplace( [] );
 					event.preventDefault();
 					event.stopImmediatePropagation();

package/src/gallery/edit.js

@@ -412,7 +412,7 @@ function GalleryEdit( props ) {
 	}
 
 	useEffect( () => {
-		// linkTo attribute must be saved so blocks don't break when changing image_default_link_type in options.php
+		// linkTo attribute must be saved so blocks don't break when changing image_default_link_type in options.php.
 		if ( ! linkTo ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( {

package/src/gallery/gallery.native.js

@@ -113,7 +113,7 @@ export const Gallery = ( props ) => {
 						  )
 				}
 				onFocus={ focusGalleryCaption }
-				onBlur={ onBlur } // always assign onBlur as props
+				onBlur={ onBlur } // Always assign onBlur as props.
 				insertBlocksAfter={ insertBlocksAfter }
 			/>
 		</View>

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

@@ -1,7 +1,171 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Gallery block Columns setting decrements columns 1`] = `
+"<!-- wp:gallery {\\"columns\\":2,\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-2 is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2001} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2002} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-3.jpeg\\" alt=\\"\\" class=\\"wp-image-2002\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block Columns setting does not increment due to maximum value 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2001} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2002} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-3.jpeg\\" alt=\\"\\" class=\\"wp-image-2002\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block cancels uploads 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":null} -->
+<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":null} -->
+<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block disables crop images setting 1`] = `
+"<!-- wp:gallery {\\"imageCrop\\":false,\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block finishes pending uploads upon opening the editor 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2001} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block handles failed uploads 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":1} -->
+<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2} -->
+<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
 exports[`Gallery block inserts block 1`] = `
 "<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
 <figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"></figure>
 <!-- /wp:gallery -->"
 `;
+
+exports[`Gallery block overrides "Link to" setting of gallery items 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"media\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":1,\\"linkDestination\\":\\"media\\"} -->
+<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2,\\"linkDestination\\":\\"media\\"} -->
+<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block rearranges gallery items 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2002} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-3.jpeg\\" alt=\\"\\" class=\\"wp-image-2002\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2001} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block sets caption to gallery 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image --><figcaption class=\\"blocks-gallery-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block sets caption to gallery items 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block successfully uploads items 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2001} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block takes a photo 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block uploads from free photo library 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2001} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Gallery block uploads from other apps 1`] = `
+"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"id\\":2001} -->
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;