@wordpress/block-library 7.0.2 → 7.1.0

package/src/gallery/v1/edit.js

@@ -245,7 +245,7 @@ function GalleryEdit( props ) {
 			id: newImageId,
 		} );
 
-		// if the attachment caption is updated
+		// If the attachment caption is updated.
 		if ( attachment && attachment.caption !== newImage.caption ) {
 			return newImage.caption;
 		}
@@ -362,7 +362,7 @@ function GalleryEdit( props ) {
 	}, [] );
 
 	useEffect( () => {
-		// Deselect images when deselecting the block
+		// Deselect images when deselecting the block.
 		if ( ! isSelected ) {
 			setSelectedImage();
 		}
@@ -370,7 +370,7 @@ function GalleryEdit( props ) {
 
 	useEffect( () => {
 		// linkTo attribute must be saved so blocks don't break when changing
-		// image_default_link_type in options.php
+		// image_default_link_type in options.php.
 		if ( ! linkTo ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( {
@@ -456,7 +456,6 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
-
 			{ noticeUI }
 			<Gallery
 				{ ...props }

package/src/gallery/v1/gallery-image.native.js

@@ -134,8 +134,8 @@ class GalleryImage extends Component {
 			} );
 		}
 
-		// unselect the caption so when the user selects other image and comeback
-		// the caption is not immediately selected
+		// Unselect the caption so when the user selects other image and comeback
+		// the caption is not immediately selected.
 		if (
 			this.state.captionSelected &&
 			! isSelected &&
@@ -318,7 +318,7 @@ class GalleryImage extends Component {
 		return (
 			<TouchableWithoutFeedback
 				onPress={ this.onMediaPressed }
-				accessible={ ! isSelected } // We need only child views to be accessible after the selection
+				accessible={ ! isSelected } // We need only child views to be accessible after the selection.
 				accessibilityLabel={ this.accessibilityLabelImageContainer() } // if we don't set this explicitly it reads system provided accessibilityLabels of all child components and those include pretty technical words which don't make sense
 				accessibilityRole={ 'imagebutton' } // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
 			>

package/src/gallery/v1/gallery.native.js

@@ -77,7 +77,7 @@ export const Gallery = ( props ) => {
 			if ( isCaptionSelected ) {
 				setIsCaptionSelected( false );
 			}
-			// we need to fully invoke the curried function here
+			// We need to fully invoke the curried function here.
 			onSelectImage( index )();
 		};
 	};
@@ -152,7 +152,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/group/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 import { group as icon } from '@wordpress/icons';
 
 /**
@@ -12,6 +11,7 @@ import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import transforms from './transforms';
 import variations from './variations';
 
 const { name } = metadata;
@@ -80,59 +80,7 @@ export const settings = {
 			},
 		],
 	},
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				isMultiBlock: true,
-				blocks: [ '*' ],
-				__experimentalConvert( blocks ) {
-					// Avoid transforming a single `core/group` Block
-					if (
-						blocks.length === 1 &&
-						blocks[ 0 ].name === 'core/group'
-					) {
-						return;
-					}
-
-					const alignments = [ 'wide', 'full' ];
-
-					// Determine the widest setting of all the blocks to be grouped
-					const widestAlignment = blocks.reduce(
-						( accumulator, block ) => {
-							const { align } = block.attributes;
-							return alignments.indexOf( align ) >
-								alignments.indexOf( accumulator )
-								? align
-								: accumulator;
-						},
-						undefined
-					);
-
-					// Clone the Blocks to be Grouped
-					// Failing to create new block references causes the original blocks
-					// to be replaced in the switchToBlockType call thereby meaning they
-					// are removed both from their original location and within the
-					// new group block.
-					const groupInnerBlocks = blocks.map( ( block ) => {
-						return createBlock(
-							block.name,
-							block.attributes,
-							block.innerBlocks
-						);
-					} );
-
-					return createBlock(
-						'core/group',
-						{
-							align: widestAlignment,
-						},
-						groupInnerBlocks
-					);
-				},
-			},
-		],
-	},
+	transforms,
 	edit,
 	save,
 	deprecated,

package/src/group/transforms.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ '*' ],
+			__experimentalConvert( blocks ) {
+				const alignments = [ 'wide', 'full' ];
+
+				// Determine the widest setting of all the blocks to be grouped
+				const widestAlignment = blocks.reduce(
+					( accumulator, block ) => {
+						const { align } = block.attributes;
+						return alignments.indexOf( align ) >
+							alignments.indexOf( accumulator )
+							? align
+							: accumulator;
+					},
+					undefined
+				);
+
+				// Clone the Blocks to be Grouped
+				// Failing to create new block references causes the original blocks
+				// to be replaced in the switchToBlockType call thereby meaning they
+				// are removed both from their original location and within the
+				// new group block.
+				const groupInnerBlocks = blocks.map( ( block ) => {
+					return createBlock(
+						block.name,
+						block.attributes,
+						block.innerBlocks
+					);
+				} );
+
+				return createBlock(
+					'core/group',
+					{
+						align: widestAlignment,
+					},
+					groupInnerBlocks
+				);
+			},
+		},
+	],
+};
+
+export default transforms;

package/src/home-link/edit.js

@@ -23,7 +23,7 @@ export default function HomeEdit( {
 	const { homeUrl } = useSelect(
 		( select ) => {
 			const {
-				getUnstableBase, //site index
+				getUnstableBase, // Site index.
 			} = select( coreStore );
 			return {
 				homeUrl: getUnstableBase()?.home,

package/src/image/edit.js

@@ -171,6 +171,12 @@ export function ImageEdit( {
 	function onUploadError( message ) {
 		noticeOperations.removeAllNotices();
 		noticeOperations.createErrorNotice( message );
+		setAttributes( {
+			src: undefined,
+			id: undefined,
+			url: undefined,
+		} );
+		setTemporaryURL( undefined );
 	}
 
 	function onSelectImage( media ) {
@@ -306,12 +312,7 @@ export function ImageEdit( {
 				allowedTypes: ALLOWED_MEDIA_TYPES,
 				onError: ( message ) => {
 					isTemp = false;
-					noticeOperations.createErrorNotice( message );
-					setAttributes( {
-						src: undefined,
-						id: undefined,
-						url: undefined,
-					} );
+					onUploadError( message );
 				},
 			} );
 		}

package/src/image/edit.native.js

@@ -88,7 +88,7 @@ function LinkSettings( {
 	const route = useRoute();
 	const { href: url, label, linkDestination, linkTarget, rel } = attributes;
 
-	// Persist attributes passed from child screen
+	// Persist attributes passed from child screen.
 	useEffect( () => {
 		const { inputValue: newUrl } = route.params || {};
 
@@ -186,6 +186,7 @@ export class ImageEdit extends Component {
 		this.state = {
 			isCaptionSelected: false,
 			uploadStatus: UPLOAD_STATE_IDLE,
+			isAnimatedGif: false,
 		};
 
 		this.replacedFeaturedImage = false;
@@ -225,7 +226,7 @@ export class ImageEdit extends Component {
 			console.warn( 'Attributes has id with no url.' );
 		}
 
-		// Detect any pasted image and start an upload
+		// Detect any pasted image and start an upload.
 		if (
 			! attributes.id &&
 			attributes.url &&
@@ -239,7 +240,7 @@ export class ImageEdit extends Component {
 		}
 
 		// Make sure we mark any temporary images as failed if they failed while
-		// the editor wasn't open
+		// the editor wasn't open.
 		if (
 			attributes.id &&
 			attributes.url &&
@@ -250,7 +251,7 @@ export class ImageEdit extends Component {
 	}
 
 	componentWillUnmount() {
-		// this action will only exist if the user pressed the trash button on the block holder
+		// This action will only exist if the user pressed the trash button on the block holder.
 		if (
 			hasAction( 'blocks.onRemoveBlockCheckUpload' ) &&
 			this.state.uploadStatus === UPLOAD_STATE_UPLOADING
@@ -305,7 +306,7 @@ export class ImageEdit extends Component {
 
 	static getDerivedStateFromProps( props, state ) {
 		// Avoid a UI flicker in the toolbar by insuring that isCaptionSelected
-		// is updated immediately any time the isSelected prop becomes false
+		// is updated immediately any time the isSelected prop becomes false.
 		return {
 			isCaptionSelected: props.isSelected && state.isCaptionSelected,
 		};
@@ -363,6 +364,10 @@ export class ImageEdit extends Component {
 
 		setAttributes( { url: payload.mediaUrl, id: payload.mediaServerId } );
 		this.setState( { uploadStatus: UPLOAD_STATE_SUCCEEDED } );
+
+		this.setState( {
+			isAnimatedGif: payload.mediaUrl.toLowerCase().includes( '.gif' ),
+		} );
 	}
 
 	finishMediaUploadWithFailure( payload ) {
@@ -459,6 +464,10 @@ export class ImageEdit extends Component {
 			...mediaAttributes,
 			...additionalAttributes,
 		} );
+
+		this.setState( {
+			isAnimatedGif: media.url.toLowerCase().includes( '.gif' ),
+		} );
 	}
 
 	onFocusCaption() {
@@ -739,8 +748,16 @@ export class ImageEdit extends Component {
 			context?.fixedHeight && styles.fixedHeight,
 		];
 
+		const badgeLabelShown = isFeaturedImage || this.state.isAnimatedGif;
+		let badgeLabelText = '';
+		if ( isFeaturedImage ) {
+			badgeLabelText = __( 'Featured' );
+		} else if ( this.state.isAnimatedGif ) {
+			badgeLabelText = __( 'GIF' );
+		}
+
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
-			<Badge label={ __( 'Featured' ) } show={ isFeaturedImage }>
+			<Badge label={ badgeLabelText } show={ badgeLabelShown }>
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onImagePressed }
@@ -813,7 +830,7 @@ export class ImageEdit extends Component {
 					accessible
 					accessibilityLabelCreator={ this.accessibilityLabelCreator }
 					onFocus={ this.onFocusCaption }
-					onBlur={ this.props.onBlur } // always assign onBlur as props
+					onBlur={ this.props.onBlur } // Always assign onBlur as props.
 					insertBlocksAfter={ this.props.insertBlocksAfter }
 				/>
 			</Badge>
@@ -851,7 +868,7 @@ export default compose( [
 		const shouldGetMedia =
 			( isSelected && isNotFileUrl ) ||
 			// Edge case to update the image after uploading if the block gets unselected
-			// Check if it's the original image and not the resized one with queryparams
+			// Check if it's the original image and not the resized one with queryparams.
 			( ! isSelected &&
 				isNotFileUrl &&
 				url &&

package/src/image/style.scss

@@ -69,7 +69,8 @@
 	}
 
 	// Variations
-	&.is-style-rounded img {
+	&.is-style-rounded img,
+	.is-style-rounded img {
 		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
 		// to rectangular images. A pill-shape is better than otherwise.
 		border-radius: 9999px;

package/src/image/test/edit.native.js

@@ -67,7 +67,7 @@ afterAll( () => {
 		unregisterBlockType( name );
 	} );
 
-	// Restore mocks
+	// Restore mocks.
 	Image.getSize.mockRestore();
 } );
 

package/src/image/transforms.js

@@ -19,7 +19,7 @@ export function stripFirstImage( attributes, { shortcode } ) {
 
 	let nodeToRemove = body.querySelector( 'img' );
 
-	// if an image has parents, find the topmost node to remove
+	// If an image has parents, find the topmost node to remove.
 	while (
 		nodeToRemove &&
 		nodeToRemove.parentNode &&

package/src/index.js

@@ -96,7 +96,6 @@ import * as socialLink from './social-link';
 import * as socialLinks from './social-links';
 import * as spacer from './spacer';
 import * as table from './table';
-// import * as tableOfContents from './table-of-contents';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
@@ -145,7 +144,7 @@ export const __experimentalGetCoreBlocks = () => [
 	buttons,
 	calendar,
 	categories,
-	window.wp && window.wp.oldEditor ? classic : null, // Only add the classic block in WP Context
+	window.wp && window.wp.oldEditor ? classic : null, // Only add the classic block in WP Context.
 	code,
 	column,
 	columns,
@@ -205,7 +204,6 @@ export const __experimentalGetCoreBlocks = () => [
 	logInOut,
 	termDescription,
 	queryTitle,
-	postAuthorName,
 	postAuthorBiography,
 ];
 
@@ -251,6 +249,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 			[
 				// Experimental blocks.
 				homeLink,
+				postAuthorName,
 
 				// Full Site Editing blocks.
 				...( enableFSEBlocks

package/src/index.native.js

@@ -135,7 +135,7 @@ export const registerBlock = ( block ) => {
 		{
 			name,
 			...metadata,
-			// Gradients support only available for blocks listed in ALLOWED_BLOCKS_GRADIENT_SUPPORT
+			// Gradients support only available for blocks listed in ALLOWED_BLOCKS_GRADIENT_SUPPORT.
 			...( ! ALLOWED_BLOCKS_GRADIENT_SUPPORT.includes( name ) &&
 			supports?.color?.gradients
 				? {
@@ -171,7 +171,7 @@ const registerBlockVariations = ( block ) => {
 	} );
 };
 
-// only enable code block for development
+// Only enable code block for development
 // eslint-disable-next-line no-undef
 const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 

package/src/media-text/edit.js

@@ -29,6 +29,7 @@ import {
 	ExternalLink,
 	FocalPointPicker,
 } from '@wordpress/components';
+import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { pullLeft, pullRight } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -72,9 +73,26 @@ function attributesFromMedia( {
 	setAttributes,
 } ) {
 	return ( media ) => {
+		if ( ! media || ! media.url ) {
+			setAttributes( {
+				mediaAlt: undefined,
+				mediaId: undefined,
+				mediaType: undefined,
+				mediaUrl: undefined,
+				mediaLink: undefined,
+				href: undefined,
+				focalPoint: undefined,
+			} );
+			return;
+		}
+
+		if ( isBlobURL( media.url ) ) {
+			media.type = getBlobTypeByURL( media.url );
+		}
+
 		let mediaType;
 		let src;
-		// for media selections originated from a file upload.
+		// For media selections originated from a file upload.
 		if ( media.media_type ) {
 			if ( media.media_type === 'image' ) {
 				mediaType = 'image';
@@ -84,7 +102,7 @@ function attributesFromMedia( {
 				mediaType = 'video';
 			}
 		} else {
-			// for media selections originated from existing files in the media library.
+			// For media selections originated from existing files in the media library.
 			mediaType = media.type;
 		}
 

package/src/media-text/edit.native.js

@@ -82,7 +82,7 @@ class MediaTextEdit extends Component {
 
 		let mediaType;
 		let src;
-		// for media selections originated from a file upload.
+		// For media selections originated from a file upload.
 		if ( media.media_type ) {
 			if ( media.media_type === 'image' ) {
 				mediaType = 'image';
@@ -92,7 +92,7 @@ class MediaTextEdit extends Component {
 				mediaType = 'video';
 			}
 		} else {
-			// for media selections originated from existing files in the media library.
+			// For media selections originated from existing files in the media library.
 			mediaType = media.type;
 		}
 

package/src/media-text/media-container.native.js

@@ -73,7 +73,7 @@ class MediaContainer extends Component {
 		const { mediaId, mediaUrl } = this.props;
 
 		// Make sure we mark any temporary images as failed if they failed while
-		// the editor wasn't open
+		// the editor wasn't open.
 		if ( mediaId && mediaUrl && getProtocol( mediaUrl ) === 'file:' ) {
 			mediaUploadSync();
 		}

package/src/media-text/style.native.scss

@@ -116,6 +116,7 @@ $media-to-text: 12px;
 	color: #fff;
 	font-size: 14;
 	margin-top: 5;
+	text-align: center;
 }
 
 .uploadFailedTextVideo {

package/src/missing/edit.native.js

@@ -173,7 +173,7 @@ export class UnsupportedBlockEdit extends Component {
 						// On iOS, onModalHide is called when the controller is still part of the hierarchy.
 						// A small delay will ensure that the controller has already been removed.
 						this.timeout = setTimeout( () => {
-							// for the Classic block, the content is kept in the `content` attribute
+							// For the Classic block, the content is kept in the `content` attribute.
 							const content =
 								blockName === 'core/freeform'
 									? attributes.content

package/src/missing/test/edit-integration.native.js

@@ -15,21 +15,21 @@ import { setLocaleData } from '@wordpress/i18n';
 import { registerCoreBlocks } from '../..';
 
 beforeAll( () => {
-	// Mock translations
+	// Mock translations.
 	setLocaleData( {
 		'block title\u0004Table': [ 'Tabla' ],
 		"'%s' is not fully-supported": [ '«%s» no es totalmente compatible' ],
 	} );
 
-	// Register all core blocks
+	// Register all core blocks.
 	registerCoreBlocks();
 } );
 
 afterAll( () => {
-	// Clean up translations
+	// Clean up translations.
 	setLocaleData( {} );
 
-	// Clean up registered blocks
+	// Clean up registered blocks.
 	getBlockTypes().forEach( ( block ) => {
 		unregisterBlockType( block.name );
 	} );

package/src/missing/test/edit.native.js

@@ -49,7 +49,7 @@ describe( 'Missing block', () => {
 			const testInstance = getTestComponentWithContent();
 			const bottomSheet = testInstance.UNSAFE_getByType( BottomSheet );
 			const children = bottomSheet.props.children[ 0 ].props.children;
-			expect( children.length ).toBe( 3 ); // 4 children in the bottom sheet: the icon, the "isn't yet supported" title and the "We are working hard..." message
+			expect( children.length ).toBe( 3 ); // 4 children in the bottom sheet: the icon, the "isn't yet supported" title and the "We are working hard..." message.
 			expect( children[ 0 ].props.icon ).toBe( help );
 		} );
 
@@ -66,7 +66,7 @@ describe( 'Missing block', () => {
 
 		describe( 'Unsupported block editor (UBE)', () => {
 			beforeEach( () => {
-				// By default we set the web editor as available
+				// By default we set the web editor as available.
 				storeConfig.selectors.getSettings.mockReturnValue( {
 					unsupportedBlockEditor: true,
 				} );

package/src/more/transforms.js

@@ -15,11 +15,11 @@ const transforms = {
 			transform( node ) {
 				const { customText, noTeaser } = node.dataset;
 				const attrs = {};
-				// Don't copy unless defined and not an empty string
+				// Don't copy unless defined and not an empty string.
 				if ( customText ) {
 					attrs.customText = customText;
 				}
-				// Special handling for boolean
+				// Special handling for boolean.
 				if ( noTeaser === '' ) {
 					attrs.noTeaser = true;
 				}