@wordpress/block-library 8.29.0 → 8.31.0

package/src/quote/deprecated.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export const migrateToQuoteV2 = ( attributes ) => {
 	const { value, ...restAttributes } = attributes;
@@ -34,6 +34,102 @@ export const migrateToQuoteV2 = ( attributes ) => {
 	];
 };
 
+const TEXT_ALIGN_OPTIONS = [ 'left', 'right', 'center' ];
+
+// Migrate existing text alignment settings to the renamed attribute.
+const migrateTextAlign = ( attributes, innerBlocks ) => {
+	const { align, ...rest } = attributes;
+	// Check if there are valid alignments stored in the old attribute
+	// and assign them to the new attribute name.
+	const migratedAttributes = TEXT_ALIGN_OPTIONS.includes( align )
+		? { ...rest, textAlign: align }
+		: attributes;
+
+	return [ migratedAttributes, innerBlocks ];
+};
+
+// Migrate the v2 blocks with style === `2`;
+const migrateLargeStyle = ( attributes, innerBlocks ) => {
+	return [
+		{
+			...attributes,
+			className: attributes.className
+				? attributes.className + ' is-style-large'
+				: 'is-style-large',
+		},
+		innerBlocks,
+	];
+};
+
+// Version before the 'align' attribute was replaced with 'textAlign'.
+const v4 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		align: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		html: false,
+		__experimentalOnEnter: true,
+		__experimentalOnMerge: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+			},
+		},
+		color: {
+			gradients: true,
+			heading: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+	},
+	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
+	save( { attributes } ) {
+		const { align, citation } = attributes;
+		const className = classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<InnerBlocks.Content />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: migrateTextAlign,
+};
+
 const v3 = {
 	attributes: {
 		value: {
@@ -87,7 +183,9 @@ const v3 = {
 			</blockquote>
 		);
 	},
-	migrate: migrateToQuoteV2,
+	migrate( attributes ) {
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
+	},
 };
 
 const v2 = {
@@ -109,7 +207,9 @@ const v2 = {
 			type: 'string',
 		},
 	},
-	migrate: migrateToQuoteV2,
+	migrate( attributes ) {
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
+	},
 	save( { attributes } ) {
 		const { align, value, citation } = attributes;
 
@@ -151,15 +251,12 @@ const v1 = {
 	migrate( attributes ) {
 		if ( attributes.style === 2 ) {
 			const { style, ...restAttributes } = attributes;
-			return migrateToQuoteV2( {
-				...restAttributes,
-				className: attributes.className
-					? attributes.className + ' is-style-large'
-					: 'is-style-large',
-			} );
+			return migrateTextAlign(
+				...migrateLargeStyle( ...migrateToQuoteV2( restAttributes ) )
+			);
 		}
 
-		return migrateToQuoteV2( attributes );
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
 	},
 
 	save( { attributes } ) {
@@ -206,12 +303,10 @@ const v0 = {
 	migrate( attributes ) {
 		if ( ! isNaN( parseInt( attributes.style ) ) ) {
 			const { style, ...restAttributes } = attributes;
-			return migrateToQuoteV2( {
-				...restAttributes,
-			} );
+			return migrateTextAlign( ...migrateToQuoteV2( restAttributes ) );
 		}
 
-		return migrateToQuoteV2( attributes );
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
 	},
 
 	save( { attributes } ) {
@@ -239,4 +334,4 @@ const v0 = {
  *
  * See block-deprecation.md
  */
-export default [ v3, v2, v1, v0 ];
+export default [ v4, v3, v2, v1, v0 ];

package/src/quote/edit.js

@@ -74,19 +74,25 @@ export default function QuoteEdit( {
 	className,
 	style,
 } ) {
-	const { align, citation } = attributes;
+	const { textAlign, citation } = attributes;
 
 	useMigrateOnLoad( attributes, clientId );
 
-	const hasSelection = useSelect( ( select ) => {
-		const { isBlockSelected, hasSelectedInnerBlock } =
-			select( blockEditorStore );
-		return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId );
-	}, [] );
+	const hasSelection = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return (
+				hasSelectedInnerBlock( clientId, true ) ||
+				isBlockSelected( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const blockProps = useBlockProps( {
 		className: classNames( className, {
-			[ `has-text-align-${ align }` ]: align,
+			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		...( ! isWebPlatform && { style } ),
 	} );
@@ -100,9 +106,9 @@ export default function QuoteEdit( {
 		<>
 			<BlockControls group="block">
 				<AlignmentControl
-					value={ align }
+					value={ textAlign }
 					onChange={ ( nextAlign ) => {
-						setAttributes( { align: nextAlign } );
+						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
 			</BlockControls>
@@ -132,7 +138,7 @@ export default function QuoteEdit( {
 								createBlock( getDefaultBlockName() )
 							)
 						}
-						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
+						{ ...( ! isWebPlatform ? { textAlign } : {} ) }
 					/>
 				) }
 			</BlockQuotation>

package/src/quote/save.js

@@ -9,10 +9,10 @@ import classNames from 'classnames';
 import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { align, citation } = attributes;
+	const { textAlign, citation } = attributes;
 
 	const className = classNames( {
-		[ `has-text-align-${ align }` ]: align,
+		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
 	return (

package/src/quote/test/__snapshots__/transforms.native.js.snap

@@ -3,7 +3,7 @@
 exports[`Quote block transforms to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
 <blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
 <p>"This will make running your own blog a viable alternative again."</p>
 <!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
@@ -14,7 +14,7 @@ exports[`Quote block transforms to Columns block 1`] = `
 
 exports[`Quote block transforms to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<div class="wp-block-group"><!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
 <blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
 <p>"This will make running your own blog a viable alternative again."</p>
 <!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>

package/src/read-more/edit.js

@@ -33,6 +33,7 @@ export default function ReadMore( {
 				</PanelBody>
 			</InspectorControls>
 			<RichText
+				identifier="content"
 				tagName="a"
 				aria-label={ __( '“Read more” link text' ) }
 				placeholder={ __( 'Read more' ) }
@@ -43,7 +44,7 @@ export default function ReadMore( {
 				__unstableOnSplitAtEnd={ () =>
 					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}
-				withoutInteractiveFormatting={ true }
+				withoutInteractiveFormatting
 				{ ...blockProps }
 			/>
 		</>

package/src/read-more/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/read-more` 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.
@@ -47,6 +49,8 @@ function render_block_core_read_more( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/read-more` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_read_more() {
 	register_block_type_from_metadata(

package/src/rss/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/rss` block on server.
  *
+ * @since 5.2.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the block content with received rss items.
@@ -107,6 +109,8 @@ function render_block_core_rss( $attributes ) {
 
 /**
  * Registers the `core/rss` block on server.
+ *
+ * @since 5.2.0
  */
 function register_block_core_rss() {
 	register_block_type_from_metadata(

package/src/search/edit.js

@@ -347,6 +347,7 @@ export default function SearchEdit( {
 
 				{ ! buttonUseIcon && (
 					<RichText
+						identifier="buttonText"
 						className={ buttonClasses }
 						style={ buttonStyles }
 						aria-label={ __( 'Button text' ) }
@@ -400,7 +401,7 @@ export default function SearchEdit( {
 			</BlockControls>
 
 			<InspectorControls>
-				<PanelBody title={ __( 'Display Settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<BaseControl
 						label={ __( 'Width' ) }
 						id={ unitControlInputId }
@@ -546,6 +547,7 @@ export default function SearchEdit( {
 
 			{ showLabel && (
 				<RichText
+					identifier="label"
 					className={ labelClassnames }
 					aria-label={ __( 'Label text' ) }
 					placeholder={ __( 'Add label…' ) }

package/src/search/edit.native.js

@@ -192,7 +192,7 @@ export default function SearchEdit( {
 						} );
 					} }
 					options={ BUTTON_OPTIONS }
-					hideCancelButton={ true }
+					hideCancelButton
 				/>
 				{ buttonPosition !== 'no-button' && (
 					<ToggleControl
@@ -294,7 +294,7 @@ export default function SearchEdit( {
 		return (
 			<View
 				style={ styles.searchInputContainer }
-				accessible={ true }
+				accessible
 				accessibilityRole="none"
 				accessibilityHint={
 					isScreenReaderEnabled
@@ -383,7 +383,7 @@ export default function SearchEdit( {
 
 				{ ! buttonUseIcon && (
 					<View
-						accessible={ true }
+						accessible
 						accessibilityRole="none"
 						accessibilityHint={
 							isScreenReaderEnabled
@@ -395,7 +395,7 @@ export default function SearchEdit( {
 					>
 						<RichText
 							className="wp-block-search__button"
-							identifier="text"
+							identifier="buttonText"
 							tagName="p"
 							style={ richTextButtonStyle }
 							placeholder={ buttonPlaceholderText }
@@ -438,7 +438,7 @@ export default function SearchEdit( {
 
 			{ showLabel && (
 				<View
-					accessible={ true }
+					accessible
 					accessibilityRole="none"
 					accessibilityHint={
 						isScreenReaderEnabled
@@ -449,7 +449,7 @@ export default function SearchEdit( {
 				>
 					<RichText
 						className="wp-block-search__label"
-						identifier="text"
+						identifier="label"
 						tagName="p"
 						style={ styles.richTextLabel }
 						placeholder={ __( 'Add label…' ) }

package/src/search/index.php

@@ -179,7 +179,7 @@ function render_block_core_search( $attributes ) {
 	if ( $is_expandable_searchfield ) {
 		$aria_label_expanded  = __( 'Submit Search' );
 		$aria_label_collapsed = __( 'Expand search field' );
-		$form_context         = data_wp_context(
+		$form_context         = wp_interactivity_data_wp_context(
 			array(
 				'isSearchInputVisible' => $open_by_default,
 				'inputId'              => $input_id,
@@ -207,6 +207,8 @@ function render_block_core_search( $attributes ) {
 
 /**
  * Registers the `core/search` block on the server.
+ *
+ * @since 5.2.0
  */
 function register_block_core_search() {
 	register_block_type_from_metadata(
@@ -221,6 +223,8 @@ add_action( 'init', 'register_block_core_search' );
 /**
  * Builds the correct top level classnames for the 'core/search' block.
  *
+ * @since 5.6.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The classnames used in the block.
@@ -265,6 +269,8 @@ function classnames_for_block_core_search( $attributes ) {
  * or not, the generated rule is injected into the appropriate collection of
  * styles for later application in the block's markup.
  *
+ * @since 6.1.0
+ *
  * @param array  $attributes     The block attributes.
  * @param string $property       Border property to generate rule for e.g. width or color.
  * @param string $side           Optional side border. The dictates the value retrieved and final CSS property.
@@ -310,6 +316,8 @@ function apply_block_core_search_border_style( $attributes, $property, $side, &$
  * injects rules into the provided wrapper, button and input style arrays for
  * uniform "flat" borders or those with individual sides configured.
  *
+ * @since 6.1.0
+ *
  * @param array  $attributes     The block attributes.
  * @param string $property       Border property to generate rule for e.g. width or color.
  * @param array  $wrapper_styles Current collection of wrapper styles.
@@ -331,6 +339,8 @@ function apply_block_core_search_border_styles( $attributes, $property, &$wrappe
  * inner input or button and a second for the inner wrapper should the block
  * be positioning the button "inside".
  *
+ * @since 5.8.0
+ *
  * @param  array $attributes The block attributes.
  *
  * @return array Style HTML attribute.
@@ -457,7 +467,9 @@ function styles_for_block_core_search( $attributes ) {
 }
 
 /**
- * Returns typography classnames depending on whether there are named font sizes/families .
+ * Returns typography classnames depending on whether there are named font sizes/families.
+ *
+ * @since 6.1.0
  *
  * @param array $attributes The block attributes.
  *
@@ -483,6 +495,8 @@ function get_typography_classes_for_block_core_search( $attributes ) {
  * Returns typography styles to be included in an HTML style tag.
  * This excludes text-decoration, which is applied only to the label and button elements of the search block.
  *
+ * @since 6.1.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string A string of typography CSS declarations.
@@ -533,6 +547,8 @@ function get_typography_styles_for_block_core_search( $attributes ) {
 /**
  * Returns border color classnames depending on whether there are named or custom border colors.
  *
+ * @since 5.9.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The border color classnames to be applied to the block elements.
@@ -556,6 +572,8 @@ function get_border_color_classes_for_block_core_search( $attributes ) {
 /**
  * Returns color classnames depending on whether there are named or custom text and background colors.
  *
+ * @since 5.9.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The color classnames to be applied to the block elements.

package/src/search/style.scss

@@ -12,6 +12,8 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	svg {
 		min-width: $grid-unit-30;
 		min-height: $grid-unit-30;
+		width: 1.25em;
+		height: 1.25em;
 		fill: currentColor;
 		vertical-align: text-bottom;
 	}

package/src/shortcode/index.php

@@ -8,6 +8,8 @@
 /**
  * Performs wpautop() on the shortcode block content.
  *
+ * @since 5.0.0
+ *
  * @param array  $attributes The block attributes.
  * @param string $content    The block content.
  *
@@ -19,6 +21,8 @@ function render_block_core_shortcode( $attributes, $content ) {
 
 /**
  * Registers the `core/shortcode` block on server.
+ *
+ * @since 5.0.0
  */
 function register_block_core_shortcode() {
 	register_block_type_from_metadata(

package/src/site-logo/edit.js

@@ -268,6 +268,14 @@ const SiteLogo = ( {
 			</ResizableBox>
 		);
 
+	// Support the previous location for the Site Icon settings. To be removed
+	// when the required WP core version for Gutenberg is >= 6.5.0.
+	const shouldUseNewUrl = ! window?.__experimentalUseCustomizerSiteLogoUrl;
+
+	const siteIconSettingsUrl = shouldUseNewUrl
+		? siteUrl + '/wp-admin/options-general.php'
+		: siteUrl + '/wp-admin/customize.php?autofocus[section]=title_tagline';
+
 	const syncSiteIconHelpText = createInterpolateElement(
 		__(
 			'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. To use a custom icon that is different from your site logo, use the <a>Site Icon settings</a>.'
@@ -276,10 +284,7 @@ const SiteLogo = ( {
 			a: (
 				// eslint-disable-next-line jsx-a11y/anchor-has-content
 				<a
-					href={
-						siteUrl +
-						'/wp-admin/customize.php?autofocus[section]=title_tagline'
-					}
+					href={ siteIconSettingsUrl }
 					target="_blank"
 					rel="noopener noreferrer"
 				/>
@@ -331,7 +336,7 @@ const SiteLogo = ( {
 						<>
 							<ToggleControl
 								__nextHasNoMarginBottom
-								label={ __( 'Use as site icon' ) }
+								label={ __( 'Use as Site Icon' ) }
 								onChange={ ( value ) => {
 									setAttributes( { shouldSyncIcon: value } );
 									setIcon( value ? logoId : undefined );
@@ -569,7 +574,7 @@ export default function LogoEdit( {
 			<Placeholder
 				className={ placeholderClassName }
 				preview={ logoImage }
-				withIllustration={ true }
+				withIllustration
 				style={ {
 					width,
 				} }

package/src/site-logo/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/site-logo` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The render.
@@ -60,6 +62,8 @@ function render_block_core_site_logo( $attributes ) {
 
 /**
  * Register a core site setting for a site logo
+ *
+ * @since 5.8.0
  */
 function register_block_core_site_logo_setting() {
 	register_setting(
@@ -79,6 +83,8 @@ add_action( 'rest_api_init', 'register_block_core_site_logo_setting', 10 );
 
 /**
  * Register a core site setting for a site icon
+ *
+ * @since 5.9.0
  */
 function register_block_core_site_icon_setting() {
 	register_setting(
@@ -96,6 +102,8 @@ add_action( 'rest_api_init', 'register_block_core_site_icon_setting', 10 );
 
 /**
  * Registers the `core/site-logo` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_site_logo() {
 	register_block_type_from_metadata(
@@ -111,6 +119,8 @@ add_action( 'init', 'register_block_core_site_logo' );
 /**
  * Overrides the custom logo with a site logo, if the option is set.
  *
+ * @since 5.8.0
+ *
  * @param string $custom_logo The custom logo set by a theme.
  *
  * @return string The site logo if set.
@@ -125,6 +135,8 @@ add_filter( 'theme_mod_custom_logo', '_override_custom_logo_theme_mod' );
 /**
  * Updates the site_logo option when the custom_logo theme-mod gets updated.
  *
+ * @since 5.8.0
+ *
  * @param  mixed $value Attachment ID of the custom logo or an empty value.
  * @return mixed
  */
@@ -143,6 +155,8 @@ add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' );
 /**
  * Deletes the site_logo when the custom_logo theme mod is removed.
  *
+ * @since 5.8.0
+ *
  * @param array $old_value Previous theme mod settings.
  * @param array $value     Updated theme mod settings.
  */
@@ -161,6 +175,8 @@ function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
 
 /**
  * Deletes the site logo when all theme mods are being removed.
+ *
+ * @since 5.8.0
  */
 function _delete_site_logo_on_remove_theme_mods() {
 	global $_ignore_site_logo_changes;
@@ -179,6 +195,8 @@ function _delete_site_logo_on_remove_theme_mods() {
  * Hooks `_delete_site_logo_on_remove_theme_mods` in `delete_option_theme_mods_$theme`.
  *
  * Runs on `setup_theme` to account for dynamically-switched themes in the Customizer.
+ *
+ * @since 5.8.0
  */
 function _delete_site_logo_on_remove_custom_logo_on_setup_theme() {
 	$theme = get_option( 'stylesheet' );
@@ -189,6 +207,8 @@ add_action( 'setup_theme', '_delete_site_logo_on_remove_custom_logo_on_setup_the
 
 /**
  * Removes the custom_logo theme-mod when the site_logo option gets deleted.
+ *
+ * @since 5.9.0
  */
 function _delete_custom_logo_on_remove_site_logo() {
 	global $_ignore_site_logo_changes;

package/src/site-tagline/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/site-tagline` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The render.
@@ -29,6 +31,8 @@ function render_block_core_site_tagline( $attributes ) {
 
 /**
  * Registers the `core/site-tagline` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_site_tagline() {
 	register_block_type_from_metadata(

package/src/site-title/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/site-title` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The render.
@@ -53,6 +55,8 @@ function render_block_core_site_title( $attributes ) {
 
 /**
  * Registers the `core/site-title` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_site_title() {
 	register_block_type_from_metadata(