@wordpress/block-library 8.2.0 → 8.3.0

package/src/post-comments-form/index.php

@@ -22,12 +22,14 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 		return;
 	}
 
-	$classes = 'comment-respond'; // See comment further below.
+	$classes = array( 'comment-respond' ); // See comment further below.
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= ' has-text-align-' . $attributes['textAlign'];
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
 	}
-
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
 

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

@@ -14,6 +14,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"link": true,

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

@@ -22,8 +22,14 @@ function render_block_core_post_comments_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$classes = array();
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 	$comments_number    = (int) get_comments_number( $block->context['postId'] );
 	$comments_link      = get_comments_link( $block->context['postId'] );
 	$post_title         = get_the_title( $block->context['postId'] );

package/src/post-content/block.json

@@ -8,6 +8,7 @@
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
+		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalLayout": true,

package/src/post-content/edit.js

@@ -2,14 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
-	useSetting,
 	__experimentalRecursionProvider as RecursionProvider,
 	__experimentalUseHasRecursion as useHasRecursion,
-	store as blockEditorStore,
 	Warning,
 } from '@wordpress/block-editor';
 import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
@@ -39,16 +36,9 @@ function ReadOnlyContent( { userCanEdit, postType, postId } ) {
 	);
 }
 
-function EditableContent( { layout, context = {} } ) {
+function EditableContent( { context = {} } ) {
 	const { postType, postId } = context;
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings()?.supportsLayout;
-	}, [] );
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		postType,
@@ -61,7 +51,6 @@ function EditableContent( { layout, context = {} } ) {
 			value: blocks,
 			onInput,
 			onChange,
-			__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
 		}
 	);
 	return <div { ...props } />;

package/src/post-date/block.json

@@ -24,6 +24,7 @@
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-date/index.php

@@ -18,9 +18,16 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID            = $block->context['postId'];
-	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$post_ID = $block->context['postId'];
+
+	$classes = array();
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
 		$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );

package/src/post-excerpt/block.json

@@ -20,6 +20,7 @@
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-excerpt/edit.js

