@wordpress/block-library 8.1.0 → 8.3.0

package/src/columns/deprecated.js

@@ -16,7 +16,7 @@ import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
  *
  * @param {string} originalContent Deprecated Columns inner block HTML.
  *
- * @return {?number} Column to which inner block is to be assigned.
+ * @return {number | undefined} Column to which inner block is to be assigned.
  */
 function getDeprecatedLayoutColumn( originalContent ) {
 	let { doc } = getDeprecatedLayoutColumn;

package/src/comment-author-avatar/block.json

@@ -20,6 +20,7 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"inserter": false,
 		"__experimentalBorder": {

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

@@ -22,6 +22,7 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

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

@@ -25,12 +25,15 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 		return '';
 	}
 
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $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' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 	$comment_author     = get_comment_author( $comment );
 	$link               = get_comment_author_url( $comment );
 

package/src/comment-content/block.json

@@ -14,6 +14,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comment-content/index.php

@@ -49,12 +49,15 @@ function render_block_core_comment_content( $attributes, $content, $block ) {
 		}
 	}
 
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $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' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<div %1$s>%2$s%3$s</div>',

package/src/comment-date/block.json

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

package/src/comment-date/index.php

@@ -23,7 +23,7 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$classes = '';
+	$classes = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$formatted_date     = get_comment_date(

package/src/comment-edit-link/block.json

@@ -18,6 +18,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"link": true,

package/src/comment-edit-link/index.php

@@ -27,12 +27,15 @@ function render_block_core_comment_edit_link( $attributes, $content, $block ) {
 		$link_atts .= sprintf( 'target="%s"', esc_attr( $attributes['linkTarget'] ) );
 	}
 
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $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' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<div %1$s><a href="%2$s" %3$s>%4$s</a></div>',

package/src/comment-reply-link/block.json

@@ -14,6 +14,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comment-reply-link/index.php

@@ -51,12 +51,15 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 		return;
 	}
 
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $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' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<div %1$s>%2$s</div>',

package/src/comment-template/block.json

@@ -10,6 +10,7 @@
 	"usesContext": [ "postId" ],
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false,
 		"reusable": false,
 		"spacing": {

package/src/comments/block.json

@@ -18,6 +18,8 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
+		"html": false,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -27,7 +29,6 @@
 				"link": true
 			}
 		},
-		"html": false,
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/comments/edit/comments-inspector-controls.js

@@ -6,23 +6,33 @@ import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 
 export default function CommentsInspectorControls( {
-	attributes: { TagName },
+	attributes: { tagName },
 	setAttributes,
 } ) {
+	const htmlElementMessages = {
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+	};
 	return (
 		<InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<section>', value: 'section' },
 						{ label: '<aside>', value: 'aside' },
 					] }
-					value={ TagName }
+					value={ tagName }
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
+					help={ htmlElementMessages[ tagName ] }
 				/>
 			</InspectorControls>
 		</InspectorControls>

package/src/comments-pagination/block.json

