@wordpress/block-library 7.2.0 → 7.3.0

package/src/cover/edit.js

@@ -9,6 +9,7 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import {
 	Fragment,
 	useEffect,
@@ -28,6 +29,7 @@ import {
 	Spinner,
 	TextareaControl,
 	ToggleControl,
+	ToolbarButton,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalBoxControl as BoxControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -54,7 +56,7 @@ import {
 } 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';
 
@@ -298,11 +300,12 @@ function CoverEdit( {
 	setAttributes,
 	setOverlayColor,
 	toggleSelection,
+	context: { postId, postType },
 } ) {
 	const {
 		contentPosition,
 		id,
-		backgroundType,
+		useFeaturedImage,
 		dimRatio,
 		focalPoint,
 		hasParallax,
@@ -311,11 +314,35 @@ 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
 	);
@@ -374,6 +401,13 @@ function CoverEdit( {
 		} );
 	};
 
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			useFeaturedImage: ! useFeaturedImage,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+		} );
+	};
+
 	const onUploadError = ( message ) => {
 		createErrorNotice( Array.isArray( message ) ? message[ 2 ] : message, {
 			type: 'snackbar',
@@ -458,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 && (
@@ -499,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"
@@ -533,6 +580,7 @@ function CoverEdit( {
 										focalPoint: undefined,
 										hasParallax: undefined,
 										isRepeated: undefined,
+										useFeaturedImage: false,
 									} )
 								}
 							>

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/gallery/block.json

@@ -111,6 +111,7 @@
 		"units": [ "px", "em", "rem", "vh", "vw" ],
 		"spacing": {
 			"blockGap": true,
+			"__experimentalSkipSerialization": [ "blockGap" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true
 			}

package/src/gallery/gap-styles.js

@@ -6,10 +6,15 @@ import { useContext, createPortal } from '@wordpress/element';
 
 export default function GapStyles( { blockGap, clientId } ) {
 	const styleElement = useContext( BlockList.__unstableElementContext );
-
-	const gap = blockGap
-		? `#block-${ clientId } { --wp--style--unstable-gallery-gap: ${ blockGap } }`
-		: `#block-${ clientId } { --wp--style--unstable-gallery-gap: var( --wp--style--block-gap, 0.5em ) }`;
+	// --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>;

package/src/gallery/index.php

@@ -48,17 +48,18 @@ function block_core_gallery_render( $attributes, $content ) {
 	// 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;
-	$id        = uniqid();
-	$class     = 'wp-block-gallery-' . $id;
-	$content   = preg_replace(
+	$gap     = preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	$class   = wp_unique_id( 'wp-block-gallery-' );
+	$content = preg_replace(
 		'/' . preg_quote( 'class="', '/' ) . '/',
 		'class="' . $class . ' ',
 		$content,
 		1
 	);
-	$gap_value = $gap ? $gap : 'var( --wp--style--block-gap, 0.5em )';
-	$style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '}';
+	// --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.

package/src/group/block.json

@@ -4,7 +4,7 @@
 	"name": "core/group",
 	"title": "Group",
 	"category": "design",
-	"description": "Combine blocks into a group.",
+	"description": "Gather blocks in a layout container.",
 	"keywords": [ "container", "wrapper", "row", "section" ],
 	"textdomain": "default",
 	"attributes": {
@@ -61,9 +61,7 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": {
-			"allowOrientation": false
-		}
+		"__experimentalLayout": true
 	},
 	"editorStyle": "wp-block-group-editor",
 	"style": "wp-block-group"

package/src/group/edit.js

@@ -52,7 +52,10 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: `is-layout-${ type }`,
+	} );
+
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps

package/src/group/editor.scss

@@ -22,3 +22,34 @@
 		margin-bottom: $block-padding + $grid-unit-05;
 	}
 }
+
+// Affect the appender of the Row and Stack variants.
+.is-layout-flex.block-editor-block-list__block .block-list-appender:only-child {
+	gap: inherit;
+
+	&,
+	.block-editor-default-block-appender__content,
+	.block-editor-inserter {
+		display: inherit;
+		width: 100%;
+		flex-direction: inherit;
+		flex: 1;
+	}
+
+	&::after {
+		content: "";
+		display: flex;
+		border: $border-width dashed currentColor;
+		opacity: 0.4;
+		border-radius: $radius-block-ui;
+		flex: 1;
+		pointer-events: none;
+		min-height: $grid-unit-60;
+	}
+
+	// Let the parent be selectable in the placeholder area.
+	pointer-events: none;
+	.block-editor-inserter {
+		pointer-events: all;
+	}
+}

package/src/group/variations.js

@@ -2,26 +2,43 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { group, row, stack } from '@wordpress/icons';
 
 const variations = [
 	{
 		name: 'group',
 		title: __( 'Group' ),
-		description: __( 'Blocks shown in a column.' ),
+		description: __( 'Gather blocks in a layout container.' ),
 		attributes: { layout: { type: 'default' } },
 		scope: [ 'transform' ],
 		isActive: ( blockAttributes ) =>
 			! blockAttributes.layout ||
+			! blockAttributes.layout?.type ||
 			blockAttributes.layout?.type === 'default',
+		icon: group,
 	},
 	{
 		name: 'group-row',
 		title: __( 'Row' ),
-		description: __( 'Blocks shown in a row.' ),
-		attributes: { layout: { type: 'flex' } },
+		description: __( 'Arrange blocks horizontally.' ),
+		attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },
 		scope: [ 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
-			blockAttributes.layout?.type === 'flex',
+			blockAttributes.layout?.type === 'flex' &&
+			( ! blockAttributes.layout?.orientation ||
+				blockAttributes.layout?.orientation === 'horizontal' ),
+		icon: row,
+	},
+	{
+		name: 'group-stack',
+		title: __( 'Stack' ),
+		description: __( 'Arrange blocks vertically.' ),
+		attributes: { layout: { type: 'flex', orientation: 'vertical' } },
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.layout?.type === 'flex' &&
+			blockAttributes.layout?.orientation === 'vertical',
+		icon: stack,
 	},
 ];
 

package/src/heading/edit.js

@@ -45,7 +45,7 @@ function HeadingEdit( {
 		const settings = select( blockEditorStore ).getSettings();
 
 		return {
-			canGenerateAnchors: !! settings.__experimentalGenerateAnchors,
+			canGenerateAnchors: !! settings.generateAnchors,
 		};
 	}, [] );
 

package/src/heading/style.scss

@@ -4,9 +4,6 @@ h3,
 h4,
 h5,
 h6 {
-	// Break long strings of text without spaces so they don't overflow the block.
-	overflow-wrap: break-word;
-
 	&.has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;
 	}

package/src/html/edit.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useContext, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	PlainText,
@@ -20,6 +20,7 @@ import { useSelect } from '@wordpress/data';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
+	const isDisabled = useContext( Disabled.Context );
 
 	const styles = useSelect( ( select ) => {
 		// Default styles used to unset some of the styles
@@ -69,35 +70,26 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
-			<Disabled.Consumer>
-				{ ( isDisabled ) =>
-					isPreview || isDisabled ? (
-						<>
-							<SandBox
-								html={ attributes.content }
-								styles={ styles }
-							/>
-							{ /*	
-									An overlay is added when the block is not selected in order to register click events. 
-									Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it 
-									difficult to reselect the block. 
-								*/ }
-							{ ! isSelected && (
-								<div className="block-library-html__preview-overlay"></div>
-							) }
-						</>
-					) : (
-						<PlainText
-							value={ attributes.content }
-							onChange={ ( content ) =>
-								setAttributes( { content } )
-							}
-							placeholder={ __( 'Write HTML…' ) }
-							aria-label={ __( 'HTML' ) }
-						/>
-					)
-				}
-			</Disabled.Consumer>
+			{ isPreview || isDisabled ? (
+				<>
+					<SandBox html={ attributes.content } styles={ styles } />
+					{ /*
+							An overlay is added when the block is not selected in order to register click events.
+							Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
+							difficult to reselect the block.
+						*/ }
+					{ ! isSelected && (
+						<div className="block-library-html__preview-overlay"></div>
+					) }
+				</>
+			) : (
+				<PlainText
+					value={ attributes.content }
+					onChange={ ( content ) => setAttributes( { content } ) }
+					placeholder={ __( 'Write HTML…' ) }
+					aria-label={ __( 'HTML' ) }
+				/>
+			) }
 		</div>
 	);
 }

package/src/image/edit.native.js

@@ -186,7 +186,6 @@ export class ImageEdit extends Component {
 		this.state = {
 			isCaptionSelected: false,
 			uploadStatus: UPLOAD_STATE_IDLE,
-			isAnimatedGif: false,
 		};
 
 		this.replacedFeaturedImage = false;
@@ -364,10 +363,6 @@ 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 ) {
@@ -464,10 +459,6 @@ export class ImageEdit extends Component {
 			...mediaAttributes,
 			...additionalAttributes,
 		} );
-
-		this.setState( {
-			isAnimatedGif: media.url.toLowerCase().includes( '.gif' ),
-		} );
 	}
 
 	onFocusCaption() {
@@ -615,6 +606,10 @@ export class ImageEdit extends Component {
 		);
 	}
 
+	isGif( url ) {
+		return url.toLowerCase().includes( '.gif' );
+	}
+
 	render() {
 		const { isCaptionSelected } = this.state;
 		const {
@@ -748,11 +743,12 @@ export class ImageEdit extends Component {
 			context?.fixedHeight && styles.fixedHeight,
 		];
 
-		const badgeLabelShown = isFeaturedImage || this.state.isAnimatedGif;
+		const isGif = this.isGif( url );
+		const badgeLabelShown = isFeaturedImage || isGif;
 		let badgeLabelText = '';
 		if ( isFeaturedImage ) {
 			badgeLabelText = __( 'Featured' );
-		} else if ( this.state.isAnimatedGif ) {
+		} else if ( isGif ) {
 			badgeLabelText = __( 'GIF' );
 		}