@wordpress/block-library 7.1.1 → 7.3.1

package/src/cover/edit.js

@@ -9,7 +9,14 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { Fragment, useEffect, useRef, useState } from '@wordpress/element';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import {
+	Fragment,
+	useEffect,
+	useRef,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
@@ -22,10 +29,12 @@ import {
 	Spinner,
 	TextareaControl,
 	ToggleControl,
-	withNotices,
+	ToolbarButton,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalBoxControl as BoxControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { compose, useInstanceId } from '@wordpress/compose';
 import {
@@ -41,15 +50,15 @@ import {
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
-	__experimentalUnitControl as UnitControl,
 	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
 	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { cover as icon } from '@wordpress/icons';
+import { postFeaturedImage, cover as icon } from '@wordpress/icons';
 import { isBlobURL } from '@wordpress/blob';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -96,8 +105,6 @@ function CoverHeightInput( {
 	unit = 'px',
 	value = '',
 } ) {
-	const [ temporaryInput, setTemporaryInput ] = useState( null );
-
 	const instanceId = useInstanceId( UnitControl );
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
@@ -120,20 +127,16 @@ function CoverHeightInput( {
 				: undefined;
 
 		if ( isNaN( inputValue ) && inputValue !== undefined ) {
-			setTemporaryInput( unprocessedValue );
 			return;
 		}
-		setTemporaryInput( null );
 		onChange( inputValue );
 	};
 
-	const handleOnBlur = () => {
-		if ( temporaryInput !== null ) {
-			setTemporaryInput( null );
-		}
-	};
+	const computedValue = useMemo( () => {
+		const [ parsedQuantity ] = parseQuantityAndUnitFromRawValue( value );
+		return [ parsedQuantity, unit ].join( '' );
+	}, [ unit, value ] );
 
-	const inputValue = temporaryInput !== null ? temporaryInput : value;
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
 	return (
@@ -142,13 +145,11 @@ function CoverHeightInput( {
 				id={ inputId }
 				isResetValueOnUnitChange
 				min={ min }
-				onBlur={ handleOnBlur }
 				onChange={ handleOnChange }
 				onUnitChange={ onUnitChange }
 				style={ { maxWidth: 80 } }
-				unit={ unit }
 				units={ units }
-				value={ inputValue }
+				value={ computedValue }
 			/>
 		</BaseControl>
 	);
@@ -266,12 +267,10 @@ const isTemporaryMedia = ( id, url ) => ! id && isBlobURL( url );
 function CoverPlaceholder( {
 	disableMediaButtons = false,
 	children,
-	noticeUI,
-	noticeOperations,
 	onSelectMedia,
+	onError,
 	style,
 } ) {
-	const { removeAllNotices, createErrorNotice } = noticeOperations;
 	return (
 		<MediaPlaceholder
 			icon={ <BlockIcon icon={ icon } /> }
@@ -284,12 +283,8 @@ function CoverPlaceholder( {
 			onSelect={ onSelectMedia }
 			accept="image/*,video/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
-			notices={ noticeUI }
 			disableMediaButtons={ disableMediaButtons }
-			onError={ ( message ) => {
-				removeAllNotices();
-				createErrorNotice( message );
-			} }
+			onError={ onError }
 			style={ style }
 		>
 			{ children }
@@ -301,17 +296,16 @@ function CoverEdit( {
 	attributes,
 	clientId,
 	isSelected,
-	noticeUI,
-	noticeOperations,
 	overlayColor,
 	setAttributes,
 	setOverlayColor,
 	toggleSelection,
+	context: { postId, postType },
 } ) {
 	const {
 		contentPosition,
 		id,
-		backgroundType,
+		useFeaturedImage,
 		dimRatio,
 		focalPoint,
 		hasParallax,
@@ -320,14 +314,39 @@ function CoverEdit( {
 		minHeight,
 		minHeightUnit,
 		style: styleAttribute,
-		url,
 		alt,
 		allowedBlocks,
 		templateLock,
 	} = attributes;
+
+	const [ featuredImage ] = useEntityProp(
+		'postType',
+		postType,
+		'featured_media',
+		postId
+	);
+
+	const media = useSelect(
+		( select ) =>
+			featuredImage &&
+			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
+		[ featuredImage ]
+	);
+	const mediaUrl = media?.source_url;
+
+	// instead of destructuring the attributes
+	// we define the url and background type
+	// depending on the value of the useFeaturedImage flag
+	// to preview in edit the dynamic featured image
+	const url = useFeaturedImage ? mediaUrl : attributes.url;
+	const backgroundType = useFeaturedImage
+		? IMAGE_BACKGROUND_TYPE
+		: attributes.backgroundType;
+
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
+	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		gradientClass,
 		gradientValue,
@@ -382,6 +401,19 @@ function CoverEdit( {
 		} );
 	};
 
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			useFeaturedImage: ! useFeaturedImage,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+		} );
+	};
+
+	const onUploadError = ( message ) => {
+		createErrorNotice( Array.isArray( message ) ? message[ 2 ] : message, {
+			type: 'snackbar',
+		} );
+	};
+
 	const isDarkElement = useRef();
 	const isCoverDark = useCoverIsDark(
 		url,
@@ -460,14 +492,22 @@ function CoverEdit( {
 				/>
 			</BlockControls>
 			<BlockControls group="other">
-				<MediaReplaceFlow
-					mediaId={ id }
-					mediaURL={ url }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*,video/*"
-					onSelect={ onSelectMedia }
-					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+				<ToolbarButton
+					icon={ postFeaturedImage }
+					label={ __( 'Use featured image' ) }
+					isPressed={ useFeaturedImage }
+					onClick={ toggleUseFeaturedImage }
 				/>
+				{ ! useFeaturedImage && (
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ url }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						accept="image/*,video/*"
+						onSelect={ onSelectMedia }
+						name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+					/>
+				) }
 			</BlockControls>
 			<InspectorControls>
 				{ !! url && (
@@ -501,27 +541,32 @@ function CoverEdit( {
 								}
 							/>
 						) }
-						{ url && isImageBackground && isImgElement && (
-							<TextareaControl
-								label={ __( 'Alt text (alternative text)' ) }
-								value={ alt }
-								onChange={ ( newAlt ) =>
-									setAttributes( { alt: newAlt } )
-								}
-								help={
-									<>
-										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+						{ ! useFeaturedImage &&
+							url &&
+							isImageBackground &&
+							isImgElement && (
+								<TextareaControl
+									label={ __(
+										'Alt text (alternative text)'
+									) }
+									value={ alt }
+									onChange={ ( newAlt ) =>
+										setAttributes( { alt: newAlt } )
+									}
+									help={
+										<>
+											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+												{ __(
+													'Describe the purpose of the image'
+												) }
+											</ExternalLink>
 											{ __(
-												'Describe the purpose of the image'
+												'Leave empty if the image is purely decorative.'
 											) }
-										</ExternalLink>
-										{ __(
-											'Leave empty if the image is purely decorative.'
-										) }
-									</>
-								}
-							/>
-						) }
+										</>
+									}
+								/>
+							) }
 						<PanelRow>
 							<Button
 								variant="secondary"
@@ -535,6 +580,7 @@ function CoverEdit( {
 										focalPoint: undefined,
 										hasParallax: undefined,
 										isRepeated: undefined,
+										useFeaturedImage: false,
 									} )
 								}
 							>
@@ -640,9 +686,8 @@ function CoverEdit( {
 					) }
 				>
 					<CoverPlaceholder
-						noticeUI={ noticeUI }
 						onSelectMedia={ onSelectMedia }
-						noticeOperations={ noticeOperations }
+						onError={ onUploadError }
 						style={ {
 							minHeight: minHeightWithUnit || undefined,
 						} }
@@ -763,9 +808,8 @@ function CoverEdit( {
 				{ isUploadingMedia && <Spinner /> }
 				<CoverPlaceholder
 					disableMediaButtons
-					noticeUI={ noticeUI }
 					onSelectMedia={ onSelectMedia }
-					noticeOperations={ noticeOperations }
+					onError={ onUploadError }
 				/>
 				<div { ...innerBlocksProps } />
 			</div>
@@ -775,5 +819,4 @@ function CoverEdit( {
 
 export default compose( [
 	withColors( { overlayColor: 'background-color' } ),
-	withNotices,
 ] )( CoverEdit );

package/src/cover/index.php

@@ -0,0 +1,85 @@
+<?php
+/**
+ * Server-side rendering of the `core/cover` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/cover` block on server.
+ *
+ * @param array $attributes The block attributes.
+ * @param array $content    The block rendered content.
+ *
+ * @return string Returns the cover block markup, if useFeaturedImage is true.
+ */
+function render_block_core_cover( $attributes, $content ) {
+	if ( false === $attributes['useFeaturedImage'] ) {
+		return $content;
+	}
+
+	$current_featured_image = get_the_post_thumbnail_url();
+
+	if ( false === $current_featured_image ) {
+		return $content;
+	}
+
+	$is_img_element      = ! ( $attributes['hasParallax'] || $attributes['isRepeated'] );
+	$is_image_background = 'image' === $attributes['backgroundType'];
+
+	if ( $is_image_background && ! $is_img_element ) {
+		$content = preg_replace(
+			'/class=\".*?\"/',
+			'${0} style="background-image:url(' . esc_url( $current_featured_image ) . ')"',
+			$content,
+			1
+		);
+	}
+
+	if ( $is_image_background && $is_img_element ) {
+		$object_position = '';
+		if ( isset( $attributes['focalPoint'] ) ) {
+			$object_position = round( $attributes['focalPoint']['x'] * 100 ) . '%' . ' ' .
+			round( $attributes['focalPoint']['x'] * 100 ) . '%';
+		}
+
+		$image_template = '<img
+			class="wp-block-cover__image-background"
+			alt="%s"
+			src="%s"
+			style="object-position: %s"
+			data-object-fit="cover"
+			data-object-position="%s"
+		/>';
+
+		$image = sprintf(
+			$image_template,
+			esc_attr( get_the_post_thumbnail_caption() ),
+			esc_url( $current_featured_image ),
+			esc_attr( $object_position ),
+			esc_attr( $object_position )
+		);
+
+		$content = str_replace(
+			'</span><div',
+			'</span>' . $image . '<div',
+			$content
+		);
+
+	}
+
+	return $content;
+}
+
+/**
+ * Registers the `core/cover` block renderer on server.
+ */
+function register_block_core_cover() {
+	register_block_type_from_metadata(
+		__DIR__ . '/cover',
+		array(
+			'render_callback' => 'render_block_core_cover',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_cover' );

package/src/cover/save.js

@@ -34,6 +34,7 @@ export default function save( { attributes } ) {
 		customOverlayColor,
 		dimRatio,
 		focalPoint,
+		useFeaturedImage,
 		hasParallax,
 		isDark,
 		isRepeated,
@@ -60,7 +61,7 @@ export default function save( { attributes } ) {
 	const isImgElement = ! ( hasParallax || isRepeated );
 
 	const style = {
-		...( isImageBackground && ! isImgElement
+		...( isImageBackground && ! isImgElement && ! useFeaturedImage
 			? backgroundImageStyles( url )
 			: {} ),
 		minHeight: minHeight || undefined,
@@ -113,19 +114,22 @@ export default function save( { attributes } ) {
 				style={ bgStyle }
 			/>
 
-			{ isImageBackground && isImgElement && url && (
-				<img
-					className={ classnames(
-						'wp-block-cover__image-background',
-						id ? `wp-image-${ id }` : null
-					) }
-					alt={ alt }
-					src={ url }
-					style={ { objectPosition } }
-					data-object-fit="cover"
-					data-object-position={ objectPosition }
-				/>
-			) }
+			{ ! useFeaturedImage &&
+				isImageBackground &&
+				isImgElement &&
+				url && (
+					<img
+						className={ classnames(
+							'wp-block-cover__image-background',
+							id ? `wp-image-${ id }` : null
+						) }
+						alt={ alt }
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
 			{ isVideoBackground && url && (
 				<video
 					className={ classnames(

package/src/editor.scss

@@ -1,5 +1,6 @@
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
+@import "./avatar/editor.scss";
 @import "./block/editor.scss";
 @import "./button/editor.scss";
 @import "./buttons/editor.scss";

package/src/embed/variations.js

@@ -344,9 +344,9 @@ const variations = [
 	},
 	{
 		name: 'wolfram-cloud',
-		title: 'Wolfram Cloud',
+		title: 'Wolfram',
 		icon: embedWolframIcon,
-		description: __( 'Embed Wolfram Cloud notebook content.' ),
+		description: __( 'Embed Wolfram notebook content.' ),
 		patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ],
 		attributes: { providerNameSlug: 'wolfram-cloud', responsive: true },
 	},

package/src/gallery/block.json

@@ -106,7 +106,24 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"html": false,
+		"units": [ "px", "em", "rem", "vh", "vw" ],
+		"spacing": {
+			"blockGap": true,
+			"__experimentalSkipSerialization": [ "blockGap" ],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"allowEditing": false,
+			"default": {
+				"type": "flex"
+			}
+		}
 	},
 	"editorStyle": "wp-block-gallery-editor",
 	"style": "wp-block-gallery"

package/src/gallery/deprecated.scss

@@ -1,7 +1,7 @@
 // Deprecated gallery styles pre refactoring to use nested image blocks.
 // https://github.com/WordPress/gutenberg/pull/25940.
-.wp-block-gallery,
-.blocks-gallery-grid {
+.wp-block-gallery:not(.has-nested-images),
+.blocks-gallery-grid:not(.has-nested-images) {
 	display: flex;
 	flex-wrap: wrap;
 	list-style-type: none;

package/src/gallery/edit.js

@@ -54,6 +54,7 @@ import useImageSizes from './use-image-sizes';
 import useShortCodeTransform from './use-short-code-transform';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
+import GapStyles from './gap-styles';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
@@ -99,7 +100,8 @@ function GalleryEdit( props ) {
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceInnerBlocks,
 		updateBlockAttributes,
-		multiSelect,
+		selectBlock,
+		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
@@ -155,13 +157,8 @@ function GalleryEdit( props ) {
 				align: undefined,
 			} );
 		} );
-
-		// If new blocks added select the first of these so they scroll into view.
-		if ( newImages?.length ) {
-			multiSelect(
-				newImages[ 0 ].clientId,
-				newImages[ newImages?.length - 1 ].clientId
-			);
+		if ( newImages?.length > 0 ) {
+			clearSelectedBlock();
 		}
 	}, [ newImages ] );
 
@@ -296,6 +293,10 @@ function GalleryEdit( props ) {
 			} );
 		} );
 
+		if ( newBlocks?.length > 0 ) {
+			selectBlock( newBlocks[ 0 ].clientId );
+		}
+
 		replaceInnerBlocks(
 			clientId,
 			concat( existingImageBlocks, newBlocks ).sort(
@@ -548,6 +549,12 @@ function GalleryEdit( props ) {
 				/>
 			</BlockControls>
 			{ noticeUI }
+			{ Platform.isWeb && (
+				<GapStyles
+					blockGap={ attributes.style?.spacing?.blockGap }
+					clientId={ clientId }
+				/>
+			) }
 			<Gallery
 				{ ...props }
 				images={ images }

package/src/gallery/editor.scss

@@ -4,7 +4,6 @@ figure.wp-block-gallery {
 	// See https://github.com/WordPress/gutenberg/pull/10358
 
 	display: block;
-	margin: 0;
 	&.has-nested-images {
 		.components-drop-zone {
 			display: none;

package/src/gallery/gallery.js

@@ -69,13 +69,14 @@ export const Gallery = ( props ) => {
 			) }
 		>
 			{ children }
-
-			<View
-				className="blocks-gallery-media-placeholder-wrapper"
-				onClick={ removeCaptionFocus }
-			>
-				{ mediaPlaceholder }
-			</View>
+			{ isSelected && ! children && (
+				<View
+					className="blocks-gallery-media-placeholder-wrapper"
+					onClick={ removeCaptionFocus }
+				>
+					{ mediaPlaceholder }
+				</View>
+			) }
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				captionFocused={ captionFocused }

package/src/gallery/gap-styles.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockList } from '@wordpress/block-editor';
+import { useContext, createPortal } from '@wordpress/element';
+
+export default function GapStyles( { blockGap, clientId } ) {
+	const styleElement = useContext( BlockList.__unstableElementContext );
+	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
+	// gap on the gallery.
+	const gapValue = blockGap
+		? blockGap
+		: `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
+	const gap = `#block-${ clientId } { 
+		--wp--style--unstable-gallery-gap: ${ gapValue };
+		gap: ${ gapValue } 
+	}`;
+
+	const GapStyle = () => {
+		return <style>{ gap }</style>;
+	};
+
+	return gap && styleElement
+		? createPortal( <GapStyle />, styleElement )
+		: null;
+}

package/src/gallery/index.php

@@ -32,12 +32,54 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 
 add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
+/**
+ * Adds a style tag for the --wp--style--unstable-gallery-gap var.
+ *
+ * The Gallery block needs to recalculate Image block width based on
+ * the current gap setting in order to maintain the number of flex columns
+ * so a css var is added to allow this.
+ *
+ * @param array  $attributes Attributes of the block being rendered.
+ * @param string $content Content of the block being rendered.
+ * @return string The content of the block being rendered.
+ */
+function block_core_gallery_render( $attributes, $content ) {
+	$gap = _wp_array_get( $attributes, array( 'style', 'spacing', 'blockGap' ) );
+	// Skip if gap value contains unsupported characters.
+	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
+	// because we only want to match against the value, not the CSS attribute.
+	$gap     = preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	$class   = wp_unique_id( 'wp-block-gallery-' );
+	$content = preg_replace(
+		'/' . preg_quote( 'class="', '/' ) . '/',
+		'class="' . $class . ' ',
+		$content,
+		1
+	);
+	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
+	// gap on the gallery.
+	$gap_value = $gap ? $gap : 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
+	$style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '; gap: ' . $gap_value . '}';
+	// Ideally styles should be loaded in the head, but blocks may be parsed
+	// after that, so loading in the footer for now.
+	// See https://core.trac.wordpress.org/ticket/53494.
+	add_action(
+		'wp_footer',
+		function () use ( $style ) {
+			echo '<style> ' . $style . '</style>';
+		}
+	);
+	return $content;
+}
 /**
  * Registers the `core/gallery` block on server.
  */
 function register_block_core_gallery() {
 	register_block_type_from_metadata(
-		__DIR__ . '/gallery'
+		__DIR__ . '/gallery',
+		array(
+			'render_callback' => 'block_core_gallery_render',
+		)
 	);
 }