@@ -17,6 +17,7 @@
 		"comments/paginationArrow": "paginationArrow"
 	},
 	"supports": {
+		"anchor": true,
 		"align": true,
 		"reusable": false,
 		"html": false,

package/src/comments-pagination/comments-pagination-arrow-controls.js

@@ -10,6 +10,7 @@ import {
 export function CommentsPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
+			__nextHasNoMarginBottom
 			label={ __( 'Arrow' ) }
 			value={ value }
 			onChange={ onChange }

package/src/comments-pagination/edit.js

@@ -10,7 +10,6 @@ import {
 	Warning,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { getBlockSupport } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 
 /**
@@ -29,21 +28,11 @@ const ALLOWED_BLOCKS = [
 	'core/comments-pagination-next',
 ];
 
-const getDefaultBlockLayout = ( blockTypeOrName ) => {
-	const layoutBlockSupportConfig = getBlockSupport(
-		blockTypeOrName,
-		'__experimentalLayout'
-	);
-	return layoutBlockSupportConfig?.default;
-};
-
 export default function QueryPaginationEdit( {
-	attributes: { paginationArrow, layout },
+	attributes: { paginationArrow },
 	setAttributes,
 	clientId,
-	name,
 } ) {
-	const usedLayout = layout || getDefaultBlockLayout( name );
 	const hasNextPreviousBlocks = useSelect( ( select ) => {
 		const { getBlocks } = select( blockEditorStore );
 		const innerBlocks = getBlocks( clientId );
@@ -64,7 +53,6 @@ export default function QueryPaginationEdit( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalLayout: usedLayout,
 	} );
 
 	// Get the Discussion settings

package/src/comments-pagination/index.php

@@ -22,9 +22,12 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 		return;
 	}
 
+	$classes            = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+
 	return sprintf(
 		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes(),
+		$wrapper_attributes,
 		$content
 	);
 }

package/src/comments-pagination-next/block.json

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

package/src/comments-pagination-numbers/block.json

@@ -9,6 +9,7 @@
 	"textdomain": "default",
 	"usesContext": [ "postId" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/comments-pagination-previous/block.json

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

package/src/cover/block.json

@@ -74,6 +74,10 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"tagName": {
+			"type": "string",
+			"default": "div"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

package/src/cover/deprecated.js

@@ -16,6 +16,7 @@ import {
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,6 +27,7 @@ import {
 	getPositionClassName,
 	isContentPositionCenter,
 	dimRatioToClass,
+	mediaPosition,
 } from './shared';
 
 function backgroundImageStyles( url ) {
@@ -53,6 +55,18 @@ function migrateDimRatio( attributes ) {
 	};
 }
 
+function migrateTag( attributes ) {
+	if ( ! attributes.tagName ) {
+		attributes = {
+			...attributes,
+			tagName: 'div',
+		};
+	}
+	return {
+		...attributes,
+	};
+}
+
 const blockAttributes = {
 	url: {
 		type: 'string',
@@ -168,6 +182,155 @@ const v7toV10BlockSupports = {
 	},
 };
 
+// Deprecation for blocks that does not have a HTML tag option.
+const v11 = {
+	attributes: v8ToV10BlockAttributes,
+	supports: v7toV10BlockSupports,
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+				  ? mediaPosition(focalPoint)
+				  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = classnames(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = classnames(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<div { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role="img"
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ classnames(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</div>
+		);
+	},
+};
+
 // Deprecation for blocks that renders fixed background as backgroud from the main block container.
 const v10 = {
 	attributes: v8ToV10BlockAttributes,
@@ -433,6 +596,7 @@ const v9 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
@@ -559,6 +723,7 @@ const v8 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 const v7 = {
@@ -707,7 +872,7 @@ const v7 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v6 = {
@@ -840,7 +1005,7 @@ const v6 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v5 = {
@@ -937,7 +1102,7 @@ const v5 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v4 = {
@@ -1034,7 +1199,7 @@ const v4 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v3 = {
@@ -1117,6 +1282,7 @@ const v3 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
 
 		const { title, contentAlign, ...restAttributes } = newAttribs;
@@ -1202,6 +1368,7 @@ const v2 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
 
 		const { title, contentAlign, align, ...restAttributes } = newAttribs;
@@ -1262,8 +1429,8 @@ const v1 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
-
 		const { title, contentAlign, align, ...restAttributes } = newAttribs;
 
 		return [
@@ -1280,4 +1447,4 @@ const v1 = {
 	},
 };
 
-export default [ v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/cover/edit/index.js

@@ -94,6 +94,7 @@ function CoverEdit( {
 		alt,
 		allowedBlocks,
 		templateLock,
+		tagName: TagName = 'div',
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -247,7 +248,7 @@ function CoverEdit( {
 			<>
 				{ blockControls }
 				{ inspectorControls }
-				<div
+				<TagName
 					{ ...blockProps }
 					className={ classnames(
 						'is-placeholder',
@@ -286,7 +287,7 @@ function CoverEdit( {
 						} }
 						showHandle={ isSelected }
 					/>
-				</div>
+				</TagName>
 			</>
 		);
 	}
@@ -308,7 +309,7 @@ function CoverEdit( {
 		<>
 			{ blockControls }
 			{ inspectorControls }
-			<div
+			<TagName
 				{ ...blockProps }
 				className={ classnames( classes, blockProps.className ) }
 				style={ { ...style, ...blockProps.style } }
@@ -399,7 +400,7 @@ function CoverEdit( {
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 				/>
 				<div { ...innerBlocksProps } />
-			</div>
+			</TagName>
 		</>
 	);
 }