@wordpress/block-library 8.30.0 → 8.32.0

package/src/page-list/index.php

@@ -9,6 +9,8 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the pages markup in the front-end when it is a descendant of navigation.
  *
+ * @since 5.8.0
+ *
  * @param  array $attributes Block attributes.
  * @param  array $context    Navigation block context.
  * @return array Colors CSS classes and inline styles.
@@ -101,6 +103,8 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the pages markup in the front-end when it is a descendant of navigation.
  *
+ * @since 5.8.0
+ *
  * @param  array $context Navigation block context.
  * @return array Font size CSS classes and inline styles.
  */
@@ -135,6 +139,8 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 /**
  * Outputs Page list markup from an array of pages with nested children.
  *
+ * @since 5.8.0
+ *
  * @param boolean $open_submenus_on_click Whether to open submenus on click instead of hover.
  * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
  * @param boolean $is_navigation_child If block is a child of Navigation block.
@@ -220,6 +226,8 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 /**
  * Outputs nested array of pages
  *
+ * @since 5.8.0
+ *
  * @param array $current_level The level being iterated through.
  * @param array $children The children grouped by parent post ID.
  *
@@ -240,6 +248,8 @@ function block_core_page_list_nest_pages( $current_level, $children ) {
 /**
  * Renders the `core/page-list` block on server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The saved content.
  * @param WP_Block $block      The parsed block.
@@ -345,6 +355,8 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/pages` block on server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_page_list() {
 	register_block_type_from_metadata(

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

@@ -7,6 +7,8 @@
 
 /**
  * Registers the `core/page-list-item` block on server.
+ *
+ * @since 6.3.0
  */
 function register_block_core_page_list_item() {
 	register_block_type_from_metadata( __DIR__ . '/page-list-item' );

package/src/pattern/edit.js

@@ -108,6 +108,10 @@ const PatternEdit = ( { attributes, clientId } ) => {
 						metadata: {
 							...clonedBlocks[ 0 ].attributes.metadata,
 							categories: selectedPattern.categories,
+							patternName: selectedPattern.name,
+							name:
+								clonedBlocks[ 0 ].attributes.metadata.name ||
+								selectedPattern.title,
 						},
 					};
 				}

package/src/pattern/index.php