@@ -58,18 +58,28 @@ export default function PostExcerptEditor( {
 	}, [ renderedExcerpt ] );
 	if ( ! postType || ! postId ) {
 		return (
-			<div { ...blockProps }>
-				<p>
-					{ __(
-						'This is the Post Excerpt block, it will display the excerpt from single posts.'
-					) }
-				</p>
-				<p>
-					{ __(
-						'If there are any Custom Post Types with support for excerpts, the Post Excerpt block can display the excerpts of those entries as well.'
-					) }
-				</p>
-			</div>
+			<>
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( newAlign ) =>
+							setAttributes( { textAlign: newAlign } )
+						}
+					/>
+				</BlockControls>
+				<div { ...blockProps }>
+					<p>
+						{ __(
+							'This is the Post Excerpt block, it will display the excerpt from single posts.'
+						) }
+					</p>
+					<p>
+						{ __(
+							'If there are any Custom Post Types with support for excerpts, the Post Excerpt block can display the excerpts of those entries as well.'
+						) }
+					</p>
+				</div>
+			</>
 		);
 	}
 	if ( isProtected && ! userCanEdit ) {

package/src/post-excerpt/index.php

@@ -38,11 +38,14 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	 * result in showing only one `read more` link at a time.
 	 */
 	add_filter( 'excerpt_more', $filter_excerpt_more );
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= "has-text-align-{$attributes['textAlign']}";
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	$content               = '<p class="wp-block-post-excerpt__excerpt">' . $excerpt;
 	$show_more_on_new_line = ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'];

package/src/post-featured-image/block.json

@@ -53,6 +53,7 @@
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
+		"anchor": true,
 		"color": {
 			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,

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

@@ -71,7 +71,7 @@ const DimensionControls = ( {
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
-		<InspectorControls __experimentalGroup="dimensions">
+		<InspectorControls group="dimensions">
 			<ToolsPanelItem
 				className="single-column"
 				hasValue={ () => !! height }
@@ -132,6 +132,7 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<ToggleGroupControl
+						__nextHasNoMarginBottom
 						label={ scaleLabel }
 						value={ scale }
 						help={ scaleHelp[ scale ] }

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

@@ -43,7 +43,7 @@ function getMediaSourceUrlBySizeSlug( media, slug ) {
 	);
 }
 
-function PostFeaturedImageDisplay( {
+export default function PostFeaturedImageEdit( {
 	clientId,
 	attributes,
 	setAttributes,
@@ -154,6 +154,7 @@ function PostFeaturedImageDisplay( {
 								checked={ linkTarget === '_blank' }
 							/>
 							<TextControl
+								__nextHasNoMarginBottom
 								label={ __( 'Link rel' ) }
 								value={ rel }
 								onChange={ ( newRel ) =>
@@ -167,6 +168,11 @@ function PostFeaturedImageDisplay( {
 		</>
 	);
 	let image;
+
+	/**
+	 * A post featured image block placed in a query loop
+	 * does not have image replacement or upload options.
+	 */
 	if ( ! featuredImage && isDescendentOfQueryLoop ) {
 		return (
 			<>
@@ -183,6 +189,32 @@ function PostFeaturedImageDisplay( {
 		);
 	}
 
+	/**
+	 * A post featured image placed in a block template, outside a query loop,
+	 * does not have a postId and will always be a placeholder image.
+	 * It does not have image replacement, upload, or link options.
+	 */
+	if ( ! featuredImage && ! postId ) {
+		return (
+			<>
+				<DimensionControls
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					imageSizeOptions={ imageSizeOptions }
+				/>
+				<div { ...blockProps }>
+					{ placeholder() }
+					<Overlay
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						clientId={ clientId }
+					/>
+				</div>
+			</>
+		);
+	}
+
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,
@@ -190,6 +222,13 @@ function PostFeaturedImageDisplay( {
 		objectFit: height && scale,
 	};
 
+	/**
+	 * When the post featured image block is placed in a context where:
+	 * - It has a postId (for example in a single post)
+	 * - It is not inside a query loop
+	 * - It has no image assigned yet
+	 * Then display the placeholder with the image upload option.
+	 */
 	if ( ! featuredImage ) {
 		image = (
 			<MediaPlaceholder
@@ -236,6 +275,12 @@ function PostFeaturedImageDisplay( {
 		);
 	}
 
+	/**
+	 * When the post featured image block:
+	 * - Has an image assigned
+	 * - Is not inside a query loop
+	 * Then display the image and the image replacement option.
+	 */
 	return (
 		<>
 			{ controls }
@@ -266,29 +311,3 @@ function PostFeaturedImageDisplay( {
 		</>
 	);
 }
-
-export default function PostFeaturedImageEdit( props ) {
-	const blockProps = useBlockProps();
-	const borderProps = useBorderProps( props.attributes );
-
-	if ( ! props.context?.postId ) {
-		return (
-			<div { ...blockProps }>
-				<Placeholder
-					className={ classnames(
-						'block-editor-media-placeholder',
-						borderProps.className
-					) }
-					withIllustration={ true }
-					style={ borderProps.style }
-				/>
-				<Overlay
-					attributes={ props.attributes }
-					setAttributes={ props.setAttributes }
-					clientId={ props.clientId }
-				/>
-			</div>
-		);
-	}
-	return <PostFeaturedImageDisplay { ...props } />;
-}

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

@@ -31,7 +31,15 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
-		$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
+		if ( get_the_title( $post_ID ) ) {
+			$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
+		} else {
+			$attr['alt'] = sprintf(
+				// translators: %d is the post ID.
+				__( 'Untitled post %d' ),
+				$post_ID
+			);
+		}
 	}
 
 	if ( ! empty( $attributes['height'] ) ) {
@@ -49,11 +57,13 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( $is_link ) {
 		$link_target    = $attributes['linkTarget'];
 		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
+		$height         = ! empty( $attributes['height'] ) ? 'style="' . esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . '"' : '';
 		$featured_image = sprintf(
-			'<a href="%1$s" target="%2$s" %3$s>%4$s%5$s</a>',
+			'<a href="%1$s" target="%2$s" %3$s %4$s>%5$s%6$s</a>',
 			get_the_permalink( $post_ID ),
 			esc_attr( $link_target ),
 			$rel,
+			$height,
 			$featured_image,
 			$overlay_markup
 		);
@@ -61,10 +71,13 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = $featured_image . $overlay_markup;
 	}
 
-	$wrapper_attributes = empty( $attributes['width'] )
-		? get_block_wrapper_attributes()
-		: get_block_wrapper_attributes( array( 'style' => "width:{$attributes['width']};" ) );
-
+	$width  = ! empty( $attributes['width'] ) ? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';' : '';
+	$height = ! empty( $attributes['height'] ) ? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';' : '';
+	if ( ! $height && ! $width ) {
+		$wrapper_attributes = get_block_wrapper_attributes();
+	} else {
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $width . $height ) );
+	}
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }
 

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

@@ -64,7 +64,7 @@ const Overlay = ( {
 					style={ overlayStyles }
 				/>
 			) }
-			<InspectorControls __experimentalGroup="color">
+			<InspectorControls group="color">
 				<ColorGradientSettingsDropdown
 					__experimentalIsRenderedInSidebar
 					settings={ [

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

@@ -31,6 +31,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/post-navigation-link/edit.js

@@ -77,6 +77,7 @@ export default function PostNavigationLinkEdit( {
 						/>
 					) }
 					<ToggleGroupControl
+						__nextHasNoMarginBottom
 						label={ __( 'Arrow' ) }
 						value={ arrow }
 						onChange={ ( value ) => {

package/src/post-template/block.json

@@ -19,6 +19,7 @@
 		"reusable": false,
 		"html": false,
 		"align": true,
+		"anchor": true,
 		"__experimentalLayout": {
 			"allowEditing": false
 		},

package/src/post-template/edit.js

@@ -28,7 +28,7 @@ const TEMPLATE = [
 function PostTemplateInnerBlocks() {
 	const innerBlocksProps = useInnerBlocksProps(
 		{ className: 'wp-block-post' },
-		{ template: TEMPLATE }
+		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
 	);
 	return <li { ...innerBlocksProps } />;
 }
@@ -74,7 +74,7 @@ export default function PostTemplateEdit( {
 	context: {
 		query: {
 			perPage,
-			offset,
+			offset = 0,
 			postType,
 			order,
 			orderBy,
@@ -98,6 +98,7 @@ export default function PostTemplateEdit( {
 		displayLayout: { type: layoutType = 'flex', columns = 1 } = {},
 		previewPostType,
 	},
+	__unstableLayoutClassNames,
 } ) {
 	const [ { page } ] = queryContext;
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
@@ -216,7 +217,7 @@ export default function PostTemplateEdit( {
 	);
 	const hasLayoutFlex = layoutType === 'flex' && columns > 1;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: classnames( __unstableLayoutClassNames, {
 			'is-flex-container': hasLayoutFlex,
 			[ `columns-${ columns }` ]: hasLayoutFlex,
 		} ),

package/src/post-template/index.php

@@ -68,8 +68,11 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 			$classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}";
 		}
 	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classnames .= ' has-link-color';
+	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classnames ) ) );
 
 	$content = '';
 	while ( $query->have_posts() ) {

package/src/post-terms/block.json

@@ -28,6 +28,7 @@
 	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-terms/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +17,7 @@ import {
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -83,8 +83,9 @@ export default function PostTermsEdit( {
 					} }
 				/>
 			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Separator' ) }
 					value={ separator || '' }
@@ -119,7 +120,7 @@ export default function PostTermsEdit( {
 								href={ postTerm.link }
 								onClick={ ( event ) => event.preventDefault() }
 							>
-								{ unescape( postTerm.name ) }
+								{ decodeEntities( postTerm.name ) }
 							</a>
 						) )
 						.reduce( ( prev, curr ) => (

package/src/post-terms/index.php

@@ -27,14 +27,17 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$classes = 'taxonomy-' . $attributes['term'];
+	$classes = array( 'taxonomy-' . $attributes['term'] );
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= ' has-text-align-' . $attributes['textAlign'];
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
 	$separator = empty( $attributes['separator'] ) ? ' ' : $attributes['separator'];
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	$prefix = "<div $wrapper_attributes>";
 	if ( isset( $attributes['prefix'] ) && $attributes['prefix'] ) {

package/src/post-title/block.json

@@ -31,6 +31,7 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-title/edit.js

@@ -134,6 +134,7 @@ export default function PostTitleEdit( {
 								checked={ linkTarget === '_blank' }
 							/>
 							<TextControl
+								__nextHasNoMarginBottom
 								label={ __( 'Link rel' ) }
 								value={ rel }
 								onChange={ ( newRel ) =>

package/src/post-title/index.php

@@ -26,9 +26,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$tag_name         = 'h2';
-	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-
+	$tag_name = 'h2';
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
 	}
@@ -37,7 +35,15 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
 		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+
+	$classes = array();
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<%1$s %2$s>%3$s</%1$s>',

package/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -28,7 +28,6 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
       }
       disableEditingMenu={false}
       fontFamily="serif"
-      fontSize={16}
       isMultiline={false}
       maxImagesWidth={200}
       onBlur={[Function]}
@@ -75,7 +74,6 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
       }
       disableEditingMenu={false}
       fontFamily="serif"
-      fontSize={16}
       isMultiline={false}
       maxImagesWidth={200}
       onBlur={[Function]}

package/src/query/block.json

@@ -49,6 +49,7 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
 		"html": false,
 		"__experimentalLayout": true
 	},