@wordpress/block-library 8.29.0 → 8.31.0

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/gallery/test/index.native.js

@@ -92,7 +92,7 @@ describe( 'Gallery block', () => {
 		expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 
-		getBlockSpy.mockReset();
+		getBlockSpy.mockRestore();
 	} );
 
 	it( 'selects a gallery item', async () => {

package/src/gallery/v1/edit.js

@@ -411,7 +411,7 @@ function GalleryEdit( props ) {
 						value={ linkTo }
 						onChange={ setLinkTo }
 						options={ linkOptions }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 					{ shouldShowSizeOptions && (
 						<SelectControl
@@ -420,7 +420,7 @@ function GalleryEdit( props ) {
 							value={ sizeSlug }
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }
-							hideCancelButton={ true }
+							hideCancelButton
 						/>
 					) }
 				</PanelBody>

package/src/gallery/v1/gallery.native.js

@@ -140,7 +140,7 @@ export const Gallery = ( props ) => {
 			<BlockCaption
 				clientId={ clientId }
 				isSelected={ isCaptionSelected }
-				accessible={ true }
+				accessible
 				accessibilityLabelCreator={ ( caption ) =>
 					RichText.isEmpty( caption )
 						? /* translators: accessibility text. Empty gallery caption. */

package/src/group/editor.scss

@@ -65,7 +65,6 @@
 		margin: 0;
 	}
 	.components-placeholder__instructions {
-		text-align: center;
 		margin-bottom: 18px;
 	}
 	.wp-block-group-placeholder__variations svg {
@@ -92,6 +91,7 @@
 	.components-placeholder {
 		min-height: auto;
 		padding: $grid-unit-30;
+		align-items: center;
 	}
 	.is-small,
 	.is-medium {

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

@@ -7,6 +7,7 @@ import { createBlock, getBlockAttributes } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { getLevelFromHeadingNodeName } from './shared';
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
 
 const transforms = {
 	from: [
@@ -15,12 +16,20 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, anchor, align: textAlign } ) =>
-					createBlock( 'core/heading', {
-						content,
-						anchor,
-						textAlign,
-					} )
+				attributes.map(
+					( { content, anchor, align: textAlign, metadata } ) =>
+						createBlock( 'core/heading', {
+							content,
+							anchor,
+							textAlign,
+							metadata: getTransformedMetadata(
+								metadata,
+								'core/heading',
+								( { content: contentBinding } ) => ( {
+									content: contentBinding,
+								} )
+							),
+						} )
 				),
 		},
 		{
@@ -82,8 +91,18 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, textAlign: align } ) =>
-					createBlock( 'core/paragraph', { content, align } )
+				attributes.map( ( { content, textAlign: align, metadata } ) =>
+					createBlock( 'core/paragraph', {
+						content,
+						align,
+						metadata: getTransformedMetadata(
+							metadata,
+							'core/paragraph',
+							( { content: contentBinding } ) => ( {
+								content: contentBinding,
+							} )
+						),
+					} )
 				),
 		},
 	],

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/edit.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { store as blocksStore } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -19,7 +20,7 @@ import {
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -335,14 +336,14 @@ export function ImageEdit( {
 	} );
 
 	// Much of this description is duplicated from MediaPlaceholder.
-	const { lockUrlControls = false } = useSelect(
+	const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
 				return {};
 			}
 
 			const blockBindingsSource = unlock(
-				select( blockEditorStore )
+				select( blocksStore )
 			).getBlockBindingsSource( metadata?.bindings?.url?.source );
 
 			return {
@@ -350,6 +351,13 @@ export function ImageEdit( {
 					!! metadata?.bindings?.url &&
 					( ! blockBindingsSource ||
 						blockBindingsSource?.lockAttributesEditing ),
+				lockUrlControlsMessage: blockBindingsSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							blockBindingsSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
 			};
 		},
 		[ isSingleSelected ]
@@ -361,7 +369,7 @@ export function ImageEdit( {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
-				withIllustration={ true }
+				withIllustration
 				icon={ lockUrlControls ? pluginsIcon : icon }
 				label={ __( 'Image' ) }
 				instructions={
@@ -386,7 +394,7 @@ export function ImageEdit( {
 					<span
 						className={ 'block-bindings-media-placeholder-message' }
 					>
-						{ __( 'Connected to a custom field' ) }
+						{ lockUrlControlsMessage }
 					</span>
 				) : (
 					content

package/src/image/edit.native.js

@@ -889,7 +889,7 @@ export class ImageEdit extends Component {
 		return (
 			<MediaUpload
 				allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
-				isReplacingMedia={ true }
+				isReplacingMedia
 				onSelect={ this.onSelectMediaUploadOption }
 				onSelectURL={ this.onSelectURL }
 				render={ ( { open, getMediaOptions } ) => {

package/src/image/editor.scss

@@ -1,6 +1,7 @@
 // Provide special styling for the placeholder.
 // @todo: this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
+
 	// Show Placeholder style on-select.
 	&.is-selected .components-placeholder {
 		// Block UI appearance.

package/src/image/image.js

@@ -33,7 +33,7 @@ import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { getFilename } from '@wordpress/url';
-import { switchToBlockType } from '@wordpress/blocks';
+import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -78,7 +78,7 @@ const ImageWrapper = ( { href, children } ) => {
 		<a
 			href={ href }
 			onClick={ ( event ) => event.preventDefault() }
-			aria-disabled={ true }
+			aria-disabled
 			style={ {
 				// When the Image block is linked,
 				// it's wrapped with a disabled <a /> tag.
@@ -410,15 +410,19 @@ export default function Image( {
 		lockUrlControls = false,
 		lockHrefControls = false,
 		lockAltControls = false,
+		lockAltControlsMessage,
 		lockTitleControls = false,
+		lockTitleControlsMessage,
+		lockCaption = false,
 	} = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
 				return {};
 			}
-
-			const { getBlockBindingsSource, getBlockParentsByBlockName } =
-				unlock( select( blockEditorStore ) );
+			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+			const { getBlockParentsByBlockName } = unlock(
+				select( blockEditorStore )
+			);
 			const {
 				url: urlBinding,
 				alt: altBinding,
@@ -444,14 +448,32 @@ export default function Image( {
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
 					hasParentPattern,
+				lockCaption:
+					// Disable editing the caption if the image is inside a pattern instance.
+					// This is a temporary solution until we support overriding the caption on the frontend.
+					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
 					( ! altBindingSource ||
 						altBindingSource?.lockAttributesEditing ),
+				lockAltControlsMessage: altBindingSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							altBindingSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
 				lockTitleControls:
 					!! titleBinding &&
 					( ! titleBindingSource ||
 						titleBindingSource?.lockAttributesEditing ),
+				lockTitleControlsMessage: titleBindingSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							titleBindingSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
 			};
 		},
 		[ clientId, isSingleSelected, metadata?.bindings ]
@@ -551,11 +573,7 @@ export default function Image( {
 								disabled={ lockAltControls }
 								help={
 									lockAltControls ? (
-										<>
-											{ __(
-												'Connected to a custom field'
-											) }
-										</>
+										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
 											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
@@ -601,11 +619,7 @@ export default function Image( {
 								disabled={ lockTitleControls }
 								help={
 									lockTitleControls ? (
-										<>
-											{ __(
-												'Connected to a custom field'
-											) }
-										</>
+										<>{ lockTitleControlsMessage }</>
 									) : (
 										<>
 											{ __(
@@ -633,7 +647,7 @@ export default function Image( {
 					{ isSingleSelected && (
 						<ToolsPanelItem
 							label={ __( 'Alternative text' ) }
-							isShownByDefault={ true }
+							isShownByDefault
 							hasValue={ () => !! alt }
 							onDeselect={ () =>
 								setAttributes( { alt: undefined } )
@@ -646,11 +660,7 @@ export default function Image( {
 								readOnly={ lockAltControls }
 								help={
 									lockAltControls ? (
-										<>
-											{ __(
-												'Connected to a custom field'
-											) }
-										</>
+										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
 											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
@@ -688,7 +698,7 @@ export default function Image( {
 					readOnly={ lockTitleControls }
 					help={
 						lockTitleControls ? (
-							<>{ __( 'Connected to a custom field' ) }</>
+							<>{ lockTitleControlsMessage }</>
 						) : (
 							<>
 								{ __(
@@ -907,6 +917,7 @@ export default function Image( {
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
 			{ img }
+
 			<Caption
 				attributes={ attributes }
 				setAttributes={ setAttributes }
@@ -914,6 +925,7 @@ export default function Image( {
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
 				showToolbarButton={ isSingleSelected && hasNonContentControls }
+				disableEditing={ lockCaption }
 			/>
 		</>
 	);

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/edit.native.js

@@ -201,7 +201,7 @@ class LatestPostsEdit extends Component {
 								value={ featuredImageAlign }
 								onChange={ this.onSetFeaturedImageAlign }
 								controls={ [ 'left', 'center', 'right' ] }
-								isBottomSheetControl={ true }
+								isBottomSheetControl
 							/>
 							<ToggleControl
 								label={ __( 'Add link to featured image' ) }

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/list/ordered-list-settings.js

@@ -12,7 +12,7 @@ import {
 
 const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 	<InspectorControls>
-		<PanelBody title={ __( 'Ordered list settings' ) }>
+		<PanelBody title={ __( 'Settings' ) }>
 			<TextControl
 				__nextHasNoMarginBottom
 				label={ __( 'Start value' ) }

package/src/list-item/edit.js

@@ -29,7 +29,6 @@ import {
 	useOutdentListItem,
 	useSplit,
 	useMerge,
-	useCopy,
 } from './hooks';
 import { convertToListItems } from './utils';
 
@@ -79,7 +78,7 @@ export default function ListItemEdit( {
 	mergeBlocks,
 } ) {
 	const { placeholder, content } = attributes;
-	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
+	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		renderAppender: false,
 		__unstableDisableDropZone: true,

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

@@ -181,7 +181,7 @@ export default function ListItemEdit( {
 						onReplace={ onReplaceList }
 						onEnter={ onEnter }
 						style={ styleWithPlaceholderOpacity }
-						deleteEnter={ true }
+						deleteEnter
 						containerWidth={ contentWidth }
 					/>
 				</View>

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

@@ -4,4 +4,3 @@ export { default as useEnter } from './use-enter';
 export { default as useSpace } from './use-space';
 export { default as useSplit } from './use-split';
 export { default as useMerge } from './use-merge';
-export { default as useCopy } from './use-copy';

package/src/list-item/hooks/use-indent-list-item.js

@@ -61,5 +61,7 @@ export default function useIndentListItem( clientId ) {
 				clonedBlocks[ clonedBlocks.length - 1 ].clientId
 			);
 		}
+
+		return true;
 	}, [ clientId ] );
 }

package/src/list-item/hooks/use-outdent-list-item.js

@@ -93,5 +93,7 @@ export default function useOutdentListItem() {
 				removeBlock( parentListId, shouldSelectParent );
 			}
 		} );
+
+		return true;
 	}, [] );
 }