@wordpress/block-library 8.2.0 → 8.3.1

package/src/page-list/{convert-to-navigation-links.js → use-convert-to-navigation-links.js}

@@ -2,12 +2,10 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
-export const convertToNavigationLinks = ( pages ) => {
-	if ( ! pages ) {
-		return;
-	}
-
+export function convertToNavigationLinks( pages = [] ) {
 	const linkMap = {};
 	const navigationLinks = [];
 	pages.forEach( ( { id, title, link: url, type, parent } ) => {
@@ -57,4 +55,36 @@ export const convertToNavigationLinks = ( pages ) => {
 	transformSubmenus( navigationLinks );
 
 	return navigationLinks;
-};
+}
+
+export function useConvertToNavigationLinks( { clientId, pages } ) {
+	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
+
+	const { parentNavBlockClientId } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+				select( blockEditorStore );
+
+			const _selectedBlockClientId = getSelectedBlockClientId();
+
+			return {
+				parentNavBlockClientId: getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					'core/navigation',
+					true
+				)[ 0 ],
+			};
+		},
+		[ clientId ]
+	);
+
+	return () => {
+		const navigationLinks = convertToNavigationLinks( pages );
+
+		// Replace the Page List block with the Navigation Links.
+		replaceBlock( clientId, navigationLinks );
+
+		// Select the Navigation block to reveal the changes.
+		selectBlock( parentNavBlockClientId );
+	};
+}

package/src/page-list-item/edit.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -67,7 +68,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 						className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
 						aria-expanded="false"
 					>
-						{ label }
+						{ decodeEntities( label ) }
 					</button>
 					<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
 						<ItemSubmenuIcon />
@@ -80,7 +81,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 					} ) }
 					href={ link }
 				>
-					{ label }
+					{ decodeEntities( label ) }
 				</a>
 			) }
 			{ hasChildren && (

package/src/page-list-item/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { pages as icon } from '@wordpress/icons';
+import { page as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

package/src/paragraph/edit.js

@@ -99,7 +99,7 @@ function ParagraphBlock( {
 				/>
 			</BlockControls>
 			{ isDropCapFeatureEnabled && (
-				<InspectorControls __experimentalGroup="typography">
+				<InspectorControls group="typography">
 					<ToolsPanelItem
 						hasValue={ () => !! dropCap }
 						label={ __( 'Drop cap' ) }

package/src/paragraph/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -35,7 +30,7 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		if ( context === 'accessibility' ) {
 			const { content } = attributes;
-			return isEmpty( content ) ? __( 'Empty' ) : content;
+			return ! content || content.length === 0 ? __( 'Empty' ) : content;
 		}
 	},
 	transforms,

package/src/post-author/block.json

@@ -35,6 +35,7 @@
 	},
 	"usesContext": [ "postType", "postId", "queryId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/post-author/index.php

@@ -36,10 +36,16 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	}
 
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
-	$classes = array_merge(
-		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		isset( $attributes['textAlign'] ) ? array( 'has-text-align-' . $attributes['textAlign'] ) : array()
-	);
+	$classes = array();
+	if ( isset( $attributes['itemsJustification'] ) ) {
+		$classes[] = 'items-justified-' . $attributes['itemsJustification'];
+	}
+	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 ) ) );
 

package/src/post-author-biography/block.json

@@ -13,6 +13,7 @@
 	},
 	"usesContext": [ "postType", "postId" ],
 	"supports": {
+		"anchor": true,
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/post-author-name/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"__experimental": true,
 	"name": "core/post-author-name",
 	"title": "Post Author Name",
 	"category": "theme",
@@ -22,6 +21,7 @@
 	},
 	"usesContext": [ "postType", "postId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/post-author-name/index.php

@@ -23,14 +23,19 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$author_name      = get_the_author_meta( 'display_name', $author_id );
-	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-
+	$author_name = get_the_author_meta( 'display_name', $author_id );
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$author_name = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-post-author-name__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $author_name );
 	}
 
-	$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( '<div %1$s>%2$s</div>', $wrapper_attributes, $author_name );
 }

package/src/post-comment/edit.js

@@ -43,6 +43,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ commentId }
 						onChange={ ( val ) =>
 							setCommentIdInput( parseInt( val ) )

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

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

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

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

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-excerpt/style.scss

@@ -1,3 +1,21 @@
+.wp-block-post-excerpt {
+	margin-top: var(--wp--style--block-gap);
+	margin-bottom: var(--wp--style--block-gap);
+}
+
+// Zero out the margin on the excerpt paragraph, to match the body paragraphs.
+.wp-block-post-excerpt__excerpt {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+// Matches block gap.
+.wp-block-post-excerpt__more-text {
+	margin-top: var(--wp--style--block-gap);
+	margin-bottom: 0;
+}
+
 .wp-block-post-excerpt__more-link {
 	display: inline-block;
 }
+

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": {