@wordpress/block-library 6.0.23 → 7.0.0

package/src/group/variations.js

@@ -4,12 +4,22 @@
 import { __ } from '@wordpress/i18n';
 
 const variations = [
+	{
+		name: 'group',
+		title: __( 'Group' ),
+		description: __( 'Blocks shown in a column.' ),
+		attributes: { layout: { type: 'default' } },
+		scope: [ 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes.layout ||
+			blockAttributes.layout?.type === 'default',
+	},
 	{
 		name: 'group-row',
 		title: __( 'Row' ),
 		description: __( 'Blocks shown in a row.' ),
 		attributes: { layout: { type: 'flex', allowOrientation: false } },
-		scope: [ 'inserter' ],
+		scope: [ 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'flex',
 	},

package/src/heading/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/heading",
 	"title": "Heading",
@@ -30,7 +31,11 @@
 		"anchor": true,
 		"className": false,
 		"color": {
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
 			"margin": true

package/src/heading/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, Platform } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
@@ -120,6 +120,7 @@ function HeadingEdit( {
 				aria-label={ __( 'Heading text' ) }
 				placeholder={ placeholder || __( 'Heading' ) }
 				textAlign={ textAlign }
+				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
 				{ ...blockProps }
 			/>
 		</>

package/src/heading/transforms.js

@@ -84,11 +84,8 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, anchor } ) =>
-					createBlock( 'core/paragraph', {
-						content,
-						anchor,
-					} )
+				attributes.map( ( { content } ) =>
+					createBlock( 'core/paragraph', { content } )
 				),
 		},
 	],

package/src/home-link/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/home-link",
 	"category": "design",

package/src/home-link/index.php

@@ -114,9 +114,9 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 /**
  * Renders the `core/home-link` block.
  *
- * @param array $attributes The block attributes.
- * @param array $content    The saved content.
- * @param array $block      The parsed block.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the post content with the home url added.
  */

package/src/html/block.json

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

package/src/image/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/image",
 	"title": "Image",
@@ -83,7 +84,10 @@
 			"background": false
 		},
 		"__experimentalBorder": {
-			"radius": true
+			"radius": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
 		}
 	},
 	"styles": [

package/src/image/edit.js

@@ -87,6 +87,20 @@ function hasDefaultSize( image, defaultSize ) {
 	);
 }
 
