@wordpress/block-library 7.2.0 → 7.3.2

package/src/comments-query-loop/edit.js

@@ -9,7 +9,60 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import CommentsInspectorControls from './edit/comments-inspector-controls';
 
 const TEMPLATE = [
-	[ 'core/comment-template' ],
+	[
+		'core/comment-template',
+		{},
+		[
+			[
+				'core/columns',
+				{},
+				[
+					[
+						'core/column',
+						{ width: '40px' },
+						[
+							[
+								'core/avatar',
+								{
+									size: 40,
+									style: {
+										border: { radius: '20px' },
+									},
+								},
+							],
+						],
+					],
+					[
+						'core/column',
+						{},
+						[
+							[ 'core/comment-author-name' ],
+							[
+								'core/group',
+								{
+									layout: { type: 'flex' },
+									style: {
+										spacing: {
+											margin: {
+												top: '0px',
+												bottom: '0px',
+											},
+										},
+									},
+								},
+								[
+									[ 'core/comment-date' ],
+									[ 'core/comment-edit-link' ],
+								],
+							],
+							[ 'core/comment-content' ],
+							[ 'core/comment-reply-link' ],
+						],
+					],
+				],
+			],
+		],
+	],
 	[ 'core/comments-pagination' ],
 ];
 

package/src/cover/block.json

@@ -10,6 +10,10 @@
 		"url": {
 			"type": "string"
 		},
+		"useFeaturedImage": {
+			"type": "boolean",
+			"default": false
+		},
 		"id": {
 			"type": "number"
 		},
@@ -72,6 +76,7 @@
 			"enum": [ "all", "insert", false ]
 		}
 	},
+	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"anchor": true,
 		"align": true,

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/cover/transforms.js

@@ -64,37 +64,60 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/group' ],
-			isMatch: ( { backgroundColor, gradient, style } ) => {
-				/*
-				 * Make this transformation available only if the Group has background
-				 * or gradient set, because otherwise `Cover` block displays a Placeholder.
-				 *
-				 * This helps avoid arbitrary decisions about the Cover block's background
-				 * and user confusion about the existence of previous content.
-				 */
-				return (
+			transform: ( attributes, innerBlocks ) => {
+				const {
+					align,
+					anchor,
+					backgroundColor,
+					gradient,
+					style,
+				} = attributes;
+
+				// If no background or gradient color is provided, default to 50% opacity.
+				// This matches the styling of a Cover block with a background image,
+				// in the state where a background image has been removed.
+				const dimRatio =
 					backgroundColor ||
+					gradient ||
 					style?.color?.background ||
-					style?.color?.gradient ||
-					gradient
-				);
-			},
-			transform: (
-				{ align, anchor, backgroundColor, gradient, style },
-				innerBlocks
-			) => {
-				return createBlock(
-					'core/cover',
-					{
-						align,
-						anchor,
-						overlayColor: backgroundColor,
-						customOverlayColor: style?.color?.background,
-						gradient,
-						customGradient: style?.color?.gradient,
+					style?.color?.gradient
+						? undefined
+						: 50;
+
+				// Move the background or gradient color to the parent Cover block.
+				const parentAttributes = {
+					align,
+					anchor,
+					dimRatio,
+					overlayColor: backgroundColor,
+					customOverlayColor: style?.color?.background,
+					gradient,
+					customGradient: style?.color?.gradient,
+				};
+
+				const attributesWithoutBackgroundColors = {
+					...attributes,
+					backgroundColor: undefined,
+					gradient: undefined,
+					style: {
+						...attributes?.style,
+						color: {
+							...attributes?.style?.color,
+							background: undefined,
+							gradient: undefined,
+						},
 					},
-					innerBlocks
-				);
+				};
+
+				// Preserve the block by nesting it within the Cover block,
+				// instead of converting the Group block directly to the Cover block.
+				return createBlock( 'core/cover', parentAttributes, [
+					createBlock(
+						'core/group',
+						attributesWithoutBackgroundColors,
+						innerBlocks
+					),
+				] );
 			},
 		},
 	],

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;
 	}