@wordpress/block-library 6.0.20 → 6.1.0

package/src/post-featured-image/dimension-controls.js

@@ -1,22 +1,16 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
 import {
-	PanelBody,
+	SelectControl,
 	__experimentalUnitControl as UnitControl,
-	Flex,
-	FlexItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useSetting } from '@wordpress/block-editor';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
 
 const SCALE_OPTIONS = (
 	<>
@@ -38,6 +32,9 @@ const SCALE_OPTIONS = (
 	</>
 );
 
+const DEFAULT_SCALE = 'cover';
+const DEFAULT_SIZE = 'full';
+
 const scaleHelp = {
 	cover: __(
 		'Image is scaled and cropped to fill the entire space without being distorted.'
@@ -51,8 +48,10 @@ const scaleHelp = {
 };
 
 const DimensionControls = ( {
-	attributes: { width, height, scale },
+	clientId,
+	attributes: { width, height, scale, sizeSlug },
 	setAttributes,
+	imageSizeOptions = [],
 } ) => {
 	const defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ];
 	const units = useCustomUnits( {
@@ -72,53 +71,106 @@ const DimensionControls = ( {
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
-		<PanelBody title={ __( 'Dimensions' ) }>
-			<Flex
-				justify="space-between"
-				className={ classNames(
-					'block-library-post-featured-image-dimension-controls',
-					{ 'scale-control-is-visible': !! height }
-				) }
+		<InspectorControls __experimentalGroup="dimensions">
+			<ToolsPanelItem
+				className="single-column"
+				hasValue={ () => !! height }
+				label={ __( 'Height' ) }
+				onDeselect={ () => setAttributes( { height: undefined } ) }
+				resetAllFilter={ () => ( {
+					height: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
 			>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Height' ) }
-						labelPosition="top"
-						value={ height || '' }
-						onChange={ ( nextHeight ) => {
-							onDimensionChange( 'height', nextHeight );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Width' ) }
-						labelPosition="top"
-						value={ width || '' }
-						onChange={ ( nextWidth ) => {
-							onDimensionChange( 'width', nextWidth );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-			</Flex>
+				<UnitControl
+					label={ __( 'Height' ) }
+					labelPosition="top"
+					value={ height || '' }
+					min={ 0 }
+					onChange={ ( nextHeight ) =>
+						onDimensionChange( 'height', nextHeight )
+					}
+					units={ units }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
+				className="single-column"
+				hasValue={ () => !! width }
+				label={ __( 'Width' ) }
+				onDeselect={ () => setAttributes( { width: undefined } ) }
+				resetAllFilter={ () => ( {
+					width: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
+			>
+				<UnitControl
+					label={ __( 'Width' ) }
+					labelPosition="top"
+					value={ width || '' }
+					min={ 0 }
+					onChange={ ( nextWidth ) =>
+						onDimensionChange( 'width', nextWidth )
+					}
+					units={ units }
+				/>
+			</ToolsPanelItem>
 			{ !! height && (
-				<ToggleGroupControl
+				<ToolsPanelItem
+					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }
-					value={ scale }
-					help={ scaleHelp[ scale ] }
-					onChange={ ( value ) => {
+					onDeselect={ () =>
 						setAttributes( {
-							scale: value,
-						} );
-					} }
-					isBlock
+							scale: DEFAULT_SCALE,
+						} )
+					}
+					resetAllFilter={ () => ( {
+						scale: DEFAULT_SCALE,
+					} ) }
+					isShownByDefault={ true }
+					panelId={ clientId }
 				>
-					{ SCALE_OPTIONS }
-				</ToggleGroupControl>
+					<ToggleGroupControl
+						label={ scaleLabel }
+						value={ scale }
+						help={ scaleHelp[ scale ] }
+						onChange={ ( value ) =>
+							setAttributes( {
+								scale: value,
+							} )
+						}
+						isBlock
+					>
+						{ SCALE_OPTIONS }
+					</ToggleGroupControl>
+				</ToolsPanelItem>
+			) }
+			{ !! imageSizeOptions.length && (
+				<ToolsPanelItem
+					hasValue={ () => !! sizeSlug }
+					label={ __( 'Image size' ) }
+					onDeselect={ () =>
+						setAttributes( { sizeSlug: undefined } )
+					}
+					resetAllFilter={ () => ( {
+						sizeSlug: undefined,
+					} ) }
+					isShownByDefault={ false }
+					panelId={ clientId }
+				>
+					<SelectControl
+						label={ __( 'Image size' ) }
+						value={ sizeSlug || DEFAULT_SIZE }
+						options={ imageSizeOptions }
+						onChange={ ( nextSizeSlug ) =>
+							setAttributes( { sizeSlug: nextSizeSlug } )
+						}
+						help={ __( 'Select the size of the source image.' ) }
+					/>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</InspectorControls>
 	);
 };
 

package/src/post-featured-image/edit.js

@@ -4,6 +4,7 @@
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
+	MenuItem,
 	ToggleControl,
 	PanelBody,
 	Placeholder,
@@ -15,6 +16,7 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
@@ -45,13 +47,20 @@ const placeholderChip = (
 	</div>
 );
 
+function getMediaSourceUrlBySizeSlug( media, slug ) {
+	return (
+		media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
+	);
+}
+
 function PostFeaturedImageDisplay( {
+	clientId,
 	attributes,
 	setAttributes,
 	context: { postId, postType, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale } = attributes;
+	const { isLink, height, width, scale, sizeSlug } = attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postType,
@@ -65,6 +74,20 @@ function PostFeaturedImageDisplay( {
 			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
 		[ featuredImage ]
 	);
+	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
+
+	const imageSizes = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().imageSizes,
+		[]
+	);
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => {
+			return media?.media_details?.sizes?.[ slug ]?.source_url;
+		} )
+		.map( ( { name, slug } ) => ( {
+			value: slug,
+			label: name,
+		} ) );
 
 	const blockProps = useBlockProps( {
 		style: { width, height },
@@ -90,9 +113,37 @@ function PostFeaturedImageDisplay( {
 		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
 	};
 
+	const controls = (
+		<>
+			<DimensionControls
+				clientId={ clientId }
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				imageSizeOptions={ imageSizeOptions }
+			/>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ sprintf(
+							// translators: %s: Name of the post type e.g: "post".
+							__( 'Link to %s' ),
+							postType
+						) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		</>
+	);
 	let image;
 	if ( ! featuredImage && isDescendentOfQueryLoop ) {
-		return <div { ...blockProps }>{ placeholderChip }</div>;
+		return (
+			<>
+				{ controls }
+				<div { ...blockProps }>{ placeholderChip }</div>
+			</>
+		);
 	}
 
 	const label = __( 'Add a featured image' );
@@ -127,7 +178,7 @@ function PostFeaturedImageDisplay( {
 			placeholderChip
 		) : (
 			<img
-				src={ media.source_url }
+				src={ mediaUrl }
 				alt={ media.alt_text || __( 'Featured image' ) }
 				style={ { height, objectFit: height && scale } }
 			/>
@@ -136,33 +187,21 @@ function PostFeaturedImageDisplay( {
 
 	return (
 		<>
-			<InspectorControls>
-				<DimensionControls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-				/>
-				<PanelBody title={ __( 'Link settings' ) }>
-					<ToggleControl
-						label={ sprintf(
-							// translators: %s: Name of the post type e.g: "post".
-							__( 'Link to %s' ),
-							postType
-						) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
-				</PanelBody>
-			</InspectorControls>
+			{ controls }
 			{ !! media && ! isDescendentOfQueryLoop && (
 				<BlockControls group="other">
 					<MediaReplaceFlow
 						mediaId={ featuredImage }
-						mediaURL={ media.source_url }
+						mediaURL={ mediaUrl }
 						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						accept="image/*"
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
-					/>
+					>
+						<MenuItem onClick={ () => setFeaturedImage( 0 ) }>
+							{ __( 'Reset' ) }
+						</MenuItem>
+					</MediaReplaceFlow>
 				</BlockControls>
 			) }
 			<figure { ...blockProps }>{ image }</figure>

package/src/post-featured-image/editor.scss

@@ -128,11 +128,3 @@ div[data-type="core/post-featured-image"] {
 		display: block;
 	}
 }
-
-.block-library-post-featured-image-dimension-controls {
-	margin-bottom: $grid-unit-10;
-
-	&.scale-control-is-visible {
-		margin-bottom: $grid-unit-20;
-	}
-}

package/src/post-featured-image/index.php

@@ -19,7 +19,8 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
-	$featured_image = get_the_post_thumbnail( $post_ID );
+	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug );
 	if ( ! $featured_image ) {
 		return '';
 	}
@@ -43,7 +44,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		if ( ! empty( $attributes['scale'] ) ) {
 			$image_styles .= "object-fit:{$attributes['scale']};";
 		}
-		$featured_image = str_replace( 'src=', "style='$image_styles' src=", $featured_image );
+		$featured_image = str_replace( 'src=', 'style="' . esc_attr( $image_styles ) . '" src=', $featured_image );
 	}
 
 	return "<figure $wrapper_attributes>$featured_image</figure>";

package/src/post-featured-image/style.scss

@@ -2,7 +2,7 @@
 	margin-left: 0;
 	margin-right: 0;
 	a {
-		display: inline-block;
+		display: block;
 	}
 	img {
 		max-width: 100%;

package/src/post-navigation-link/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-navigation-link",
 	"title": "Post Navigation Link",

package/src/post-navigation-link/index.php

@@ -18,7 +18,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 		return '';
 	}
 
-	// Get the nagigation type to show the proper link. Available options are `next|previous`.
+	// Get the navigation type to show the proper link. Available options are `next|previous`.
 	$navigation_type = isset( $attributes['type'] ) ? $attributes['type'] : 'next';
 	// Allow only `next` and `previous` in `$navigation_type`.
 	if ( ! in_array( $navigation_type, array( 'next', 'previous' ), true ) ) {
@@ -49,13 +49,13 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 		 */
 		if ( ! $attributes['linkLabel'] ) {
 			if ( $label ) {
-				$format = '<span class="post-navigation-link__label">' . $label . '</span> %link';
+				$format = '<span class="post-navigation-link__label">' . esc_html( $label ) . '</span> %link';
 			}
 			$link = '%title';
 		} elseif ( isset( $attributes['linkLabel'] ) && $attributes['linkLabel'] ) {
 			// If the label link option is enabled and there is a custom label, display it before the title.
 			if ( $label ) {
-				$link = '<span class="post-navigation-link__label">' . $label . '</span> <span class="post-navigation-link__title">%title</title>';
+				$link = '<span class="post-navigation-link__label">' . esc_html( $label ) . '</span> <span class="post-navigation-link__title">%title</title>';
 			} else {
 				/*
 				 * If the label link option is enabled and there is no custom label,
@@ -64,7 +64,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 				$label = 'next' === $navigation_type ? _x( 'Next:', 'label before the title of the next post' ) : _x( 'Previous:', 'label before the title of the previous post' );
 				$link  = sprintf(
 					'<span class="post-navigation-link__label">%1$s</span> <span class="post-navigation-link__title">%2$s</span>',
-					$label,
+					esc_html( $label ),
 					'%title'
 				);
 			}

package/src/post-template/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-template",
 	"title": "Post Template",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query" ],
 	"description": "Contains the block elements used to render a post, like the title, date, featured image, content or excerpt, and more.",
 	"textdomain": "default",

package/src/post-template/edit.js

@@ -69,9 +69,7 @@ export default function PostTemplateEdit( {
 		query: {
 			perPage,
 			offset,
-			categoryIds = [],
 			postType,
-			tagIds = [],
 			order,
 			orderBy,
 			author,
@@ -79,6 +77,7 @@ export default function PostTemplateEdit( {
 			exclude,
 			sticky,
 			inherit,
+			taxQuery,
 		} = {},
 		queryContext = [ { page: 1 } ],
 		templateSlug,
@@ -90,15 +89,37 @@ export default function PostTemplateEdit( {
 
 	const { posts, blocks } = useSelect(
 		( select ) => {
-			const { getEntityRecords } = select( coreStore );
+			const { getEntityRecords, getTaxonomies } = select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
+			const taxonomies = getTaxonomies( {
+				type: postType,
+				per_page: -1,
+				context: 'view',
+			} );
 			const query = {
 				offset: perPage ? perPage * ( page - 1 ) + offset : 0,
-				categories: categoryIds,
-				tags: tagIds,
 				order,
 				orderby: orderBy,
 			};
+			if ( taxQuery ) {
+				// We have to build the tax query for the REST API and use as
+				// keys the taxonomies `rest_base` with the `term ids` as values.
+				const builtTaxQuery = Object.entries( taxQuery ).reduce(
+					( accumulator, [ taxonomySlug, terms ] ) => {
+						const taxonomy = taxonomies?.find(
+							( { slug } ) => slug === taxonomySlug
+						);
+						if ( taxonomy?.rest_base ) {
+							accumulator[ taxonomy?.rest_base ] = terms;
+						}
+						return accumulator;
+					},
+					{}
+				);
+				if ( !! Object.keys( builtTaxQuery ).length ) {
+					Object.assign( query, builtTaxQuery );
+				}
+			}
 			if ( perPage ) {
 				query.per_page = perPage;
 			}
@@ -134,8 +155,6 @@ export default function PostTemplateEdit( {
 			perPage,
 			page,
 			offset,
-			categoryIds,
-			tagIds,
 			order,
 			orderBy,
 			clientId,
@@ -146,6 +165,7 @@ export default function PostTemplateEdit( {
 			sticky,
 			inherit,
 			templateSlug,
+			taxQuery,
 		]
 	);
 	const blockContexts = useMemo(

package/src/post-template/index.php

@@ -61,8 +61,8 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 				)
 			)
 		)->render( array( 'dynamic' => false ) );
-		$post_classes  = esc_attr( implode( ' ', get_post_class( 'wp-block-post' ) ) );
-		$content      .= '<li class="' . $post_classes . '">' . $block_content . '</li>';
+		$post_classes  = implode( ' ', get_post_class( 'wp-block-post' ) );
+		$content      .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
 	}
 
 	wp_reset_postdata();

package/src/post-template/style.scss

@@ -11,6 +11,11 @@
 	list-style: none;
 	padding: 0;
 
+	// Unset background colors that can be inherited from Global Styles with extra specificity.
+	&.wp-block-post-template {
+		background: none;
+	}
+
 	&.is-flex-container {
 		flex-direction: row;
 		display: flex;

package/src/post-terms/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-terms",
 	"title": "Post Terms",

package/src/post-terms/index.php

@@ -40,7 +40,7 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		$block->context['postId'],
 		$attributes['term'],
 		"<div $wrapper_attributes>",
-		'<span class="wp-block-post-terms__separator">' . $separator . '</span>',
+		'<span class="wp-block-post-terms__separator">' . esc_html( $separator ) . '</span>',
 		'</div>'
 	);
 }

package/src/post-title/block.json

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

package/src/post-title/index.php

@@ -34,7 +34,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 	}
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
-		$title = sprintf( '<a href="%1$s" target="%2$s" rel="%3$s">%4$s</a>', get_the_permalink( $post_ID ), $attributes['linkTarget'], $attributes['rel'], $title );
+		$title = sprintf( '<a href="%1$s" target="%2$s" rel="%3$s">%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), esc_attr( $attributes['rel'] ), esc_html( $title ) );
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 

package/src/post-title/style.scss

@@ -1,3 +1,7 @@
-.wp-block-post-title a {
-	display: inline-block;
+.wp-block-post-title {
+	word-break: break-word;
+
+	a {
+		display: inline-block;
+	}
 }

package/src/preformatted/block.json

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

package/src/preformatted/edit.native.js

@@ -12,7 +12,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import WebPreformattedEdit from './edit.js';
 import styles from './styles.scss';
 
-export function PreformattedEdit( props ) {
+export default function PreformattedEdit( props ) {
 	const { style } = props;
 
 	const textBaseStyle = usePreferredColorSchemeStyle(
@@ -28,10 +28,12 @@ export function PreformattedEdit( props ) {
 		...( style?.fontSize && { fontSize: style.fontSize } ),
 		...( style?.color && { color: style.color } ),
 	};
+	const hasBaseColors =
+		style?.baseColors && Object.entries( style.baseColors ).length !== 0;
 	const containerStyles = [
 		wpBlockPreformatted,
 		style?.backgroundColor && { backgroundColor: style.backgroundColor },
-		style?.baseColors &&
+		hasBaseColors &&
 			! style?.backgroundColor &&
 			styles[ 'wp-block-preformatted__no-background' ],
 	];
@@ -46,5 +48,3 @@ export function PreformattedEdit( props ) {
 		</View>
 	);
 }
-
-export default PreformattedEdit;