@wordpress/block-library 8.30.0 → 8.31.0

package/src/comments-pagination-next/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comments-pagination-next` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -48,6 +50,8 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 
 /**
  * Registers the `core/comments-pagination-next` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comments_pagination_next() {
 	register_block_type_from_metadata(

package/src/comments-pagination-numbers/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comments-pagination-numbers` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -50,6 +52,8 @@ function render_block_core_comments_pagination_numbers( $attributes, $content, $
 
 /**
  * Registers the `core/comments-pagination-numbers` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comments_pagination_numbers() {
 	register_block_type_from_metadata(

package/src/comments-pagination-previous/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comments-pagination-previous` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -40,6 +42,8 @@ function render_block_core_comments_pagination_previous( $attributes, $content,
 
 /**
  * Registers the `core/comments-pagination-previous` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comments_pagination_previous() {
 	register_block_type_from_metadata(

package/src/comments-title/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comments-title` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array $attributes Block attributes.
  *
  * @return string Return the post comments title.
@@ -84,6 +86,8 @@ function render_block_core_comments_title( $attributes ) {
 
 /**
  * Registers the `core/comments-title` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comments_title() {
 	register_block_type_from_metadata(

package/src/cover/edit/index.js

@@ -489,6 +489,9 @@ function CoverEdit( {
 		getPositionClassName( contentPosition )
 	);
 
+	const showOverlay =
+		url || ! useFeaturedImage || ( useFeaturedImage && ! url );
+
 	return (
 		<>
 			{ blockControls }
@@ -500,7 +503,7 @@ function CoverEdit( {
 				data-url={ url }
 			>
 				{ resizeListener }
-				{ ( ! useFeaturedImage || url ) && (
+				{ showOverlay && (
 					<span
 						aria-hidden="true"
 						className={ classnames(

package/src/cover/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/cover` block on server.
  *
+ * @since 6.0.0
+ *
  * @param array  $attributes The block attributes.
  * @param string $content    The block rendered content.
  *
@@ -66,6 +68,8 @@ function render_block_core_cover( $attributes, $content ) {
 
 /**
  * Registers the `core/cover` block renderer on server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_cover() {
 	register_block_type_from_metadata(

package/src/details/edit.js

@@ -64,6 +64,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 			>
 				<summary onClick={ ( event ) => event.preventDefault() }>
 					<RichText
+						identifier="summary"
 						aria-label={ __( 'Write summary' ) }
 						placeholder={ __( 'Write summary…' ) }
 						allowedFormats={ [] }

package/src/file/edit.js

@@ -254,6 +254,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				) }
 				<div className={ 'wp-block-file__content-wrapper' }>
 					<RichText
+						identifier="fileName"
 						tagName="a"
 						value={ fileName }
 						placeholder={ __( 'Write file name…' ) }
@@ -273,6 +274,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						>
 							{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ }
 							<RichText
+								identifier="downloadButtonText"
 								tagName="div" // Must be block-level or else cursor disappears.
 								aria-label={ __( 'Download button text' ) }
 								className={ classnames(

package/src/file/editor.scss

@@ -4,6 +4,9 @@
 		// Stop file block from collapsing when floated.
 		height: auto;
 	}
+	.wp-block[data-align="center"] > & {
+		text-align: center;
+	}
 
 	display: flex;
 	flex-wrap: wrap;

package/src/file/index.php

@@ -8,6 +8,8 @@
 /**
  * When the `core/file` block is rendering, check if we need to enqueue the `wp-block-file-view` script.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The block content.
  * @param WP_Block $block      The parsed block.
@@ -65,6 +67,8 @@ function render_block_core_file( $attributes, $content ) {
 
 /**
  * Registers the `core/file` block on server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_file() {
 	register_block_type_from_metadata(

package/src/gallery/index.php

@@ -13,6 +13,8 @@
  * we add a custom `data-id` attribute before rendering the gallery
  * so that the Image Block can pick it up in its render_callback.
  *
+ * @since 5.9.0
+ *
  * @param array $parsed_block The block being rendered.
  * @return array The migrated block object.
  */
@@ -35,6 +37,8 @@ add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility'
 /**
  * Renders the `core/gallery` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array  $attributes Attributes of the block being rendered.
  * @param string $content Content of the block being rendered.
  * @return string The content of the block being rendered.
@@ -164,6 +168,8 @@ function block_core_gallery_render( $attributes, $content ) {
 }
 /**
  * Registers the `core/gallery` block on server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_gallery() {
 	register_block_type_from_metadata(

package/src/heading/index.js

@@ -30,15 +30,16 @@ export const settings = {
 		const { content, level } = attributes;
 
 		const customName = attributes?.metadata?.name;
+		const hasContent = content?.trim().length > 0;
 
 		// In the list view, use the block's content as the label.
 		// If the content is empty, fall back to the default label.
-		if ( context === 'list-view' && ( customName || content ) ) {
-			return attributes?.metadata?.name || content;
+		if ( context === 'list-view' && ( customName || hasContent ) ) {
+			return customName || content;
 		}
 
 		if ( context === 'accessibility' ) {
-			return ! content || content.length === 0
+			return ! hasContent
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */
 						__( 'Level %s. Empty.' ),

package/src/heading/index.php

@@ -14,6 +14,8 @@
  * Would be transformed to:
  *  <h2 class="align-left wp-block-heading">Hello World</h2>
  *
+ * @since 6.2.0
+ *
  * @param array  $attributes Attributes of the block being rendered.
  * @param string $content Content of the block being rendered.
  *
@@ -39,6 +41,8 @@ function block_core_heading_render( $attributes, $content ) {
 
 /**
  * Registers the `core/heading` block on server.
+ *
+ * @since 6.2.0
  */
 function register_block_core_heading() {
 	register_block_type_from_metadata(

package/src/home-link/index.php

@@ -9,6 +9,8 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the home link markup in the front-end.
  *
+ * @since 6.0.0
+ *
  * @param  array $context home link block context.
  * @return array Colors CSS classes and inline styles.
  */
@@ -61,6 +63,8 @@ function block_core_home_link_build_css_colors( $context ) {
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the home link markup in the front-end.
  *
+ * @since 6.0.0
+ *
  * @param  array $context Home link block context.
  * @return array Font size CSS classes and inline styles.
  */
@@ -88,6 +92,8 @@ function block_core_home_link_build_css_font_sizes( $context ) {
 /**
  * Builds an array with classes and style for the li wrapper
  *
+ * @since 6.0.0
+ *
  * @param  array $context    Home link block context.
  * @return string The li wrapper attributes.
  */
@@ -121,6 +127,8 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 /**
  * Renders the `core/home-link` block.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The saved content.
  * @param WP_Block $block      The parsed block.
@@ -155,6 +163,8 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 /**
  * Register the home block
  *
+ * @since 6.0.0
+ *
  * @uses render_block_core_home_link()
  * @throws WP_Error An WP_Error exception parsing the block definition.
  */

package/src/image/editor.scss

@@ -2,11 +2,6 @@
 // @todo: this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
 
-	&:not(.is-selected) .components-placeholder__fieldset {
-		// Show only is selected.
-		display: none;
-	}
-
 	// Show Placeholder style on-select.
 	&.is-selected .components-placeholder {
 		// Block UI appearance.

package/src/image/index.php

@@ -9,6 +9,8 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
+ * @since 5.9.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The block content.
  * @param WP_Block $block      The block object.
@@ -85,6 +87,8 @@ function render_block_core_image( $attributes, $content, $block ) {
  *
  * This is used to determine whether the lightbox should be rendered or not.
  *
+ * @since 6.4.0
+ *
  * @param array $block Block data.
  *
  * @return array Filtered block data.
@@ -115,6 +119,8 @@ function block_core_image_get_lightbox_settings( $block ) {
 /**
  * Adds the directives and layout needed for the lightbox behavior.
  *
+ * @since 6.4.0
+ *
  * @param string $block_content Rendered block content.
  * @param array  $block         Block object.
  *
@@ -219,6 +225,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	return $body_content;
 }
 
+/**
+ * @since 6.5.0
+ */
 function block_core_image_print_lightbox_overlay() {
 	$close_button_label = esc_attr__( 'Close' );
 
@@ -238,7 +247,7 @@ function block_core_image_print_lightbox_overlay() {
 	}
 
 	echo <<<HTML
-		<div 
+		<div
 			class="wp-lightbox-overlay zoom"
 			data-wp-interactive="core/image"
 			data-wp-context='{}'
@@ -278,6 +287,8 @@ HTML;
 
 /**
  * Registers the `core/image` block on server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_image() {
 	register_block_type_from_metadata(

package/src/latest-comments/index.php

@@ -36,6 +36,8 @@ function wp_latest_comments_draft_or_post_title( $post = 0 ) {
 /**
  * Renders the `core/latest-comments` block on server.
  *
+ * @since 5.1.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the post content with latest comments added.
@@ -145,6 +147,8 @@ function render_block_core_latest_comments( $attributes = array() ) {
 
 /**
  * Registers the `core/latest-comments` block.
+ *
+ * @since 5.3.0
  */
 function register_block_core_latest_comments() {
 	register_block_type_from_metadata(

package/src/latest-posts/index.php

@@ -18,6 +18,8 @@ $block_core_latest_posts_excerpt_length = 0;
  * Callback for the excerpt_length filter used by
  * the Latest Posts block at render time.
  *
+ * @since 5.4.0
+ *
  * @return int Returns the global $block_core_latest_posts_excerpt_length variable
  *             to allow the excerpt_length filter respect the Latest Block setting.
  */
@@ -29,6 +31,8 @@ function block_core_latest_posts_get_excerpt_length() {
 /**
  * Renders the `core/latest-posts` block on server.
  *
+ * @since 5.0.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the post content with latest posts added.
@@ -218,6 +222,8 @@ function render_block_core_latest_posts( $attributes ) {
 
 /**
  * Registers the `core/latest-posts` block on server.
+ *
+ * @since 5.0.0
  */
 function register_block_core_latest_posts() {
 	register_block_type_from_metadata(
@@ -241,6 +247,8 @@ add_action( 'init', 'register_block_core_latest_posts' );
  * TODO: Remove when and if the bottom client-side deprecation for this block
  * is removed.
  *
+ * @since 5.5.0
+ *
  * @param array $block A single parsed block object.
  *
  * @return array The migrated block object.

package/src/loginout/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/loginout` block on server.
  *
+ * @since 5.8.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the login-out link or form.
@@ -39,6 +41,8 @@ function render_block_core_loginout( $attributes ) {
 
 /**
  * Registers the `core/loginout` block on server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_loginout() {
 	register_block_type_from_metadata(

package/src/media-text/block.json

@@ -92,8 +92,13 @@
 		},
 		"allowedBlocks": {
 			"type": "array"
+		},
+		"useFeaturedImage": {
+			"type": "boolean",
+			"default": false
 		}
 	},
+	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],

package/src/media-text/edit.js

@@ -31,7 +31,7 @@ import {
 } from '@wordpress/components';
 import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { pullLeft, pullRight } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -127,7 +127,12 @@ function attributesFromMedia( {
 	};
 }
 
-function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
+function MediaTextEdit( {
+	attributes,
+	isSelected,
+	setAttributes,
+	context: { postId, postType },
+} ) {
 	const {
 		focalPoint,
 		href,
@@ -145,9 +150,42 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 		rel,
 		verticalAlignment,
 		allowedBlocks,
+		useFeaturedImage,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
+	const [ featuredImage ] = useEntityProp(
+		'postType',
+		postType,
+		'featured_media',
+		postId
+	);
+
+	const featuredImageMedia = useSelect(
+		( select ) =>
+			featuredImage &&
+			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
+		[ featuredImage ]
+	);
+
+	const featuredImageURL = useFeaturedImage
+		? featuredImageMedia?.source_url
+		: '';
+	const featuredImageAlt = useFeaturedImage
+		? featuredImageMedia?.alt_text
+		: '';
+
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			imageFill: false,
+			mediaType: 'image',
+			mediaId: undefined,
+			mediaUrl: undefined,
+			mediaAlt: undefined,
+			useFeaturedImage: ! useFeaturedImage,
+		} );
+	};
+
 	const { imageSizes, image } = useSelect(
 		( select ) => {
 			const { getSettings } = select( blockEditorStore );
@@ -261,25 +299,30 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 					}
 				/>
 			) }
-			{ imageFill && mediaUrl && mediaType === 'image' && (
-				<FocalPointPicker
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Focal point' ) }
-					url={ mediaUrl }
-					value={ focalPoint }
-					onChange={ ( value ) =>
-						setAttributes( { focalPoint: value } )
-					}
-					onDragStart={ imperativeFocalPointPreview }
-					onDrag={ imperativeFocalPointPreview }
-				/>
-			) }
-			{ mediaType === 'image' && (
+			{ imageFill &&
+				( mediaUrl || featuredImageURL ) &&
+				mediaType === 'image' && (
+					<FocalPointPicker
+						__nextHasNoMarginBottom
+						label={ __( 'Focal point' ) }
+						url={
+							useFeaturedImage && featuredImageURL
+								? featuredImageURL
+								: mediaUrl
+						}
+						value={ focalPoint }
+						onChange={ ( value ) =>
+							setAttributes( { focalPoint: value } )
+						}
+						onDragStart={ imperativeFocalPointPreview }
+						onDrag={ imperativeFocalPointPreview }
+					/>
+				) }
+			{ mediaType === 'image' && ( mediaUrl || featuredImageURL ) && (
 				<TextareaControl
 					__nextHasNoMarginBottom
 					label={ __( 'Alternative text' ) }
-					value={ mediaAlt }
+					value={ mediaAlt || featuredImageAlt }
 					onChange={ onMediaAltChange }
 					help={
 						<>
@@ -353,7 +396,11 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 						onChangeUrl={ onSetHref }
 						linkDestination={ linkDestination }
 						mediaType={ mediaType }
-						mediaUrl={ image && image.source_url }
+						mediaUrl={
+							useFeaturedImage && featuredImageURL
+								? featuredImageURL
+								: image && image.source_url
+						}
 						mediaLink={ image && image.link }
 						linkTarget={ linkTarget }
 						linkClass={ linkClass }
@@ -370,6 +417,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 					commitWidthChange={ commitWidthChange }
 					ref={ refMediaContainer }
 					enableResize={ blockEditingMode === 'default' }
+					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					{ ...{
 						focalPoint,
 						imageFill,
@@ -381,6 +429,9 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 						mediaType,
 						mediaUrl,
 						mediaWidth,
+						useFeaturedImage,
+						featuredImageURL,
+						featuredImageAlt,
 					} }
 				/>
 				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }

package/src/media-text/editor.scss

@@ -26,7 +26,8 @@
 	width: 100% !important;
 }
 
-.wp-block-media-text.is-image-fill .editor-media-container__resizer {
+.wp-block-media-text.is-image-fill .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
 	// The resizer sets an inline height but for the image fill we set it to full height.
 	height: 100% !important;
 }
@@ -34,3 +35,8 @@
 .wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
 	max-width: unset;
 }
+
+/* Make the featured image placeholder the same height as the media selection area. */
+.wp-block-media-text--placeholder-image {
+	min-height: 205px;
+}

package/src/media-text/index.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * Server-side rendering of the `core/media-text` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/media-text` block on server.
+ *
+ * @since 6.6.0
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content    The block rendered content.
+ *
+ * @return string Returns the Media & Text block markup, if useFeaturedImage is true.
+ */
+function render_block_core_media_text( $attributes, $content ) {
+	if ( false === $attributes['useFeaturedImage'] ) {
+		return $content;
+	}
+
+	if ( in_the_loop() ) {
+		update_post_thumbnail_cache();
+	}
+
+	$current_featured_image = get_the_post_thumbnail_url();
+	if ( ! $current_featured_image ) {
+		return $content;
+	}
+
+	$image_tag = '<figure class="wp-block-media-text__media"><img>';
+	$content   = preg_replace( '/<figure\s+class="wp-block-media-text__media">/', $image_tag, $content );
+
+	$processor = new WP_HTML_Tag_Processor( $content );
+	if ( isset( $attributes['imageFill'] ) && $attributes['imageFill'] ) {
+		$position = '50% 50%';
+		if ( isset( $attributes['focalPoint'] ) ) {
+			$position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+		}
+		$processor->next_tag( 'figure' );
+		$processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' );
+	}
+	$processor->next_tag( 'img' );
+	$media_size_slug = 'full';
+	if ( isset( $attributes['mediaSizeSlug'] ) ) {
+		$media_size_slug = $attributes['mediaSizeSlug'];
+	}
+	$processor->set_attribute( 'src', esc_url( $current_featured_image ) );
+	$processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+
+	$content = $processor->get_updated_html();
+
+	return $content;
+}
+
+/**
+ * Registers the `core/media-text` block renderer on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_media_text() {
+	register_block_type_from_metadata(
+		__DIR__ . '/media-text',
+		array(
+			'render_callback' => 'render_block_core_media_text',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_media_text' );