@@ -7,6 +7,8 @@
 
 /**
  *  Registers the `core/pattern` block on the server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_pattern() {
 	register_block_type_from_metadata(

package/src/post-author/edit.js

@@ -195,6 +195,7 @@ function PostAuthorEdit( {
 				<div className="wp-block-post-author__content">
 					{ ( ! RichText.isEmpty( byline ) || isSelected ) && (
 						<RichText
+							identifier="byline"
 							className="wp-block-post-author__byline"
 							aria-label={ __( 'Post author byline text' ) }
 							placeholder={ __( 'Write byline…' ) }

package/src/post-author/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-author` block on the server.
  *
+ * @since 5.9.0
+ *
  * @param  array    $attributes Block attributes.
  * @param  string   $content    Block default content.
  * @param  WP_Block $block      Block instance.
@@ -61,6 +63,8 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-author` block on the server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_post_author() {
 	register_block_type_from_metadata(

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

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-author-biography` 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.
@@ -37,6 +39,8 @@ function render_block_core_post_author_biography( $attributes, $content, $block
 
 /**
  * Registers the `core/post-author-biography` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_post_author_biography() {
 	register_block_type_from_metadata(

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

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-author-name` block on the server.
  *
+ * @since 6.2.0
+ *
  * @param  array    $attributes Block attributes.
  * @param  string   $content    Block default content.
  * @param  WP_Block $block      Block instance.
@@ -43,6 +45,8 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-author-name` block on the server.
+ *
+ * @since 6.2.0
  */
 function register_block_core_post_author_name() {
 	register_block_type_from_metadata(

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

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-comments-form` 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.
@@ -54,6 +56,8 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-comments-form` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_post_comments_form() {
 	register_block_type_from_metadata(
@@ -68,6 +72,8 @@ add_action( 'init', 'register_block_core_post_comments_form' );
 /**
  * Use the button block classes for the form-submit button.
  *
+ * @since 6.0.0
+ *
  * @param array $fields The default comment form arguments.
  *
  * @return array Returns the modified fields.

package/src/post-content/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-content` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -63,6 +65,8 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-content` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_content() {
 	register_block_type_from_metadata(

package/src/post-date/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-date` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -60,6 +62,8 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-date` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_date() {
 	register_block_type_from_metadata(

package/src/post-excerpt/edit.js

@@ -127,6 +127,7 @@ export default function PostExcerptEditor( {
 	}
 	const readMoreLink = (
 		<RichText
+			identifier="moreText"
 			className="wp-block-post-excerpt__more-link"
 			tagName="a"
 			aria-label={ __( '“Read more” link text' ) }

package/src/post-excerpt/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-excerpt` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -66,6 +68,8 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-excerpt` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_excerpt() {
 	register_block_type_from_metadata(

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

@@ -61,7 +61,6 @@
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
 		"color": {
-			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		},
@@ -69,7 +68,6 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
@@ -77,6 +75,12 @@
 				"width": true
 			}
 		},
+		"filter": {
+			"duotone": true
+		},
+		"shadow": {
+			"__experimentalSkipSerialization": true
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,
@@ -86,6 +90,13 @@
 			"clientNavigation": true
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay",
+		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder",
+		"filter": {
+			"duotone": ".wp-block-post-featured-image img, .wp-block-post-featured-image .wp-block-post-featured-image__placeholder, .wp-block-post-featured-image .components-placeholder__illustration, .wp-block-post-featured-image .components-placeholder::before"
+		}
+	},
 	"editorStyle": "wp-block-post-featured-image-editor",
 	"style": "wp-block-post-featured-image"
 }

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

@@ -24,6 +24,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
@@ -35,6 +36,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import DimensionControls from './dimension-controls';
+import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -144,6 +146,7 @@ export default function PostFeaturedImageEdit( {
 		style: { width, height, aspectRatio },
 	} );
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 	const blockEditingMode = useBlockEditingMode();
 
 	const placeholder = ( content ) => {
@@ -158,6 +161,7 @@ export default function PostFeaturedImageEdit( {
 					height: !! aspectRatio && '100%',
 					width: !! aspectRatio && '100%',
 					...borderProps.style,
+					...shadowProps.style,
 				} }
 			>
 				{ content }
@@ -178,7 +182,7 @@ export default function PostFeaturedImageEdit( {
 
 	const controls = blockEditingMode === 'default' && (
 		<>
-			<Overlay
+			<OverlayControls
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 				clientId={ clientId }
@@ -259,6 +263,11 @@ export default function PostFeaturedImageEdit( {
 					) : (
 						placeholder()
 					) }
+					<Overlay
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						clientId={ clientId }
+					/>
 				</div>
 			</>
 		);
@@ -267,6 +276,7 @@ export default function PostFeaturedImageEdit( {
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,
+		...shadowProps.style,
 		height: aspectRatio ? '100%' : height,
 		width: !! aspectRatio && '100%',
 		objectFit: !! ( height || aspectRatio ) && scale,
@@ -363,6 +373,11 @@ export default function PostFeaturedImageEdit( {
 				) : (
 					image
 				) }
+				<Overlay
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
 			</figure>
 		</>
 	);

package/src/post-featured-image/editor.scss

@@ -1,5 +1,5 @@
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-post-featured-image {
 	.block-editor-media-placeholder {
 		z-index: 1; // Need to put it above the overlay so the upload button works.

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

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-featured-image` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -48,6 +50,13 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( ! empty( $attributes['scale'] ) ) {
 		$extra_styles .= "object-fit:{$attributes['scale']};";
 	}
+	if ( ! empty( $attributes['style']['shadow'] ) ) {
+		$shadow_styles = wp_style_engine_get_styles( array( 'shadow' => $attributes['style']['shadow'] ) );
+
+		if ( ! empty( $shadow_styles['css'] ) ) {
+			$extra_styles .= $shadow_styles['css'];
+		}
+	}
 
 	if ( ! empty( $extra_styles ) ) {
 		$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
@@ -125,6 +134,8 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 /**
  * Generate markup for the HTML element that will be used for the overlay.
  *
+ * @since 6.1.0
+ *
  * @param array $attributes Block attributes.
  *
  * @return string HTML markup in string format.
@@ -191,6 +202,8 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
  * Generates class names and styles to apply the border support styles for
  * the Post Featured Image block.
  *
+ * @since 6.1.0
+ *
  * @param array $attributes The block attributes.
  * @return array The border-related classnames and styles for the block.
  */
@@ -241,6 +254,8 @@ function get_block_core_post_featured_image_border_attributes( $attributes ) {
 
 /**
  * Registers the `core/post-featured-image` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_featured_image() {
 	register_block_type_from_metadata(

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

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RangeControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import {
+	InspectorControls,
+	withColors,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseGradient,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+const Overlay = ( {
+	clientId,
+	attributes,
+	setAttributes,
+	overlayColor,
+	setOverlayColor,
+} ) => {
+	const { dimRatio } = attributes;
+	const { gradientValue, setGradient } = __experimentalUseGradient();
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls group="color">
+			<ColorGradientSettingsDropdown
+				__experimentalIsRenderedInSidebar
+				settings={ [
+					{
+						colorValue: overlayColor.color,
+						gradientValue,
+						label: __( 'Overlay' ),
+						onColorChange: setOverlayColor,
+						onGradientChange: setGradient,
+						isShownByDefault: true,
+						resetAllFilter: () => ( {
+							overlayColor: undefined,
+							customOverlayColor: undefined,
+							gradient: undefined,
+							customGradient: undefined,
+						} ),
+					},
+				] }
+				panelId={ clientId }
+				{ ...colorGradientSettings }
+			/>
+			<ToolsPanelItem
+				hasValue={ () => dimRatio !== undefined }
+				label={ __( 'Overlay opacity' ) }
+				onDeselect={ () => setAttributes( { dimRatio: 0 } ) }
+				resetAllFilter={ () => ( {
+					dimRatio: 0,
+				} ) }
+				isShownByDefault
+				panelId={ clientId }
+			>
+				<RangeControl
+					__nextHasNoMarginBottom
+					label={ __( 'Overlay opacity' ) }
+					value={ dimRatio }
+					onChange={ ( newDimRatio ) =>
+						setAttributes( {
+							dimRatio: newDimRatio,
+						} )
+					}
+					min={ 0 }
+					max={ 100 }
+					step={ 10 }
+					required
+					__next40pxDefaultSize
+				/>
+			</ToolsPanelItem>
+		</InspectorControls>
+	);
+};
+
+export default compose( [
+	withColors( { overlayColor: 'background-color' } ),
+] )( Overlay );

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

@@ -7,35 +7,21 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	RangeControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import {
-	InspectorControls,
 	withColors,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { dimRatioToClass } from './utils';
 
-const Overlay = ( {
-	clientId,
-	attributes,
-	setAttributes,
-	overlayColor,
-	setOverlayColor,
-} ) => {
+const Overlay = ( { attributes, overlayColor } ) => {
 	const { dimRatio } = attributes;
-	const { gradientClass, gradientValue, setGradient } =
-		__experimentalUseGradient();
+	const { gradientClass, gradientValue } = __experimentalUseGradient();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	const borderProps = useBorderProps( attributes );
@@ -45,79 +31,26 @@ const Overlay = ( {
 		...borderProps.style,
 	};
 
-	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+	if ( ! colorGradientSettings.hasColorsOrGradients || ! dimRatio ) {
 		return null;
 	}
 
 	return (
-		<>
-			{ !! dimRatio && (
-				<span
-					aria-hidden="true"
-					className={ classnames(
-						'wp-block-post-featured-image__overlay',
-						dimRatioToClass( dimRatio ),
-						{
-							[ overlayColor.class ]: overlayColor.class,
-							'has-background-dim': dimRatio !== undefined,
-							'has-background-gradient': gradientValue,
-							[ gradientClass ]: gradientClass,
-						},
-						borderProps.className
-					) }
-					style={ overlayStyles }
-				/>
+		<span
+			aria-hidden="true"
+			className={ classnames(
+				'wp-block-post-featured-image__overlay',
+				dimRatioToClass( dimRatio ),
+				{
+					[ overlayColor.class ]: overlayColor.class,
+					'has-background-dim': dimRatio !== undefined,
+					'has-background-gradient': gradientValue,
+					[ gradientClass ]: gradientClass,
+				},
+				borderProps.className
 			) }
-			<InspectorControls group="color">
-				<ColorGradientSettingsDropdown
-					__experimentalIsRenderedInSidebar
-					settings={ [
-						{
-							colorValue: overlayColor.color,
-							gradientValue,
-							label: __( 'Overlay' ),
-							onColorChange: setOverlayColor,
-							onGradientChange: setGradient,
-							isShownByDefault: true,
-							resetAllFilter: () => ( {
-								overlayColor: undefined,
-								customOverlayColor: undefined,
-								gradient: undefined,
-								customGradient: undefined,
-							} ),
-						},
-					] }
-					panelId={ clientId }
-					{ ...colorGradientSettings }
-				/>
-				<ToolsPanelItem
-					hasValue={ () => dimRatio !== undefined }
-					label={ __( 'Overlay opacity' ) }
-					onDeselect={ () => setAttributes( { dimRatio: 0 } ) }
-					resetAllFilter={ () => ( {
-						dimRatio: 0,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<RangeControl
-						__nextHasNoMarginBottom
-						label={ __( 'Overlay opacity' ) }
-						value={ dimRatio }
-						onChange={ ( newDimRatio ) =>
-							setAttributes( {
-								dimRatio: newDimRatio,
-							} )
-						}
-						min={ 0 }
-						max={ 100 }
-						step={ 10 }
-						required
-						__next40pxDefaultSize
-					/>
-				</ToolsPanelItem>
-			</InspectorControls>
-		</>
+			style={ overlayStyles }
+		/>
 	);
 };
 

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

@@ -188,6 +188,7 @@ export default function PostNavigationLinkEdit( {
 				) }
 				<RichText
 					tagName="a"
+					identifier="label"
 					aria-label={ ariaLabel }
 					placeholder={ placeholder }
 					value={ label }

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

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-navigation-link` block on the server.
  *
+ * @since 5.9.0
+ *
  * @param array  $attributes Block attributes.
  * @param string $content    Block default content.
  *
@@ -123,6 +125,8 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 
 /**
  * Registers the `core/post-navigation-link` block on the server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_post_navigation_link() {
 	register_block_type_from_metadata(

package/src/post-template/index.php

@@ -8,6 +8,8 @@
 /**
  * Determines whether a block list contains a block that uses the featured image.
  *
+ * @since 6.0.0
+ *
  * @param WP_Block_List $inner_blocks Inner block instance.
  *
  * @return bool Whether the block list contains a block that uses the featured image.
@@ -145,6 +147,8 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-template` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_template() {
 	register_block_type_from_metadata(