@wordpress/block-library 7.0.1 → 7.1.0-next.e230fbab09.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/block.json

@@ -30,6 +30,7 @@
 			}
 		},
 		"spacing": {
+			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"blockGap": true,
 			"__experimentalDefaultControls": {

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/heading/edit.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect, Platform } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
 	AlignmentControl,
@@ -41,6 +41,14 @@ function HeadingEdit( {
 		style,
 	} );
 
+	const { canGenerateAnchors } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+
+		return {
+			canGenerateAnchors: !! settings.__experimentalGenerateAnchors,
+		};
+	}, [] );
+
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
@@ -48,6 +56,10 @@ function HeadingEdit( {
 	// Initially set anchor for headings that have content but no anchor set.
 	// This is used when transforming a block to heading, or for legacy anchors.
 	useEffect( () => {
+		if ( ! canGenerateAnchors ) {
+			return;
+		}
+
 		if ( ! anchor && content ) {
 			// This side-effect should not create an undo level.
 			__unstableMarkNextChangeAsNotPersistent();
@@ -59,14 +71,15 @@ function HeadingEdit( {
 
 		// Remove anchor map when block unmounts.
 		return () => setAnchor( clientId, null );
-	}, [ content, anchor ] );
+	}, [ anchor, content, clientId, canGenerateAnchors ] );
 
 	const onContentChange = ( value ) => {
 		const newAttrs = { content: value };
 		if (
-			! anchor ||
-			! value ||
-			generateAnchor( clientId, content ) === anchor
+			canGenerateAnchors &&
+			( ! anchor ||
+				! value ||
+				generateAnchor( clientId, content ) === anchor )
 		) {
 			newAttrs.anchor = generateAnchor( clientId, value );
 		}

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/home-link/index.php

@@ -138,25 +138,7 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 	$html .= '>';
 
 	if ( isset( $attributes['label'] ) ) {
-		$html .= wp_kses(
-			$attributes['label'],
-			array(
-				'code'   => array(),
-				'em'     => array(),
-				'img'    => array(
-					'scale' => array(),
-					'class' => array(),
-					'style' => array(),
-					'src'   => array(),
-					'alt'   => array(),
-				),
-				's'      => array(),
-				'span'   => array(
-					'style' => array(),
-				),
-				'strong' => array(),
-			)
-		);
+		$html .= wp_kses_post( $attributes['label'] );
 	}
 
 	$html .= '</a></li>';

package/src/image/deprecated.js

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 const blockAttributes = {
 	align: {
@@ -68,7 +69,110 @@ const blockAttributes = {
 	},
 };
 
+const blockSupports = {
+	anchor: true,
+	color: {
+		__experimentalDuotone: 'img',
+		text: false,
+		background: false,
+	},
+	__experimentalBorder: {
+		radius: true,
+		__experimentalDefaultControls: {
+			radius: true,
+		},
+	},
+};
+
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			title: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'img',
+				attribute: 'title',
+			},
+			sizeSlug: {
+				type: 'string',
+			},
+		},
+		supports: blockSupports,
+		save( { attributes } ) {
+			const {
+				url,
+				alt,
+				caption,
+				align,
+				href,
+				rel,
+				linkClass,
+				width,
+				height,
+				id,
+				linkTarget,
+				sizeSlug,
+				title,
+			} = attributes;
+
+			const newRel = isEmpty( rel ) ? undefined : rel;
+
+			const classes = classnames( {
+				[ `align${ align }` ]: align,
+				[ `size-${ sizeSlug }` ]: sizeSlug,
+				'is-resized': width || height,
+			} );
+
+			const image = (
+				<img
+					src={ url }
+					alt={ alt }
+					className={ id ? `wp-image-${ id }` : null }
+					width={ width }
+					height={ height }
+					title={ title }
+				/>
+			);
+
+			const figure = (
+				<>
+					{ href ? (
+						<a
+							className={ linkClass }
+							href={ href }
+							target={ linkTarget }
+							rel={ newRel }
+						>
+							{ image }
+						</a>
+					) : (
+						image
+					) }
+					{ ! RichText.isEmpty( caption ) && (
+						<RichText.Content
+							tagName="figcaption"
+							value={ caption }
+						/>
+					) }
+				</>
+			);
+
+			if ( 'left' === align || 'right' === align || 'center' === align ) {
+				return (
+					<div { ...useBlockProps.save() }>
+						<figure className={ classes }>{ figure }</figure>
+					</div>
+				);
+			}
+
+			return (
+				<figure { ...useBlockProps.save( { className: classes } ) }>
+					{ figure }
+				</figure>
+			);
+		},
+	},
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {

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/editor.scss

@@ -70,24 +70,6 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-*:not([data-align]) {
-	> .wp-block-image {
-		display: grid;
-		grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
-		.components-placeholder {
-			grid-column: placeholder;
-		}
-		> div:not(.components-placeholder) {
-			grid-column: image;
-		}
-		> figcaption {
-			grid-column: image;
-			display: table-caption;
-			caption-side: bottom;
-		}
-	}
-}
-
 .wp-block[data-align="left"] > .wp-block-image {
 	margin-right: 1em;
 	margin-left: 0;

package/src/image/save.js

@@ -65,14 +65,6 @@ export default function save( { attributes } ) {
 		</>
 	);
 
-	if ( 'left' === align || 'right' === align || 'center' === align ) {
-		return (
-			<div { ...useBlockProps.save() }>
-				<figure className={ classes }>{ figure }</figure>
-			</div>
-		);
-	}
-
 	return (
 		<figure { ...useBlockProps.save( { className: classes } ) }>
 			{ figure }

package/src/image/style.scss

@@ -22,6 +22,9 @@
 		width: 100%;
 	}
 
+	&.alignleft,
+	&.alignright,
+	&.aligncenter,
 	.alignleft,
 	.alignright,
 	.aligncenter {
@@ -66,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

@@ -15,7 +15,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
  * WordPress dependencies
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { apiFetch } from '@wordpress/data-controls';
 import {
 	setFeaturedImage,
 	sendMediaUpload,
@@ -40,14 +39,6 @@ sendMediaUpload.mockImplementation( ( payload ) => {
 	uploadCallBack( payload );
 } );
 
-jest.mock( '@wordpress/data-controls', () => {
-	const dataControls = jest.requireActual( '@wordpress/data-controls' );
-	return {
-		...dataControls,
-		apiFetch: jest.fn(),
-	};
-} );
-
 /**
  * Immediately invoke delayed functions. A better alternative would be using
  * fake timers and test the delay itself. However, fake timers does not work
@@ -59,7 +50,6 @@ jest.mock( 'lodash', () => {
 } );
 
 const apiFetchPromise = Promise.resolve( {} );
-apiFetch.mockImplementation( () => apiFetchPromise );
 
 const clipboardPromise = Promise.resolve( '' );
 Clipboard.getString.mockImplementation( () => clipboardPromise );
@@ -77,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 &&