+/**
+ * Checks if a media attachment object has been "destroyed",
+ * that is, removed from the media library. The core Media Library
+ * adds a `destroyed` property to a deleted attachment object in the media collection.
+ *
+ * @param {number} id The attachment id.
+ *
+ * @return {boolean} Whether the image has been destroyed.
+ */
+export function isMediaDestroyed( id ) {
+	const attachment = wp?.media?.attachment( id ) || {};
+	return attachment.destroyed;
+}
+
 export function ImageEdit( {
 	attributes,
 	setAttributes,
@@ -127,6 +141,33 @@ export function ImageEdit( {
 		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
 	}, [] );
 
+	// A callback passed to MediaUpload,
+	// fired when the media modal closes.
+	function onCloseModal() {
+		if ( isMediaDestroyed( attributes?.id ) ) {
+			setAttributes( {
+				url: undefined,
+				id: undefined,
+			} );
+		}
+	}
+
+	/*
+		 Runs an error callback if the image does not load.
+		 If the error callback is triggered, we infer that that image
+		 has been deleted.
+	*/
+	function onImageError( isReplaced = false ) {
+		// If the image block was not replaced with an embed,
+		// clear the attributes and trigger the placeholder.
+		if ( ! isReplaced ) {
+			setAttributes( {
+				url: undefined,
+				id: undefined,
+			} );
+		}
+	}
+
 	function onUploadError( message ) {
 		noticeOperations.removeAllNotices();
 		noticeOperations.createErrorNotice( message );
@@ -324,6 +365,8 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
+					onCloseModal={ onCloseModal }
+					onImageLoadError={ onImageError }
 				/>
 			) }
 			{ ! url && (
@@ -340,6 +383,7 @@ export function ImageEdit( {
 				onSelectURL={ onSelectURL }
 				notices={ noticeUI }
 				onError={ onUploadError }
+				onClose={ onCloseModal }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ { id, src } }

package/src/image/edit.native.js

@@ -134,7 +134,7 @@ function LinkSettings( {
 		url: {
 			valueMask,
 			autoFocus: false,
-			autoFill: true,
+			autoFill: false,
 		},
 		openInNewTab: {
 			label: __( 'Open in new tab' ),
@@ -174,14 +174,22 @@ function LinkSettings( {
 	);
 }
 
+const UPLOAD_STATE_IDLE = 0;
+const UPLOAD_STATE_UPLOADING = 1;
+const UPLOAD_STATE_SUCCEEDED = 2;
+const UPLOAD_STATE_FAILED = 3;
+
 export class ImageEdit extends Component {
 	constructor( props ) {
 		super( props );
 
 		this.state = {
 			isCaptionSelected: false,
+			uploadStatus: UPLOAD_STATE_IDLE,
 		};
 
+		this.replacedFeaturedImage = false;
+
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
 			this
 		);
@@ -245,7 +253,7 @@ export class ImageEdit extends Component {
 		// this action will only exist if the user pressed the trash button on the block holder
 		if (
 			hasAction( 'blocks.onRemoveBlockCheckUpload' ) &&
-			this.state.isUploadInProgress
+			this.state.uploadStatus === UPLOAD_STATE_UPLOADING
 		) {
 			doAction(
 				'blocks.onRemoveBlockCheckUpload',
@@ -255,13 +263,44 @@ export class ImageEdit extends Component {
 	}
 
 	componentDidUpdate( previousProps ) {
-		const { image, attributes, setAttributes } = this.props;
+		const {
+			image,
+			attributes,
+			setAttributes,
+			featuredImageId,
+		} = this.props;
 		if ( ! previousProps.image && image ) {
 			const url =
 				getUrlForSlug( image, attributes?.sizeSlug ) ||
 				image.source_url;
 			setAttributes( { url } );
 		}
+
+		const { id } = attributes;
+		const { id: previousId } = previousProps.attributes;
+
+		// The media changed and the previous media was set as the Featured Image,
+		// we must keep track of the previous media's featured status to act on it
+		// once the new media has a finalized ID.
+		if (
+			!! id &&
+			id !== previousId &&
+			!! featuredImageId &&
+			featuredImageId === previousId
+		) {
+			this.replacedFeaturedImage = true;
+		}
+
+		// The media changed and now has a finalized ID (e.g. upload completed), we
+		// should attempt to replace the featured image if applicable.
+		if (
+			this.replacedFeaturedImage &&
+			!! image &&
+			this.canImageBeFeatured()
+		) {
+			this.replacedFeaturedImage = false;
+			setFeaturedImage( id );
+		}
 	}
 
 	static getDerivedStateFromProps( props, state ) {
@@ -289,7 +328,7 @@ export class ImageEdit extends Component {
 	onImagePressed() {
 		const { attributes, image } = this.props;
 
-		if ( this.state.isUploadInProgress ) {
+		if ( this.state.uploadStatus === UPLOAD_STATE_UPLOADING ) {
 			requestImageUploadCancelDialog( attributes.id );
 		} else if (
 			attributes.id &&
@@ -314,8 +353,8 @@ export class ImageEdit extends Component {
 			setAttributes( { url: payload.mediaUrl } );
 		}
 
-		if ( ! this.state.isUploadInProgress ) {
-			this.setState( { isUploadInProgress: true } );
+		if ( this.state.uploadStatus !== UPLOAD_STATE_UPLOADING ) {
+			this.setState( { uploadStatus: UPLOAD_STATE_UPLOADING } );
 		}
 	}
 
@@ -323,21 +362,21 @@ export class ImageEdit extends Component {
 		const { setAttributes } = this.props;
 
 		setAttributes( { url: payload.mediaUrl, id: payload.mediaServerId } );
-		this.setState( { isUploadInProgress: false } );
+		this.setState( { uploadStatus: UPLOAD_STATE_SUCCEEDED } );
 	}
 
 	finishMediaUploadWithFailure( payload ) {
 		const { setAttributes } = this.props;
 
 		setAttributes( { id: payload.mediaId } );
-		this.setState( { isUploadInProgress: false } );
+		this.setState( { uploadStatus: UPLOAD_STATE_FAILED } );
 	}
 
 	mediaUploadStateReset() {
 		const { setAttributes } = this.props;
 
 		setAttributes( { id: null, url: null } );
-		this.setState( { isUploadInProgress: false } );
+		this.setState( { uploadStatus: UPLOAD_STATE_IDLE } );
 	}
 
 	updateImageURL( url ) {
@@ -490,7 +529,7 @@ export class ImageEdit extends Component {
 				footerNote={
 					<>
 						{ __(
-							'Describe the purpose of the image. Leave empty if the image is purely decorative. '
+							'Describe the purpose of the image. Leave empty if the image is purely decorative.'
 						) }
 						<FooterMessageLink
 							href={
@@ -524,7 +563,7 @@ export class ImageEdit extends Component {
 
 		const removeFeaturedButton = () => (
 			<BottomSheet.Cell
-				label={ __( 'Remove as Featured Image ' ) }
+				label={ __( 'Remove as Featured Image' ) }
 				labelStyle={ [
 					setFeaturedButtonStyle,
 					styles.removeFeaturedButton,
@@ -539,7 +578,7 @@ export class ImageEdit extends Component {
 
 		const setFeaturedButton = () => (
 			<BottomSheet.Cell
-				label={ __( 'Set as Featured Image ' ) }
+				label={ __( 'Set as Featured Image' ) }
 				labelStyle={ setFeaturedButtonStyle }
 				cellContainerStyle={ styles.setFeaturedButtonCellContainer }
 				separatorType={ 'none' }
@@ -550,6 +589,23 @@ export class ImageEdit extends Component {
 		return isFeaturedImage ? removeFeaturedButton() : setFeaturedButton();
 	}
 
+	/**
+	 * Featured images must be set to a successfully uploaded self-hosted image,
+	 * which has an ID.
+	 *
+	 * @return {boolean} Boolean indicating whether or not the current may be set as featured.
+	 */
+	canImageBeFeatured() {
+		const {
+			attributes: { id },
+		} = this.props;
+		return (
+			typeof id !== 'undefined' &&
+			this.state.uploadStatus !== UPLOAD_STATE_UPLOADING &&
+			this.state.uploadStatus !== UPLOAD_STATE_FAILED
+		);
+	}
+
 	render() {
 		const { isCaptionSelected } = this.state;
 		const {
@@ -588,13 +644,7 @@ export class ImageEdit extends Component {
 			selectedSizeOption = 'full';
 		}
 
-		// By default, it's only possible to set images that have been uploaded to a site's library as featured.
-		// The 'canImageBeFeatured' check filters out images that haven't been uploaded based on the following:
-		// - Images that are embedded in a post but are uploaded elsewhere have an id of 'undefined'.
-		// - Image that are uploading or have failed to upload are given a temporary negative ID.
-		const canImageBeFeatured =
-			typeof attributes.id !== 'undefined' && attributes.id > 0;
-
+		const canImageBeFeatured = this.canImageBeFeatured();
 		const isFeaturedImage =
 			canImageBeFeatured && featuredImageId === attributes.id;
 

package/src/image/image.js

@@ -43,7 +43,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
 import useClientWidth from './use-client-width';
-import { isExternalImage } from './edit';
+import { isExternalImage, isMediaDestroyed } from './edit';
 
 /**
  * Module constants
@@ -72,12 +72,14 @@ export default function Image( {
 	isSelected,
 	insertBlocksAfter,
 	onReplace,
+	onCloseModal,
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
 	containerRef,
 	context,
 	clientId,
+	onImageLoadError,
 } ) {
 	const imageRef = useRef();
 	const captionRef = useRef();
@@ -213,11 +215,16 @@ export default function Image( {
 	}
 
 	function onImageError() {
-		// Check if there's an embed block that handles this URL.
+		// Check if there's an embed block that handles this URL, e.g., instagram URL.
+		// See: https://github.com/WordPress/gutenberg/pull/11472
 		const embedBlock = createUpgradedEmbedBlock( { attributes: { url } } );
-		if ( undefined !== embedBlock ) {
+		const shouldReplace = undefined !== embedBlock;
+
+		if ( shouldReplace ) {
 			onReplace( embedBlock );
 		}
+
+		onImageLoadError( shouldReplace );
 	}
 
 	function onSetHref( props ) {
@@ -289,6 +296,9 @@ export default function Image( {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
 		}
+		if ( isSelected && isMediaDestroyed( id ) ) {
+			onImageLoadError();
+		}
 	}, [ isSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
@@ -352,6 +362,7 @@ export default function Image( {
 						onSelect={ onSelectImage }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
+						onCloseModal={ onCloseModal }
 					/>
 				</BlockControls>
 			) }

package/src/image/index.php

@@ -9,8 +9,8 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
- * @param  array $attributes The block attributes.
- * @param  array $content    The block content.
+ * @param  array  $attributes The block attributes.
+ * @param  string $content    The block content.
  * @return string Returns the block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content ) {
@@ -20,7 +20,7 @@ function render_block_core_image( $attributes, $content ) {
 		// which now wraps Image Blocks within innerBlocks.
 		// The data-id attribute is added in a core/gallery `render_block_data` hook.
 		$data_id_attribute = 'data-id="' . esc_attr( $attributes['data-id'] ) . '"';
-		if ( ! strpos( $content, $data_id_attribute ) ) {
+		if ( false === strpos( $content, $data_id_attribute ) ) {
 			$content = str_replace( '<img', '<img ' . $data_id_attribute . ' ', $content );
 		}
 	}

package/src/image/style.scss

@@ -2,8 +2,6 @@
 	margin: 0 0 1em 0;
 
 	img {
-		height: auto;
-		max-width: 100%;
 		vertical-align: bottom;
 	}